/* ========================================
   Variables & General Styles
   ======================================== */
:root {
    --primary-color: #4f46e5;
    --secondary-color: #64748b;
    --success-color: #059669;
    --danger-color: #dc2626;
    --warning-color: #d97706;
    --info-color: #0891b2;
    --sidebar-width: 272px;
    --sidebar-bg: #0f172a;
    --sidebar-hover: #1e293b;
    --font-body: 'IRANSans', 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --surface: #ffffff;
    --surface-dim: #f8fafc;
    --surface-container: #f1f5f9;
    --border-color: #e2e8f0;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--surface-container);
    overflow-x: hidden;
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   Auth Pages Styles
   ======================================== */
.auth-page {
    background: linear-gradient(160deg, #4f46e5 0%, #7c3aed 40%, #a855f7 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .auth-page .card {
        border-radius: var(--radius-xl);
        overflow: hidden;
        border: none;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
    }

.logo-circle {
    width: 80px;
    height: 80px;
    background: linear-gradient(145deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35), 0 0 0 4px rgba(79, 70, 229, 0.08);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

    .logo-circle:hover {
        transform: scale(1.05) rotate(3deg);
        box-shadow: 0 12px 32px rgba(79, 70, 229, 0.45), 0 0 0 6px rgba(79, 70, 229, 0.1);
    }

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
    outline: none;
}

/* Password Strength Indicator */
.password-strength .progress-bar {
    transition: width var(--transition-normal), background-color var(--transition-normal);
    border-radius: 99px;
}

    .password-strength .progress-bar.bg-danger {
        background: linear-gradient(90deg, #dc2626, #ef4444) !important;
    }

    .password-strength .progress-bar.bg-warning {
        background: linear-gradient(90deg, #d97706, #f59e0b) !important;
    }

    .password-strength .progress-bar.bg-success {
        background: linear-gradient(90deg, #059669, #10b981) !important;
    }

/* ========================================
   Dashboard Layout
   ======================================== */
.dashboard-page {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform var(--transition-normal);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    padding: 28px 20px 24px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.sidebar-user {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(145deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
    transition: transform var(--transition-fast);
}

    .user-avatar:hover {
        transform: scale(1.08);
    }

.sidebar-nav {
    padding: 16px 0;
    flex: 1;
    overflow-y: auto;
}

    .sidebar-nav .nav-link {
        color: rgba(255, 255, 255, 0.55);
        padding: 12px 22px;
        display: flex;
        align-items: center;
        text-decoration: none;
        transition: all var(--transition-fast);
        border-right: 3px solid transparent;
        margin: 2px 8px 2px 8px;
        border-radius: 10px;
        font-size: 0.9rem;
        font-weight: 450;
        letter-spacing: 0.01em;
        position: relative;
    }

        .sidebar-nav .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.06);
            color: rgba(255, 255, 255, 0.95);
            border-right-color: transparent;
        }

        .sidebar-nav .nav-link.active {
            background: linear-gradient(135deg, rgba(79, 70, 229, 0.15) 0%, rgba(124, 58, 237, 0.1) 100%);
            color: #fff;
            border-right-color: var(--primary-color);
            font-weight: 550;
            box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.15);
        }

        .sidebar-nav .nav-link i {
            width: 24px;
            margin-left: 14px;
            font-size: 1.05rem;
            opacity: 0.8;
            transition: opacity var(--transition-fast);
        }

        .sidebar-nav .nav-link:hover i,
        .sidebar-nav .nav-link.active i {
            opacity: 1;
        }

/* Main Content */
.main-content {
    margin-right: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    min-height: 100vh;
    background-color: var(--surface-container);
    transition: margin-right var(--transition-normal), width var(--transition-normal);
}

/* Statistics Cards */
.stat-icon {
    width: 58px;
    height: 58px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast);
}

    .stat-icon:hover {
        transform: scale(1.08) rotate(-3deg);
    }

/* Cards */
.card {
    border-radius: var(--radius-md);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    border: 1px solid var(--border-color);
    background: var(--surface);
}

    .card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg) !important;
    }

/* Gradient Backgrounds */
.bg-gradient-primary {
    background: linear-gradient(145deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%) !important;
}

.bg-gradient-success {
    background: linear-gradient(145deg, #059669 0%, #10b981 50%, #34d399 100%) !important;
}

.bg-gradient-danger {
    background: linear-gradient(145deg, #dc2626 0%, #ef4444 50%, #f87171 100%) !important;
}

.bg-gradient-warning {
    background: linear-gradient(145deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%) !important;
}

/* Tables */
.table {
    border-collapse: separate;
    border-spacing: 0;
}

    .table thead th {
        border-bottom: 2px solid var(--border-color);
        font-weight: 600;
        color: var(--text-secondary);
        background-color: var(--surface-dim);
        padding: 14px 16px;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .table tbody tr {
        transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
    }

        .table tbody tr:hover {
            background-color: rgba(79, 70, 229, 0.03);
        }

    .table tbody td {
        padding: 12px 16px;
        vertical-align: middle;
        border-bottom: 1px solid var(--border-color);
    }

/* Badges */
.badge {
    padding: 5px 12px;
    font-weight: 550;
    border-radius: 99px;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

/* Buttons */
.btn {
    border-radius: var(--radius-sm);
    padding: 10px 22px;
    font-weight: 550;
    transition: all var(--transition-fast);
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
}

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }

    .btn:active {
        transform: translateY(0);
        box-shadow: var(--shadow-xs);
    }

.btn-circle {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Profile Page */
.user-avatar-large {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    border-radius: 50%;
    background: linear-gradient(145deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 36px rgba(79, 70, 229, 0.3), 0 0 0 6px rgba(79, 70, 229, 0.08);
    transition: transform var(--transition-normal);
}

    .user-avatar-large:hover {
        transform: scale(1.04);
    }

.info-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--surface-container);
    transition: background-color var(--transition-fast);
}

    .info-item:last-child {
        border-bottom: none;
    }

    .info-item:hover {
        background-color: var(--surface-dim);
    }

/* Modals */
.modal-content {
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
    padding: 20px 28px;
    background: var(--surface-dim);
}

.modal-body {
    padding: 28px;
}

.modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 16px 28px;
    background: var(--surface-dim);
}

/* Loading States */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Alerts */
.alert {
    border-radius: var(--radius-sm);
    border: none;
    box-shadow: var(--shadow-sm);
    font-weight: 450;
}

/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 992px) {
    .sidebar {
        transform: translateX(100%);
    }

    .ai_chat_row {
        flex: none !important;
    }

    .sidebar.show {
        transform: translateX(0);
        box-shadow: -8px 0 40px rgba(0, 0, 0, 0.25);
    }

    .main-content {
        margin-right: 0;
        width: 100%;
    }

    .stat-icon {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 768px) {
    .card-body {
        padding: 1rem !important;
    }

    .sidebar-nav .nav-link {
        padding: 11px 18px;
        font-size: 0.88rem;
    }

    .table-responsive {
        font-size: 0.83rem;
    }

    .btn {
        padding: 8px 16px;
        font-size: 0.88rem;
    }

    .user-avatar-large {
        width: 110px;
        height: 110px;
    }
}

/* ========================================
   Animations
   ======================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn var(--transition-slow) ease;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-right {
    animation: slideInRight var(--transition-slow) ease;
}

/* ========================================
   Custom Scrollbar
   ======================================== */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c1c8d4;
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: content-box;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
        border: 1px solid transparent;
        background-clip: content-box;
    }

/* ========================================
   Utilities
   ======================================== */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shadow-sm-hover:hover {
    box-shadow: var(--shadow-sm) !important;
}

.cursor-pointer {
    cursor: pointer;
}

.border-dashed {
    border-style: dashed !important;
}

/* ========================================
   Project Card Styles
   ======================================== */
.project-card {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    overflow: hidden;
}

    .project-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
    }

    .project-card .card-header {
        background: linear-gradient(145deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
        color: white;
        border-radius: 0;
        padding: 1.1rem 1.2rem;
        border-bottom: none;
        position: relative;
        overflow: hidden;
    }

        .project-card .card-header::after {
            content: '';
            position: absolute;
            top: -30%;
            right: -20%;
            width: 120px;
            height: 120px;
            background: rgba(255, 255, 255, 0.06);
            border-radius: 50%;
            pointer-events: none;
        }

    .project-card .card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 1.2rem;
    }

    .project-card .project-title {
        font-size: 1.05rem;
        font-weight: 700;
        margin-bottom: 0.4rem;
        color: black;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        letter-spacing: -0.01em;
    }

    .project-card .project-description {
        color: var(--text-secondary);
        font-size: 0.88rem;
        margin-bottom: 1rem;
        flex: 1;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        line-height: 1.6;
    }

    .project-card .project-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--border-color);
    }

    .project-card .project-date {
        font-size: 0.82rem;
        color: var(--text-muted);
        font-weight: 450;
    }

    .project-card .project-actions {
        display: flex;
        gap: 0.5rem;
    }

        .project-card .project-actions .btn {
            flex: 1;
            font-size: 0.85rem;
        }

    .project-card .badge {
        font-size: 0.78rem;
        padding: 0.35rem 0.75rem;
    }

/* ========================================
   Project Details Modal Styles
   ======================================== */

/* Custom Tabs */
#projectDetailsTabs .nav-link {
    color: var(--text-muted);
    font-weight: 550;
    border: none;
    border-bottom: 3px solid transparent;
    transition: all var(--transition-fast);
    padding: 12px 18px;
    font-size: 0.9rem;
}

    #projectDetailsTabs .nav-link:hover {
        color: var(--text-secondary);
        border-bottom-color: var(--border-color);
    }

    #projectDetailsTabs .nav-link.active {
        color: var(--primary-color);
        border-bottom-color: var(--primary-color);
        background: transparent;
    }

/* Chat Messages (Project Details) */
.chat-message {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    word-wrap: break-word;
}

    .chat-message.user {
        color: white;
        margin-left: auto;
        border-bottom-right-radius: 0.3rem;
    }

    .chat-message.ai {
        background: var(--surface-container);
        color: var(--text-primary);
        margin-right: auto;
        border-bottom-left-radius: 0.3rem;
        border: 1px solid var(--border-color);
    }

    .chat-message .message-time {
        font-size: 0.73rem;
        opacity: 0.65;
        margin-top: 0.3rem;
    }

/* File Tree View */
.file-tree {
    font-family: 'IRANSans', 'Courier New', monospace;
}

    .file-tree ul {
        list-style: none;
        padding-right: 1.5rem;
        margin: 0;
    }

    .file-tree li {
        padding: 0.5rem;
        cursor: pointer;
        transition: background var(--transition-fast);
        border-radius: 6px;
    }

        .file-tree li:hover {
            background: var(--surface-dim);
        }

    .file-tree .folder::before {
        content: '📁 ';
    }

    .file-tree .file::before {
        content: '📄 ';
    }

    .file-tree .expanded::before {
        content: '📂 ';
    }

/* Build Log Terminal Style */
#buildProgressLog,
#buildPublishLog {
    font-family: 'IRANSans', 'Fira Code', 'Monaco', monospace;
    background: #0d1117 !important;
    color: #c9d1d9 !important;
    line-height: 1.7;
    border-radius: var(--radius-sm);
    padding: 16px;
    font-size: 0.83rem;
}

    #buildProgressLog .success,
    #buildPublishLog .success {
        color: #3fb950;
    }

    #buildProgressLog .error,
    #buildPublishLog .error {
        color: #f85149;
        font-weight: 600;
    }

    #buildProgressLog .warning,
    #buildPublishLog .warning {
        color: #d29922;
    }

/* Card Shadows */
.card.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

/* Input Focus States */
#projectBuilderForm .form-control:focus,
#projectBuilderForm .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}

/* Button Animations */
#startProjectBuild,
#buildProjectBtn,
#publishProjectBtn {
    transition: all var(--transition-fast);
}

    #startProjectBuild:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(5, 150, 105, 0.3);
    }

    #buildProjectBtn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(5, 150, 105, 0.3);
    }

    #publishProjectBtn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(217, 119, 6, 0.3);
    }

/* ========================================
   Chat Styles
   ======================================== */

/* Template Cards */
.template-card {
    cursor: pointer;
    transition: all var(--transition-normal);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    background: var(--surface);
}

    .template-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 28px rgba(79, 70, 229, 0.15) !important;
        border-color: var(--primary-color);
    }

    .template-card:active {
        transform: translateY(-2px);
    }

/* Chat Messages */
.chat-message {
    margin-bottom: 1.2rem;
    animation: fadeInUp 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-message.user {
    display: flex;
    justify-content: flex-end;
}

.chat-message.assistant {
    display: flex;
    justify-content: flex-start;
}

.chat-bubble {
    max-width: 75%;
    padding: 14px 18px;
    border-radius: var(--radius-lg);
    word-wrap: break-word;
    line-height: 1.65;
}

.chat-message.user .chat-bubble {
    background: linear-gradient(145deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.25);
}

.chat-message.assistant .chat-bubble {
    background: var(--surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
    box-shadow: var(--shadow-sm);
}

.chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin: 0 10px;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

    .chat-avatar:hover {
        transform: scale(1.1);
    }

.chat-message.user .chat-avatar {
    background: linear-gradient(145deg, #7c3aed, #a855f7);
    color: white;
    box-shadow: 0 3px 10px rgba(124, 58, 237, 0.3);
}

.chat-message.assistant .chat-avatar {
    background: linear-gradient(145deg, #e0e7ff, #c7d2fe);
    color: var(--primary-color);
    box-shadow: 0 3px 10px rgba(79, 70, 229, 0.12);
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    gap: 5px;
    padding: 10px 0;
    align-items: center;
}

    .typing-indicator span {
        width: 8px;
        height: 8px;
        background: linear-gradient(145deg, #4f46e5, #7c3aed);
        border-radius: 50%;
        animation: typing 1.4s infinite;
    }

        .typing-indicator span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .typing-indicator span:nth-child(3) {
            animation-delay: 0.4s;
        }

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }

    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

/* File Upload Preview */
#fileUploadPreview {
    animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--surface-dim);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 15px;
    margin-bottom: 10px;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#uploadedFileName {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0;
    font-weight: 450;
}

/* Chat Input */
#aiChatInput {
    border: 2px solid var(--border-color);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    border-radius: var(--radius-md);
}

    #aiChatInput:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
    }

/* Preview Frame */
#htmlPreviewFrame {
    transition: opacity var(--transition-normal);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: white;
}

#previewEmptyState {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: var(--surface-dim);
    border-radius: var(--radius-sm);
}

/* Scrollbar Styling for Chat */
#chatMessagesContainer::-webkit-scrollbar,
#chatTemplates::-webkit-scrollbar {
    width: 6px;
}

#chatMessagesContainer::-webkit-scrollbar-track,
#chatTemplates::-webkit-scrollbar-track {
    background: transparent;
}

#chatMessagesContainer::-webkit-scrollbar-thumb,
#chatTemplates::-webkit-scrollbar-thumb {
    background: #c1c8d4;
    border-radius: 99px;
}

    #chatMessagesContainer::-webkit-scrollbar-thumb:hover,
    #chatTemplates::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

/* Responsive - Chat */
@media (max-width: 991px) {
    #ai-chat .row {
        /* flex-direction: column;*/
    }

    #ai-chat .col-lg-6 {
        min-height: 50vh;
    }
}

/* Chat Messages (alternate styling for detail context) */
.chat-message {
    display: flex;
    gap: 12px;
    margin-bottom: 1.2rem;
    animation: messageSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-message.user {
    flex-direction: row-reverse;
}

.chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(145deg, #4f46e5 0%, #7c3aed 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(79, 70, 229, 0.25);
}

.chat-message.user .chat-avatar {
    background: linear-gradient(145deg, #7c3aed 0%, #a855f7 100%);
}

.chat-bubble {
    max-width: 75%;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    word-wrap: break-word;
    box-shadow: var(--shadow-sm);
}

.chat-message.user .chat-bubble {
    background: linear-gradient(145deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.2);
}

.chat-message.assistant .chat-bubble {
    background: var(--surface-dim);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
    border: 1px solid var(--border-color);
}

/* Code Blocks in Messages */
.chat-bubble pre {
    margin: 10px 0;
    max-height: 400px;
    font-size: 0.82rem;
    line-height: 1.6;
    border-radius: var(--radius-sm);
    overflow: auto;
}

.chat-bubble code {
    font-family: 'IRANSans', 'Fira Code', monospace;
    font-size: 0.82rem;
}

/* Template Cards Hover Effect (re-enforced) */
.template-card {
    transition: all var(--transition-normal);
    cursor: pointer;
    border: 2px solid transparent;
}

    .template-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 32px rgba(79, 70, 229, 0.18);
        border-color: var(--primary-color);
    }

    .template-card:active {
        transform: translateY(-2px);
    }

/* Mobile Responsive - Chat */
@media (max-width: 768px) {
    .chat-bubble {
        max-width: 88%;
        font-size: 0.88rem;
        padding: 12px 14px;
    }

    .chat-avatar {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .template-card {
        margin-bottom: 12px;
    }
}

/* Alert Animation */
.alert {
    animation: alertSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes alertSlideIn {
    from {
        opacity: 0;
        transform: translateX(80px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ═══════════════════════════════════════════════════════
   📁 File Manager Styles
   ═══════════════════════════════════════════════════════ */

/* Layout اصلی دو-پنلی */
.file-manager-layout {
    display: flex;
    height: 600px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.file-tree-panel {
    width: 350px;
    min-width: 280px;
    max-width: 500px;
    border-left: 1px solid var(--border-color);
    overflow-y: auto;
    background: var(--surface-dim);
    direction: rtl;
    resize: horizontal;
}

.file-content-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    direction: ltr;
}

/* ─── Header محتوای فایل ─── */
.file-content-header {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background: linear-gradient(180deg, #1e293b, #0f172a);
    color: #e2e8f0;
    font-size: 0.83rem;
    font-family: 'IRANSans', 'Fira Code', 'Courier New', monospace;
    direction: ltr;
    min-height: 44px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

    .file-content-header span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* ─── Body محتوای فایل ─── */
.file-content-body {
    flex: 1;
    overflow: auto;
    background: #0d1117;
    direction: ltr;
}

.file-content-info {
    font-family: 'IRANSans', monospace;
    font-size: 0.73rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 6px 16px;
    color: #8b949e;
}

/* ─── Code Container ─── */
.code-container {
    height: 100%;
    overflow: auto;
}

    .code-container pre {
        margin: 0;
        padding: 20px;
        background: #0d1117;
        color: #c9d1d9;
        font-family: 'IRANSans', 'Fira Code', 'JetBrains Mono', 'Courier New', monospace;
        font-size: 0.83rem;
        line-height: 1.7;
        tab-size: 4;
        white-space: pre;
        overflow-x: auto;
        min-height: 100%;
        counter-reset: line;
    }

        .code-container pre code {
            font-family: inherit;
        }

/* شماره خطوط */
.line-numbers code::before {
    counter-reset: line;
}

/* ─── درخت فایل‌ها ─── */
.file-tree {
    padding: 10px 0;
    font-size: 0.84rem;
    user-select: none;
}

.tree-node {
    /* هر نود */
}

.tree-item {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    cursor: pointer;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
    gap: 7px;
    white-space: nowrap;
    border-radius: 6px;
    margin: 2px 6px;
}

    .tree-item:hover {
        background: rgba(79, 70, 229, 0.06);
    }

.tree-file.active {
    background: rgba(79, 70, 229, 0.1) !important;
    border-right: 3px solid var(--primary-color);
    box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.12);
}

/* آیکون‌ها */
.tree-arrow {
    font-size: 0.6rem;
    width: 14px;
    text-align: center;
    transition: transform var(--transition-fast);
    color: var(--text-muted);
}

.tree-icon {
    font-size: 0.88rem;
    width: 18px;
    text-align: center;
}

.folder-icon {
    color: #eab308 !important;
}

.tree-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'IRANSans', 'Tahoma', sans-serif;
    font-size: 0.83rem;
    color: var(--text-primary);
}

.tree-badge {
    background: var(--border-color);
    color: var(--text-muted);
    font-size: 0.68rem;
    padding: 1px 7px;
    border-radius: 99px;
    margin-right: auto;
    font-weight: 550;
}

.tree-size {
    color: var(--text-muted);
    font-size: 0.73rem;
    margin-right: auto;
}

.tree-download-btn {
    opacity: 0;
    transition: opacity var(--transition-fast);
    color: var(--text-muted) !important;
    font-size: 0.73rem;
}

.tree-item:hover .tree-download-btn {
    opacity: 1;
}

.tree-download-btn:hover {
    color: var(--primary-color) !important;
}

/* ─── File Stats ─── */
.file-stats .stat-item {
    font-size: 0.8rem;
}

/* ─── رنگ‌های خاص ─── */
.text-orange {
    color: #ea580c !important;
}

.text-pink {
    color: #db2777 !important;
}

.text-purple {
    color: #7c3aed !important;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .file-manager-layout {
        flex-direction: column;
        height: auto;
    }

    .file-tree-panel {
        width: 100% !important;
        max-width: 100%;
        max-height: 280px;
        border-left: none;
        border-bottom: 2px solid var(--border-color);
    }

    .file-content-panel {
        min-height: 380px;
    }
}

/* ─── Scrollbar سفارشی ─── */
.file-tree-panel::-webkit-scrollbar,
.file-content-body::-webkit-scrollbar {
    width: 5px;
}

.file-tree-panel::-webkit-scrollbar-thumb,
.file-content-body::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 99px;
}

.file-tree-panel::-webkit-scrollbar-track,
.file-content-body::-webkit-scrollbar-track {
    background: transparent;
}

/* ═══ Build/Publish Log Styles ═══ */
#buildPublishLog .success {
    color: #3fb950;
}

#buildPublishLog .error {
    color: #f85149;
    font-weight: 600;
}

#buildPublishLog .warning {
    color: #d29922;
}

#buildPublishLog .info {
    color: #8b949e;
}

#buildPublishLog .highlight {
    color: #58a6ff;
    font-weight: 600;
}

#buildPublishLog .separator {
    color: #30363d;
    display: block;
    border-bottom: 1px solid #21262d;
    margin: 6px 0;
}

/* ═══ IIS Result Card ═══ */
#iisResultCard .result-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--surface-container);
    transition: background-color var(--transition-fast);
}

    #iisResultCard .result-item:last-child {
        border-bottom: none;
    }

    #iisResultCard .result-item:hover {
        background-color: var(--surface-dim);
    }

#iisResultCard .result-label {
    font-weight: 600;
    min-width: 150px;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

#iisResultCard .result-value {
    color: var(--text-primary);
    font-weight: 450;
}


/* ===============================
   ✅ Chat Layout Fix (FINAL)
   =============================== */

.chat-column {
    height: 100%;
}

.chat-header {
    flex-shrink: 0;
}

.chat-body {
    flex: 1;
    overflow-y: auto;
    background: #f8f9fa;
}

.chat-input {
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid var(--border-color);
    padding: 0.5rem;
}

.chat-file-preview {
    flex-shrink: 0;
    border-top: 1px solid var(--border-color);
    background: var(--surface-dim);
}
/* ===== RIGHT PANEL WRAPPER ===== */
.right-panel-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e9ecef;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* ===== SWITCHER TABS ===== */
.right-panel-switcher {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    gap: 8px;
    flex-shrink: 0;
}

.panel-switcher-tabs {
    display: flex;
    gap: 4px;
    background: #e9ecef;
    padding: 3px;
    border-radius: 8px;
}

.panel-tab-btn {
    position: relative;
    display: flex;
    align-items: center;
    padding: 6px 14px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: inherit;
}

    .panel-tab-btn:hover {
        color: #495057;
        background: rgba(255,255,255,0.6);
    }

    .panel-tab-btn.active {
        background: #fff;
        color: #0d6efd;
        box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    }

/* ===== UPDATE BADGE ===== */
.plan-update-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8px;
    height: 8px;
    background: #dc3545;
    border-radius: 50%;
    font-size: 0;
    margin-right: 4px;
    margin-left: 2px;
}

@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.7;
    }
}

.badge-pulse {
    animation: badgePulse 0.6s ease 3;
}

/* ===== PANEL ACTIONS ===== */
.panel-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

    .panel-actions .btn {
        padding: 4px 10px;
        font-size: 12px;
        border-radius: 6px;
        transition: all 0.2s;
    }

/* ===== RIGHT PANEL BODY ===== */
.right-panel {
    flex: 1;
    overflow-y: auto;
    position: relative;
}

    .right-panel iframe {
        width: 100%;
        height: 100%;
        border: none;
        display: block;
    }

/* ===== EMPTY STATES ===== */
.plan-empty-state,
.preview-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    padding: 40px 20px;
    text-align: center;
}

.plan-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #667eea20, #764ba220);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 26px;
    color: #667eea;
}

.plan-empty-state h6 {
    font-weight: 700;
    color: #343a40;
    margin-bottom: 8px;
    font-size: 15px;
}

.plan-empty-hints {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.hint-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    color: #6c757d;
}

/* ===== PLAN CONTENT (markdown render) ===== */
.plan-content {
    padding: 20px 24px;
    font-size: 14px;
    line-height: 1.8;
    color: #343a40;
    direction: rtl;
}

    .plan-content .plan-h1 {
        font-size: 20px;
        font-weight: 700;
        color: #0d6efd;
        margin: 20px 0 12px;
        padding-bottom: 8px;
        border-bottom: 2px solid #e9ecef;
    }

    .plan-content .plan-h2 {
        font-size: 17px;
        font-weight: 700;
        color: #343a40;
        margin: 18px 0 10px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .plan-content .plan-h2::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 18px;
            background: #0d6efd;
            border-radius: 2px;
            flex-shrink: 0;
        }

    .plan-content .plan-h3 {
        font-size: 15px;
        font-weight: 600;
        color: #495057;
        margin: 14px 0 8px;
    }

    .plan-content .plan-paragraph {
        margin-bottom: 12px;
        color: #495057;
    }

    .plan-content .plan-list {
        padding-right: 20px;
        padding-left: 0;
        margin-bottom: 12px;
    }

        .plan-content .plan-list li {
            margin-bottom: 6px;
            padding-right: 4px;
            color: #495057;
        }

    .plan-content .plan-inline-code {
        background: #f1f3f5;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 1px 6px;
        font-family: 'Courier New', monospace;
        font-size: 12px;
        color: #e83e8c;
    }

    .plan-content .plan-quote {
        border-right: 4px solid #0d6efd;
        border-left: none;
        background: #f8f9ff;
        padding: 10px 16px;
        margin: 12px 0;
        border-radius: 0 8px 8px 0;
        color: #6c757d;
        font-style: italic;
    }

    .plan-content .plan-divider {
        border: none;
        border-top: 1px dashed #dee2e6;
        margin: 20px 0;
    }

    .plan-content strong {
        font-weight: 700;
        color: #212529;
    }

/* ===== UPDATED ANIMATION ===== */
@keyframes planUpdated {
    0% {
        background: #e8f4ff;
    }

    100% {
        background: transparent;
    }
}

.plan-content.just-updated {
    animation: planUpdated 1.5s ease forwards;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .panel-actions .btn span {
        display: none;
    }

    .right-panel-switcher {
        flex-wrap: wrap;
        gap: 6px;
    }
}
/* ===== PLAN CONTENT - TABLE FIX ===== */

/* wrapper برای اسکرول افقی جدول */
.plan-content .table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin: 16px 0;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.plan-content table {
    width: 100%;
    min-width: 400px;
    border-collapse: collapse;
    font-size: 13px;
    direction: rtl;
}

    /* هدر جدول */
    .plan-content table thead tr {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: #fff;
    }

    .plan-content table thead th {
        padding: 12px 16px;
        font-weight: 600;
        font-size: 13px;
        text-align: right;
        white-space: nowrap;
        border: none;
        letter-spacing: 0.3px;
    }

    /* ردیف‌های بدنه */
    .plan-content table tbody tr {
        border-bottom: 1px solid #f0f0f0;
        transition: background 0.15s ease;
    }

        .plan-content table tbody tr:last-child {
            border-bottom: none;
        }

        .plan-content table tbody tr:hover {
            background: #f8f9ff;
        }

        /* zebra striping */
        .plan-content table tbody tr:nth-child(even) {
            background: #fafbff;
        }

            .plan-content table tbody tr:nth-child(even):hover {
                background: #f0f2ff;
            }

    .plan-content table td {
        padding: 10px 16px;
        vertical-align: middle;
        color: #495057;
        text-align: right;
        border: none;
        line-height: 1.6;
    }

        /* ستون اول - bold */
        .plan-content table td:first-child {
            font-weight: 600;
            color: #343a40;
        }

    /* footer جدول */
    .plan-content table tfoot tr {
        background: #f8f9fa;
        font-weight: 600;
        border-top: 2px solid #dee2e6;
    }

    .plan-content table tfoot td {
        color: #343a40;
    }
/* ===== CODE BLOCKS در طرح پروژه ===== */
.plan-code-block {
    margin: 14px 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e1e4e8;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.plan-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px;
    background: #24292e;
}

.plan-code-lang {
    font-size: 11px;
    color: #8b949e;
    font-family: monospace;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.plan-code-copy {
    background: transparent;
    border: 1px solid #444;
    border-radius: 5px;
    color: #8b949e;
    padding: 3px 8px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

    .plan-code-copy:hover,
    .plan-code-copy.copied {
        border-color: #58a6ff;
        color: #58a6ff;
    }

.plan-code-pre {
    margin: 0;
    padding: 16px;
    background: #1e1e1e;
    overflow-x: auto;
    font-size: 12.5px;
    line-height: 1.7;
}

    .plan-code-pre code {
        color: #d4d4d4;
        font-family: 'Courier New', Consolas, monospace;
    }

/* ===== SPACER ===== */
.plan-spacer {
    height: 6px;
}

/* ===== PLAN CONTENT عمومی ===== */
.plan-content {
    padding: 20px 24px;
    font-size: 14px;
    line-height: 1.8;
    color: #343a40;
    direction: rtl;
    /* مهم: اسکرول را به .right-panel بسپار */
    min-height: min-content;
}

    .plan-content .plan-h1 {
        font-size: 19px;
        font-weight: 700;
        color: #0d6efd;
        margin: 20px 0 10px;
        padding-bottom: 8px;
        border-bottom: 2px solid #e9ecef;
    }

    .plan-content .plan-h2 {
        font-size: 16px;
        font-weight: 700;
        color: #343a40;
        margin: 18px 0 8px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .plan-content .plan-h2::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 18px;
            background: linear-gradient(180deg, #667eea, #764ba2);
            border-radius: 2px;
            flex-shrink: 0;
        }

    .plan-content .plan-h3 {
        font-size: 14.5px;
        font-weight: 600;
        color: #495057;
        margin: 14px 0 6px;
    }

    .plan-content .plan-paragraph {
        margin-bottom: 8px;
        color: #495057;
    }

    .plan-content .plan-list {
        padding-right: 22px;
        padding-left: 0;
        margin: 6px 0 12px;
    }

        .plan-content .plan-list li {
            margin-bottom: 5px;
            padding-right: 4px;
            color: #495057;
            line-height: 1.7;
        }

    .plan-content .plan-inline-code {
        background: #f1f3f5;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 1px 6px;
        font-family: 'Courier New', monospace;
        font-size: 12px;
        color: #e83e8c;
        white-space: nowrap;
    }

    .plan-content .plan-quote {
        border-right: 4px solid #667eea;
        border-left: none;
        background: #f8f9ff;
        padding: 10px 16px 10px 10px;
        margin: 12px 0;
        border-radius: 0 8px 8px 0;
        color: #6c757d;
        font-style: italic;
    }

    .plan-content .plan-divider {
        border: none;
        border-top: 1px dashed #dee2e6;
        margin: 20px 0;
    }
/* ===================== Markdown Renderer CSS ===================== */

/* Headings */
.md-h1 {
    font-size: 1.7rem;
    font-weight: 700;
    margin: 1.2rem 0 .6rem;
    border-bottom: 2px solid #667eea;
    padding-bottom: .3rem;
    color: #1e293b;
}

.md-h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 1rem 0 .5rem;
    color: #334155;
}

.md-h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: .9rem 0 .4rem;
    color: #475569;
}

.md-h4 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: .8rem 0 .4rem;
    color: #64748b;
}

.md-h5, .md-h6 {
    font-size: 1rem;
    font-weight: 600;
    color: #64748b;
    margin: .7rem 0 .3rem;
}

/* Paragraph */
.md-p {
    line-height: 1.85;
    margin: .5rem 0;
    color: #334155;
}

.user .chat-bubble .md-p {
    color: #ffffff !important;
}

.user .chat-bubble .mt-2 {
    color: #000000ed !important;
}

.md-line {
    display: inline;
}

/* Inline code */
.md-inline-code {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 1px 6px;
    font-family: 'Fira Code', monospace;
    font-size: .88em;
    color: #e53e3e;
}

/* Link */
.md-link {
    color: #667eea;
    text-decoration: none;
    border-bottom: 1px dashed #667eea;
}

    .md-link:hover {
        color: #4c51bf;
        border-bottom-style: solid;
    }

/* Image */
.md-img {
    max-width: 100%;
    border-radius: 8px;
    margin: .5rem 0;
}

/* Lists */
.md-list {
    padding-right: 1.5rem;
    margin: .5rem 0;
}

    .md-list li {
        line-height: 1.8;
        color: #334155;
        margin-bottom: .2rem;
    }

/* Blockquote */
.md-blockquote {
    border-right: 4px solid #667eea;
    background: #f0f4ff;
    padding: .6rem 1rem;
    margin: .7rem 0;
    border-radius: 0 8px 8px 0;
    color: #4a5568;
    font-style: italic;
}

/* HR */
.md-hr {
    border: none;
    border-top: 2px solid #e2e8f0;
    margin: 1rem 0;
}

/* Del */
del {
    color: #94a3b8;
    text-decoration: line-through;
}

/* ===================== Code Block ===================== */
.md-code-block {
    background: #0f172a;
    border-radius: 10px;
    margin: 1rem 0;
    overflow: hidden;
    border: 1px solid #1e293b;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

.md-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .4rem .9rem;
    background: #1e293b;
    border-bottom: 1px solid #334155;
}

.md-code-lang {
    font-size: .75rem;
    font-weight: 600;
    color: #667eea;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.md-code-copy {
    background: transparent;
    border: 1px solid #475569;
    color: #94a3b8;
    font-size: .75rem;
    padding: 3px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: all .2s;
}

    .md-code-copy:hover {
        background: #334155;
        color: #e2e8f0;
    }

    .md-code-copy.copied {
        background: #065f46;
        border-color: #059669;
        color: #34d399;
    }

.md-code-pre {
    margin: 0;
    padding: 1rem 1.2rem;
    overflow-x: auto;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: .875rem;
    line-height: 1.7;
    color: #e2e8f0;
    tab-size: 4;
}

/* ===================== Table ===================== */
.md-table-wrapper {
    overflow-x: auto;
    margin: 1rem 0;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.md-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

    .md-table thead tr {
        background: linear-gradient(135deg, #667eea, #764ba2);
    }

    .md-table thead th {
        color: #fff;
        font-weight: 600;
        padding: .7rem 1rem;
        text-align: right;
        white-space: nowrap;
    }

    .md-table tbody td {
        padding: .6rem 1rem;
        border-bottom: 1px solid #f1f5f9;
        color: #334155;
    }

    .md-table .md-tr-odd td {
        background: #f8fafc;
    }

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

    .md-table tbody tr:hover td {
        background: #eff6ff;
        transition: background .15s;
    }
/* ── نقد پروژه ── */
.critique-content {
    border-top: 3px solid rgba(255, 193, 7, 0.4);
}

#showCritiqueBtn.active {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

#showCritiqueBtn.btn-updated {
    animation: critiquePulse 0.6s ease 3;
}

@keyframes critiquePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.5);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(255, 193, 7, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}

#voiceRecordBtn.btn-recording {
    animation: pulse-red 1s infinite;
    border-color: #dc3545;
    color: #dc3545;
}

@keyframes pulse-red {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220,53,69,0.4);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(220,53,69,0);
    }
}

.continuation-marker {
    background: linear-gradient(90deg, #e3f2fd, #bbdefb);
    border-right: 4px solid #2196f3;
    padding: 12px 16px;
    margin: 16px 0;
    border-radius: 6px;
    font-size: 13px;
    color: #1976d2;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.continuation-marker i {
    color: #2196f3;
}
/* اسکلتون لودینگ */
.skeleton-line {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* محتوای نقد */
.critique-content {
    line-height: 1.8;
    font-size: 14px;
}

    .critique-content h1,
    .critique-content h2,
    .critique-content h3 {
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
        color: #2c3e50;
    }

    .critique-content ul,
    .critique-content ol {
        padding-right: 1.5rem;
        margin-bottom: 1rem;
    }

    .critique-content code {
        background: #f8f9fa;
        padding: 2px 6px;
        border-radius: 3px;
        font-family: 'Courier New', monospace;
    }

    .critique-content pre {
        background: #f8f9fa;
        padding: 1rem;
        border-radius: 6px;
        overflow-x: auto;
    }

/* اسکرول نرم */
.plan-scroll-area {
    scroll-behavior: smooth;
}

/* انیمیشن ظاهر شدن متن */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.critique-content > * {
    animation: fadeIn 0.3s ease-out;
}

/* ============================================================
   AI Workspace refresh — Projects & Concept Tree V3
   ============================================================ */
:root {
    --ai-bg: #f6f7fb;
    --ai-surface: #ffffff;
    --ai-surface-soft: #f8fafc;
    --ai-surface-raised: #ffffff;
    --ai-border: #e4e8f0;
    --ai-border-strong: #d5dbe7;
    --ai-ink: #111827;
    --ai-ink-soft: #475569;
    --ai-muted: #7c879a;
    --ai-primary: #5b5cf0;
    --ai-primary-strong: #4849d8;
    --ai-primary-soft: #eeefff;
    --ai-cyan: #0ea5c6;
    --ai-success: #059669;
    --ai-success-soft: #e9fbf3;
    --ai-danger: #dc4151;
    --ai-danger-soft: #fff0f2;
    --ai-warning: #b76b00;
    --ai-warning-soft: #fff8e8;
    --ai-shadow: 0 16px 48px rgba(27, 32, 56, .09);
    --ai-shadow-soft: 0 8px 24px rgba(27, 32, 56, .06);
}

    :root[data-theme="dark"] {
        --surface: #151822;
        --surface-dim: #11141d;
        --surface-container: #0c0f16;
        --border-color: #2a3040;
        --text-primary: #f3f5fa;
        --text-secondary: #b4bdcc;
        --text-muted: #7f899a;
        --ai-bg: #0c0f16;
        --ai-surface: #151822;
        --ai-surface-soft: #10131c;
        --ai-surface-raised: #191d28;
        --ai-border: #292f3d;
        --ai-border-strong: #394154;
        --ai-ink: #f4f6fb;
        --ai-ink-soft: #b4bdcc;
        --ai-muted: #8791a4;
        --ai-primary: #8a8bff;
        --ai-primary-strong: #a0a1ff;
        --ai-primary-soft: rgba(123, 124, 255, .13);
        --ai-cyan: #43c6df;
        --ai-success: #39c58d;
        --ai-success-soft: rgba(20, 170, 112, .13);
        --ai-danger: #ff7785;
        --ai-danger-soft: rgba(220, 65, 81, .13);
        --ai-warning: #f4b54b;
        --ai-warning-soft: rgba(214, 142, 31, .13);
        --ai-shadow: 0 22px 60px rgba(0, 0, 0, .34);
        --ai-shadow-soft: 0 10px 30px rgba(0, 0, 0, .22);
        color-scheme: dark;
    }

body.projects-page {
    background: radial-gradient(circle at 80% 4%, rgba(91, 92, 240, .065), transparent 25rem), var(--ai-bg);
    color: var(--ai-ink);
}

.projects-page .main-content {
    background: transparent;
}

.projects-page .text-muted {
    color: var(--ai-muted) !important;
}

.projects-page .card {
    background: var(--ai-surface);
    border-color: var(--ai-border);
    box-shadow: 0 1px 2px rgba(22, 27, 45, .025);
}

    .projects-page .card:hover {
        transform: none;
        box-shadow: var(--ai-shadow-soft) !important;
    }

.projects-page .form-control,
.projects-page .form-select {
    color: var(--ai-ink);
    background-color: var(--ai-surface-raised);
    border-color: var(--ai-border);
}

    .projects-page .form-control::placeholder {
        color: var(--ai-muted);
    }

.projects-page .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ai-ink);
    --bs-table-hover-bg: var(--ai-primary-soft);
}

    .projects-page .table > :not(caption) > * > * {
        border-color: var(--ai-border);
    }

.ai-topbar {
    min-height: 66px;
    padding-inline: 12px;
    background: color-mix(in srgb, var(--ai-surface) 90%, transparent);
    border-bottom: 1px solid var(--ai-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: sticky;
    top: 0;
    z-index: 990;
}

    .ai-topbar .btn-link {
        color: var(--ai-ink-soft);
        text-decoration: none;
    }

.ai-user-menu {
    color: var(--ai-ink) !important;
}

.app-theme-toggle {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    color: var(--ai-ink-soft);
    background: var(--ai-surface-soft);
    border: 1px solid var(--ai-border);
    border-radius: 11px;
}

    .app-theme-toggle:hover {
        color: var(--ai-primary);
        background: var(--ai-primary-soft);
        border-color: color-mix(in srgb, var(--ai-primary) 30%, var(--ai-border));
    }

.project-page-header {
    border-bottom: 1px solid var(--ai-border);
}

    .project-page-header h1 {
        color: var(--ai-ink);
        font-weight: 780;
        letter-spacing: -.035em;
    }

.page-eyebrow,
.ct-eyebrow,
.ct-kicker {
    color: var(--ai-primary);
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.project-filter-card {
    border-radius: 16px;
}

    .project-filter-card .card-body {
        padding: 18px 20px;
    }

.projects-page #projectsGrid > * {
    transition: transform .2s ease;
}

.projects-page .project-card {
    border-radius: 16px;
}

    .projects-page .project-card:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--ai-primary) 30%, var(--ai-border));
    }

    .projects-page .project-card .card-header {
        background: #5557dc;
        padding: 1.15rem 1.25rem;
    }

:root[data-theme="dark"] .projects-page .project-card .card-header {
    background: #30327d;
}

.projects-page .project-card .card-header::after {
    display: none;
}

.project-knowledge-card {
    overflow: hidden;
    border-radius: 18px !important;
}

    .project-knowledge-card > .card-header {
        padding: 19px 22px;
        background: var(--ai-surface) !important;
        border-bottom: 1px solid var(--ai-border);
    }

.project-files-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .project-files-heading small {
        display: block;
        color: var(--ai-muted);
        font-size: .72rem;
        margin-bottom: 2px;
    }

    .project-files-heading h5 {
        color: var(--ai-ink);
        font-size: 1rem;
        font-weight: 750;
    }

.project-files-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: var(--ai-primary);
    background: var(--ai-primary-soft);
    border: 1px solid color-mix(in srgb, var(--ai-primary) 16%, var(--ai-border));
    border-radius: 12px;
}

.project-files-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.project-knowledge-btn {
    color: #fff;
    background: var(--ai-primary);
    border-color: var(--ai-primary);
}

    .project-knowledge-btn:hover {
        color: #fff;
        background: var(--ai-primary-strong);
        border-color: var(--ai-primary-strong);
    }

    .project-knowledge-btn:disabled {
        color: var(--ai-muted);
        background: var(--ai-surface-soft);
        border-color: var(--ai-border);
    }

.knowledge-flow-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    color: var(--ai-ink-soft);
    background: var(--ai-surface-soft);
    border: 1px solid var(--ai-border);
    border-radius: 13px;
}

    .knowledge-flow-note > i {
        color: var(--ai-primary);
        margin-top: 4px;
    }

    .knowledge-flow-note strong,
    .knowledge-flow-note span {
        display: block;
    }

    .knowledge-flow-note strong {
        color: var(--ai-ink);
        font-size: .88rem;
        margin-bottom: 2px;
    }

    .knowledge-flow-note span {
        font-size: .79rem;
        line-height: 1.75;
    }

.file-operation-progress {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 13px;
    margin-bottom: 18px;
    padding: 15px 16px;
    color: var(--ai-ink);
    background: color-mix(in srgb, var(--ai-primary-soft) 62%, var(--ai-surface));
    border: 1px solid color-mix(in srgb, var(--ai-primary) 18%, var(--ai-border));
    border-radius: 14px;
}

    .file-operation-progress[data-phase="ready"] {
        background: color-mix(in srgb, #22c55e 8%, var(--ai-surface));
        border-color: color-mix(in srgb, #22c55e 24%, var(--ai-border));
    }

    .file-operation-progress[data-phase="error"] {
        background: color-mix(in srgb, #ef4444 7%, var(--ai-surface));
        border-color: color-mix(in srgb, #ef4444 22%, var(--ai-border));
    }

.file-operation-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--ai-primary);
    background: var(--ai-surface);
    border: 1px solid var(--ai-border);
    border-radius: 12px;
}

.file-operation-content {
    min-width: 0;
}

.file-operation-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

    .file-operation-heading strong,
    .file-operation-heading span {
        display: block;
    }

    .file-operation-heading strong {
        font-size: .86rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .file-operation-heading span {
        margin-top: 2px;
        color: var(--ai-muted);
        font-size: .74rem;
    }

    .file-operation-heading b {
        color: var(--ai-primary);
        font-size: .82rem;
        white-space: nowrap;
    }

.file-operation-track {
    height: 6px;
    margin: 11px 0 9px;
    overflow: hidden;
    background: color-mix(in srgb, var(--ai-border) 80%, transparent);
    border-radius: 999px;
}

    .file-operation-track > span {
        display: block;
        width: 0;
        height: 100%;
        background: linear-gradient(90deg, var(--ai-primary), #26b7d7);
        border-radius: inherit;
        transition: width .25s ease;
    }

.file-operation-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ai-muted);
    font-size: .68rem;
}

    .file-operation-steps span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

        .file-operation-steps span:not(:last-child)::after {
            content: '';
            width: 18px;
            height: 1px;
            margin-inline-start: 4px;
            background: var(--ai-border);
        }

    .file-operation-steps .is-active {
        color: var(--ai-primary);
        font-weight: 750;
    }

    .file-operation-steps .is-done {
        color: #169a50;
    }

.file-row-status {
    min-width: 108px;
}

.file-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    color: var(--ai-muted);
    background: var(--ai-surface-soft);
    border: 1px solid var(--ai-border);
    border-radius: 999px;
    font-size: .69rem;
    font-weight: 700;
    white-space: nowrap;
}

    .file-status-pill.is-ready {
        color: #148344;
        background: color-mix(in srgb, #22c55e 9%, var(--ai-surface));
        border-color: color-mix(in srgb, #22c55e 25%, var(--ai-border));
    }

    .file-status-pill.is-processing {
        color: var(--ai-primary);
        background: var(--ai-primary-soft);
        border-color: color-mix(in srgb, var(--ai-primary) 22%, var(--ai-border));
    }

    .file-status-pill.is-warning {
        color: #a16207;
        background: color-mix(in srgb, #f59e0b 9%, var(--ai-surface));
        border-color: color-mix(in srgb, #f59e0b 25%, var(--ai-border));
    }

    .file-status-pill.is-danger {
        color: #c43d3d;
        background: color-mix(in srgb, #ef4444 8%, var(--ai-surface));
        border-color: color-mix(in srgb, #ef4444 23%, var(--ai-border));
    }

.file-row-progress {
    display: block;
    width: 94px;
    height: 3px;
    margin-top: 6px;
    overflow: hidden;
    background: var(--ai-border);
    border-radius: 999px;
}

    .file-row-progress i {
        display: block;
        height: 100%;
        background: var(--ai-primary);
        border-radius: inherit;
        transition: width .25s ease;
    }

/* Concept Tree V3 */
.ct-modal {
    --bs-modal-width: min(1320px, calc(100vw - 32px));
}

    .ct-modal .modal-dialog {
        width: var(--bs-modal-width);
        max-width: var(--bs-modal-width);
    }

.ct-shell {
    color: var(--ai-ink);
    background: var(--ai-surface);
    border: 1px solid var(--ai-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--ai-shadow) !important;
    overflow: hidden;
}

.ct-header {
    min-height: 92px;
    padding: 18px 22px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    background: var(--ai-surface);
    border-bottom: 1px solid var(--ai-border);
}

.ct-brand-mark {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--ai-primary);
    border-radius: 13px;
    box-shadow: 0 7px 20px color-mix(in srgb, var(--ai-primary) 28%, transparent);
}

.ct-header-copy {
    min-width: 0;
}

.ct-eyebrow {
    margin-bottom: 3px;
}

    .ct-eyebrow span {
        margin-inline-start: 5px;
        padding: 1px 5px;
        color: var(--ai-primary);
        background: var(--ai-primary-soft);
        border-radius: 4px;
    }

.ct-header h2 {
    margin: 0;
    color: var(--ai-ink);
    font-size: 1.12rem;
    font-weight: 550;
}

    .ct-header h2 strong {
        color: var(--ai-ink);
        font-weight: 800;
    }

.ct-header p {
    margin: 2px 0 0;
    color: var(--ai-muted);
    font-size: .76rem;
}

.ct-header-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.ct-icon-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--ai-muted);
    background: transparent;
    border: 1px solid var(--ai-border);
    border-radius: 10px;
}

    .ct-icon-btn:hover {
        color: var(--ai-danger);
        background: var(--ai-danger-soft);
    }

.ct-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    color: var(--ai-ink-soft);
    background: var(--ai-surface-soft);
    border: 1px solid var(--ai-border);
    border-radius: 9px;
    font-size: .72rem;
    font-weight: 700;
}

    .ct-status > i {
        width: 7px;
        height: 7px;
        background: var(--ai-muted);
        border-radius: 50%;
    }

    .ct-status[data-tone="processing"] {
        color: var(--ai-primary);
        background: var(--ai-primary-soft);
        border-color: transparent;
    }

        .ct-status[data-tone="processing"] > i {
            background: var(--ai-primary);
            animation: ctPulse 1.5s ease infinite;
        }

    .ct-status[data-tone="ready"] {
        color: var(--ai-success);
        background: var(--ai-success-soft);
        border-color: transparent;
    }

        .ct-status[data-tone="ready"] > i {
            background: var(--ai-success);
        }

    .ct-status[data-tone="danger"] {
        color: var(--ai-danger);
        background: var(--ai-danger-soft);
        border-color: transparent;
    }

        .ct-status[data-tone="danger"] > i {
            background: var(--ai-danger);
        }

.ct-journey {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0 22px;
    background: var(--ai-surface-soft);
    border-bottom: 1px solid var(--ai-border);
}

    .ct-journey > div {
        min-height: 62px;
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 10px 8px;
        color: var(--ai-muted);
        position: relative;
    }

        .ct-journey > div:not(:last-child)::after {
            content: '';
            position: absolute;
            width: calc(100% - 40px);
            height: 1px;
            right: 39px;
            bottom: 0;
            background: transparent;
        }

    .ct-journey b {
        width: 27px;
        height: 27px;
        flex: 0 0 27px;
        display: grid;
        place-items: center;
        font-size: .69rem;
        background: var(--ai-surface);
        border: 1px solid var(--ai-border);
        border-radius: 8px;
    }

    .ct-journey strong,
    .ct-journey small {
        display: block;
    }

    .ct-journey strong {
        font-size: .76rem;
        color: inherit;
    }

    .ct-journey small {
        margin-top: 1px;
        font-size: .64rem;
    }

    .ct-journey .is-active {
        color: var(--ai-primary);
    }

        .ct-journey .is-active::after {
            background: var(--ai-primary);
        }

        .ct-journey .is-active b {
            color: #fff;
            background: var(--ai-primary);
            border-color: var(--ai-primary);
        }

    .ct-journey .is-done {
        color: var(--ai-success);
    }

        .ct-journey .is-done b {
            color: var(--ai-success);
            background: var(--ai-success-soft);
            border-color: transparent;
        }

.ct-body {
    padding: 24px;
    background: var(--ai-surface);
}

.ct-panel {
    min-height: 430px;
}

.ct-alert {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 11px 13px;
    color: var(--ai-danger);
    background: var(--ai-danger-soft);
    border: 1px solid color-mix(in srgb, var(--ai-danger) 16%, transparent);
    border-radius: 11px;
    font-size: .82rem;
}

    .ct-alert[data-tone="warning"] {
        color: var(--ai-warning);
        background: var(--ai-warning-soft);
        border-color: transparent;
    }

    .ct-alert button {
        color: inherit;
        background: transparent;
        border: 0;
    }

.ct-loading-panel,
.ct-error-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

    .ct-loading-panel h3,
    .ct-error-panel h3 {
        margin: 16px 0 4px;
        color: var(--ai-ink);
        font-size: 1rem;
        font-weight: 750;
    }

    .ct-loading-panel p,
    .ct-error-panel p {
        color: var(--ai-muted);
        font-size: .82rem;
    }

.ct-loader {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 26px;
}

    .ct-loader span {
        width: 7px;
        height: 7px;
        background: var(--ai-primary);
        border-radius: 50%;
        animation: ctLoader 1.1s ease-in-out infinite;
    }

        .ct-loader span:nth-child(2) {
            animation-delay: .12s;
        }

        .ct-loader span:nth-child(3) {
            animation-delay: .24s;
        }

.ct-error-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    color: var(--ai-danger);
    background: var(--ai-danger-soft);
    border-radius: 14px;
    font-size: 1.15rem;
}

.ct-error-panel > div:last-child {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.ct-section-heading,
.ct-result-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

    .ct-section-heading h3,
    .ct-result-toolbar h3 {
        margin: 4px 0 4px;
        color: var(--ai-ink);
        font-size: 1.18rem;
        font-weight: 780;
        letter-spacing: -.02em;
    }

    .ct-section-heading p {
        margin: 0;
        color: var(--ai-muted);
        font-size: .78rem;
    }

.ct-privacy-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    padding: 7px 9px;
    color: var(--ai-success);
    background: var(--ai-success-soft);
    border-radius: 8px;
    font-size: .69rem;
    font-weight: 700;
}

.ct-source-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 20px 0;
}

.ct-source-card {
    min-height: 84px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ai-surface-soft);
    border: 1px solid var(--ai-border);
    border-radius: 13px;
    position: relative;
}

    .ct-source-card > i {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        color: var(--ai-primary);
        background: var(--ai-primary-soft);
        border-radius: 9px;
    }

    .ct-source-card[data-tone="cyan"] > i {
        color: var(--ai-cyan);
        background: color-mix(in srgb, var(--ai-cyan) 11%, transparent);
    }

    .ct-source-card[data-tone="success"] > i {
        color: var(--ai-success);
        background: var(--ai-success-soft);
    }

    .ct-source-card strong,
    .ct-source-card span {
        display: block;
    }

    .ct-source-card strong {
        color: var(--ai-ink);
        font-size: 1.13rem;
        line-height: 1.2;
    }

    .ct-source-card span {
        color: var(--ai-ink-soft);
        font-size: .7rem;
    }

    .ct-source-card > small {
        position: absolute;
        left: 10px;
        bottom: 6px;
        color: var(--ai-warning);
        font-size: .56rem;
    }

.ct-skeleton-line {
    width: 70%;
    height: 9px;
    display: block;
    background: linear-gradient(90deg, var(--ai-border), var(--ai-surface), var(--ai-border));
    background-size: 200% 100%;
    border-radius: 4px;
    animation: ctSkeleton 1.4s linear infinite;
}

    .ct-skeleton-line.short {
        width: 42%;
    }

.ct-setup-grid {
    display: grid;
    grid-template-columns: minmax(260px, .8fr) minmax(420px, 1.2fr);
    gap: 12px;
    align-items: start;
}

/* The publication gate's verdict. First thing on the results screen, because "the build finished"
   and "the graph can be published" are different facts and only the first was ever shown. */
.ct-gate-verdict {
    display: flex; gap: 12px; align-items: flex-start;
    margin-bottom: 12px; padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--ai-line, #d8e0ea); background: var(--ai-surface-2, #f7f9fc);
    font-size: .85rem; line-height: 1.9;
}
.ct-gate-verdict > i { font-size: 1.1rem; margin-top: 2px; }
.ct-gate-verdict strong { display: block; }
.ct-gate-verdict span { display: block; color: var(--ai-muted, #6b7684); }
.ct-gate-verdict ul { margin: 6px 0 0; padding-inline-start: 1.2rem; }
.ct-gate-verdict[data-tone="ok"] { border-color: #b6ddc0; background: #f2fbf5; }
.ct-gate-verdict[data-tone="ok"] > i { color: #2e7d4f; }
.ct-gate-verdict[data-tone="warn"] { border-color: #f0d59a; background: #fff9ec; }
.ct-gate-verdict[data-tone="warn"] > i { color: #a06a00; }

/* Cost, cap and consent. Set apart from the settings above it because it is a different kind of
   decision: everything above changes how the graph is built, this decides whether it is. */
.ct-budget {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--ai-line, #d8e0ea);
    border-radius: 12px;
    background: var(--ai-surface-2, #f7f9fc);
}
.ct-budget-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ct-budget-head h4 { margin: 0; font-size: .95rem; }
.ct-estimate { margin: 12px 0; }
.ct-estimate-empty { margin: 0; color: var(--ai-muted, #6b7684); font-size: .82rem; }
/* The three figures on one line, the expected one carrying the weight: a range read as a single
   number is the failure this replaces. */
.ct-estimate-range {
    display: flex; align-items: baseline; justify-content: center; gap: 14px;
    padding: 10px 0; font-variant-numeric: tabular-nums;
}
.ct-estimate-range strong { font-size: 1.5rem; }
.ct-estimate-range span { color: var(--ai-muted, #6b7684); font-size: .8rem; }
/* An unpriced model makes the total look LOW, which reads as cheap unless it is said outright. */
.ct-estimate-warn {
    margin: 0 0 10px; padding: 8px 10px; border-radius: 8px;
    color: #8a5a00; background: #fff5e0; border: 1px solid #f0d59a; font-size: .8rem; line-height: 1.9;
}
.ct-estimate-stages { width: 100%; border-collapse: collapse; font-size: .8rem; }
.ct-estimate-stages th, .ct-estimate-stages td {
    padding: 4px 8px; text-align: start; font-weight: 400;
    border-bottom: 1px solid var(--ai-line, #e6ebf2);
}
.ct-estimate-stages td:last-child { text-align: end; font-variant-numeric: tabular-nums; }
.ct-estimate-notes { margin-top: 8px; font-size: .8rem; color: var(--ai-muted, #6b7684); }
.ct-estimate-notes ul { margin: 6px 0 0; padding-inline-start: 1.2rem; line-height: 2; }
.ct-budget-mode { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; margin-bottom: 10px; }
.ct-budget-mode > label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; font-size: .85rem; }
.ct-budget-mode small { display: block; color: var(--ai-muted, #6b7684); font-size: .74rem; }
.ct-consent {
    display: flex; gap: 8px; align-items: flex-start; padding-top: 10px;
    border-top: 1px dashed var(--ai-line, #d8e0ea); font-size: .85rem; line-height: 1.9;
}
/* Per-stage models: a two-column list so a long stage name and its select stay on one row. */
.ct-stage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.ct-stage-model { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; }
.ct-stage-model small { color: var(--ai-muted, #6b7684); font-size: .66rem; line-height: 1.7; }
.ct-stage-model select:disabled { opacity: .7; }
/* Model per action: its own full-width section under the setup grid, one group per model kind. */
.ct-action-models { margin-top: 12px; }
.ct-estimate-warn ul { margin: 4px 0 0; padding-inline-start: 1.1rem; line-height: 1.9; }
div.ct-estimate-warn { display: flex; gap: 8px; align-items: flex-start; }
.ct-action-groups { display: flex; flex-direction: column; gap: 14px; margin-top: 15px; padding-top: 14px;
    border-top: 1px solid var(--ai-border); }
.ct-action-group header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; }
.ct-action-group header strong { color: var(--ai-ink); font-size: .76rem; }
.ct-action-group header small { color: var(--ai-muted, #6b7684); font-size: .66rem; line-height: 1.8; }

.ct-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--ai-ink);
    font-size: .77rem;
    font-weight: 750;
}

.ct-field small {
    display: block;
    margin-top: 6px;
    color: var(--ai-muted);
    font-size: .66rem;
}

.ct-field .form-control,
.ct-field .form-select {
    min-height: 44px;
    color: var(--ai-ink);
    background: var(--ai-surface);
    border-color: var(--ai-border);
    border-radius: 10px;
    font-size: .8rem;
}

.ct-model-field,
.ct-advanced {
    padding: 15px;
    background: var(--ai-surface-soft);
    border: 1px solid var(--ai-border);
    border-radius: 13px;
}

    .ct-advanced summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: var(--ai-ink-soft);
        cursor: pointer;
        font-size: .77rem;
        font-weight: 700;
        list-style: none;
    }

        .ct-advanced summary::-webkit-details-marker {
            display: none;
        }

        .ct-advanced summary small {
            color: var(--ai-muted);
            font-size: .65rem;
            font-weight: 500;
        }

.ct-advanced-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 15px;
    padding-top: 14px;
    border-top: 1px solid var(--ai-border);
}

.ct-action-bar {
    margin-top: 18px;
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border-top: 1px solid var(--ai-border);
}

.ct-action-note {
    color: var(--ai-ink-soft);
    font-size: .76rem;
}

    .ct-action-note i {
        color: var(--ai-success);
        margin-left: 5px;
    }

.ct-primary-btn,
.ct-secondary-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    font-size: .78rem;
}

.ct-primary-btn {
    color: #fff !important;
    background: var(--ai-primary) !important;
    border-color: var(--ai-primary) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--ai-primary) 20%, transparent);
}

    .ct-primary-btn:hover {
        background: var(--ai-primary-strong) !important;
        border-color: var(--ai-primary-strong) !important;
    }

.ct-secondary-btn {
    color: var(--ai-ink-soft);
    background: var(--ai-surface);
    border-color: var(--ai-border);
}

    .ct-secondary-btn:hover {
        color: var(--ai-primary);
        background: var(--ai-primary-soft);
        border-color: transparent;
    }

.ct-progress-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 28px;
    min-height: 440px;
}

.ct-progress-main {
    padding: 16px 4px;
}

.ct-progress-number {
    text-align: left;
}

    .ct-progress-number strong,
    .ct-progress-number span {
        display: block;
    }

    .ct-progress-number strong {
        color: var(--ai-primary);
        font-size: 2rem;
        font-weight: 800;
        line-height: 1;
    }

    .ct-progress-number span {
        margin-top: 4px;
        color: var(--ai-muted);
        font-size: .65rem;
    }

.ct-progress-track {
    height: 8px;
    margin-top: 30px;
    overflow: hidden;
    background: var(--ai-border);
    border-radius: 3px;
}

    .ct-progress-track span {
        height: 100%;
        display: block;
        background: linear-gradient(90deg, var(--ai-primary), var(--ai-cyan));
        border-radius: inherit;
        transition: width .45s ease;
    }

.ct-progress-meta {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    color: var(--ai-muted);
    font-size: .67rem;
}

.ct-phase-list {
    margin-top: 34px;
    display: grid;
    gap: 8px;
}

    .ct-phase-list > div {
        min-height: 48px;
        padding: 9px 11px;
        display: grid;
        grid-template-columns: 30px 1fr 10px;
        align-items: center;
        gap: 9px;
        color: var(--ai-muted);
        background: var(--ai-surface-soft);
        border: 1px solid transparent;
        border-radius: 10px;
    }

        .ct-phase-list > div > i {
            width: 30px;
            height: 30px;
            display: grid;
            place-items: center;
            background: var(--ai-surface);
            border: 1px solid var(--ai-border);
            border-radius: 8px;
        }

    .ct-phase-list span {
        font-size: .74rem;
        font-weight: 650;
    }

    .ct-phase-list b {
        width: 7px;
        height: 7px;
        background: var(--ai-border-strong);
        border-radius: 50%;
    }

    .ct-phase-list .is-active {
        color: var(--ai-primary);
        background: var(--ai-primary-soft);
        border-color: color-mix(in srgb, var(--ai-primary) 12%, transparent);
    }

        .ct-phase-list .is-active b {
            background: var(--ai-primary);
            animation: ctPulse 1.5s ease infinite;
        }

    .ct-phase-list .is-done {
        color: var(--ai-success);
    }

        .ct-phase-list .is-done b {
            background: var(--ai-success);
        }

.ct-progress-aside {
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--ai-surface-soft);
    border: 1px solid var(--ai-border);
    border-radius: 15px;
}

.ct-processing-visual {
    width: 116px;
    height: 116px;
    margin: 14px 0 24px;
    display: grid;
    place-items: center;
    color: var(--ai-primary);
    position: relative;
}

    .ct-processing-visual > i {
        width: 58px;
        height: 58px;
        display: grid;
        place-items: center;
        background: var(--ai-primary-soft);
        border: 1px solid color-mix(in srgb, var(--ai-primary) 18%, transparent);
        border-radius: 16px;
        font-size: 1.3rem;
    }

    .ct-processing-visual > span {
        position: absolute;
        inset: 2px;
        border: 1px solid color-mix(in srgb, var(--ai-primary) 34%, transparent);
        border-radius: 50%;
        animation: ctOrbit 5s linear infinite;
    }

        .ct-processing-visual > span:nth-child(2) {
            inset: 15px;
            border-color: color-mix(in srgb, var(--ai-cyan) 34%, transparent);
            animation-direction: reverse;
            animation-duration: 3.5s;
        }

        .ct-processing-visual > span::after {
            content: '';
            width: 6px;
            height: 6px;
            position: absolute;
            top: 10px;
            right: 17px;
            background: var(--ai-primary);
            border-radius: 50%;
        }

.ct-progress-aside h4 {
    margin: 0 0 4px;
    color: var(--ai-ink);
    font-size: .84rem;
    font-weight: 750;
}

.ct-progress-aside > p {
    color: var(--ai-muted);
    font-size: .69rem;
    line-height: 1.8;
}

.ct-diagnostics {
    width: 100%;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--ai-border);
    text-align: right;
}

    .ct-diagnostics summary {
        color: var(--ai-muted);
        cursor: pointer;
        font-size: .68rem;
    }

    .ct-diagnostics dl {
        margin: 8px 0 0;
    }

        .ct-diagnostics dl div {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            padding: 3px 0;
            font-size: .62rem;
        }

    .ct-diagnostics dt {
        color: var(--ai-muted);
        font-weight: 500;
    }

    .ct-diagnostics dd {
        margin: 0;
        color: var(--ai-ink-soft);
        direction: ltr;
    }

    .ct-diagnostics p {
        margin: 8px 0 0;
        padding: 7px;
        max-height: 70px;
        overflow: auto;
        color: var(--ai-muted);
        background: var(--ai-surface);
        border-radius: 7px;
        font-size: .58rem;
    }

.ct-result-toolbar {
    align-items: center;
}

.ct-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 16px 0;
}

    .ct-metrics > div {
        min-height: 54px;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        gap: 9px;
        color: var(--ai-ink-soft);
        background: var(--ai-surface-soft);
        border: 1px solid var(--ai-border);
        border-radius: 10px;
        font-size: .7rem;
    }

        .ct-metrics > div > i {
            color: var(--ai-primary);
        }

    .ct-metrics strong {
        color: var(--ai-ink);
        font-size: .84rem;
    }

    .ct-metrics .ct-ready-metric {
        color: var(--ai-success);
        background: var(--ai-success-soft);
        border-color: transparent;
    }

        .ct-metrics .ct-ready-metric i,
        .ct-metrics .ct-ready-metric strong {
            color: var(--ai-success);
        }

.ct-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    gap: 12px;
    min-height: 520px;
}

.ct-explorer,
.ct-chat {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--ai-surface-soft);
    border: 1px solid var(--ai-border);
    border-radius: 14px;
    overflow: hidden;
}

.ct-pane-header {
    min-height: 68px;
    padding: 13px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: var(--ai-surface);
    border-bottom: 1px solid var(--ai-border);
}

    .ct-pane-header h4 {
        margin: 0 0 2px;
        color: var(--ai-ink);
        font-size: .85rem;
        font-weight: 760;
    }

    .ct-pane-header p {
        margin: 0;
        color: var(--ai-muted);
        font-size: .64rem;
    }

.ct-search-box {
    width: min(210px, 46%);
    min-height: 36px;
    padding: 0 9px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--ai-muted);
    background: var(--ai-surface-soft);
    border: 1px solid var(--ai-border);
    border-radius: 9px;
}

    .ct-search-box input {
        width: 100%;
        color: var(--ai-ink);
        background: transparent;
        border: 0;
        outline: 0;
        font-size: .68rem;
    }

        .ct-search-box input::placeholder {
            color: var(--ai-muted);
        }

.ct-live-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    color: var(--ai-success);
    background: var(--ai-success-soft);
    border-radius: 7px;
    white-space: nowrap;
    font-size: .61rem;
    font-weight: 700;
}

    .ct-live-chip i {
        width: 6px;
        height: 6px;
        background: var(--ai-success);
        border-radius: 50%;
    }

.ct-tree-canvas {
    min-height: 230px;
    max-height: 285px;
    padding: 10px;
    overflow: auto;
    scrollbar-width: thin;
}

.ct-tree-branch {
    position: relative;
}

.ct-tree-children {
    margin-right: 16px;
    padding-right: 7px;
    border-right: 1px solid var(--ai-border);
}

.ct-tree-node {
    width: 100%;
    min-height: 43px;
    margin-bottom: 4px;
    padding: 7px 9px;
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto 12px;
    align-items: center;
    gap: 9px;
    color: var(--ai-ink-soft);
    text-align: right;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
}

    .ct-tree-node:hover {
        color: var(--ai-ink);
        background: var(--ai-surface);
        border-color: var(--ai-border);
    }

    .ct-tree-node.is-selected {
        color: var(--ai-primary);
        background: var(--ai-primary-soft);
        border-color: color-mix(in srgb, var(--ai-primary) 16%, transparent);
    }

.ct-node-dot {
    width: 7px;
    height: 7px;
    display: block;
    background: var(--ai-primary);
    border: 2px solid var(--ai-surface);
    box-shadow: 0 0 0 1px var(--ai-primary);
    border-radius: 50%;
}

.ct-tree-node strong,
.ct-tree-node small {
    display: block;
}

.ct-tree-node strong {
    overflow: hidden;
    color: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .72rem;
}

.ct-tree-node small {
    margin-top: 1px;
    color: var(--ai-muted);
    font-size: .57rem;
}

.ct-tree-node em {
    padding: 2px 5px;
    color: var(--ai-muted);
    background: var(--ai-surface);
    border-radius: 4px;
    font-size: .52rem;
    font-style: normal;
}

    .ct-tree-node em[data-tone="danger"] {
        color: var(--ai-danger);
        background: var(--ai-danger-soft);
    }

.ct-tree-node > .fas {
    color: var(--ai-muted);
    font-size: .55rem;
}

.ct-node-detail {
    min-height: 205px;
    max-height: 270px;
    margin: 0 10px 10px;
    padding: 14px;
    overflow: auto;
    color: var(--ai-ink-soft);
    background: var(--ai-surface);
    border: 1px solid var(--ai-border);
    border-radius: 11px;
}

.ct-node-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

    .ct-node-header h5 {
        margin: 2px 0 0;
        color: var(--ai-ink);
        font-size: .9rem;
        font-weight: 780;
    }

.ct-depth-chip {
    padding: 4px 6px;
    color: var(--ai-primary);
    background: var(--ai-primary-soft);
    border-radius: 6px;
    font-size: .56rem;
    white-space: nowrap;
}

.ct-node-summary-text {
    margin: 10px 0;
    color: var(--ai-ink-soft);
    font-size: .69rem;
    line-height: 1.85;
}

.ct-rollup-summary {
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--ai-primary) 18%, var(--ai-border));
    border-radius: 9px;
    background: color-mix(in srgb, var(--ai-primary-soft) 60%, var(--ai-surface));
}

    .ct-rollup-summary strong {
        display: block;
        margin-bottom: 4px;
        color: var(--ai-primary);
        font-size: .58rem;
    }

    .ct-rollup-summary p {
        margin: 0;
        color: var(--ai-ink-soft);
        font-size: .64rem;
        line-height: 1.8;
    }

.ct-facets span {
    color: var(--ai-cyan);
    background: color-mix(in srgb, var(--ai-cyan) 10%, transparent);
}

.ct-aliases,
.ct-evidence-list {
    margin-top: 1rem;
    padding: .9rem;
    border: 1px solid var(--app-border, rgba(100, 116, 139, .2));
    border-radius: 1rem;
    background: color-mix(in srgb, var(--app-surface, #fff) 88%, transparent);
}

.ct-aliases > strong,
.ct-evidence-list > h6 {
    display: block;
    margin: 0 0 .65rem;
    font-size: .76rem;
    color: var(--app-muted, #64748b);
}

.ct-aliases > div {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.ct-aliases span {
    padding: .32rem .62rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-primary, #4f46e5) 10%, transparent);
    color: var(--app-primary, #4f46e5);
    font-size: .73rem;
}

.ct-evidence-list blockquote {
    margin: 0 0 .55rem;
    padding: .72rem .8rem;
    border-inline-start: 3px solid color-mix(in srgb, var(--app-primary, #4f46e5) 55%, transparent);
    border-radius: .65rem;
    background: color-mix(in srgb, var(--app-primary, #4f46e5) 5%, transparent);
    color: var(--app-text, #0f172a);
    font-size: .78rem;
    line-height: 1.9;
}

.ct-evidence-list blockquote span {
    display: block;
    margin-bottom: .25rem;
    color: var(--app-muted, #64748b);
    font-size: .68rem;
}

.ct-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}

    .ct-keywords span {
        padding: 3px 6px;
        color: var(--ai-primary);
        background: var(--ai-primary-soft);
        border-radius: 5px;
        font-size: .55rem;
    }

.ct-relations {
    margin-top: 9px;
}

    .ct-relations h6 {
        color: var(--ai-ink);
        font-size: .67rem;
    }

.ct-relation-item {
    margin-top: 5px;
    padding: 7px 8px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 8px;
    background: var(--ai-surface-soft);
    border-radius: 7px;
}

    .ct-relation-item span {
        padding: 2px 5px;
        color: var(--ai-cyan);
        background: color-mix(in srgb, var(--ai-cyan) 10%, transparent);
        border-radius: 4px;
        font-size: .5rem;
    }

    .ct-relation-item strong {
        color: var(--ai-ink-soft);
        font-size: .61rem;
    }

    .ct-relation-item em {
        grid-column: 1 / -1;
        color: var(--ai-primary);
        font-size: .5rem;
        font-style: normal;
    }

    .ct-relation-item small {
        grid-column: 1 / -1;
        color: var(--ai-muted);
        font-size: .56rem;
    }

.ct-no-relations {
    padding: 7px;
    color: var(--ai-muted);
    background: var(--ai-surface-soft);
    border-radius: 7px;
    font-size: .61rem;
}

.ct-evidence {
    margin-top: 10px;
    border-top: 1px solid var(--ai-border);
}

    .ct-evidence summary {
        padding: 9px 0 3px;
        display: flex;
        justify-content: space-between;
        color: var(--ai-primary);
        cursor: pointer;
        font-size: .62rem;
    }

        .ct-evidence summary span {
            color: var(--ai-muted);
        }

    .ct-evidence > div {
        margin-top: 6px;
        padding: 9px;
        white-space: pre-wrap;
        color: var(--ai-ink-soft);
        background: var(--ai-surface-soft);
        border-radius: 7px;
        font-size: .61rem;
        line-height: 1.9;
    }

.ct-empty-state {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
    color: var(--ai-muted);
    text-align: center;
    font-size: .68rem;
}

    .ct-empty-state i {
        color: var(--ai-border-strong);
        font-size: 1.1rem;
    }

.ct-inline-loading,
.ct-inline-error {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--ai-muted);
    font-size: .68rem;
}

.ct-inline-error {
    color: var(--ai-danger);
}

.ct-suggestions {
    padding: 9px 10px 0;
    display: flex;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .ct-suggestions::-webkit-scrollbar {
        display: none;
    }

    .ct-suggestions button {
        padding: 5px 8px;
        color: var(--ai-ink-soft);
        white-space: nowrap;
        background: var(--ai-surface);
        border: 1px solid var(--ai-border);
        border-radius: 7px;
        font-size: .56rem;
    }

        .ct-suggestions button:hover {
            color: var(--ai-primary);
            background: var(--ai-primary-soft);
            border-color: transparent;
        }

.ct-chat-messages {
    min-height: 320px;
    max-height: 378px;
    flex: 1;
    padding: 13px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.ct-chat-empty {
    min-height: 275px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--ai-muted);
    text-align: center;
}

    .ct-chat-empty i {
        width: 42px;
        height: 42px;
        margin-bottom: 10px;
        display: grid;
        place-items: center;
        color: var(--ai-primary);
        background: var(--ai-primary-soft);
        border-radius: 12px;
    }

    .ct-chat-empty strong {
        color: var(--ai-ink);
        font-size: .76rem;
    }

    .ct-chat-empty span {
        margin-top: 3px;
        font-size: .61rem;
    }

.ct-message {
    max-width: 92%;
    margin: 0 0 12px auto;
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.ct-message-user {
    margin-right: auto;
    margin-left: 0;
    flex-direction: row-reverse;
}

.ct-message-avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    color: var(--ai-primary);
    background: var(--ai-primary-soft);
    border-radius: 8px;
    font-size: .62rem;
}

.ct-message-user .ct-message-avatar {
    color: var(--ai-ink-soft);
    background: var(--ai-surface);
    border: 1px solid var(--ai-border);
}

.ct-message-bubble {
    padding: 9px 10px;
    color: var(--ai-ink-soft);
    background: var(--ai-surface);
    border: 1px solid var(--ai-border);
    border-radius: 10px 10px 10px 3px;
    font-size: .68rem;
    line-height: 1.9;
}

.ct-message-user .ct-message-bubble {
    color: #fff;
    background: var(--ai-primary);
    border-color: var(--ai-primary);
    border-radius: 10px 10px 3px 10px;
}

.ct-message-error .ct-message-bubble {
    color: var(--ai-danger);
    background: var(--ai-danger-soft);
    border-color: transparent;
}

.ct-message-text {
    white-space: pre-wrap;
    word-break: break-word;
}

.ct-citations {
    margin-top: 8px;
    padding-top: 7px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-top: 1px solid var(--ai-border);
}

    .ct-citations > span {
        width: 100%;
        color: var(--ai-muted);
        font-size: .54rem;
    }

    .ct-citations small,
    .ct-citations button {
        padding: 2px 5px;
        color: var(--ai-primary);
        background: var(--ai-primary-soft);
        border: 0;
        border-radius: 4px;
        font-size: .51rem;
    }

        .ct-citations button:hover {
            color: #fff;
            background: var(--ai-primary);
        }

.ct-retrieval-meta {
    display: block;
    margin-top: 6px;
    color: var(--ai-muted);
    font-size: .52rem;
}

.ct-truncated-note {
    display: block;
    margin-top: 7px;
    color: var(--ai-warning);
    font-size: .53rem;
}

.ct-message-loading .ct-message-bubble > div {
    display: flex;
    gap: 3px;
}

.ct-message-loading .ct-message-bubble span {
    width: 5px;
    height: 5px;
    background: var(--ai-primary);
    border-radius: 50%;
    animation: ctLoader 1.1s ease infinite;
}

    .ct-message-loading .ct-message-bubble span:nth-child(2) {
        animation-delay: .12s;
    }

    .ct-message-loading .ct-message-bubble span:nth-child(3) {
        animation-delay: .24s;
    }

.ct-message-loading .ct-message-bubble small {
    color: var(--ai-muted);
    font-size: .55rem;
}

.ct-chat-composer {
    margin: 0 10px;
    padding: 6px;
    display: grid;
    grid-template-columns: 1fr 35px;
    align-items: end;
    gap: 6px;
    background: var(--ai-surface);
    border: 1px solid var(--ai-border);
    border-radius: 11px;
}

    .ct-chat-composer:focus-within {
        border-color: color-mix(in srgb, var(--ai-primary) 55%, var(--ai-border));
        box-shadow: 0 0 0 3px var(--ai-primary-soft);
    }

    .ct-chat-composer textarea {
        max-height: 132px;
        padding: 5px 7px;
        resize: none;
        color: var(--ai-ink);
        background: transparent;
        border: 0;
        outline: 0;
        font: inherit;
        font-size: .69rem;
        line-height: 1.7;
    }

        .ct-chat-composer textarea::placeholder {
            color: var(--ai-muted);
        }

    .ct-chat-composer button {
        width: 35px;
        height: 35px;
        display: grid;
        place-items: center;
        color: #fff;
        background: var(--ai-primary);
        border: 0;
        border-radius: 9px;
    }

        .ct-chat-composer button:disabled {
            color: var(--ai-muted);
            background: var(--ai-border);
        }

.ct-chat-hint {
    padding: 6px 12px 10px;
    color: var(--ai-muted);
    text-align: center;
    font-size: .53rem;
}

:root[data-theme="dark"] .projects-page .bg-white,
:root[data-theme="dark"] .projects-page .modal-header,
:root[data-theme="dark"] .projects-page .modal-footer,
:root[data-theme="dark"] .projects-page .dropdown-menu {
    background-color: var(--ai-surface) !important;
    color: var(--ai-ink);
}

:root[data-theme="dark"] .projects-page .dropdown-item {
    color: var(--ai-ink-soft);
}

    :root[data-theme="dark"] .projects-page .dropdown-item:hover {
        color: var(--ai-ink);
        background: var(--ai-primary-soft);
    }

:root[data-theme="dark"] .projects-page .btn-close {
    filter: invert(1) grayscale(1);
}

:root[data-theme="dark"] .projects-page .modal-content {
    color: var(--ai-ink);
    background: var(--ai-surface);
    border: 1px solid var(--ai-border);
}

@keyframes ctLoader {
    0%, 80%, 100% {
        opacity: .35;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-4px);
    }
}

@keyframes ctPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 25%, transparent);
    }

    50% {
        box-shadow: 0 0 0 5px transparent;
    }
}

@keyframes ctOrbit {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ctSkeleton {
    to {
        background-position: -200% 0;
    }
}

@media (max-width: 992px) {
    .ct-modal {
        --bs-modal-width: calc(100vw - 20px);
    }

    .ct-body {
        padding: 18px;
    }

    .ct-progress-layout {
        grid-template-columns: 1fr;
    }

    .ct-progress-aside {
        min-height: 220px;
    }

    .ct-processing-visual {
        width: 86px;
        height: 86px;
        margin: 2px 0 12px;
    }

    .ct-workspace {
        grid-template-columns: 1fr;
    }

    .ct-chat-messages {
        min-height: 300px;
    }
}

@media (max-width: 768px) {
    .project-page-header {
        align-items: flex-start !important;
        gap: 14px;
    }

        .project-page-header .btn-toolbar {
            width: 100%;
        }

            .project-page-header .btn-toolbar .btn {
                width: 100%;
            }

    .project-files-actions {
        width: 100%;
    }

        .project-files-actions .btn {
            flex: 1;
        }

    .knowledge-flow-note {
        padding: 12px;
    }

    .ct-modal .modal-dialog {
        margin: 6px auto;
    }

    .ct-shell {
        border-radius: 14px !important;
    }

    .ct-header {
        min-height: 76px;
        padding: 13px;
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 9px;
    }

    .ct-brand-mark {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .ct-header p,
    .ct-status {
        display: none;
    }

    .ct-header h2 {
        font-size: .92rem;
    }

    .ct-journey {
        padding: 0 8px;
    }

        .ct-journey > div {
            min-height: 48px;
            justify-content: center;
            padding: 7px 2px;
        }

        .ct-journey b {
            width: 25px;
            height: 25px;
            flex-basis: 25px;
        }

        .ct-journey span {
            display: none;
        }

    .ct-body {
        padding: 13px;
    }

    .ct-panel {
        min-height: 380px;
    }

    .ct-section-heading,
    .ct-result-toolbar,
    .ct-action-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .ct-privacy-note {
        align-self: flex-start;
    }

    .ct-source-grid {
        grid-template-columns: 1fr;
    }

    .ct-source-card {
        min-height: 65px;
    }

    .ct-setup-grid {
        grid-template-columns: 1fr;
    }

    .ct-advanced-body {
        grid-template-columns: 1fr;
    }

    .ct-action-bar .btn,
    .ct-result-toolbar .btn {
        width: 100%;
    }

    .ct-progress-number strong {
        font-size: 1.55rem;
    }

    .ct-progress-aside {
        display: none;
    }

    .ct-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .ct-pane-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .ct-search-box {
        width: 100%;
    }

    .ct-tree-canvas {
        max-height: 330px;
    }

    .ct-suggestions {
        padding-top: 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Allinext Enterprise UI v3 — calm, authoritative, unified
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --app-bg: #f3f5f8;
    --app-surface: rgba(255,255,255,.94);
    --app-surface-solid: #fff;
    --app-elevated: #f7f8fa;
    --app-text: #172033;
    --app-muted: #667085;
    --app-border: #e1e6ed;
    --app-primary: #2457d6;
    --app-primary-2: #1d46ad;
    --app-primary-soft: #eaf0ff;
    --app-success: #16875f;
    --app-danger: #d9364f;
    --app-warning: #b26a00;
    --app-shadow: 0 18px 45px rgba(18,28,45,.08);
    --app-shadow-sm: 0 5px 18px rgba(18,28,45,.055);
    --app-sidebar: #111827;
    --app-sidebar-text: #d4dae5;
    --app-radius: 15px;
}

    :root[data-theme="dark"] {
        --app-bg: #090e16;
        --app-surface: rgba(17,24,36,.96);
        --app-surface-solid: #111824;
        --app-elevated: #171f2d;
        --app-text: #edf1f7;
        --app-muted: #98a3b5;
        --app-border: #263142;
        --app-primary: #6f92ff;
        --app-primary-2: #5079ed;
        --app-primary-soft: rgba(91,127,238,.15);
        --app-success: #43c493;
        --app-danger: #ff6b7d;
        --app-warning: #f0ad4e;
        --app-shadow: 0 20px 55px rgba(0,0,0,.28);
        --app-shadow-sm: 0 7px 22px rgba(0,0,0,.22);
        --app-sidebar: #080d14;
        --app-sidebar-text: #d9dfeb;
    }

body.app-page {
    background: var(--app-bg) !important;
}

.app-page .sidebar {
    width: 260px !important;
    padding: 17px 12px;
    background: var(--app-sidebar) !important;
    box-shadow: 8px 0 30px rgba(0,0,0,.08);
}

.app-page .main-content {
    margin-right: 260px !important;
}

body.app-page.sidebar-collapsed .main-content {
    margin-right: 0 !important;
}

.app-brand {
    border-bottom: 1px solid rgba(255,255,255,.075);
    margin-bottom: 15px;
}

.app-brand-mark {
    border-radius: 11px;
    background: #315fd4;
    box-shadow: none;
}

.app-user-card {
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    box-shadow: none;
}

.app-avatar {
    border-radius: 10px;
    background: #315fd4;
    box-shadow: none;
}

.app-page .sidebar-nav .nav-link {
    min-height: 43px;
    border-radius: 9px;
    font-weight: 550;
}

    .app-page .sidebar-nav .nav-link:hover {
        transform: none;
        background: rgba(255,255,255,.05);
    }

    .app-page .sidebar-nav .nav-link.active {
        background: #244fbd;
        border-color: rgba(255,255,255,.08);
        box-shadow: none;
    }

.app-topbar {
    min-height: 66px;
    padding: 9px 20px !important;
    background: var(--app-surface) !important;
    box-shadow: 0 1px 0 var(--app-border);
}

.app-icon-button, .app-profile-pill {
    border-radius: 9px;
    box-shadow: none;
}

.app-page .card, .app-page .modal-content, .app-page .dropdown-menu, .app-panel {
    border-radius: var(--app-radius) !important;
    box-shadow: var(--app-shadow-sm);
}

.app-page .btn {
    border-radius: 9px;
}

.app-page .btn-primary {
    background: var(--app-primary);
    box-shadow: none;
}

    .app-page .btn-primary:hover {
        background: var(--app-primary-2);
    }

.app-page .form-control, .app-page .form-select, .app-page .input-group-text {
    border-radius: 9px;
}

/* Enterprise authentication */
body.enterprise-auth {
    min-height: 100dvh;
    margin: 0;
    color: var(--app-text);
    background: var(--app-bg) !important;
}

.auth-shell {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(390px,42%) minmax(500px,58%);
}

.auth-brand-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding: 42px clamp(35px,5vw,76px);
    overflow: hidden;
    color: #f4f7fc;
    background: #111827;
}

    .auth-brand-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
        background-size: 44px 44px;
        mask-image: linear-gradient(to bottom,#000,transparent 85%);
    }

    .auth-brand-panel > * {
        position: relative;
        z-index: 1;
    }

.auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
}

    .auth-brand > span {
        width: 43px;
        height: 43px;
        display: grid;
        place-items: center;
        background: #315fd4;
        border-radius: 11px;
    }

    .auth-brand strong, .auth-brand small {
        display: block;
    }

    .auth-brand strong {
        font-size: 1rem;
        letter-spacing: .3px;
    }

    .auth-brand small {
        color: #8490a4;
        margin-top: 3px;
        font-size: .58rem;
        letter-spacing: .7px;
        text-transform: uppercase;
    }

.auth-brand-copy {
    margin: auto 0;
    max-width: 570px;
    padding: 55px 0;
}

.auth-kicker {
    display: inline-flex;
    padding: 7px 10px;
    color: #aac0ff;
    background: rgba(49,95,212,.16);
    border: 1px solid rgba(111,146,255,.2);
    border-radius: 6px;
    font-size: .65rem;
}

.auth-brand-copy h1 {
    margin: 20px 0 17px;
    font-size: clamp(2rem,3.7vw,3.5rem);
    line-height: 1.5;
    font-weight: 850;
    letter-spacing: -1px;
}

    .auth-brand-copy h1 em {
        color: #82a2ff;
        font-style: normal;
    }

.auth-brand-copy p {
    max-width: 540px;
    margin: 0;
    color: #aab3c3;
    line-height: 2;
    font-size: .79rem;
}

.auth-capabilities {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin-top: 34px;
}

    .auth-capabilities > div {
        padding: 14px;
        border: 1px solid rgba(255,255,255,.08);
        background: rgba(255,255,255,.025);
        border-radius: 10px;
    }

    .auth-capabilities i {
        color: #82a2ff;
        margin-bottom: 12px;
    }

    .auth-capabilities span, .auth-capabilities strong, .auth-capabilities small {
        display: block;
    }

    .auth-capabilities strong {
        font-size: .66rem;
        direction: ltr;
        text-align: left;
    }

    .auth-capabilities small {
        margin-top: 5px;
        color: #7f8a9d;
        font-size: .55rem;
    }

.auth-brand-panel footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #758196;
    font-size: .58rem;
}

    .auth-brand-panel footer span {
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .auth-brand-panel footer i {
        width: 7px;
        height: 7px;
        background: #37c894;
        border-radius: 50%;
        box-shadow: 0 0 0 4px rgba(55,200,148,.1);
    }

.auth-steps {
    display: grid;
    gap: 8px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

    .auth-steps li {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 13px;
        color: #7f8a9d;
        border: 1px solid rgba(255,255,255,.06);
        border-radius: 10px;
    }

        .auth-steps li.active {
            color: #fff;
            background: rgba(49,95,212,.12);
            border-color: rgba(111,146,255,.22);
        }

    .auth-steps b {
        width: 31px;
        height: 31px;
        display: grid;
        place-items: center;
        background: rgba(255,255,255,.06);
        border-radius: 8px;
    }

    .auth-steps span, .auth-steps strong, .auth-steps small {
        display: block;
    }

    .auth-steps strong {
        font-size: .68rem;
    }

    .auth-steps small {
        margin-top: 3px;
        color: #7f8a9d;
        font-size: .55rem;
    }

.auth-security-note {
    display: flex;
    gap: 14px;
    padding: 18px;
    margin-top: 28px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    background: rgba(255,255,255,.025);
}

    .auth-security-note > i {
        color: #82a2ff;
        font-size: 1.15rem;
    }

    .auth-security-note strong {
        font-size: .7rem;
    }

    .auth-security-note p {
        margin: 7px 0 0;
        color: #8994a8;
        line-height: 1.8;
        font-size: .58rem;
    }

.auth-form-panel {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: 45px clamp(25px,7vw,100px);
    background: var(--app-surface-solid);
}

.auth-form-wrap {
    width: min(100%,440px);
}

    .auth-form-wrap.is-wide {
        width: min(100%,650px);
    }

    .auth-form-wrap > header {
        margin-bottom: 28px;
    }

        .auth-form-wrap > header > small {
            color: var(--app-primary);
            font-size: .64rem;
            font-weight: 700;
        }

    .auth-form-wrap h2 {
        margin: 8px 0 8px;
        font-size: 1.65rem;
        font-weight: 850;
    }

    .auth-form-wrap header p {
        margin: 0;
        color: var(--app-muted);
        font-size: .7rem;
    }

.auth-mobile-brand {
    display: none;
}

.enterprise-form {
    display: grid;
    gap: 17px;
}

    .enterprise-form > label, .auth-form-grid > label {
        display: grid;
        gap: 7px;
        margin: 0;
        color: var(--app-text);
        font-size: .65rem;
        font-weight: 650;
    }

    .enterprise-form label > span small {
        color: var(--app-muted);
        font-weight: 400;
    }

.auth-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 13px;
}

.auth-input {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 13px;
    background: var(--app-elevated);
    border: 1px solid var(--app-border);
    border-radius: 9px;
    transition: .2s;
}

    .auth-input:focus-within {
        background: var(--app-surface-solid);
        border-color: var(--app-primary);
        box-shadow: 0 0 0 3px color-mix(in srgb,var(--app-primary) 12%,transparent);
    }

    .auth-input > i {
        width: 20px;
        color: var(--app-muted);
    }

    .auth-input input {
        width: 100%;
        height: 46px;
        padding: 0 8px;
        color: var(--app-text);
        background: transparent;
        border: 0;
        outline: 0;
        font: inherit;
        font-size: .72rem;
    }

    .auth-input button {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        padding: 0;
        color: var(--app-muted);
        background: transparent;
        border: 0;
    }

.auth-code-input input {
    direction: ltr;
    text-align: center;
    font-size: 1.25rem;
    letter-spacing: 10px;
    font-weight: 800;
}

.auth-form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .auth-form-options > a {
        color: var(--app-primary);
        font-size: .62rem;
        text-decoration: none;
    }

.auth-check {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 8px !important;
    color: var(--app-muted) !important;
    font-size: .61rem !important;
    font-weight: 500 !important;
    cursor: pointer;
}

    .auth-check input {
        position: absolute;
        opacity: 0;
    }

    .auth-check > span {
        width: 17px;
        height: 17px;
        display: grid;
        place-items: center;
        border: 1px solid var(--app-border);
        border-radius: 5px;
        background: var(--app-elevated);
    }

    .auth-check input:checked + span {
        background: var(--app-primary);
        border-color: var(--app-primary);
    }

        .auth-check input:checked + span::after {
            content: "✓";
            color: #fff;
            font-size: .6rem;
        }

.auth-terms {
    align-items: flex-start;
    line-height: 1.8;
}

.auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 49px;
    padding: 11px 17px;
    color: #fff;
    background: var(--app-primary);
    border: 0;
    border-radius: 9px;
    font-size: .72rem;
    font-weight: 750;
    transition: .2s;
}

    .auth-submit > i:last-child {
        margin-right: auto;
    }

    .auth-submit:hover {
        background: var(--app-primary-2);
        transform: translateY(-1px);
    }

    .auth-submit:disabled {
        opacity: .65;
        transform: none;
    }

    .auth-submit.is-loading > i {
        animation: dashboard-spin .7s linear infinite;
    }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 15px;
    color: var(--app-muted);
    font-size: .58rem;
}

    .auth-divider::before, .auth-divider::after {
        content: "";
        height: 1px;
        flex: 1;
        background: var(--app-border);
    }

.auth-secondary-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-radius: 9px;
    text-decoration: none;
    font-size: .68rem;
    font-weight: 650;
}

    .auth-secondary-action:hover {
        color: var(--app-primary);
        border-color: var(--app-primary);
    }

    .auth-secondary-action i {
        margin-right: auto;
        margin-left: 15px;
    }

.auth-legal {
    margin: 22px 0 0;
    text-align: center;
    color: var(--app-muted);
    font-size: .53rem;
    line-height: 1.8;
}

.auth-text-button {
    padding: 5px;
    color: var(--app-primary);
    background: transparent;
    border: 0;
    font-size: .62rem;
}

.password-strength .progress {
    height: 4px;
    background: var(--app-border);
}

.password-strength small, #passwordMatch, #referralStatus {
    color: var(--app-muted);
    font-size: .55rem;
}

.reset-steps {
    display: grid;
    grid-template-columns: 1fr 30px 1fr;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
}

    .reset-steps > span {
        display: flex;
        align-items: center;
        gap: 7px;
        color: var(--app-muted);
        font-size: .56rem;
    }

    .reset-steps b {
        width: 23px;
        height: 23px;
        display: grid;
        place-items: center;
        background: var(--app-elevated);
        border: 1px solid var(--app-border);
        border-radius: 50%;
    }

    .reset-steps span.active {
        color: var(--app-primary);
        font-weight: 700;
    }

        .reset-steps span.active b {
            color: #fff;
            background: var(--app-primary);
            border-color: var(--app-primary);
        }

    .reset-steps > i {
        height: 1px;
        background: var(--app-border);
    }

.auth-theme-toggle {
    top: 18px;
    left: 18px;
    width: 39px;
    height: 39px;
    color: var(--app-text);
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 9px;
    box-shadow: var(--app-shadow-sm);
}

/* Command center dashboard */
.dashboard-v3 {
    max-width: 1680px;
    margin: auto;
}

.command-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 8px 0 24px;
    border-bottom: 1px solid var(--app-border);
}

    .command-header h1 {
        margin: 5px 0 7px;
        font-size: 1.65rem;
        font-weight: 850;
    }

        .command-header h1 span {
            color: var(--app-primary);
        }

    .command-header p {
        margin: 0;
        color: var(--app-muted);
        font-size: .7rem;
    }

.command-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.system-health {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 7px 11px;
    color: var(--app-success);
    background: color-mix(in srgb,var(--app-success) 8%,var(--app-surface-solid));
    border: 1px solid color-mix(in srgb,var(--app-success) 22%,var(--app-border));
    border-radius: 8px;
    font-size: .59rem;
}

    .system-health i {
        width: 7px;
        height: 7px;
        background: currentColor;
        border-radius: 50%;
    }

    .system-health.is-warning {
        color: var(--app-warning);
    }

    .system-health.is-danger {
        color: var(--app-danger);
    }

.command-kpis {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 13px;
    margin: 20px 0;
}

.decision-kpi {
    display: grid;
    grid-template-columns: 45px minmax(0,1fr) 12px;
    align-items: center;
    gap: 12px;
    min-height: 105px;
    padding: 17px;
    color: var(--app-text);
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    text-decoration: none;
    box-shadow: var(--app-shadow-sm);
    transition: .2s;
}

    .decision-kpi:hover {
        color: var(--app-text);
        border-color: color-mix(in srgb,var(--kpi) 32%,var(--app-border));
        transform: translateY(-2px);
    }

    .decision-kpi.is-neutral {
        --kpi: #536273;
    }

    .decision-kpi.is-primary {
        --kpi: var(--app-primary);
    }

    .decision-kpi.is-success {
        --kpi: var(--app-success);
    }

    .decision-kpi.is-blue {
        --kpi: #1478b8;
    }

.decision-kpi-icon {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    color: var(--kpi);
    background: color-mix(in srgb,var(--kpi) 9%,var(--app-surface-solid));
    border-radius: 10px;
}

.decision-kpi span small, .decision-kpi span strong, .decision-kpi span em {
    display: block;
}

.decision-kpi span small {
    color: var(--app-muted);
    font-size: .61rem;
}

.decision-kpi span strong {
    margin: 6px 0 4px;
    font-size: 1.14rem;
    font-weight: 850;
    direction: ltr;
    text-align: right;
}

.decision-kpi span em {
    color: var(--app-muted);
    font-size: .53rem;
    font-style: normal;
}

.decision-kpi > i {
    color: var(--app-muted);
    font-size: .62rem;
}

.command-grid {
    display: grid;
    gap: 15px;
    margin-bottom: 15px;
}

.command-grid-primary {
    grid-template-columns: minmax(0,1.7fr) minmax(310px,.8fr);
}

.command-grid-insight {
    grid-template-columns: minmax(0,1.35fr) minmax(360px,.85fr);
}

.command-card {
    color: var(--app-text);
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 13px;
    box-shadow: var(--app-shadow-sm);
    overflow: hidden;
}

.command-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 70px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--app-border);
}

    .command-card-header > div {
        display: flex;
        align-items: center;
        gap: 11px;
    }

    .command-card-header h2 {
        margin: 0 0 4px;
        font-size: .78rem;
        font-weight: 800;
    }

    .command-card-header p {
        margin: 0;
        color: var(--app-muted);
        font-size: .55rem;
    }

    .command-card-header > b {
        padding: 5px 8px;
        color: var(--app-warning);
        background: color-mix(in srgb,var(--app-warning) 8%,transparent);
        border-radius: 6px;
        font-size: .55rem;
    }

    .command-card-header > a {
        color: var(--app-primary);
        font-size: .58rem;
        text-decoration: none;
    }

.command-card-icon {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    color: #536273;
    background: var(--app-elevated);
    border-radius: 8px;
}

    .command-card-icon.is-warning {
        color: var(--app-warning);
        background: color-mix(in srgb,var(--app-warning) 9%,transparent);
    }

    .command-card-icon.is-primary {
        color: var(--app-primary);
        background: var(--app-primary-soft);
    }

    .command-card-icon.is-blue {
        color: #1478b8;
        background: rgba(20,120,184,.09);
    }

    .command-card-icon.is-success {
        color: var(--app-success);
        background: color-mix(in srgb,var(--app-success) 9%,transparent);
    }

.attention-list {
    padding: 6px 10px;
    max-height: 355px;
    overflow: auto;
}

.attention-item {
    display: grid;
    grid-template-columns: 37px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 8px;
    color: var(--app-text);
    text-decoration: none;
    border-bottom: 1px solid var(--app-border);
}

    .attention-item:last-child {
        border-bottom: 0;
    }

    .attention-item:hover {
        color: var(--app-text);
        background: var(--app-elevated);
    }

    .attention-item > span {
        width: 35px;
        height: 35px;
        display: grid;
        place-items: center;
        color: var(--tone);
        background: color-mix(in srgb,var(--tone) 9%,transparent);
        border-radius: 8px;
    }

    .attention-item.is-warning {
        --tone: var(--app-warning);
    }

    .attention-item.is-danger {
        --tone: var(--app-danger);
    }

    .attention-item.is-primary {
        --tone: var(--app-primary);
    }

    .attention-item.is-blue {
        --tone: #1478b8;
    }

    .attention-item.is-neutral {
        --tone: #667085;
    }

    .attention-item strong, .attention-item small {
        display: block;
    }

    .attention-item strong {
        font-size: .65rem;
    }

    .attention-item small {
        margin-top: 4px;
        color: var(--app-muted);
        font-size: .54rem;
    }

    .attention-item > b {
        color: var(--app-primary);
        font-size: .55rem;
        font-weight: 650;
    }

        .attention-item > b i {
            margin-right: 6px;
        }

.attention-clear {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 170px;
    justify-content: center;
    text-align: right;
}

    .attention-clear > span {
        width: 43px;
        height: 43px;
        display: grid;
        place-items: center;
        color: var(--app-success);
        background: color-mix(in srgb,var(--app-success) 10%,transparent);
        border-radius: 50%;
    }

    .attention-clear strong, .attention-clear small {
        display: block;
    }

    .attention-clear strong {
        font-size: .7rem;
    }

    .attention-clear small {
        margin-top: 5px;
        color: var(--app-muted);
        font-size: .55rem;
    }

.quick-actions {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px;
    padding: 13px;
}

    .quick-actions a {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 76px;
        padding: 12px;
        color: var(--app-text);
        background: var(--app-elevated);
        border: 1px solid transparent;
        border-radius: 9px;
        text-decoration: none;
    }

        .quick-actions a:hover {
            border-color: var(--app-primary);
            background: var(--app-primary-soft);
        }

    .quick-actions > a > i {
        width: 31px;
        height: 31px;
        display: grid;
        place-items: center;
        color: var(--app-primary);
        background: var(--app-surface-solid);
        border-radius: 8px;
    }

    .quick-actions strong, .quick-actions small {
        display: block;
    }

    .quick-actions strong {
        font-size: .63rem;
    }

    .quick-actions small {
        margin-top: 4px;
        color: var(--app-muted);
        font-size: .51rem;
    }

.continuity-card {
    margin-bottom: 15px;
}

.continuity-table {
    overflow-x: auto;
}

.continuity-head, .continuity-row {
    display: grid;
    grid-template-columns: minmax(260px,2fr) minmax(105px,.65fr) minmax(145px,.8fr) minmax(100px,.65fr) 12px;
    align-items: center;
    gap: 12px;
    min-width: 780px;
}

.continuity-head {
    padding: 9px 18px;
    color: var(--app-muted);
    background: var(--app-elevated);
    font-size: .53rem;
}

.continuity-row {
    padding: 11px 18px;
    color: var(--app-text);
    text-decoration: none;
    border-top: 1px solid var(--app-border);
}

    .continuity-row:hover {
        color: var(--app-text);
        background: var(--app-elevated);
    }

.continuity-project {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

    .continuity-project > i {
        width: 35px;
        height: 35px;
        flex: 0 0 35px;
        display: grid;
        place-items: center;
        color: var(--app-primary);
        background: var(--app-primary-soft);
        border-radius: 8px;
    }

    .continuity-project span {
        min-width: 0;
    }

    .continuity-project strong, .continuity-project small {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .continuity-project strong {
        font-size: .65rem;
    }

    .continuity-project small {
        margin-top: 4px;
        color: var(--app-muted);
        font-size: .51rem;
    }

.status-dot, .knowledge-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: .53rem;
    font-weight: 650;
}

    .status-dot.is-success, .knowledge-state.is-ready {
        color: var(--app-success);
        background: color-mix(in srgb,var(--app-success) 9%,transparent);
    }

    .status-dot.is-primary {
        color: var(--app-primary);
        background: var(--app-primary-soft);
    }

    .status-dot.is-warning, .knowledge-state.is-building {
        color: var(--app-warning);
        background: color-mix(in srgb,var(--app-warning) 9%,transparent);
    }

    .status-dot.is-neutral, .knowledge-state {
        color: var(--app-muted);
        background: var(--app-elevated);
    }

.continuity-row time {
    color: var(--app-muted);
    font-size: .54rem;
}

.usage-summary {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1px;
    margin: 14px 18px 0;
    background: var(--app-border);
    border: 1px solid var(--app-border);
    border-radius: 9px;
    overflow: hidden;
}

    .usage-summary span {
        padding: 10px;
        background: var(--app-elevated);
    }

    .usage-summary small, .usage-summary strong {
        display: block;
    }

    .usage-summary small {
        color: var(--app-muted);
        font-size: .5rem;
    }

    .usage-summary strong {
        margin-top: 5px;
        font-size: .68rem;
        direction: ltr;
        text-align: right;
    }

.command-chart {
    display: block;
    width: calc(100% - 24px);
    height: 215px;
    margin: 10px 12px 6px;
}

.command-activity {
    max-height: 300px;
    overflow: auto;
}

.command-event {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 9px;
    padding: 10px 15px;
    border-bottom: 1px solid var(--app-border);
}

    .command-event > span {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        border-radius: 8px;
    }

        .command-event > span.is-success {
            color: var(--app-success);
            background: color-mix(in srgb,var(--app-success) 9%,transparent);
        }

        .command-event > span.is-danger {
            color: var(--app-danger);
            background: color-mix(in srgb,var(--app-danger) 9%,transparent);
        }

        .command-event > span.is-neutral {
            color: var(--app-muted);
            background: var(--app-elevated);
        }

    .command-event strong, .command-event small {
        display: block;
    }

    .command-event strong {
        font-size: .61rem;
    }

    .command-event small, .command-event time {
        margin-top: 3px;
        color: var(--app-muted);
        font-size: .5rem;
    }

.command-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 130px;
    color: var(--app-muted);
    font-size: .6rem;
}

.dashboard-sync {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 2px 0;
    color: var(--app-muted);
    font-size: .5rem;
}

/* Right-side project workspace */
.workspace-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1060;
    visibility: hidden;
    opacity: 0;
    background: rgba(7,12,21,.48);
    backdrop-filter: blur(2px);
    transition: .25s;
}

.workspace-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 1065;
    width: min(1120px,88vw);
    display: grid;
    grid-template-rows: auto auto minmax(0,1fr);
    color: var(--app-text);
    background: var(--app-bg);
    border-left: 1px solid var(--app-border);
    box-shadow: -25px 0 70px rgba(0,0,0,.18);
    transform: translateX(102%);
    transition: transform .32s cubic-bezier(.22,.8,.24,1);
}

    .workspace-drawer.is-open {
        transform: translateX(0);
    }

.project-workspace-open {
    overflow: hidden;
}

    .project-workspace-open .workspace-backdrop {
        visibility: visible;
        opacity: 1;
    }

.workspace-header {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) 38px;
    align-items: center;
    gap: 12px;
    min-height: 78px;
    padding: 13px 18px;
    background: var(--app-surface-solid);
    border-bottom: 1px solid var(--app-border);
}

.workspace-project-mark {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--app-primary);
    border-radius: 10px;
}

.workspace-heading {
    min-width: 0;
}

    .workspace-heading > span {
        color: var(--app-primary);
        font-size: .52rem;
        text-transform: uppercase;
        letter-spacing: .8px;
    }

    .workspace-heading h2 {
        margin: 4px 0 3px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: .9rem;
    }

    .workspace-heading p {
        margin: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: var(--app-muted);
        font-size: .55rem;
    }

.workspace-close {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--app-muted);
    background: var(--app-elevated);
    border: 1px solid var(--app-border);
    border-radius: 8px;
}

.workspace-tabs {
    display: flex;
    gap: 5px;
    padding: 8px 18px;
    overflow-x: auto;
    background: var(--app-surface-solid);
    border-bottom: 1px solid var(--app-border);
}

    .workspace-tabs button {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-width: 150px;
        min-height: 41px;
        padding: 8px 13px;
        color: var(--app-muted);
        background: transparent;
        border: 0;
        border-radius: 8px;
        font-size: .63rem;
        font-weight: 650;
    }

        .workspace-tabs button:hover {
            color: var(--app-text);
            background: var(--app-elevated);
        }

        .workspace-tabs button.active {
            color: var(--app-primary);
            background: var(--app-primary-soft);
        }

        .workspace-tabs button b {
            min-width: 21px;
            padding: 2px 5px;
            color: var(--app-muted);
            background: var(--app-elevated);
            border-radius: 99px;
            font-size: .49rem;
        }

            .workspace-tabs button b.is-ready {
                color: var(--app-success);
                background: color-mix(in srgb,var(--app-success) 10%,transparent);
            }

.workspace-body {
    min-height: 0;
    overflow: hidden;
}

.workspace-pane {
    display: none;
    height: 100%;
    overflow: auto;
    padding: 18px;
}

    .workspace-pane.active {
        display: block;
        animation: workspace-in .2s ease;
    }

@keyframes workspace-in {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
}

.workspace-chat-pane.active {
    display: grid;
    grid-template-rows: auto minmax(260px,1fr) auto auto;
    overflow: hidden;
    padding: 0;
    background: var(--app-surface-solid);
}

#workspaceFilesHost #projectFilesSection {
    display: block !important;
    margin: 0 !important;
    box-shadow: none;
}

.workspace-drawer #projectFilesPlaceholder {
    display: none !important;
}

.workspace-drawer .project-knowledge-card .card-header {
    position: sticky;
    top: -18px;
    z-index: 5;
    background: var(--app-surface-solid) !important;
}

.workspace-drawer .table-responsive {
    max-height: none;
}

.workspace-loading, .workspace-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 220px;
    color: var(--app-muted);
    font-size: .62rem;
}

.workspace-error {
    color: var(--app-danger);
}

.knowledge-overview {
    display: grid;
    grid-template-columns: 72px minmax(0,1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 24px;
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 12px;
}

.knowledge-orbit {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border: 1px dashed color-mix(in srgb,var(--app-primary) 35%,var(--app-border));
    border-radius: 50%;
}

    .knowledge-orbit span {
        width: 45px;
        height: 45px;
        display: grid;
        place-items: center;
        color: var(--app-primary);
        background: var(--app-primary-soft);
        border-radius: 50%;
    }

.knowledge-overview.is-ready .knowledge-orbit span {
    color: var(--app-success);
    background: color-mix(in srgb,var(--app-success) 10%,transparent);
}

.knowledge-overview small {
    color: var(--app-primary);
    font-size: .54rem;
}

.knowledge-overview h3 {
    margin: 5px 0 6px;
    font-size: .9rem;
}

.knowledge-overview p {
    margin: 0;
    color: var(--app-muted);
    font-size: .59rem;
    line-height: 1.8;
}

.knowledge-actions {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 165px;
}

.knowledge-metrics {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    margin: 12px 0;
}

    .knowledge-metrics > div {
        padding: 15px;
        background: var(--app-surface-solid);
        border: 1px solid var(--app-border);
        border-radius: 10px;
    }

    .knowledge-metrics span, .knowledge-metrics strong {
        display: block;
    }

    .knowledge-metrics span {
        color: var(--app-muted);
        font-size: .52rem;
    }

    .knowledge-metrics strong {
        margin-top: 7px;
        font-size: .76rem;
    }

.knowledge-source-list {
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    overflow: hidden;
}

    .knowledge-source-list header {
        padding: 15px 18px;
        border-bottom: 1px solid var(--app-border);
    }

    .knowledge-source-list h4 {
        margin: 0 0 4px;
        font-size: .72rem;
    }

    .knowledge-source-list p {
        margin: 0;
        color: var(--app-muted);
        font-size: .52rem;
    }

.knowledge-source {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--app-border);
}

    .knowledge-source > i {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        color: var(--app-primary);
        background: var(--app-primary-soft);
        border-radius: 8px;
    }

    .knowledge-source strong, .knowledge-source small {
        display: block;
    }

    .knowledge-source strong {
        font-size: .61rem;
    }

    .knowledge-source small {
        margin-top: 3px;
        color: var(--app-muted);
        font-size: .49rem;
    }

    .knowledge-source > b {
        padding: 4px 7px;
        color: var(--app-muted);
        background: var(--app-elevated);
        border-radius: 5px;
        font-size: .48rem;
    }

/* Shared knowledge chat */
.knowledge-chat-status {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 18px;
    color: var(--app-warning);
    background: color-mix(in srgb,var(--app-warning) 6%,var(--app-surface-solid));
    border-bottom: 1px solid var(--app-border);
    font-size: .54rem;
}

    .knowledge-chat-status i {
        width: 6px;
        height: 6px;
        background: currentColor;
        border-radius: 50%;
    }

    .knowledge-chat-status.is-ready {
        color: var(--app-success);
        background: color-mix(in srgb,var(--app-success) 6%,var(--app-surface-solid));
    }

.knowledge-chat-messages {
    min-height: 0;
    overflow: auto;
    padding: 22px clamp(18px,4vw,50px);
    background: var(--app-bg);
}

.knowledge-chat-empty {
    display: grid;
    justify-items: center;
    align-content: center;
    min-height: 100%;
    padding: 45px 20px;
    text-align: center;
}

    .knowledge-chat-empty > span {
        width: 52px;
        height: 52px;
        display: grid;
        place-items: center;
        color: var(--app-primary);
        background: var(--app-primary-soft);
        border-radius: 13px;
    }

    .knowledge-chat-empty h3 {
        margin: 14px 0 7px;
        font-size: .82rem;
    }

    .knowledge-chat-empty p {
        max-width: 480px;
        margin: 0;
        color: var(--app-muted);
        font-size: .57rem;
        line-height: 1.9;
    }

.knowledge-message {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr);
    align-items: start;
    gap: 9px;
    max-width: 880px;
    margin: 0 auto 15px;
}

    .knowledge-message.is-user {
        direction: ltr;
    }

        .knowledge-message.is-user > * {
            direction: rtl;
        }

.knowledge-message-avatar {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #334155;
    border-radius: 8px;
    font-size: .65rem;
}

.knowledge-message.is-assistant .knowledge-message-avatar {
    background: var(--app-primary);
}

.knowledge-message.is-error .knowledge-message-avatar {
    background: var(--app-danger);
}

.knowledge-message-content {
    min-width: 0;
    padding: 12px 14px;
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 11px;
    box-shadow: 0 2px 8px rgba(18,28,45,.035);
    font-size: .66rem;
    line-height: 1.95;
}

.knowledge-message.is-user .knowledge-message-content {
    color: #fff;
    background: var(--app-primary);
    border-color: var(--app-primary);
}

.knowledge-message.is-error .knowledge-message-content {
    color: var(--app-danger);
}

.knowledge-message-content > footer {
    display: flex;
    gap: 10px;
    padding-top: 8px;
    margin-top: 8px;
    color: var(--app-muted);
    border-top: 1px solid var(--app-border);
    font-size: .48rem;
}

.knowledge-message.is-user footer {
    color: rgba(255,255,255,.65);
    border-color: rgba(255,255,255,.16);
}

.knowledge-citations {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-top: 9px;
    margin-top: 9px;
    border-top: 1px dashed var(--app-border);
}

    .knowledge-citations small {
        width: 100%;
        color: var(--app-muted);
        font-size: .49rem;
    }

    .knowledge-citations span {
        padding: 4px 7px;
        color: var(--app-primary);
        background: var(--app-primary-soft);
        border-radius: 5px;
        font-size: .48rem;
    }

.knowledge-chat-suggestions {
    display: flex;
    gap: 6px;
    padding: 8px 18px;
    overflow-x: auto;
    background: var(--app-surface-solid);
    border-top: 1px solid var(--app-border);
}

    .knowledge-chat-suggestions button {
        flex: 0 0 auto;
        padding: 7px 10px;
        color: var(--app-muted);
        background: var(--app-elevated);
        border: 1px solid var(--app-border);
        border-radius: 7px;
        font-size: .52rem;
    }

        .knowledge-chat-suggestions button:hover {
            color: var(--app-primary);
            border-color: var(--app-primary);
        }

    .knowledge-chat-suggestions.is-disabled {
        opacity: .45;
        pointer-events: none;
    }

.knowledge-chat-composer {
    display: grid;
    grid-template-columns: minmax(0,1fr) 39px;
    gap: 8px;
    padding: 11px 18px 14px;
    background: var(--app-surface-solid);
}

    .knowledge-chat-composer textarea {
        min-height: 43px;
        max-height: 150px;
        padding: 11px 13px;
        color: var(--app-text);
        background: var(--app-elevated);
        border: 1px solid var(--app-border);
        border-radius: 9px;
        outline: 0;
        resize: none;
        font: inherit;
        font-size: .63rem;
    }

        .knowledge-chat-composer textarea:focus {
            border-color: var(--app-primary);
        }

    .knowledge-chat-composer button {
        width: 39px;
        height: 39px;
        align-self: end;
        color: #fff;
        background: var(--app-primary);
        border: 0;
        border-radius: 9px;
    }

.knowledge-typing {
    display: flex;
    gap: 4px;
    padding: 5px 0;
}

    .knowledge-typing i {
        width: 6px;
        height: 6px;
        background: var(--app-muted);
        border-radius: 50%;
        animation: knowledge-dot 1s infinite alternate;
    }

        .knowledge-typing i:nth-child(2) {
            animation-delay: .2s
        }

        .knowledge-typing i:nth-child(3) {
            animation-delay: .4s
        }

@keyframes knowledge-dot {
    to {
        opacity: .25;
        transform: translateY(-3px)
    }
}

.profile-knowledge-chat {
    height: min(720px,calc(100dvh - 210px));
    min-height: 520px;
    display: grid;
    grid-template-rows: auto minmax(260px,1fr) auto auto;
    overflow: hidden;
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 13px;
    box-shadow: var(--app-shadow-sm);
}

    .profile-knowledge-chat > header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        padding: 17px 20px;
        border-bottom: 1px solid var(--app-border);
    }

    .profile-knowledge-chat header h3 {
        margin: 3px 0 5px;
        font-size: .82rem;
    }

    .profile-knowledge-chat header p {
        margin: 0;
        color: var(--app-muted);
        font-size: .54rem;
    }

    .profile-knowledge-chat header .knowledge-chat-status {
        min-height: auto;
        padding: 7px 9px;
        border: 1px solid currentColor;
        border-radius: 7px;
    }

/* Rich LLM output */
.ai-rich-response {
    direction: rtl;
    color: inherit;
    overflow-wrap: anywhere;
}

    .ai-rich-response > :first-child {
        margin-top: 0;
    }

    .ai-rich-response > :last-child {
        margin-bottom: 0;
    }

    .ai-rich-response p {
        margin: 0 0 .85em;
    }

    .ai-rich-response h2, .ai-rich-response h3, .ai-rich-response h4, .ai-rich-response h5, .ai-rich-response h6 {
        margin: 1.35em 0 .55em;
        color: var(--app-text);
        line-height: 1.65;
        font-weight: 800;
    }

    .ai-rich-response h2 {
        font-size: 1.05rem;
    }

    .ai-rich-response h3 {
        font-size: .92rem;
    }

    .ai-rich-response h4 {
        font-size: .8rem;
    }

    .ai-rich-response ul, .ai-rich-response ol {
        margin: .55em 0 1em;
        padding-right: 1.4em;
    }

    .ai-rich-response li {
        margin: .35em 0;
    }

    .ai-rich-response blockquote {
        margin: 1em 0;
        padding: 10px 13px;
        color: var(--app-muted);
        background: var(--app-elevated);
        border-right: 3px solid var(--app-primary);
        border-radius: 6px 0 0 6px;
    }

    .ai-rich-response a {
        color: var(--app-primary);
        text-decoration: none;
    }

        .ai-rich-response a i {
            margin-right: 4px;
            font-size: .7em;
        }

    .ai-rich-response code {
        padding: .15em .4em;
        direction: ltr;
        color: #b4235a;
        background: color-mix(in srgb,#b4235a 8%,var(--app-elevated));
        border: 1px solid color-mix(in srgb,#b4235a 12%,var(--app-border));
        border-radius: 4px;
        font-family: Consolas,monospace;
    }

.ai-code {
    margin: 1em 0;
    overflow: hidden;
    background: #0d1420;
    border: 1px solid #263346;
    border-radius: 9px;
    direction: ltr;
}

    .ai-code figcaption {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 34px;
        padding: 6px 10px;
        color: #9aa8ba;
        background: #141d2b;
        border-bottom: 1px solid #263346;
        font-size: .55rem;
    }

        .ai-code figcaption span {
            display: flex;
            gap: 7px;
            align-items: center;
        }

    .ai-code button {
        color: #b8c3d2;
        background: transparent;
        border: 0;
        font-size: .53rem;
    }

    .ai-code pre {
        max-height: 480px;
        margin: 0;
        padding: 14px;
        overflow: auto;
        color: #dbe4ef;
        text-align: left;
        white-space: pre;
    }

        .ai-code pre code {
            padding: 0;
            color: inherit;
            background: none;
            border: 0;
            font-size: .65rem;
            line-height: 1.75;
        }

.ai-table-wrap {
    margin: 1em 0;
    overflow: auto;
    border: 1px solid var(--app-border);
    border-radius: 8px;
}

    .ai-table-wrap table {
        width: 100%;
        min-width: 420px;
        border-collapse: collapse;
    }

    .ai-table-wrap th, .ai-table-wrap td {
        padding: 8px 10px;
        text-align: right;
        border-bottom: 1px solid var(--app-border);
    }

    .ai-table-wrap th {
        background: var(--app-elevated);
        font-weight: 750;
    }

.ai-reasoning {
    margin: 1em 0;
    color: var(--app-muted);
    background: var(--app-elevated);
    border: 1px solid var(--app-border);
    border-radius: 8px;
}

    .ai-reasoning summary {
        padding: 9px 11px;
        cursor: pointer;
        font-weight: 650;
    }

    .ai-reasoning > div {
        padding: 0 11px 11px;
    }

.ai-task {
    list-style: none;
}

    .ai-task > span {
        display: inline-grid;
        place-items: center;
        width: 15px;
        height: 15px;
        margin-left: 6px;
        border: 1px solid var(--app-border);
        border-radius: 4px;
    }

    .ai-task.is-done > span {
        color: #fff;
        background: var(--app-success);
        border-color: var(--app-success);
    }

    .ai-task.is-done {
        color: var(--app-muted);
        text-decoration: line-through;
    }

.ai-citation-ref {
    margin: 0 2px;
    color: var(--app-primary);
}

.ai-rich-response dl {
    display: grid;
    grid-template-columns: minmax(90px,.3fr) 1fr;
    gap: 8px;
    margin: .6em 0;
}

.ai-rich-response dt {
    font-weight: 750;
}

.ai-rich-response dd {
    margin: 0;
    color: var(--app-muted);
}

.ai-image-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ct-message-text .ai-rich-response {
    font-size: inherit;
}

    .ct-message-text .ai-rich-response p {
        white-space: normal;
    }

/* Profile and project finish */
.profile-hero {
    border-radius: 13px;
    box-shadow: var(--app-shadow-sm);
    background: var(--app-surface-solid);
}

.profile-hero-mark {
    border-radius: 10px;
    background: var(--app-primary);
    box-shadow: none;
}

.profile-tabs {
    border-radius: 11px;
    box-shadow: var(--app-shadow-sm);
}

    .profile-tabs button {
        border-radius: 7px;
    }

        .profile-tabs button.active {
            background: var(--app-primary);
            box-shadow: none;
        }

.project-card {
    border-radius: 12px !important;
}

    .project-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: var(--app-shadow) !important;
    }

@media (max-width:1199.98px) {
    .command-kpis {
        grid-template-columns: repeat(2,1fr);
    }

    .command-grid-primary, .command-grid-insight {
        grid-template-columns: 1fr;
    }

    .auth-shell {
        grid-template-columns: minmax(340px,38%) 1fr;
    }

    .auth-capabilities {
        grid-template-columns: 1fr;
    }

        .auth-capabilities > div {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .auth-capabilities i {
            margin: 0;
        }
}

@media (max-width:991.98px) {
    .app-page .main-content {
        margin-right: 0 !important;
    }

    .auth-shell {
        display: block;
    }

    .auth-brand-panel {
        display: none;
    }

    .auth-form-panel {
        min-height: 100dvh;
        padding: 70px 22px 35px;
    }

    .auth-mobile-brand {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 25px;
        color: var(--app-primary);
        font-weight: 800;
    }

    .workspace-drawer {
        width: min(100%,780px);
    }

    .command-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .knowledge-overview {
        grid-template-columns: 60px 1fr;
    }

    .knowledge-actions {
        grid-column: 1/-1;
        flex-direction: row;
    }

    .knowledge-metrics {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width:767.98px) {
    .dashboard-v3 {
        padding: 14px !important;
    }

    .command-kpis {
        grid-template-columns: 1fr;
    }

    .decision-kpi {
        min-height: 92px;
    }

    .quick-actions {
        grid-template-columns: 1fr;
    }

    .usage-summary {
        grid-template-columns: repeat(2,1fr);
    }

    .dashboard-sync {
        flex-direction: column;
    }

    .workspace-drawer {
        width: 100%;
    }

    .workspace-header {
        padding-inline: 12px;
    }

    .workspace-tabs {
        padding-inline: 10px;
    }

        .workspace-tabs button {
            min-width: 125px;
        }

    .workspace-pane {
        padding: 12px;
    }

    .knowledge-overview {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .knowledge-orbit {
        margin: auto;
    }

    .knowledge-actions {
        flex-direction: column;
    }

    .knowledge-metrics {
        gap: 7px;
    }

        .knowledge-metrics > div {
            padding: 11px;
        }

    .profile-knowledge-chat {
        height: calc(100dvh - 170px);
        min-height: 500px;
    }

        .profile-knowledge-chat > header {
            align-items: flex-start;
            flex-direction: column;
        }

    .knowledge-chat-messages {
        padding: 15px 10px;
    }

    .knowledge-message {
        grid-template-columns: 29px 1fr;
        gap: 6px;
    }

    .knowledge-message-avatar {
        width: 28px;
        height: 28px;
    }

    .knowledge-message-content {
        padding: 10px;
    }

    .auth-form-grid {
        grid-template-columns: 1fr;
    }

    .auth-form-panel {
        display: block;
    }

    .auth-form-wrap {
        margin: auto;
    }

        .auth-form-wrap h2 {
            font-size: 1.35rem;
        }

    .continuity-card {
        margin-inline: -1px;
    }
}

/* ──────────────────────────────────────────────────────────────────────
   Unified page surfaces — final overrides for every protected HTML page
   ────────────────────────────────────────────────────────────────────── */
.app-page .main-content > .container-fluid {
    min-height: calc(100dvh - 72px);
    width: 100%;
    color: var(--app-text);
    background: transparent !important;
}

.app-page .bg-white,
.app-page .bg-light {
    background-color: var(--app-surface-solid) !important;
}

.app-page .text-dark {
    color: var(--app-text) !important;
}

.app-page hr,
.app-page .border,
.app-page .border-top,
.app-page .border-bottom {
    border-color: var(--app-border) !important;
}

.app-page .alert-info {
    color: var(--app-text);
    background: color-mix(in srgb, var(--app-primary) 10%, var(--app-surface-solid));
    border-color: color-mix(in srgb, var(--app-primary) 28%, var(--app-border));
}

.app-page .stat-mini-card,
.app-page .apikey-card,
.app-page .stat-box,
.app-page .submit-step,
.app-page .project-access-picker,
.app-page .wallet-address-box,
.app-page .raw-key-warning {
    color: var(--app-text);
    background: var(--app-surface-solid) !important;
    border-color: var(--app-border) !important;
}

    .app-page .stat-mini-card:hover,
    .app-page .apikey-card:hover {
        box-shadow: var(--app-shadow-sm);
    }

.app-page .project-access-item {
    color: var(--app-text);
    border-color: transparent;
}

    .app-page .project-access-item:hover {
        background: var(--app-elevated) !important;
    }

.app-page .wallet-address-text,
.app-page .raw-key-box,
.app-page .key-prefix-box {
    color: var(--app-text) !important;
    background: var(--app-elevated) !important;
    border-color: var(--app-border) !important;
}

.app-page .empty-state-icon {
    background: var(--app-primary-soft) !important;
}

:root[data-theme="dark"] .app-page .btn-close {
    filter: invert(1) grayscale(1);
}

:root[data-theme="dark"] .app-page .table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--app-elevated);
    color: var(--app-text);
}

/* Dashboard */
.dashboard-v2 {
    max-width: 1680px;
    margin-inline: auto;
}

.dashboard-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 168px;
    padding: 30px 34px;
    overflow: hidden;
    color: #fff;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 28px;
    background: linear-gradient(125deg,#4f46e5 0%,#7557ef 54%,#9333ea 100%);
    box-shadow: 0 22px 55px rgba(79,70,229,.22);
}

    .dashboard-hero::after {
        content: "";
        position: absolute;
        width: 340px;
        height: 340px;
        left: -80px;
        top: -190px;
        border: 60px solid rgba(255,255,255,.07);
        border-radius: 50%;
    }

    .dashboard-hero > * {
        position: relative;
        z-index: 1;
    }

    .dashboard-hero h1 {
        margin: 7px 0 9px;
        font-size: clamp(1.3rem,2.3vw,2rem);
        font-weight: 850;
    }

    .dashboard-hero p {
        margin: 0;
        color: rgba(255,255,255,.76);
        font-size: .82rem;
    }

    .dashboard-hero .page-eyebrow {
        color: #ddd9ff;
    }

.dashboard-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .dashboard-hero-actions small {
        color: rgba(255,255,255,.72);
    }

    .dashboard-hero-actions .app-icon-button {
        color: #fff;
        background: rgba(255,255,255,.13);
        border-color: rgba(255,255,255,.2);
    }

    .dashboard-hero-actions .is-loading i {
        animation: dashboard-spin .75s linear infinite;
    }

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

.dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;
}

.dashboard-kpi {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 126px;
    padding: 20px;
    color: var(--app-text);
    text-decoration: none;
    overflow: hidden;
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 21px;
    box-shadow: var(--app-shadow-sm);
    transition: .22s ease;
}

    .dashboard-kpi:hover {
        color: var(--app-text);
        transform: translateY(-3px);
        border-color: color-mix(in srgb,var(--kpi-color) 32%,var(--app-border));
    }

    .dashboard-kpi::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 4px;
        background: var(--kpi-color);
    }

    .dashboard-kpi.is-primary {
        --kpi-color: var(--app-primary);
        --kpi-soft: var(--app-primary-soft);
    }

    .dashboard-kpi.is-success {
        --kpi-color: #10b981;
        --kpi-soft: rgba(16,185,129,.12);
    }

    .dashboard-kpi.is-violet {
        --kpi-color: #8b5cf6;
        --kpi-soft: rgba(139,92,246,.12);
    }

    .dashboard-kpi.is-cyan {
        --kpi-color: #0891b2;
        --kpi-soft: rgba(8,145,178,.12);
    }

    .dashboard-kpi.is-amber {
        --kpi-color: #f59e0b;
        --kpi-soft: rgba(245,158,11,.12);
    }

    .dashboard-kpi.is-rose {
        --kpi-color: #f43f5e;
        --kpi-soft: rgba(244,63,94,.12);
    }

.dashboard-kpi-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    color: var(--kpi-color);
    background: var(--kpi-soft);
    border-radius: 15px;
    font-size: 1.05rem;
}

.dashboard-kpi-copy {
    min-width: 0;
    flex: 1;
}

    .dashboard-kpi-copy small, .dashboard-kpi-copy strong, .dashboard-kpi-copy em {
        display: block;
    }

    .dashboard-kpi-copy small {
        color: var(--app-muted);
        font-size: .7rem;
    }

    .dashboard-kpi-copy strong {
        margin: 5px 0 4px;
        font-size: 1.3rem;
        font-weight: 850;
        direction: ltr;
        text-align: right;
    }

    .dashboard-kpi-copy em {
        color: var(--app-muted);
        font-size: .62rem;
        font-style: normal;
    }

.dashboard-kpi-arrow {
    color: var(--app-muted);
    font-size: .7rem;
}

.dashboard-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 19px 21px !important;
}

    .dashboard-card-heading h5 {
        margin: 0 0 4px;
        font-size: .88rem;
        font-weight: 800;
    }

    .dashboard-card-heading small {
        color: var(--app-muted);
        font-size: .64rem;
    }

    .dashboard-card-heading a {
        color: var(--app-primary);
        font-size: .69rem;
        text-decoration: none;
    }

.dashboard-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    color: var(--app-success);
    background: color-mix(in srgb,var(--app-success) 10%,transparent);
    border-radius: 99px;
    font-size: .61rem;
    direction: ltr;
}

    .dashboard-live-pill i {
        width: 6px;
        height: 6px;
        background: currentColor;
        border-radius: 50%;
        box-shadow: 0 0 0 4px color-mix(in srgb,currentColor 13%,transparent);
    }

.dashboard-canvas {
    display: block;
    width: 100%;
    height: 285px;
}

    .dashboard-canvas.is-compact {
        height: 240px;
    }

.dashboard-chart-legend {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-bottom: 6px;
    color: var(--app-muted);
    font-size: .63rem;
}

    .dashboard-chart-legend i {
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-left: 5px;
        border-radius: 50%;
    }

    .dashboard-chart-legend .is-primary {
        background: var(--app-primary);
    }

    .dashboard-chart-legend .is-secondary {
        background: #22d3ee;
    }

.dashboard-donut-layout {
    display: grid;
    grid-template-rows: 210px auto;
}

.dashboard-donut {
    width: 100%;
    height: 210px;
}

.dashboard-status-legend {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 9px;
}

    .dashboard-status-legend span {
        display: grid;
        grid-template-columns: 8px 1fr auto;
        align-items: center;
        gap: 7px;
        padding: 8px 10px;
        background: var(--app-elevated);
        border-radius: 11px;
    }

    .dashboard-status-legend i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

        .dashboard-status-legend i.is-success {
            background: var(--app-success);
        }

        .dashboard-status-legend i.is-primary {
            background: var(--app-primary);
        }

        .dashboard-status-legend i.is-warning {
            background: #f59e0b;
        }

        .dashboard-status-legend i.is-muted {
            background: var(--app-muted);
        }

    .dashboard-status-legend small {
        color: var(--app-muted);
        font-size: .6rem;
    }

    .dashboard-status-legend strong {
        font-size: .7rem;
    }

.dashboard-activity {
    max-height: 330px;
    overflow: auto;
}

.dashboard-event {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 11px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--app-border);
}

    .dashboard-event:last-child {
        border-bottom: 0;
    }

.dashboard-event-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 12px;
}

    .dashboard-event-icon.is-success {
        color: var(--app-success);
        background: rgba(16,185,129,.11);
    }

    .dashboard-event-icon.is-danger {
        color: var(--app-danger);
        background: rgba(239,71,111,.11);
    }

    .dashboard-event-icon.is-violet {
        color: #8b5cf6;
        background: rgba(139,92,246,.11);
    }

.dashboard-event strong, .dashboard-event small {
    display: block;
}

.dashboard-event strong {
    font-size: .72rem;
}

.dashboard-event small, .dashboard-event time {
    color: var(--app-muted);
    font-size: .6rem;
    margin-top: 3px;
}

.dashboard-project-list {
    display: grid;
    gap: 8px;
}

.dashboard-project-item {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto 12px;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    color: var(--app-text);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 14px;
    transition: .2s ease;
}

    .dashboard-project-item:hover {
        color: var(--app-text);
        background: var(--app-elevated);
        border-color: var(--app-border);
    }

.dashboard-project-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: var(--app-primary);
    background: var(--app-primary-soft);
    border-radius: 12px;
}

.dashboard-project-item strong, .dashboard-project-item small {
    display: block;
}

.dashboard-project-item strong {
    font-size: .73rem;
}

.dashboard-project-item small {
    max-width: 560px;
    margin-top: 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--app-muted);
    font-size: .6rem;
}

.dashboard-project-status {
    padding: 5px 9px;
    border-radius: 99px;
    font-size: .58rem;
}

    .dashboard-project-status.is-success {
        color: var(--app-success);
        background: rgba(16,185,129,.1);
    }

    .dashboard-project-status.is-primary {
        color: var(--app-primary);
        background: var(--app-primary-soft);
    }

    .dashboard-project-status.is-warning {
        color: #f59e0b;
        background: rgba(245,158,11,.1);
    }

    .dashboard-project-status.is-muted {
        color: var(--app-muted);
        background: var(--app-elevated);
    }

/* Profile tabs */
.profile-workspace {
    max-width: 1480px;
    margin-inline: auto;
}

    .profile-workspace > .row {
        display: none;
    }

.profile-hero {
    display: grid;
    grid-template-columns: 64px minmax(0,1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 24px 27px;
    margin-bottom: 16px;
    background: linear-gradient(125deg,var(--app-surface-solid),color-mix(in srgb,var(--app-primary) 7%,var(--app-surface-solid)));
    border: 1px solid var(--app-border);
    border-radius: 24px;
    box-shadow: var(--app-shadow-sm);
}

.profile-hero-mark {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg,var(--app-primary),var(--app-primary-2));
    border-radius: 19px;
    box-shadow: 0 12px 28px rgba(99,91,255,.25);
    font-size: 1.35rem;
}

.profile-hero h1 {
    margin: 4px 0 5px;
    font-size: 1.35rem;
    font-weight: 850;
}

.profile-hero p {
    margin: 0;
    color: var(--app-muted);
    font-size: .72rem;
}

.profile-security-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    color: var(--app-success);
    background: rgba(16,185,129,.1);
    border-radius: 99px;
    font-size: .64rem;
}

.profile-tabs {
    position: sticky;
    top: 84px;
    z-index: 20;
    display: flex;
    gap: 7px;
    padding: 7px;
    margin-bottom: 18px;
    overflow-x: auto;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 17px;
    box-shadow: var(--app-shadow-sm);
    backdrop-filter: blur(16px);
}

    .profile-tabs button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-width: 145px;
        min-height: 42px;
        padding: 8px 13px;
        color: var(--app-muted);
        background: transparent;
        border: 0;
        border-radius: 12px;
        font-size: .72rem;
        font-weight: 700;
        white-space: nowrap;
        transition: .2s ease;
    }

        .profile-tabs button:hover {
            color: var(--app-text);
            background: var(--app-elevated);
        }

        .profile-tabs button.active {
            color: #fff;
            background: linear-gradient(110deg,var(--app-primary),var(--app-primary-2));
            box-shadow: 0 8px 20px rgba(99,91,255,.2);
        }

        .profile-tabs button b {
            min-width: 20px;
            padding: 2px 5px;
            color: var(--app-primary);
            background: var(--app-primary-soft);
            border-radius: 99px;
            font-size: .58rem;
        }

        .profile-tabs button.active b {
            color: var(--app-primary);
            background: #fff;
        }

.profile-tab-panel {
    display: none;
    animation: profile-panel-in .22s ease;
}

    .profile-tab-panel.active {
        display: block;
    }

@keyframes profile-panel-in {
    from {
        opacity: 0;
        transform: translateY(7px);
    }
}

.profile-tab-panel > .row {
    margin-inline: 0;
}

    .profile-tab-panel > .row > [class*="col-"] {
        padding-inline: 8px;
    }

.profile-tab-panel .card {
    height: 100%;
}

.profile-tab-panel .card-header {
    padding: 18px 21px;
}

.profile-info {
    display: grid;
    gap: 8px;
    text-align: right;
}

    .profile-info .info-item {
        margin: 0 !important;
        padding: 11px 12px;
        background: var(--app-elevated);
        border: 1px solid var(--app-border);
        border-radius: 12px;
        overflow-wrap: anywhere;
    }

.profile-optional-field {
    display: none;
}

.profile-security-card {
    display: grid;
    grid-template-columns: 55px 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 25px;
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 22px;
    box-shadow: var(--app-shadow-sm);
}

    .profile-security-card > span {
        width: 52px;
        height: 52px;
        display: grid;
        place-items: center;
        color: var(--app-primary);
        background: var(--app-primary-soft);
        border-radius: 16px;
    }

    .profile-security-card h5 {
        margin: 0 0 5px;
        font-size: .9rem;
    }

    .profile-security-card p {
        margin: 0;
        color: var(--app-muted);
        font-size: .67rem;
    }

@media (max-width: 1199.98px) {
    .dashboard-kpis {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 767.98px) {
    .dashboard-v2, .profile-workspace {
        padding: 14px !important;
    }

    .dashboard-hero {
        align-items: flex-start;
        flex-direction: column;
        min-height: 190px;
        padding: 24px 20px;
    }

    .dashboard-kpis {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .dashboard-kpi {
        min-height: 105px;
    }

    .dashboard-canvas {
        height: 230px;
    }

    .dashboard-donut-layout {
        grid-template-rows: 190px auto;
    }

    .dashboard-donut {
        height: 190px;
    }

    .dashboard-event {
        grid-template-columns: 36px 1fr;
    }

        .dashboard-event time {
            grid-column: 2;
        }

    .dashboard-project-status {
        display: none;
    }

    .profile-hero {
        grid-template-columns: 48px 1fr;
        padding: 19px 17px;
    }

    .profile-hero-mark {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .profile-security-pill {
        grid-column: 1/-1;
        justify-self: start;
    }

    .profile-tabs {
        top: 76px;
    }

        .profile-tabs button {
            min-width: 122px;
        }

    .profile-security-card {
        grid-template-columns: 46px 1fr;
    }

        .profile-security-card .btn {
            grid-column: 1/-1;
            width: 100%;
        }

    .activity-summary {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Allinext Application Shell v2 — shared light/dark design system
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --app-bg: #f7f8fc;
    --app-surface: rgba(255,255,255,.88);
    --app-surface-solid: #fff;
    --app-elevated: #fff;
    --app-text: #172033;
    --app-muted: #707b91;
    --app-border: #e7eaf2;
    --app-primary: #635bff;
    --app-primary-2: #8b5cf6;
    --app-primary-soft: #eeecff;
    --app-success: #10b981;
    --app-danger: #ef476f;
    --app-shadow: 0 18px 55px rgba(28,36,56,.08);
    --app-shadow-sm: 0 8px 26px rgba(28,36,56,.07);
    --app-sidebar: #101426;
    --app-sidebar-text: #d9def0;
    --app-radius: 22px;
    color-scheme: light;
}

    :root[data-theme="dark"] {
        --app-bg: #080b14;
        --app-surface: rgba(17,22,38,.9);
        --app-surface-solid: #111626;
        --app-elevated: #171d30;
        --app-text: #eef1fa;
        --app-muted: #99a3b9;
        --app-border: #252c42;
        --app-primary: #8b83ff;
        --app-primary-2: #b47cff;
        --app-primary-soft: rgba(99,91,255,.16);
        --app-success: #32d399;
        --app-danger: #ff6b8d;
        --app-shadow: 0 22px 65px rgba(0,0,0,.28);
        --app-shadow-sm: 0 10px 30px rgba(0,0,0,.22);
        --app-sidebar: #0d1120;
        --app-sidebar-text: #dfe4f6;
        color-scheme: dark;
    }

html {
    background: var(--app-bg);
}

body.app-page {
    background: radial-gradient(circle at 18% -10%, rgba(99,91,255,.1), transparent 30rem), radial-gradient(circle at 88% 18%, rgba(139,92,246,.07), transparent 25rem), var(--app-bg) !important;
    color: var(--app-text);
    min-height: 100dvh;
    transition: background-color .25s ease, color .25s ease;
}

.app-page .sidebar {
    position: fixed !important;
    inset: 0 0 0 auto;
    width: 278px !important;
    height: 100dvh;
    z-index: 1040;
    padding: 18px 14px;
    overflow-y: auto;
    background: radial-gradient(circle at 10% 0, rgba(139,92,246,.26), transparent 18rem), linear-gradient(165deg, var(--app-sidebar), #11172b) !important;
    border-left: 1px solid rgba(255,255,255,.06);
    box-shadow: -18px 0 60px rgba(3,6,18,.13);
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 58px;
    padding: 6px 8px 18px;
    color: #fff;
}

.app-brand-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(145deg,#756cff,#aa6cff);
    box-shadow: 0 10px 25px rgba(99,91,255,.36);
}

.app-brand strong, .app-brand small {
    display: block;
}

.app-brand strong {
    font-size: 1rem;
    letter-spacing: .2px;
}

.app-brand small {
    color: #8f9ab5;
    font-size: .67rem;
    margin-top: 2px;
}

.app-sidebar-close {
    display: none;
    margin-right: auto;
    border: 0;
    color: #bfc6dc;
    background: transparent;
}

.app-user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 11px;
    margin: 2px 0 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.045);
    border-radius: 18px;
    color: #fff;
}

.app-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    font-weight: 800;
    background: linear-gradient(145deg,#635bff,#a855f7);
    box-shadow: 0 8px 20px rgba(99,91,255,.25);
}

    .app-avatar.small {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
        border-radius: 10px;
        font-size: .78rem;
    }

.app-user-copy {
    min-width: 0;
    flex: 1;
}

    .app-user-copy strong, .app-user-copy small {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-user-copy strong {
        font-size: .8rem;
    }

    .app-user-copy small {
        margin-top: 3px;
        font-size: .65rem;
        color: #8995af;
        direction: ltr;
        text-align: right;
    }

.app-admin-badge {
    font-size: .58rem;
    color: #c8c4ff;
    background: rgba(99,91,255,.24);
    padding: 4px 7px;
    border-radius: 99px;
}

.app-page .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .app-page .sidebar-nav .nav-link {
        display: flex;
        align-items: center;
        gap: 13px;
        min-height: 45px;
        padding: 10px 13px;
        border-radius: 14px;
        color: #939db6 !important;
        font-size: .82rem;
        font-weight: 600;
        border: 1px solid transparent;
        transition: .2s ease;
    }

        .app-page .sidebar-nav .nav-link i {
            width: 20px;
            text-align: center;
            font-size: .95rem;
        }

        .app-page .sidebar-nav .nav-link:hover {
            color: #fff !important;
            background: rgba(255,255,255,.055);
            transform: translateX(-2px);
        }

        .app-page .sidebar-nav .nav-link.active {
            color: #fff !important;
            background: linear-gradient(110deg,rgba(99,91,255,.95),rgba(139,92,246,.75));
            border-color: rgba(255,255,255,.13);
            box-shadow: 0 10px 24px rgba(99,91,255,.22);
        }

.app-nav-separator {
    height: 1px;
    margin: 10px 8px;
    background: rgba(255,255,255,.07);
}

.app-page .sidebar-nav .app-logout:hover {
    color: #ff9caf !important;
    background: rgba(239,71,111,.1);
}

.app-page .main-content {
    margin-right: 278px !important;
    margin-left: 0 !important;
    min-height: 100dvh;
    width: auto !important;
    background: transparent !important;
}

.app-page .sidebar,
.app-page .main-content {
    transition: transform .28s ease, margin .28s ease, width .28s ease;
}

body.app-page.sidebar-collapsed .sidebar {
    transform: translateX(105%);
}

body.app-page.sidebar-collapsed .main-content {
    margin-right: 0 !important;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1025;
    min-height: 72px;
    padding: 10px 20px !important;
    background: var(--app-surface) !important;
    border-bottom: 1px solid var(--app-border);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.app-icon-button {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--app-border);
    border-radius: 13px;
    color: var(--app-text);
    background: var(--app-surface-solid);
    transition: .2s ease;
}

    .app-icon-button:hover {
        color: var(--app-primary);
        border-color: var(--app-primary);
        transform: translateY(-1px);
        box-shadow: var(--app-shadow-sm);
    }

.app-route-title span, .app-route-title small {
    display: block;
}

.app-route-title span {
    font-weight: 800;
    font-size: .84rem;
}

.app-route-title small {
    color: var(--app-muted);
    font-size: .66rem;
    margin-top: 2px;
}

.app-profile-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 11px;
    color: var(--app-text);
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 14px;
    text-decoration: none;
    font-size: .74rem;
    font-weight: 700;
}

    .app-profile-pill:hover {
        color: var(--app-primary);
    }

.app-page .card, .app-page .modal-content, .app-page .dropdown-menu, .app-panel {
    color: var(--app-text);
    background: var(--app-surface-solid) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: var(--app-shadow-sm);
}

.app-page .card-header, .app-page .modal-header, .app-page .modal-footer {
    color: var(--app-text);
    background: transparent !important;
    border-color: var(--app-border) !important;
}

.app-page .text-muted, .app-page .text-secondary, .app-page .form-text {
    color: var(--app-muted) !important;
}

.app-page .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border);
    color: var(--app-text);
}

.app-page .table-light {
    --bs-table-bg: var(--app-elevated);
    --bs-table-color: var(--app-text);
}

.app-page .form-control, .app-page .form-select, .app-page .input-group-text {
    color: var(--app-text);
    background: var(--app-elevated);
    border-color: var(--app-border);
    border-radius: 13px;
}

    .app-page .form-control:focus, .app-page .form-select:focus {
        border-color: var(--app-primary);
        box-shadow: 0 0 0 4px rgba(99,91,255,.12);
        background: var(--app-surface-solid);
        color: var(--app-text);
    }

.app-page .btn-primary {
    border: 0;
    background: linear-gradient(110deg,var(--app-primary),var(--app-primary-2));
    box-shadow: 0 8px 20px rgba(99,91,255,.2);
}

.app-page .btn-outline-primary {
    color: var(--app-primary);
    border-color: color-mix(in srgb,var(--app-primary) 50%,var(--app-border));
}

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

.app-page .breadcrumb-item, .app-page .breadcrumb-item a {
    color: var(--app-muted);
}

.app-page .badge.bg-light {
    color: var(--app-text) !important;
    background: var(--app-elevated) !important;
}

.activity-toolbar {
    display: grid;
    grid-template-columns: minmax(180px,2fr) repeat(3,minmax(120px,1fr)) auto;
    gap: 10px;
    align-items: end;
}

.activity-summary {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;
}

.activity-stat {
    padding: 13px 15px;
    border: 1px solid var(--app-border);
    border-radius: 15px;
    background: var(--app-elevated);
}

    .activity-stat small, .activity-stat strong {
        display: block;
    }

    .activity-stat small {
        color: var(--app-muted);
        font-size: .68rem;
    }

    .activity-stat strong {
        margin-top: 4px;
        font-size: 1rem;
    }

.activity-table-wrap {
    max-height: 520px;
    overflow: auto;
    scrollbar-gutter: stable;
}

    .activity-table-wrap thead {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--app-surface-solid);
    }

.app-empty {
    padding: 42px 18px;
    text-align: center;
    color: var(--app-muted);
}

/* Project details behaves as a comfortable right-side workspace drawer. */
#projectDetailsModal {
    padding: 0 !important;
    overflow: hidden;
}

    #projectDetailsModal .modal-dialog {
        position: absolute;
        inset: 0 0 0 auto;
        width: min(94vw,1480px);
        max-width: none;
        height: 100dvh;
        margin: 0;
        transform: translateX(105%);
        transition: transform .36s cubic-bezier(.2,.8,.2,1);
    }

    #projectDetailsModal.show .modal-dialog {
        transform: translateX(0);
    }

    #projectDetailsModal .modal-content {
        height: 100dvh;
        border-radius: 26px 0 0 26px !important;
        overflow: hidden;
        box-shadow: -30px 0 90px rgba(5,9,23,.28);
    }

    #projectDetailsModal .modal-body {
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
    }

@media (max-width: 991.98px) {
    .app-page .sidebar {
        transform: translateX(105%);
        transition: transform .28s ease;
    }

        .app-page .sidebar.show {
            transform: translateX(0);
        }

    .app-sidebar-close {
        display: block;
    }

    .app-page .main-content {
        margin-right: 0 !important;
    }

    body.sidebar-open::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1035;
        background: rgba(3,6,18,.52);
        backdrop-filter: blur(2px);
    }

    .activity-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .activity-summary {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575.98px) {
    .app-route-title small, .app-profile-pill > span:not(.app-avatar) {
        display: none;
    }

    .app-topbar {
        padding-inline: 12px !important;
    }

    .activity-toolbar, .activity-summary {
        grid-template-columns: 1fr;
    }

    #projectDetailsModal .modal-dialog {
        width: 100vw;
    }

    #projectDetailsModal .modal-content {
        border-radius: 0 !important;
    }
}

/* Authentication screens use the same visual language without the app shell. */
.auth-page {
    min-height: 100dvh;
    color: var(--app-text);
    background: radial-gradient(circle at 15% 12%, rgba(99,91,255,.2), transparent 26rem), radial-gradient(circle at 90% 82%, rgba(168,85,247,.14), transparent 26rem), var(--app-bg) !important;
}

    .auth-page::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        opacity: .28;
        background-image: radial-gradient(rgba(99,91,255,.25) 1px,transparent 1px);
        background-size: 24px 24px;
        mask-image: linear-gradient(to bottom,#000,transparent 72%);
    }

    .auth-page .container {
        position: relative;
        z-index: 1;
    }

    .auth-page .card {
        color: var(--app-text);
        background: var(--app-surface) !important;
        border: 1px solid var(--app-border) !important;
        border-radius: 28px !important;
        box-shadow: var(--app-shadow) !important;
        backdrop-filter: blur(20px);
    }

    .auth-page .logo-circle {
        width: 72px;
        height: 72px;
        display: grid;
        place-items: center;
        border-radius: 24px;
        background: var(--app-primary-soft);
    }

    .auth-page .form-control, .auth-page .input-group .btn {
        color: var(--app-text);
        background: var(--app-elevated);
        border-color: var(--app-border);
    }

    .auth-page .form-control {
        border-radius: 14px;
        min-height: 48px;
    }

    .auth-page .input-group .form-control {
        border-radius: 0 14px 14px 0;
    }

    .auth-page .input-group .btn {
        border-radius: 14px 0 0 14px;
    }

    .auth-page .form-control:focus {
        color: var(--app-text);
        background: var(--app-surface-solid);
        border-color: var(--app-primary);
        box-shadow: 0 0 0 4px rgba(99,91,255,.12);
    }

    .auth-page .text-muted {
        color: var(--app-muted) !important;
    }

    .auth-page .btn-primary {
        border: 0;
        background: linear-gradient(110deg,var(--app-primary),var(--app-primary-2));
        box-shadow: 0 9px 24px rgba(99,91,255,.24);
        border-radius: 14px;
    }

.auth-theme-toggle {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 10;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid var(--app-border);
    color: var(--app-text);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-sm);
    backdrop-filter: blur(14px);
}

/* ConceptTree modal viewport containment: header/steps stay visible and body owns scrolling. */
.ct-modal .modal-dialog.modal-dialog-scrollable {
    height: min(94dvh, 940px);
    max-height: 94dvh;
    margin-block: 3dvh;
}

.ct-modal .modal-dialog-scrollable .ct-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-height: 94dvh;
    min-height: 0;
    overflow: hidden;
}

.ct-modal .ct-header,
.ct-modal .ct-journey {
    flex: 0 0 auto;
}

.ct-modal .ct-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.ct-modal #ctmProgressPanel,
.ct-modal .ct-progress-layout,
.ct-modal .ct-progress-main {
    min-width: 0;
}

@media (max-width: 768px) {
    .ct-modal .modal-dialog.modal-dialog-scrollable {
        height: calc(100dvh - 12px);
        max-height: calc(100dvh - 12px);
        margin-block: 6px;
    }

    .ct-modal .modal-dialog-scrollable .ct-shell {
        max-height: calc(100dvh - 12px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ct-modal *,
    .projects-page * {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

.projects-page :focus-visible,
.ct-modal :focus-visible {
    outline: 2px solid var(--ai-primary);
    outline-offset: 2px;
}

/* Project workbench: quieter hierarchy and consistent dark mode */
#projectDetailsModal .modal-content {
    color: var(--ai-ink);
    background: var(--ai-bg);
}

#projectDetailsTabs {
    min-height: 58px;
    align-items: center;
    gap: 3px;
    padding: 8px 14px !important;
    background: var(--ai-surface);
    border-color: var(--ai-border) !important;
}

    #projectDetailsTabs .nav-item:first-child {
        min-width: 190px;
        padding-inline: 8px;
    }

    #projectDetailsTabs .nav-link {
        min-height: 40px;
        padding: 8px 13px;
        color: var(--ai-ink-soft);
        border: 0;
        border-radius: 9px;
        font-size: .76rem;
    }

        #projectDetailsTabs .nav-link:hover {
            color: var(--ai-ink);
            background: var(--ai-surface-soft);
        }

        #projectDetailsTabs .nav-link.active {
            color: var(--ai-primary);
            background: var(--ai-primary-soft);
            border: 0;
        }

#projectDetailsModal .tab-content,
#projectDetailsModal .tab-pane {
    background: var(--ai-bg);
}

#ai-chat .chat-column,
#ai-chat .right-panel-wrapper {
    background: var(--ai-surface);
    border-color: var(--ai-border) !important;
}

#ai-chat .chat-header {
    min-height: 58px;
    padding: 9px 15px !important;
    color: var(--ai-ink) !important;
    background: var(--ai-surface) !important;
    border-bottom: 1px solid var(--ai-border);
}

    #ai-chat .chat-header > div:first-child > i {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        color: var(--ai-primary);
        background: var(--ai-primary-soft);
        border-radius: 10px;
        font-size: .9rem;
    }

    #ai-chat .chat-header h5 {
        color: var(--ai-ink);
        font-size: .85rem;
        font-weight: 750;
    }

    #ai-chat .chat-header .btn-light {
        color: var(--ai-ink-soft);
        background: var(--ai-surface-soft);
        border-color: var(--ai-border);
    }

#chatTemplates {
    background: var(--ai-surface-soft);
}

    #chatTemplates > .text-center > i {
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        margin-inline: auto;
        color: var(--ai-primary) !important;
        background: var(--ai-primary-soft);
        border-radius: 13px;
        font-size: 1rem;
    }

    #chatTemplates h4 {
        color: var(--ai-ink);
        font-size: 1rem;
        font-weight: 760;
    }

    #chatTemplates .template-card {
        background: var(--ai-surface);
        border-color: var(--ai-border);
        border-radius: 13px;
        box-shadow: none !important;
    }

        #chatTemplates .template-card:hover {
            transform: translateY(-2px);
            border-color: color-mix(in srgb, var(--ai-primary) 35%, var(--ai-border));
            box-shadow: var(--ai-shadow-soft) !important;
        }

        #chatTemplates .template-card h5 {
            color: var(--ai-ink);
            font-size: .82rem;
        }

        #chatTemplates .template-card p {
            font-size: .68rem;
        }

#ai-chat .chat-input {
    padding: 12px 14px;
    background: var(--ai-surface);
    border-top: 1px solid var(--ai-border);
}

    #ai-chat .chat-input .d-flex {
        padding: 5px;
        background: var(--ai-surface-soft);
        border: 1px solid var(--ai-border);
        border-radius: 12px;
    }

    #ai-chat .chat-input textarea {
        min-height: 42px;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    #ai-chat .chat-input .btn {
        min-width: 42px;
        min-height: 42px;
        padding: 0;
    }

#ai-chat .right-panel-switcher {
    min-height: 58px;
    padding: 8px 12px;
    background: var(--ai-surface);
    border-bottom: 1px solid var(--ai-border);
}

#ai-chat .panel-switcher-tabs {
    display: flex;
    gap: 5px;
}

#ai-chat .panel-tab-btn,
#ai-chat #showCritiqueBtn {
    padding: 7px 10px;
    color: var(--ai-ink-soft);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: .68rem;
}

    #ai-chat .panel-tab-btn.active,
    #ai-chat #showCritiqueBtn.active {
        color: var(--ai-primary);
        background: var(--ai-primary-soft);
        border-color: transparent;
    }

#projectDetailsModal .bg-light {
    color: var(--ai-ink) !important;
    background: var(--ai-surface-soft) !important;
}

#projectDetailsModal .border-bottom,
#projectDetailsModal .border-end {
    border-color: var(--ai-border) !important;
}

:root[data-theme="dark"] #projectDetailsModal .text-black-50 {
    color: var(--ai-muted) !important;
}

@media (max-width: 768px) {
    #projectDetailsTabs .nav-item:first-child {
        min-width: 100%;
        text-align: center !important;
    }

    #projectDetailsTabs {
        flex-wrap: wrap;
    }

        #projectDetailsTabs .nav-item {
            flex: 1 1 auto;
        }

        #projectDetailsTabs .nav-link {
            width: 100%;
            padding-inline: 7px;
            font-size: .66rem;
        }

    #ai-chat .chat-input {
        padding: 8px;
    }
}

/* Enterprise v3 precedence lock: kept last so legacy page CSS cannot split the theme. */
:root {
    --app-bg: #f3f5f8;
    --app-surface: rgba(255,255,255,.94);
    --app-surface-solid: #fff;
    --app-elevated: #f7f8fa;
    --app-text: #172033;
    --app-muted: #667085;
    --app-border: #e1e6ed;
    --app-primary: #2457d6;
    --app-primary-2: #1d46ad;
    --app-primary-soft: #eaf0ff;
    --app-success: #16875f;
    --app-danger: #d9364f;
    --app-warning: #b26a00;
    --app-shadow: 0 18px 45px rgba(18,28,45,.08);
    --app-shadow-sm: 0 5px 18px rgba(18,28,45,.055);
    --app-sidebar: #111827;
    --app-sidebar-text: #d4dae5;
    --app-radius: 15px;
}

    :root[data-theme="dark"] {
        --app-bg: #090e16;
        --app-surface: rgba(17,24,36,.96);
        --app-surface-solid: #111824;
        --app-elevated: #171f2d;
        --app-text: #edf1f7;
        --app-muted: #98a3b5;
        --app-border: #263142;
        --app-primary: #6f92ff;
        --app-primary-2: #5079ed;
        --app-primary-soft: rgba(91,127,238,.15);
        --app-success: #43c493;
        --app-danger: #ff6b7d;
        --app-warning: #f0ad4e;
        --app-shadow: 0 20px 55px rgba(0,0,0,.28);
        --app-shadow-sm: 0 7px 22px rgba(0,0,0,.22);
        --app-sidebar: #080d14;
        --app-sidebar-text: #d9dfeb;
    }

body.app-page {
    background: var(--app-bg) !important;
}

.app-page .sidebar {
    width: 260px !important;
    padding: 17px 12px;
    background: var(--app-sidebar) !important;
    box-shadow: 8px 0 30px rgba(0,0,0,.08);
}

.app-page .main-content {
    margin-right: 260px !important;
}

body.app-page.sidebar-collapsed .main-content {
    margin-right: 0 !important;
}

.app-brand-mark, .app-avatar {
    background: #315fd4;
    box-shadow: none;
}

.app-page .sidebar-nav .nav-link {
    border-radius: 9px;
}

    .app-page .sidebar-nav .nav-link:hover {
        transform: none;
    }

    .app-page .sidebar-nav .nav-link.active {
        background: #244fbd;
        box-shadow: none;
    }

.app-topbar {
    min-height: 66px;
    background: var(--app-surface) !important;
    box-shadow: 0 1px 0 var(--app-border);
}

.app-page .card, .app-page .modal-content, .app-page .dropdown-menu, .app-panel {
    border-radius: var(--app-radius) !important;
    box-shadow: var(--app-shadow-sm);
}

.app-page .btn-primary {
    background: var(--app-primary);
    box-shadow: none;
}

    .app-page .btn-primary:hover {
        background: var(--app-primary-2);
    }

.profile-hero {
    border-radius: 13px;
    background: var(--app-surface-solid);
}

.profile-hero-mark, .profile-tabs button.active {
    background: var(--app-primary);
    box-shadow: none;
}

@media (max-width:991.98px) {
    .app-page .main-content {
        margin-right: 0 !important;
    }
}

/* Project entry points and account-security dialog */
.project-card {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid var(--app-border) !important;
    background: var(--app-surface-solid) !important;
    transition: border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}

    .project-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 3px;
        background: var(--app-primary);
        opacity: 0;
        transition: opacity .18s ease;
    }

    .project-card:hover, .project-card:focus-visible {
        transform: translateY(-2px);
        border-color: color-mix(in srgb,var(--app-primary) 32%,var(--app-border)) !important;
        box-shadow: var(--app-shadow) !important;
        outline: 0;
    }

        .project-card:hover::before, .project-card:focus-visible::before {
            opacity: 1;
        }

    .project-card .card-header {
        color: var(--app-text);
        background: transparent;
        border-bottom: 1px solid var(--app-border);
    }

    .project-card .project-title {
        font-weight: 780;
        letter-spacing: -.015em;
    }

    .project-card .project-description {
        color: var(--app-muted);
        line-height: 1.85;
    }

    .project-card .project-actions {
        display: grid;
        grid-template-columns: minmax(0,1fr) repeat(4,38px);
        gap: 7px;
    }

        .project-card .project-actions .btn {
            text-align: center;
            padding-right: 0.7rem;
            min-height: 38px;
            border-radius: 9px;
        }

    .project-card .project-open-action {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: #fff;
        background: var(--app-primary);
        border-color: var(--app-primary);
    }

        .project-card .project-open-action span {
            font-size: .74rem;
            font-weight: 720;
            white-space: nowrap;
        }

#changePasswordModal .modal-dialog {
    max-width: 500px;
}

#changePasswordModal .modal-content {
    overflow: hidden;
    border: 1px solid var(--app-border);
    background: var(--app-surface-solid);
}

#changePasswordModal .modal-header {
    padding: 20px 22px;
    background: var(--app-elevated);
    border-bottom-color: var(--app-border);
}

#changePasswordModal .modal-title::before {
    content: "\f3ed";
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-left: 10px;
    color: var(--app-primary);
    background: var(--app-primary-soft);
    border-radius: 10px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    vertical-align: middle;
}

#changePasswordModal .modal-body {
    padding: 22px;
}

#changePasswordModal .form-label {
    color: var(--app-text);
    font-weight: 680;
}

#changePasswordModal .form-control {
    min-height: 46px;
    color: var(--app-text);
    background: var(--app-elevated);
    border-color: var(--app-border);
    border-radius: 10px;
}

    #changePasswordModal .form-control:focus {
        background: var(--app-surface-solid);
        border-color: var(--app-primary);
        box-shadow: 0 0 0 4px color-mix(in srgb,var(--app-primary) 13%,transparent);
    }

#changePasswordModal .modal-footer {
    padding: 16px 22px 20px;
    border-top: 0;
}

.ai-math {
    margin: 14px 0;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 11px;
    background: var(--app-elevated);
}

    .ai-math figcaption {
        padding: 8px 12px;
        color: var(--app-muted);
        border-bottom: 1px solid var(--app-border);
        font-size: .72rem;
        font-weight: 700;
    }

        .ai-math figcaption i {
            margin-right: 7px;
            color: var(--app-primary);
        }

    .ai-math pre {
        margin: 0;
        padding: 16px;
        overflow: auto;
        color: var(--app-text);
        font: 500 .88rem/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;
        text-align: left;
    }

@media (max-width:575.98px) {
    .project-card .project-actions {
        grid-template-columns: minmax(0,1fr) repeat(4,36px);
    }

    #changePasswordModal .modal-dialog {
        margin: 10px;
    }
}

/* ── Portfolio → Knowledge → Builder page architecture ───────────── */
.dashboard-bootstrap-state {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--app-muted);
}

.project-index-page, .knowledge-page-main, .builder-page-main {
    max-width: 1680px;
    margin-inline: auto;
}

.project-index-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 4px 0 22px;
}

    .project-index-header h1 {
        margin: 4px 0 7px;
        color: var(--app-text);
        font-size: clamp(1.65rem,2.6vw,2.35rem);
        font-weight: 820;
        letter-spacing: -.035em;
    }

    .project-index-header p {
        margin: 0;
        color: var(--app-muted);
    }

    .project-index-header .btn {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 9px;
        padding-inline: 18px;
    }

.project-path-guide {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 14px 18px;
    color: var(--app-text);
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
}

    .project-path-guide > div {
        display: flex;
        align-items: center;
        gap: 11px;
        flex: 1;
    }

        .project-path-guide > div > span {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            color: var(--app-primary);
            background: var(--app-primary-soft);
            border-radius: 10px;
        }

    .project-path-guide strong, .project-path-guide small {
        display: block;
    }

    .project-path-guide strong {
        font-size: .8rem;
    }

    .project-path-guide small {
        margin-top: 3px;
        color: var(--app-muted);
        font-size: .68rem;
    }

    .project-path-guide > i {
        color: var(--app-muted);
        font-size: .65rem;
    }

.project-index-toolbar {
    display: grid;
    grid-template-columns: minmax(260px,1fr) 180px 180px auto;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 13px;
}

.project-search {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 13px;
    color: var(--app-muted);
    background: var(--app-elevated);
    border: 1px solid var(--app-border);
    border-radius: 9px;
}

    .project-search input {
        width: 100%;
        color: var(--app-text);
        background: transparent;
        border: 0;
        outline: 0;
    }

.project-index-toolbar .form-select, .project-index-toolbar .btn {
    min-height: 42px;
    border-radius: 9px;
}

.project-index-results {
    min-height: 320px;
}

.project-index-loading {
    min-height: 300px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 12px;
    color: var(--app-muted);
}

.project-index-results > #projectsGridContainer {
    padding: 4px;
}

.knowledge-page-breadcrumb {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--app-muted);
    font-size: .75rem;
}

    .knowledge-page-breadcrumb a:first-child {
        color: var(--app-muted);
        text-decoration: none;
    }

    .knowledge-page-breadcrumb b {
        color: var(--app-text);
    }

    .knowledge-page-breadcrumb .btn {
        margin-inline-start: auto;
        display: flex;
        gap: 7px;
    }

.project-knowledge-workspace-host {
    min-height: calc(100vh - 152px);
}

.project-knowledge-page .workspace-backdrop {
    display: none;
}

.project-knowledge-page .workspace-drawer {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    height: calc(100vh - 152px);
    min-height: 680px;
    transform: none;
    opacity: 1;
    visibility: visible;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 16px;
    background: var(--app-surface-solid);
    box-shadow: var(--app-shadow-sm);
    z-index: 1;
}

    .project-knowledge-page .workspace-drawer.is-open {
        transform: none;
    }

.project-knowledge-page .workspace-header {
    min-height: 82px;
    padding: 15px 18px;
}

.project-knowledge-page .workspace-tabs {
    grid-template-columns: repeat(4,minmax(135px,1fr));
}

.project-knowledge-page .workspace-body {
    height: calc(100% - 12px);
}

.project-knowledge-page .workspace-pane {
    height: 100%;
    overflow: auto;
}

.project-knowledge-page .workspace-chat-pane {
    overflow: hidden;
}

.workspace-file-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

    .workspace-file-toolbar h3 {
        margin: 3px 0;
        color: var(--app-text);
        font-weight: 780;
    }

    .workspace-file-toolbar p {
        margin: 0;
        color: var(--app-muted);
        font-size: .75rem;
    }

.workspace-files-table {
    border: 1px solid var(--app-border);
    border-radius: 12px;
}

    .workspace-files-table .table {
        margin: 0;
        color: var(--app-text);
    }

    .workspace-files-table th {
        padding: 12px;
        color: var(--app-muted);
        background: var(--app-elevated);
        border-bottom-color: var(--app-border);
        font-size: .69rem;
    }

    .workspace-files-table td {
        padding: 12px;
        border-color: var(--app-border);
    }

.workspace-logs-host {
    max-width: 1080px;
    margin: 0 auto;
    padding: 6px;
}

.workspace-log-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--app-border);
}

    .workspace-log-header h3 {
        margin: 4px 0;
        color: var(--app-text);
        font-weight: 790;
    }

    .workspace-log-header p {
        margin: 0;
        color: var(--app-muted);
        font-size: .75rem;
    }

.workspace-log-filters {
    display: flex;
    gap: 6px;
    padding: 15px 0;
    overflow: auto;
}

    .workspace-log-filters button {
        padding: 7px 12px;
        color: var(--app-muted);
        background: transparent;
        border: 1px solid var(--app-border);
        border-radius: 999px;
        font-size: .69rem;
        white-space: nowrap;
    }

        .workspace-log-filters button.active {
            color: var(--app-primary);
            background: var(--app-primary-soft);
            border-color: transparent;
            font-weight: 720;
        }

.workspace-log-list {
    position: relative;
    padding-right: 18px;
}

    .workspace-log-list::before {
        content: "";
        position: absolute;
        top: 8px;
        bottom: 8px;
        right: 34px;
        width: 1px;
        background: var(--app-border);
    }

.workspace-log-item {
    position: relative;
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 13px;
    margin-bottom: 9px;
    padding: 12px;
    color: var(--app-text);
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 11px;
}

.workspace-log-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--app-primary);
    background: var(--app-primary-soft);
    border-radius: 10px;
    z-index: 1;
}

.workspace-log-item.is-success .workspace-log-icon {
    color: var(--app-success);
    background: color-mix(in srgb,var(--app-success) 13%,transparent);
}

.workspace-log-item.is-danger .workspace-log-icon {
    color: var(--app-danger);
    background: color-mix(in srgb,var(--app-danger) 12%,transparent);
}

.workspace-log-item header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.workspace-log-item strong {
    font-size: .76rem;
}

.workspace-log-item time, .workspace-log-item small {
    color: var(--app-muted);
    font-size: .63rem;
}

.workspace-log-item p {
    margin: 4px 0 3px;
    color: var(--app-muted);
    font-size: .69rem;
    line-height: 1.8;
}

.builder-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 2px 0 14px;
}

    .builder-page-header > div {
        display: grid;
        gap: 4px;
    }

    .builder-page-header a:first-child {
        width: max-content;
        color: var(--app-muted);
        text-decoration: none;
        font-size: .7rem;
    }

    .builder-page-header h1 {
        margin: 0;
        color: var(--app-text);
        font-size: 1.65rem;
        font-weight: 820;
    }

    .builder-page-header p {
        margin: 0;
        color: var(--app-muted);
        font-size: .75rem;
    }

.builder-workbench {
    height: calc(100vh - 170px);
    min-height: 720px;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 16px;
    background: var(--app-surface-solid);
    box-shadow: var(--app-shadow-sm);
}

.builder-workbench-dialog, .builder-workbench-content {
    width: 100%;
    height: 100%;
    margin: 0;
}

.builder-workbench-content {
    display: flex;
    flex-direction: column;
    color: var(--app-text);
    background: var(--app-surface-solid);
    border: 0;
    border-radius: 0;
}

.builder-workbench .modal-body {
    min-height: 0;
    flex: 1;
}

.builder-workbench #projectDetailsTabs {
    flex: 0 0 auto;
    background: var(--app-elevated);
    border-color: var(--app-border) !important;
}

    .builder-workbench #projectDetailsTabs .nav-link {
        color: var(--app-muted);
        border: 0;
        border-bottom: 2px solid transparent;
        border-radius: 0;
    }

        .builder-workbench #projectDetailsTabs .nav-link.active {
            color: var(--app-primary);
            background: var(--app-surface-solid);
            border-bottom-color: var(--app-primary);
        }

.builder-workbench .card, .builder-workbench .form-control, .builder-workbench .form-select {
    color: var(--app-text);
    background-color: var(--app-surface-solid);
    border-color: var(--app-border);
}

.builder-workbench .bg-light {
    background: var(--app-elevated) !important;
}

.builder-fatal {
    min-height: 100%;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 12px;
    padding: 30px;
    text-align: center;
    color: var(--app-text);
}

    .builder-fatal > i {
        color: var(--app-danger);
        font-size: 2.5rem;
    }

@media (max-width:991.98px) {
    .project-index-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .project-search {
        grid-column: 1/-1;
    }

    .project-knowledge-page .workspace-drawer {
        height: calc(100vh - 136px);
        min-height: 620px;
    }

    .builder-workbench {
        height: auto;
        min-height: 760px;
    }
}

@media (max-width:767.98px) {
    .project-index-header, .workspace-file-toolbar, .builder-page-header, .workspace-log-header {
        align-items: stretch;
        flex-direction: column;
    }

    .project-path-guide {
        align-items: stretch;
        flex-direction: column;
    }

        .project-path-guide > i {
            align-self: center;
        }

    .project-index-toolbar {
        grid-template-columns: 1fr;
    }

    .project-search {
        grid-column: auto;
    }

    .knowledge-page-main, .builder-page-main, .project-index-page {
        padding: 14px !important;
    }

    .knowledge-page-breadcrumb {
        flex-wrap: wrap;
    }

        .knowledge-page-breadcrumb .btn {
            width: 100%;
            margin: 0;
            justify-content: center;
        }

    .project-knowledge-page .workspace-tabs {
        grid-template-columns: repeat(4,minmax(94px,1fr));
        overflow-x: auto;
    }

        .project-knowledge-page .workspace-tabs button {
            min-width: 94px;
        }

    .workspace-log-list {
        padding-right: 0;
    }

        .workspace-log-list::before {
            display: none;
        }
}

/* Dashboard project actions use two explicit destinations. */
.continuity-head, .continuity-row {
    grid-template-columns: minmax(260px,2fr) minmax(105px,.65fr) minmax(145px,.8fr) minmax(100px,.65fr) 125px;
    min-width: 860px;
}

.continuity-project {
    color: var(--app-text);
    text-decoration: none;
}

    .continuity-project:hover {
        color: var(--app-primary);
    }

.continuity-actions {
    display: flex;
    gap: 5px;
}

    .continuity-actions a {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        color: var(--app-muted);
        background: var(--app-elevated);
        border: 1px solid var(--app-border);
        border-radius: 8px;
        text-decoration: none;
    }

        .continuity-actions a:hover {
            color: var(--app-primary);
            border-color: var(--app-primary);
        }

.dashboard-create-project {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 9px;
    font-size: .7rem;
}

.project-knowledge-page .ct-modal .modal-dialog {
    width: calc(100vw - 40px);
    max-width: none;
    height: calc(100dvh - 40px);
    margin: 20px;
}

.project-knowledge-page .ct-modal .ct-shell {
    height: 100%;
}

.project-knowledge-page .ct-modal .ct-body {
    min-height: 0;
    overflow: auto;
}

/* Readability baseline: operational data must remain scannable on enterprise displays. */
.command-header h1 {
    font-size: 2rem;
}

.command-header p {
    font-size: .82rem;
    line-height: 1.8;
}

.system-health {
    font-size: .7rem;
}

.decision-kpi span small {
    font-size: .72rem;
}

.decision-kpi span strong {
    font-size: 1.35rem;
}

.decision-kpi span em {
    font-size: .64rem;
    line-height: 1.6;
}

.command-card-header h2 {
    font-size: .9rem;
}

.command-card-header p {
    font-size: .68rem;
    line-height: 1.6;
}

.command-card-header > b, .command-card-header > a {
    font-size: .66rem;
}

.attention-item strong {
    font-size: .77rem;
}

.attention-item small {
    font-size: .66rem;
    line-height: 1.65;
}

.attention-item > b {
    font-size: .65rem;
}

.attention-clear strong {
    font-size: .8rem;
}

.attention-clear small {
    font-size: .66rem;
}

.quick-actions strong {
    font-size: .75rem;
}

.quick-actions small {
    font-size: .63rem;
}

.continuity-head {
    font-size: .64rem;
}

.continuity-project strong {
    font-size: .75rem;
}

.continuity-project small, .continuity-row time {
    font-size: .61rem;
}

.status-dot, .knowledge-state {
    font-size: .62rem;
}

.usage-summary small {
    font-size: .61rem;
}

.usage-summary strong {
    font-size: .82rem;
}

.command-event strong {
    font-size: .72rem;
}

.command-event small, .command-event time {
    font-size: .6rem;
}

.command-loading {
    font-size: .7rem;
}

.dashboard-sync {
    font-size: .61rem;
}

.workspace-heading > span {
    font-size: .61rem;
}

.workspace-heading h2 {
    font-size: 1.03rem;
}

.workspace-heading p {
    font-size: .65rem;
}

.workspace-tabs button {
    font-size: .72rem;
}

    .workspace-tabs button b {
        font-size: .58rem;
    }

.knowledge-overview small {
    font-size: .63rem;
}

.knowledge-overview h3 {
    font-size: 1rem;
}

.knowledge-overview p {
    font-size: .7rem;
}

.knowledge-metrics span {
    font-size: .62rem;
}

.knowledge-metrics strong {
    font-size: .86rem;
}

.knowledge-source-list h4 {
    font-size: .82rem;
}

.knowledge-source-list p, .knowledge-source small {
    font-size: .61rem;
}

.knowledge-source strong {
    font-size: .72rem;
}

.knowledge-chat-status {
    font-size: .65rem;
}

.knowledge-chat-empty h3 {
    font-size: .95rem;
}

.knowledge-chat-empty p {
    font-size: .7rem;
}

.knowledge-message-content {
    font-size: .78rem;
}

.knowledge-chat-suggestions button {
    font-size: .63rem;
}

/* ── Responsive shell authority layer ────────────────────────────────
   This is intentionally the last layout layer. Older pages still carry
   legacy width calculations; the shell owns the viewport on every page. */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

    body.app-page {
        min-width: 0;
    }

.app-page .sidebar {
    right: 0 !important;
    left: auto !important;
    width: 260px !important;
    max-width: min(88vw,260px);
    will-change: transform;
}

.app-page .main-content {
    box-sizing: border-box;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin-right: 260px !important;
    margin-left: 0 !important;
    transform: none !important;
    transition: margin-right .28s cubic-bezier(.2,.8,.2,1),width .28s cubic-bezier(.2,.8,.2,1) !important;
}

    .app-page .main-content > .container-fluid,
    .dashboard-v3, .project-index-page, .knowledge-page-main, .builder-page-main {
        width: 100% !important;
        max-width: none !important;
        margin-inline: 0 !important;
    }

body.app-page.sidebar-collapsed .sidebar {
    transform: translateX(105%) !important;
    pointer-events: none;
    visibility: hidden;
}

body.app-page.sidebar-collapsed .main-content {
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Dashboard keeps its information density without sacrificing small screens. */
.dashboard-v3 {
    min-height: calc(100dvh - 66px);
}

.command-header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.command-chart {
    width: 100%;
    min-width: 0;
}

.continuity-table {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

/* The restored builder is a full workspace, not a modal constrained by old CSS. */
.builder-workbench .tab-content,
.builder-workbench .tab-pane,
.builder-workbench .ai_chat_row {
    min-height: 0;
}

.builder-workbench .tab-content,
.builder-workbench .tab-pane {
    height: 100%;
}

.builder-workbench .ai_chat_row {
    height: 100%;
}

.builder-workbench .chat-column,
.builder-workbench .right-panel-column {
    min-width: 0;
}

@media (min-width:992px) {
    body.app-page.sidebar-collapsed .app-topbar > .container-fluid,
    body.app-page.sidebar-collapsed .main-content > .container-fluid {
        max-width: none !important;
    }
}

@media (max-width:991.98px) {
    body.app-page {
        overflow-x: hidden;
    }

        body.app-page.sidebar-open {
            overflow: hidden;
        }

    .app-page .sidebar {
        max-width: min(88vw,300px);
        transform: translateX(105%) !important;
        visibility: hidden;
        pointer-events: none;
        box-shadow: -20px 0 60px rgba(3,6,18,.25);
    }

        .app-page .sidebar.show {
            transform: translateX(0) !important;
            visibility: visible;
            pointer-events: auto;
        }

    .app-page .main-content,
    body.app-page.sidebar-collapsed .main-content {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .command-grid-primary, .command-grid-insight {
        grid-template-columns: 1fr;
    }

    .builder-workbench {
        height: auto;
        min-height: calc(100dvh - 128px);
        overflow: visible;
    }

    .builder-workbench-dialog, .builder-workbench-content {
        height: auto;
        min-height: inherit;
    }

    .builder-workbench .modal-body,
    .builder-workbench .tab-content,
    .builder-workbench .tab-pane {
        height: auto !important;
        min-height: 650px;
        overflow: visible;
    }

    .builder-workbench .ai_chat_row {
        height: auto !important;
        min-height: 650px;
    }

    .builder-workbench .chat-column,
    .builder-workbench .right-panel-column {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        min-height: 620px;
        height: auto !important;
        border-inline: 0 !important;
    }

    .builder-workbench #projectDetailsTabs {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: thin;
    }

        .builder-workbench #projectDetailsTabs .nav-item {
            flex: 0 0 auto;
        }

            .builder-workbench #projectDetailsTabs .nav-item:first-child {
                min-width: max-content;
            }

        .builder-workbench #projectDetailsTabs .nav-link {
            min-width: 145px;
            white-space: nowrap;
        }
}

@media (max-width:767.98px) {
    .app-topbar > .container-fluid {
        gap: 8px;
    }

    .app-route-title {
        max-width: 34vw;
    }

        .app-route-title span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .dashboard-v3 {
        padding: 14px !important;
    }

    .command-header {
        gap: 14px;
        padding-bottom: 17px;
    }

        .command-header h1 {
            font-size: clamp(1.45rem,7vw,1.8rem);
        }

    .command-header-actions {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0,1fr) 42px;
    }

        .command-header-actions .dashboard-create-project {
            grid-column: 1/-1;
            justify-content: center;
        }

        .command-header-actions .system-health {
            justify-content: center;
        }

    .command-kpis {
        grid-template-columns: 1fr;
        gap: 9px;
        margin-block: 14px;
    }

    .decision-kpi {
        min-height: 88px;
        padding: 13px;
    }

    .command-card-header {
        align-items: flex-start;
        min-height: auto;
        padding: 14px;
    }

        .command-card-header > a {
            white-space: nowrap;
        }

    .usage-summary {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .command-chart {
        height: 210px;
    }

    .dashboard-sync {
        align-items: flex-start;
    }

    .project-knowledge-page .workspace-drawer {
        height: calc(100dvh - 118px);
        min-height: 560px;
        border-radius: 12px;
    }

    .project-knowledge-page .workspace-header {
        min-height: 74px;
        padding: 12px;
    }

    .project-knowledge-page .workspace-body {
        height: calc(100% - 132px);
    }

    .workspace-files-table {
        overflow-x: auto;
    }

        .workspace-files-table .table {
            min-width: 720px;
        }

    .project-knowledge-page .ct-modal .modal-dialog {
        width: 100vw;
        height: 100dvh;
        margin: 0;
    }

    .project-knowledge-page .ct-modal .modal-content {
        border-radius: 0 !important;
    }

    .builder-page-main {
        padding-inline: 10px !important;
    }

    .builder-workbench {
        border-radius: 12px;
    }
}

@media (max-width:420px) {
    .app-topbar {
        padding-inline: 8px !important;
    }

    .app-route-title {
        display: none;
    }

    .app-profile-pill {
        padding-inline: 4px;
    }

    .command-card-header p {
        display: none;
    }

    .usage-summary {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .project-index-header .btn {
        width: 100%;
        justify-content: center;
    }

    .workspace-heading p {
        display: none;
    }
}

/* ── Autonomous development studio ───────────────────────────────── */
.agent-page-main {
    height: calc(100dvh - 66px);
    min-height: 680px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.agent-page-header {
    min-height: 47px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 auto;
    color: var(--app-muted);
    font-size: .72rem;
}

    .agent-page-header > div:first-child {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .agent-page-header a {
        color: var(--app-muted);
        text-decoration: none;
    }

        .agent-page-header a:hover {
            color: var(--app-primary);
        }

    .agent-page-header b {
        max-width: 360px;
        overflow: hidden;
        color: var(--app-text);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.agent-global-state {
    display: flex;
    align-items: center;
    gap: 10px;
}

#agentConnectionState {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--app-success);
    font-weight: 680;
    white-space: nowrap;
}

    #agentConnectionState i {
        width: 7px;
        height: 7px;
        background: currentColor;
        border-radius: 50%;
        box-shadow: 0 0 0 4px color-mix(in srgb,currentColor 12%,transparent);
    }

    #agentConnectionState.is-offline {
        color: var(--app-danger);
    }

.agent-ide {
    min-height: 0;
    flex: 1;
    display: grid;
    grid-template-columns: 280px minmax(430px,1fr) minmax(310px,360px);
    color: var(--app-text);
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    box-shadow: var(--app-shadow-sm);
    overflow: hidden;
}

.agent-session-panel, .agent-inspector, .agent-conversation {
    min-width: 0;
    min-height: 0;
}

.agent-session-panel {
    display: flex;
    flex-direction: column;
    background: var(--app-elevated);
    border-left: 1px solid var(--app-border);
}

    .agent-session-panel > header {
        min-height: 78px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 16px 10px;
    }

    .agent-session-panel h2 {
        margin: 3px 0 0;
        font-size: .9rem;
        font-weight: 820;
    }

.agent-search {
    min-height: 39px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px 10px;
    padding: 0 11px;
    color: var(--app-muted);
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 9px;
}

    .agent-search input {
        width: 100%;
        min-width: 0;
        color: var(--app-text);
        background: transparent;
        border: 0;
        outline: 0;
        font-size: .7rem;
    }

.agent-session-list {
    min-height: 0;
    flex: 1;
    padding: 3px 8px 12px;
    overflow-y: auto;
}

.agent-session-item {
    width: 100%;
    display: grid;
    grid-template-columns: 35px minmax(0,1fr) auto;
    align-items: center;
    gap: 9px;
    margin-bottom: 4px;
    padding: 10px;
    text-align: right;
    color: var(--app-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: .18s;
}

    .agent-session-item:hover {
        background: var(--app-surface-solid);
        border-color: var(--app-border);
    }

    .agent-session-item.active {
        color: var(--app-primary);
        background: var(--app-surface-solid);
        border-color: color-mix(in srgb,var(--app-primary) 25%,var(--app-border));
        box-shadow: var(--app-shadow-sm);
    }

.agent-session-icon {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    color: var(--app-primary);
    background: var(--app-primary-soft);
    border-radius: 9px;
}

.agent-session-item span:nth-child(2) {
    min-width: 0;
}

.agent-session-item strong, .agent-session-item small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-session-item strong {
    font-size: .71rem;
}

.agent-session-item small {
    margin-top: 4px;
    color: var(--app-muted);
    font-size: .58rem;
}

.agent-session-item time {
    align-self: start;
    color: var(--app-muted);
    font-size: .54rem;
    white-space: nowrap;
}

.agent-session-panel > footer {
    padding: 9px 12px;
    border-top: 1px solid var(--app-border);
}

    .agent-session-panel > footer button {
        width: 100%;
        padding: 8px;
        color: var(--app-muted);
        background: transparent;
        border: 0;
        border-radius: 8px;
        font-size: .63rem;
    }

        .agent-session-panel > footer button:hover, .agent-session-panel > footer button.active {
            color: var(--app-primary);
            background: var(--app-primary-soft);
        }

.agent-conversation {
    display: flex;
    flex-direction: column;
    background: var(--app-surface-solid);
}

.agent-conversation-header {
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--app-border);
}

.agent-mobile-tools {
    display: none;
}

.agent-session-identity {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .agent-session-identity > div {
        min-width: 0;
    }

    .agent-session-identity h1 {
        margin: 0;
        overflow: hidden;
        font-size: .86rem;
        font-weight: 820;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .agent-session-identity p {
        margin: 4px 0 0;
        overflow: hidden;
        color: var(--app-muted);
        font-size: .61rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.agent-status-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: var(--app-muted);
    box-shadow: 0 0 0 5px color-mix(in srgb,var(--app-muted) 10%,transparent);
}

    .agent-status-dot.is-ready, .agent-status-dot.is-success {
        background: var(--app-success);
    }

    .agent-status-dot.is-working {
        background: var(--app-primary);
        animation: agent-pulse 1.4s infinite;
    }

    .agent-status-dot.is-warning, .agent-status-dot.is-waiting {
        background: var(--app-warning);
    }

    .agent-status-dot.is-danger {
        background: var(--app-danger);
    }

.agent-session-actions {
    display: flex;
    gap: 5px;
}

.agent-icon-btn {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    color: var(--app-muted);
    background: var(--app-elevated);
    border: 1px solid var(--app-border);
    border-radius: 8px;
}

    .agent-icon-btn:hover {
        color: var(--app-primary);
        border-color: var(--app-primary);
    }

.agent-run-strip {
    min-height: 48px;
    display: grid;
    grid-template-columns: 12px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
    color: var(--app-primary);
    background: var(--app-primary-soft);
    border-bottom: 1px solid color-mix(in srgb,var(--app-primary) 17%,var(--app-border));
}

.agent-balance-pause {
    min-height: 58px;
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    color: var(--app-warning);
    background: color-mix(in srgb,var(--app-warning) 9%,var(--app-surface-solid));
    border-bottom: 1px solid color-mix(in srgb,var(--app-warning) 30%,var(--app-border));
}

    .agent-balance-pause > i {
        width: 33px;
        height: 33px;
        display: grid;
        place-items: center;
        background: color-mix(in srgb,var(--app-warning) 14%,transparent);
        border-radius: 9px;
    }

    .agent-balance-pause strong, .agent-balance-pause small { display: block; }
    .agent-balance-pause strong { color: var(--app-text); font-size: .68rem; }
    .agent-balance-pause small { margin-top: 3px; color: var(--app-muted); font-size: .57rem; }

    .agent-run-strip strong, .agent-run-strip small {
        display: block;
    }

    .agent-run-strip strong {
        font-size: .68rem;
    }

    .agent-run-strip small {
        max-width: 60vw;
        margin-top: 3px;
        overflow: hidden;
        color: var(--app-muted);
        font-size: .58rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .agent-run-strip > b {
        font-size: .62rem;
        direction: ltr;
    }

.agent-pulse {
    width: 8px;
    height: 8px;
    background: var(--app-primary);
    border-radius: 50%;
    animation: agent-pulse 1.3s infinite;
}

@keyframes agent-pulse {
    0%,100% {
        box-shadow: 0 0 0 0 color-mix(in srgb,var(--app-primary) 32%,transparent)
    }

    50% {
        box-shadow: 0 0 0 7px transparent
    }
}

.agent-messages {
    min-height: 0;
    flex: 1;
    padding: 18px clamp(12px,2vw,28px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}

.agent-message {
    max-width: 880px;
    display: grid;
    grid-template-columns: 31px minmax(0,1fr);
    gap: 9px;
    margin: 0 auto 18px;
}

    .agent-message.is-user {
        max-width: 760px;
        margin-left: auto;
        margin-right: 8%;
    }

.agent-message-avatar {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: var(--app-primary);
    background: var(--app-primary-soft);
    border-radius: 9px;
    font-size: .72rem;
}

.agent-message.is-user .agent-message-avatar {
    color: var(--app-muted);
    background: var(--app-elevated);
}

.agent-message-main {
    min-width: 0;
}

    .agent-message-main > header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 5px;
    }

        .agent-message-main > header strong {
            font-size: .67rem;
        }

        .agent-message-main > header time {
            color: var(--app-muted);
            font-size: .55rem;
        }

.agent-message-body {
    padding: 13px 15px;
    background: var(--app-elevated);
    border: 1px solid var(--app-border);
    border-radius: 4px 12px 12px 12px;
}

.agent-message.is-user .agent-message-body {
    background: var(--app-primary-soft);
    border-color: color-mix(in srgb,var(--app-primary) 17%,var(--app-border));
}

.agent-message-body .ai-rich-response {
    font-size: .76rem;
    line-height: 1.95;
}

    .agent-message-body .ai-rich-response > :last-child {
        margin-bottom: 0;
    }

.agent-tool-message {
    max-width: 820px;
    display: grid;
    grid-template-columns: 28px minmax(0,1fr);
    gap: 9px;
    margin: 0 auto 13px;
    padding: 10px 12px;
    background: var(--app-elevated);
    border: 1px solid var(--app-border);
    border-radius: 10px;
}

    .agent-tool-message > span {
        width: 27px;
        height: 27px;
        display: grid;
        place-items: center;
        color: var(--app-muted);
        background: var(--app-surface-solid);
        border-radius: 7px;
    }

    .agent-tool-message.is-success > span {
        color: var(--app-success);
    }

    .agent-tool-message.is-failed > span {
        color: var(--app-danger);
    }

    .agent-tool-message header {
        display: flex;
        justify-content: space-between;
        gap: 10px;
    }

    .agent-tool-message strong {
        font-size: .65rem;
        direction: ltr;
    }

    .agent-tool-message b {
        color: var(--app-muted);
        font-size: .56rem;
    }

    .agent-tool-message pre {
        max-height: 180px;
        margin: 7px 0 0;
        padding: 9px;
        overflow: auto;
        color: var(--app-muted);
        background: var(--app-surface-solid);
        border-radius: 7px;
        font: 500 .62rem/1.7 ui-monospace,Consolas,monospace;
        direction: ltr;
        text-align: left;
        white-space: pre-wrap;
    }

.agent-approval {
    margin-top: 13px;
    padding: 13px;
    border: 1px solid color-mix(in srgb,var(--app-warning) 32%,var(--app-border));
    border-radius: 10px;
    background: color-mix(in srgb,var(--app-warning) 7%,var(--app-surface-solid));
}

    .agent-approval > div {
        display: flex;
        align-items: center;
        gap: 9px;
    }

        .agent-approval > div > i {
            color: var(--app-warning);
        }

    .agent-approval strong, .agent-approval small {
        display: block;
    }

    .agent-approval strong {
        font-size: .7rem;
    }

    .agent-approval small {
        margin-top: 3px;
        color: var(--app-muted);
        font-size: .59rem;
    }

    .agent-approval pre {
        max-height: 150px;
        margin: 10px 0;
        padding: 9px;
        overflow: auto;
        direction: ltr;
        text-align: left;
        background: var(--app-surface-solid);
        border: 1px solid var(--app-border);
        border-radius: 7px;
        font-size: .6rem;
    }

    .agent-approval footer {
        display: flex;
        justify-content: flex-end;
        gap: 7px;
    }

.agent-approval-resolved {
    margin-top: 9px;
    color: var(--app-muted);
    font-size: .61rem;
}

.agent-empty-state {
    min-height: 100%;
    display: grid;
    place-content: center;
    justify-items: center;
    padding: 30px;
    text-align: center;
    color: var(--app-muted);
}

    .agent-empty-state > i {
        width: 56px;
        height: 56px;
        display: grid;
        place-items: center;
        color: var(--app-primary);
        background: var(--app-primary-soft);
        border-radius: 16px;
        font-size: 1.2rem;
    }

    .agent-empty-state h2 {
        margin: 15px 0 7px;
        color: var(--app-text);
        font-size: 1rem;
    }

    .agent-empty-state p {
        max-width: 430px;
        margin: 0;
        font-size: .68rem;
        line-height: 1.8;
    }

.agent-composer-wrap {
    padding: 9px 14px 11px;
    background: linear-gradient(to top,var(--app-surface-solid) 78%,transparent);
}

.agent-suggestions {
    display: flex;
    gap: 6px;
    max-width: 850px;
    margin: 0 auto 7px;
    overflow-x: auto;
}

    .agent-suggestions button {
        flex: 0 0 auto;
        padding: 6px 10px;
        color: var(--app-muted);
        background: var(--app-elevated);
        border: 1px solid var(--app-border);
        border-radius: 999px;
        font-size: .58rem;
        white-space: nowrap;
    }

        .agent-suggestions button:hover {
            color: var(--app-primary);
            border-color: var(--app-primary);
        }

.agent-composer {
    max-width: 850px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin: auto;
    padding: 6px 7px 6px 13px;
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 13px;
    box-shadow: 0 10px 30px rgba(20,30,50,.08);
}

    .agent-composer:focus-within {
        border-color: var(--app-primary);
        box-shadow: 0 0 0 3px color-mix(in srgb,var(--app-primary) 10%,transparent);
    }

    .agent-composer textarea {
        width: 100%;
        min-height: 40px;
        max-height: 160px;
        padding: 9px 5px;
        resize: none;
        color: var(--app-text);
        background: transparent;
        border: 0;
        outline: 0;
        font: inherit;
        font-size: .72rem;
        line-height: 1.75;
    }

    .agent-composer button {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        flex: 0 0 38px;
        color: #fff;
        background: var(--app-primary);
        border: 0;
        border-radius: 10px;
    }

        .agent-composer button:disabled {
            opacity: .4;
        }

.agent-composer-note {
    display: block;
    margin: 6px auto 0;
    text-align: center;
    color: var(--app-muted);
    font-size: .54rem;
}

.agent-inspector {
    display: flex;
    flex-direction: column;
    background: var(--app-elevated);
    border-right: 1px solid var(--app-border);
}

.agent-inspector-tabs {
    min-height: 55px;
    display: flex;
    align-items: end;
    padding: 0 8px;
    border-bottom: 1px solid var(--app-border);
    overflow-x: auto;
}

    .agent-inspector-tabs > button:not(.agent-icon-btn) {
        min-height: 54px;
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 0 9px;
        flex: 0 0 auto;
        color: var(--app-muted);
        background: transparent;
        border: 0;
        border-bottom: 2px solid transparent;
        font-size: .65rem;
    }

    .agent-inspector-tabs > button.active {
        color: var(--app-primary);
        border-bottom-color: var(--app-primary);
    }

    .agent-inspector-tabs button b {
        min-width: 19px;
        padding: 2px 5px;
        background: var(--app-surface-solid);
        border-radius: 9px;
        font-size: .53rem;
    }

.agent-inspector-pane {
    display: none;
    min-height: 0;
    flex: 1;
    overflow: auto;
}

    .agent-inspector-pane.active {
        display: block;
    }

.agent-file-toolbar {
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    color: var(--app-muted);
    border-bottom: 1px solid var(--app-border);
    font-size: .6rem;
}

    .agent-file-toolbar button {
        width: 29px;
        height: 29px;
        color: var(--app-muted);
        background: transparent;
        border: 0;
        border-radius: 7px;
    }

        .agent-file-toolbar button:hover {
            color: var(--app-primary);
            background: var(--app-primary-soft);
        }

.agent-file-list {
    padding: 7px;
}

    .agent-file-list > button {
        width: 100%;
        display: grid;
        grid-template-columns: 25px minmax(0,1fr) auto;
        align-items: center;
        gap: 7px;
        padding: 8px;
        text-align: right;
        color: var(--app-text);
        background: transparent;
        border: 1px solid transparent;
        border-radius: 8px;
    }

        .agent-file-list > button:hover {
            background: var(--app-surface-solid);
            border-color: var(--app-border);
        }

        .agent-file-list > button > i {
            color: var(--app-primary);
        }

    .agent-file-list span {
        min-width: 0;
    }

    .agent-file-list strong, .agent-file-list small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .agent-file-list strong {
        font-size: .64rem;
    }

    .agent-file-list small {
        margin-top: 3px;
        color: var(--app-muted);
        font-size: .52rem;
        direction: ltr;
        text-align: right;
    }

    .agent-file-list b {
        color: var(--app-muted);
        font-size: .51rem;
    }

.agent-tool-list {
    padding: 8px;
}

.agent-tool-item {
    display: grid;
    grid-template-columns: 29px minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    padding: 9px;
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 9px;
}

    .agent-tool-item > span {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        color: var(--app-muted);
        background: var(--app-elevated);
        border-radius: 7px;
    }

        .agent-tool-item > span.is-success {
            color: var(--app-success);
        }

        .agent-tool-item > span.is-danger {
            color: var(--app-danger);
        }

        .agent-tool-item > span.is-warning {
            color: var(--app-warning);
        }

    .agent-tool-item strong, .agent-tool-item small {
        display: block;
    }

    .agent-tool-item strong {
        font-size: .62rem;
        direction: ltr;
        text-align: right;
    }

    .agent-tool-item small, .agent-tool-item > b {
        margin-top: 3px;
        color: var(--app-muted);
        font-size: .52rem;
    }

.agent-panel-loading, .agent-panel-empty {
    min-height: 120px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 8px;
    padding: 18px;
    text-align: center;
    color: var(--app-muted);
    font-size: .63rem;
}

.agent-plan-summary { padding: 10px; border-bottom: 1px solid var(--app-border); }
.agent-plan-head { display: grid; grid-template-columns: 35px minmax(0,1fr) auto; align-items: center; gap: 9px; }
.agent-plan-head > span { width: 34px; height: 34px; display: grid; place-items: center; color: var(--app-primary); background: var(--app-primary-soft); border-radius: 9px; }
.agent-plan-head strong, .agent-plan-head small { display: block; }
.agent-plan-head strong { overflow: hidden; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.agent-plan-head small { margin-top: 4px; color: var(--app-muted); font-size: .5rem; direction: ltr; text-align: right; }
.agent-plan-head > b { color: var(--app-primary); font-size: .65rem; }
.agent-plan-runtime { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 10px; }
.agent-plan-runtime > span { min-width: 0; padding: 8px; border: 1px solid var(--app-border); border-radius: 9px; background: var(--app-surface-soft); }
.agent-plan-runtime small, .agent-plan-runtime strong { display: block; }
.agent-plan-runtime small { margin-bottom: 3px; color: var(--app-muted); font-size: .46rem; }
.agent-plan-runtime strong, .agent-plan-runtime code { display: block; overflow: hidden; color: var(--app-text); font-size: .49rem; text-overflow: ellipsis; white-space: nowrap; }
.agent-architecture-summary { padding: 0 10px 10px; }
.agent-architecture-summary article { padding: 10px; border: 1px solid color-mix(in srgb,var(--app-primary) 24%,var(--app-border)); border-radius: 11px; background: linear-gradient(145deg,color-mix(in srgb,var(--app-primary) 8%,var(--app-surface)),var(--app-surface)); }
.agent-architecture-summary header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.agent-architecture-summary header span { display: flex; align-items: center; gap: 6px; font-size: .56rem; }
.agent-architecture-summary header i { color: var(--app-primary); }
.agent-architecture-summary header b { padding: 3px 6px; border-radius: 999px; background: var(--app-surface); color: var(--app-muted); font-size: .43rem; }
.agent-architecture-summary header b.is-success { color: var(--app-success); }
.agent-architecture-summary header b.is-working { color: var(--app-primary); }
.agent-architecture-summary p { max-height: 160px; margin: 8px 0; overflow: auto; color: var(--app-muted); font-size: .49rem; line-height: 1.9; }
.agent-architecture-summary footer { display: flex; flex-wrap: wrap; gap: 4px; }
.agent-architecture-summary footer span { padding: 3px 6px; border: 1px solid var(--app-border); border-radius: 999px; background: var(--app-surface); color: var(--app-text); font-size: .42rem; }
.agent-task-graph { padding: 10px 8px 20px; }
.agent-task-card { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 7px; }
.agent-task-rail { display: flex; flex-direction: column; align-items: center; }
.agent-task-rail span { width: 25px; height: 25px; display: grid; place-items: center; z-index: 1; color: var(--app-muted); background: var(--app-surface-solid); border: 1px solid var(--app-border); border-radius: 50%; font-size: .52rem; }
.agent-task-rail i { width: 1px; min-height: 38px; flex: 1; background: var(--app-border); }
.agent-task-card.is-success .agent-task-rail span { color: #fff; background: var(--app-success); border-color: var(--app-success); }
.agent-task-card.is-working .agent-task-rail span { color: #fff; background: var(--app-primary); border-color: var(--app-primary); box-shadow: 0 0 0 5px var(--app-primary-soft); }
.agent-task-card.is-warning .agent-task-rail span { color: #fff; background: var(--app-warning); border-color: var(--app-warning); }
.agent-task-main { margin-bottom: 9px; padding: 9px 10px; background: var(--app-surface-solid); border: 1px solid var(--app-border); border-radius: 9px; }
.agent-task-main header { display: flex; justify-content: space-between; gap: 7px; }
.agent-task-main header span { min-width: 0; }
.agent-task-main strong, .agent-task-main small { display: block; }
.agent-task-main strong { font-size: .62rem; }
.agent-task-main small { margin-top: 3px; color: var(--app-muted); font-size: .49rem; direction: ltr; text-align: right; }
.agent-task-main header b { align-self: start; padding: 3px 6px; color: var(--app-muted); background: var(--app-elevated); border-radius: 999px; font-size: .48rem; white-space: nowrap; }
.agent-task-card.is-working .agent-task-main { border-color: color-mix(in srgb,var(--app-primary) 35%,var(--app-border)); }
.agent-task-card.is-working .agent-task-main header b { color: var(--app-primary); background: var(--app-primary-soft); }
.agent-task-main p { margin: 8px 0 0; color: var(--app-muted); font-size: .54rem; line-height: 1.75; }
.agent-task-main ul { margin: 7px 0 0; padding-right: 15px; color: var(--app-muted); font-size: .51rem; line-height: 1.8; }
.agent-task-telemetry { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.agent-task-telemetry span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; color: var(--app-muted); background: var(--app-elevated); border-radius: 999px; font-size: .42rem; direction: ltr; }
.agent-task-telemetry i { color: var(--app-primary); }
.agent-task-main footer { margin-top: 7px; padding-top: 7px; color: var(--app-muted); border-top: 1px dashed var(--app-border); font-size: .49rem; }
.agent-task-main code { display: block; margin-top: 7px; overflow: hidden; color: var(--app-primary); font-size: .47rem; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: left; }
.agent-task-main details { margin: 8px 0; border: 1px solid var(--app-border); border-radius: 8px; background: var(--app-surface-soft); }
.agent-task-main details summary { padding: 7px 8px; cursor: pointer; color: var(--app-primary); font-size: .47rem; font-weight: 700; }
.agent-task-main details div { max-height: 180px; padding: 0 8px 8px; overflow: auto; color: var(--app-muted); font-size: .47rem; line-height: 1.85; }
.agent-usage-pane { padding: 10px; }
.agent-usage-cards { display: grid; gap: 7px; }
.agent-usage-cards article { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 8px; padding: 10px; background: var(--app-surface-solid); border: 1px solid var(--app-border); border-radius: 9px; }
.agent-usage-cards article > i { width: 33px; height: 33px; display: grid; place-items: center; color: var(--app-primary); background: var(--app-primary-soft); border-radius: 8px; }
.agent-usage-cards small, .agent-usage-cards strong { display: block; }
.agent-usage-cards small { color: var(--app-muted); font-size: .52rem; }
.agent-usage-cards strong { margin-top: 3px; font-size: .7rem; direction: ltr; text-align: right; }
.agent-usage-note { margin: 10px 0; padding: 10px; color: var(--app-muted); background: var(--app-primary-soft); border-radius: 8px; font-size: .53rem; line-height: 1.8; }
.agent-budget-meter { display: grid; gap: 10px; margin-top: 10px; padding: 11px; border: 1px solid var(--app-border); border-radius: 10px; background: var(--app-surface-solid); }
.agent-budget-meter header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.agent-budget-meter header strong { font-size: .61rem; }
.agent-budget-meter header small { color: var(--app-muted); font-size: .47rem; }
.agent-budget-meter label > span { display: flex; justify-content: space-between; margin-bottom: 5px; color: var(--app-muted); font-size: .49rem; }
.agent-budget-meter label b { color: var(--app-text); direction: ltr; }
.agent-budget-meter label > i { display: block; height: 6px; overflow: hidden; background: var(--app-elevated); border-radius: 999px; }
.agent-budget-meter label em { display: block; height: 100%; background: linear-gradient(90deg,var(--app-primary),var(--app-success)); border-radius: inherit; }

.agent-settings-modal { min-height: min(82dvh,850px); }
.agent-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.agent-settings-section { padding: 15px; background: var(--app-elevated); border: 1px solid var(--app-border); border-radius: 12px; }
.agent-settings-wide { grid-column: 1/-1; }
.agent-settings-section > header { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.agent-settings-section > header > i { width: 35px; height: 35px; display: grid; place-items: center; color: var(--app-primary); background: var(--app-primary-soft); border-radius: 9px; }
.agent-settings-section > header strong, .agent-settings-section > header small { display: block; }
.agent-settings-section > header strong { font-size: .75rem; }
.agent-settings-section > header small { margin-top: 3px; color: var(--app-muted); font-size: .57rem; }
.agent-settings-form { display: grid; gap: 10px; }
.agent-settings-form > .btn { justify-self: start; }
.agent-settings-form label { color: var(--app-muted); font-size: .59rem; }
.agent-settings-form label > .form-control, .agent-settings-form label > .form-select { margin-top: 5px; }
.agent-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.agent-route-list, .agent-prompt-history { display: grid; gap: 6px; max-height: 230px; margin-top: 13px; overflow: auto; }
.agent-route-list article, .agent-prompt-history article { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; background: var(--app-surface-solid); border: 1px solid var(--app-border); border-radius: 8px; }
.agent-route-list strong, .agent-route-list small, .agent-prompt-history strong, .agent-prompt-history small { display: block; }
.agent-route-list strong, .agent-prompt-history strong { font-size: .61rem; }
.agent-route-list small, .agent-prompt-history small { margin-top: 3px; color: var(--app-muted); font-size: .51rem; }
.agent-route-list b, .agent-prompt-history b { color: var(--app-muted); font-size: .5rem; }
.agent-prompt-history b.is-active { color: var(--app-success); }
.agent-capability-profile { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.agent-capability-profile > div { min-height: 80px; padding: 10px; background: var(--app-surface-solid); border: 1px solid var(--app-border); border-radius: 9px; }
.agent-capability-profile small { display: block; margin-bottom: 7px; color: var(--app-muted); font-size: .53rem; }
.agent-capability-profile b { display: inline-block; margin: 2px; padding: 4px 7px; color: var(--app-primary); background: var(--app-primary-soft); border-radius: 999px; font-size: .52rem; }

.agent-editor-modal {
    height: min(86dvh,900px);
}

    .agent-editor-modal .modal-body {
        min-height: 0;
        padding: 0;
    }

    .agent-editor-modal textarea {
        width: 100%;
        height: 100%;
        resize: none;
        padding: 18px;
        color: #dce4f3;
        background: #0c111b;
        border: 0;
        outline: 0;
        font: 500 .78rem/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;
        direction: ltr;
        text-align: left;
        tab-size: 4;
    }

    .agent-editor-modal #agentFileHash {
        color: var(--app-muted);
        font: .58rem ui-monospace,monospace;
        direction: ltr;
    }

.agent-toast {
    position: fixed;
    left: 22px;
    bottom: 22px;
    z-index: 2000;
    max-width: min(420px,calc(100vw - 30px));
    padding: 11px 15px;
    color: #fff;
    background: #283347;
    border-radius: 9px;
    box-shadow: var(--app-shadow);
    opacity: 0;
    transform: translateY(12px);
    transition: .2s;
    font-size: .68rem;
}

    .agent-toast.is-danger {
        background: #ad2840;
    }

    .agent-toast.is-success {
        background: #117451;
    }

    .agent-toast.show {
        opacity: 1;
        transform: none;
    }

@media (max-width:1399.98px) {
    .agent-ide {
        grid-template-columns: 245px minmax(390px,1fr) 310px;
    }
}

@media (max-width:1199.98px) {
    .agent-ide {
        grid-template-columns: 235px minmax(0,1fr);
    }

    .agent-inspector {
        position: fixed;
        top: 66px;
        bottom: 0;
        left: 0;
        z-index: 1032;
        width: min(92vw,390px);
        transform: translateX(-105%);
        visibility: hidden;
        box-shadow: 20px 0 60px rgba(3,6,18,.2);
        transition: .25s;
    }

    body.agent-inspector-open .agent-inspector {
        transform: none;
        visibility: visible;
    }
}

@media (max-width:991.98px) {
    .agent-plan-runtime { grid-template-columns: 1fr; }
    .agent-page-main {
        height: calc(100dvh - 66px);
        min-height: 560px;
        padding: 10px !important;
    }

    .agent-page-header {
        min-height: 42px;
    }

        .agent-page-header > div:first-child span, .agent-page-header > div:first-child a:nth-of-type(2) {
            display: none;
        }

    .agent-global-state #newAgentSessionBtn {
        font-size: 0;
    }

    .agent-global-state #agentSettingsBtn { width: 35px; padding-inline: 0; font-size: 0; }
    .agent-global-state #agentSettingsBtn i { margin: 0; font-size: .75rem; }

    .agent-settings-grid { grid-template-columns: 1fr; }
    .agent-settings-wide { grid-column: auto; }

        .agent-global-state #newAgentSessionBtn i {
            margin: 0;
            font-size: .8rem;
        }

    .agent-ide {
        grid-template-columns: minmax(0,1fr);
        border-radius: 12px;
    }

    .agent-mobile-tools {
        display: block;
    }

    .agent-session-panel {
        position: fixed;
        top: 66px;
        bottom: 0;
        right: 0;
        z-index: 1032;
        width: min(90vw,330px);
        transform: translateX(105%);
        visibility: hidden;
        box-shadow: -20px 0 60px rgba(3,6,18,.2);
        transition: .25s;
    }

    body.agent-sessions-open .agent-session-panel {
        transform: none;
        visibility: visible;
    }

    body.agent-sessions-open::before, body.agent-inspector-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1031;
        background: rgba(3,6,18,.48);
        backdrop-filter: blur(2px);
    }

    .agent-message.is-user {
        margin-right: auto;
    }
}

@media (max-width:575.98px) {
    .agent-page-main {
        padding: 0 !important;
    }

    .agent-page-header {
        padding: 7px 10px;
    }

        .agent-page-header b {
            max-width: 42vw;
        }

    .agent-ide {
        border-inline: 0;
        border-bottom: 0;
        border-radius: 0;
    }

    .agent-conversation-header {
        min-height: 61px;
        padding: 8px;
    }

    .agent-session-identity p {
        display: none;
    }

    .agent-session-actions {
        gap: 3px;
    }

    .agent-icon-btn {
        width: 32px;
        height: 32px;
    }

    .agent-messages {
        padding: 13px 8px;
    }

    .agent-message {
        grid-template-columns: 26px minmax(0,1fr);
        gap: 6px;
    }

    .agent-message-avatar {
        width: 26px;
        height: 26px;
        border-radius: 8px;
    }

    .agent-message-body {
        padding: 10px;
    }

        .agent-message-body .ai-rich-response {
            font-size: .72rem;
        }

    .agent-tool-message {
        grid-template-columns: 24px minmax(0,1fr);
        padding: 8px;
    }

    .agent-suggestions {
        margin-inline: -4px;
    }

    .agent-composer-wrap {
        padding: 7px 8px 9px;
    }

    .agent-composer-note {
        display: none;
    }

    .agent-editor-modal {
        height: 100dvh;
        border-radius: 0 !important;
    }

    .agent-balance-pause { grid-template-columns: 30px minmax(0,1fr) auto; }
    .agent-balance-pause > a { display: none; }
    .agent-balance-pause small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .agent-form-grid, .agent-capability-profile { grid-template-columns: 1fr; }
    .agent-settings-section { padding: 11px; }
}

.agent-epic-board {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
    gap: 9px;
    margin: 10px 0 14px;
}
.agent-epic-board article {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: color-mix(in srgb,var(--app-surface-solid) 94%,var(--app-primary) 6%);
}
.agent-epic-board header { display:flex; justify-content:space-between; gap:8px; margin-bottom:7px; }
.agent-epic-board header span { color:var(--app-primary); font-size:.58rem; text-transform:uppercase; letter-spacing:.04em; }
.agent-epic-board header b { font-size:.62rem; color:var(--app-muted); }
.agent-epic-board article > strong { display:block; font-size:.72rem; }
.agent-epic-board p { margin:5px 0 9px; color:var(--app-muted); font-size:.61rem; line-height:1.8; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.agent-epic-board i { display:block; height:4px; border-radius:10px; overflow:hidden; background:var(--app-surface); }
.agent-epic-board em { display:block; height:100%; background:linear-gradient(90deg,var(--app-primary),#35c6a0); }

.agent-event-list { display:grid; gap:8px; padding:12px; }
.agent-event-list article { display:grid; grid-template-columns:30px minmax(0,1fr); gap:9px; align-items:center; padding:10px; border:1px solid var(--app-border); border-radius:10px; background:var(--app-surface-solid); }
.agent-event-list article > i { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:var(--app-primary); background:color-mix(in srgb,var(--app-primary) 12%,transparent); }
.agent-event-list article.is-warning > i { color:#d18b16; background:rgba(209,139,22,.12); }
.agent-event-list article.is-success > i { color:#15966c; background:rgba(21,150,108,.12); }
.agent-event-list strong,.agent-event-list small { display:block; }
.agent-event-list strong { font-size:.67rem; line-height:1.7; }
.agent-event-list small { color:var(--app-muted); font-size:.57rem; margin-top:2px; }

.agent-role-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:8px; margin-top:12px; }
.agent-role-list article { display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--app-border); border-radius:10px; background:var(--app-surface-solid); cursor:pointer; transition:.18s; }
.agent-role-list article:hover { border-color:color-mix(in srgb,var(--app-primary) 45%,var(--app-border)); transform:translateY(-1px); }
.agent-role-list strong,.agent-role-list small { display:block; }
.agent-role-list strong { font-size:.67rem; }
.agent-role-list small { color:var(--app-muted); font-size:.56rem; margin-top:3px; direction:ltr; text-align:left; }
.agent-role-list b { align-self:center; font-size:.56rem; color:var(--app-muted); }
.agent-role-list b.is-active { color:#15966c; }

/* Phase 3 — enterprise execution, governance and release registry */
.agent-enterprise-pane { min-height:100%; padding:12px; background:linear-gradient(180deg,color-mix(in srgb,var(--app-surface) 92%,var(--app-primary) 8%),var(--app-surface)); }
.agent-enterprise-grid { display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.agent-enterprise-card { min-width:0; padding:13px; border:1px solid var(--app-border); border-radius:13px; background:color-mix(in srgb,var(--app-surface-solid) 96%,var(--app-primary) 4%); box-shadow:0 8px 24px rgba(17,24,39,.035); }
.agent-enterprise-card > header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:11px; }
.agent-enterprise-card > header span { display:flex; align-items:center; gap:7px; }
.agent-enterprise-card > header i { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; color:var(--app-primary); background:var(--app-primary-soft); }
.agent-enterprise-card > header strong { font-size:.68rem; }
.agent-enterprise-card > header b { padding:3px 7px; border-radius:20px; color:var(--app-muted); background:var(--app-surface); font-size:.54rem; }
.agent-enterprise-card > header b.is-active { color:#108866; background:rgba(16,136,102,.12); }
.agent-enterprise-card p { margin:0; color:var(--app-muted); font-size:.6rem; line-height:1.8; }
.agent-enterprise-card > code { display:block; direction:ltr; margin-top:9px; overflow:hidden; text-overflow:ellipsis; color:var(--app-muted); font-size:.52rem; text-align:left; }
.agent-enterprise-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.agent-enterprise-metrics span { padding:8px; border-radius:9px; background:var(--app-surface); }
.agent-enterprise-metrics small,.agent-enterprise-metrics strong { display:block; }
.agent-enterprise-metrics small { color:var(--app-muted); font-size:.49rem; }
.agent-enterprise-metrics strong { margin-top:3px; font-size:.67rem; }
.agent-gate-list,.agent-change-list,.agent-release-list { display:grid; gap:6px; }
.agent-gate-list > div,.agent-change-list > div,.agent-release-list > div { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px; border:1px solid var(--app-border); border-radius:9px; background:var(--app-surface-solid); }
.agent-gate-list > div { justify-content:flex-start; }
.agent-gate-list > div > i { color:#d04e5b; }
.agent-gate-list > div.is-passed > i { color:#15966c; }
.agent-gate-list strong,.agent-gate-list small,.agent-change-list strong,.agent-change-list small,.agent-release-list strong,.agent-release-list small,.agent-release-list a { display:block; }
.agent-gate-list strong,.agent-change-list strong,.agent-release-list strong { font-size:.59rem; }
.agent-gate-list small,.agent-change-list small,.agent-release-list small { margin-top:2px; color:var(--app-muted); font-size:.5rem; }
.agent-change-list code { color:var(--app-primary); font-size:.49rem; }
.agent-release-card { grid-column:1/-1; }
.agent-release-list a { max-width:240px; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:ltr; color:var(--app-primary); font-size:.49rem; }
.agent-release-actions { display:flex; gap:5px; }
.agent-task-lane { display:flex; align-items:center; gap:5px; width:max-content; max-width:100%; margin:7px 0; padding:4px 7px; border-radius:7px; color:var(--app-primary); background:var(--app-primary-soft); font-size:.51rem; }
.agent-task-lane span { margin-inline-start:4px; color:var(--app-muted); }

@media (max-width:1199.98px) { .agent-enterprise-grid { grid-template-columns:1fr; } .agent-release-card { grid-column:auto; } }
@media (max-width:575.98px) { .agent-enterprise-pane { padding:8px; } .agent-enterprise-card { padding:10px; } .agent-enterprise-metrics { grid-template-columns:1fr; } .agent-release-list > div { align-items:flex-start; } }

/* ── Phase 4: commercial platform console ─────────────────────────────────────────────────────── */
.agent-platform-page .agent-page-main { max-width:1500px; }
.agent-org-picker { display:flex; align-items:center; gap:6px; font-size:.62rem; color:var(--app-muted); }
.agent-org-picker select { min-width:210px; }

.agent-platform-banner { margin:10px 0 0; padding:9px 13px; border-radius:10px; font-size:.66rem; border:1px solid transparent; }
.agent-platform-banner.is-info { color:var(--app-primary); background:var(--app-primary-soft); border-color:color-mix(in srgb, var(--app-primary) 25%, transparent); }
.agent-platform-banner.is-warning { color:#8a5a00; background:#fff5e0; border-color:#f0d9a8; }
.agent-platform-banner.is-danger { color:#a12a2a; background:#fdeaea; border-color:#f2c4c4; }

.agent-platform-pane { display:none; margin-top:12px; }
.agent-platform-pane.is-active { display:block; }
.agent-platform-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; }
.agent-panel-wide { grid-column:1 / -1; }

.agent-panel { padding:14px; border-radius:14px; background:var(--app-surface); border:1px solid var(--app-border); }
.agent-panel > header { margin-bottom:10px; }
.agent-panel > header h2 { margin:0; font-size:.78rem; font-weight:700; }
.agent-panel > header small { display:block; margin-top:3px; color:var(--app-muted); font-size:.58rem; line-height:1.7; }

.agent-form { display:flex; flex-direction:column; gap:9px; }
.agent-form label { display:flex; flex-direction:column; gap:4px; font-size:.6rem; color:var(--app-muted); }
.agent-form label.form-check { flex-direction:row; align-items:center; gap:7px; }
.agent-form-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.agent-form footer { display:flex; justify-content:flex-end; gap:7px; margin-top:3px; }
.agent-form.is-readonly { opacity:.55; }
.agent-form-inline { display:flex; flex-wrap:wrap; align-items:flex-end; gap:9px; margin-bottom:10px; }
.agent-form-inline label { display:flex; flex-direction:column; gap:4px; font-size:.6rem; color:var(--app-muted); }
.agent-code-input { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.6rem; line-height:1.7; direction:ltr; text-align:left; }

.agent-table-scroll { overflow-x:auto; }
.agent-table { width:100%; border-collapse:collapse; font-size:.61rem; }
.agent-table th, .agent-table td { padding:7px 9px; text-align:start; border-bottom:1px solid var(--app-border); white-space:nowrap; }
.agent-table th { color:var(--app-muted); font-weight:600; font-size:.57rem; }
.agent-table td code { font-size:.56rem; }

.agent-role-chip { display:inline-block; padding:2px 8px; border-radius:999px; font-size:.55rem; font-weight:600; color:var(--app-muted); background:var(--app-surface-2); }
.agent-role-chip.is-owner, .agent-role-chip.is-success { color:#1c7a4a; background:#e4f6ec; }
.agent-role-chip.is-admin { color:var(--app-primary); background:var(--app-primary-soft); }
.agent-role-chip.is-denied, .agent-role-chip.is-failed { color:#a12a2a; background:#fdeaea; }

.agent-policy-summary { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:9px; }
.agent-policy-summary > div { padding:9px 11px; border-radius:11px; background:var(--app-surface-2); }
.agent-policy-summary small { display:block; margin-bottom:5px; color:var(--app-muted); font-size:.56rem; }
.agent-policy-summary b { display:inline-block; margin:2px 3px 0 0; padding:2px 7px; border-radius:7px; font-size:.56rem; font-weight:600; background:var(--app-surface); }
.agent-policy-summary span { color:var(--app-muted); font-size:.58rem; }

.agent-marketplace-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:11px; }
.agent-marketplace-card { display:flex; flex-direction:column; gap:7px; padding:12px; border-radius:12px; background:var(--app-surface-2); border:1px solid var(--app-border); }
.agent-marketplace-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:9px; }
.agent-marketplace-card strong { display:block; font-size:.68rem; }
.agent-marketplace-card small { display:block; margin-top:2px; color:var(--app-muted); font-size:.55rem; }
.agent-marketplace-card p { margin:0; color:var(--app-muted); font-size:.6rem; line-height:1.8; }
.agent-marketplace-card footer { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:auto; padding-top:6px; font-size:.56rem; color:var(--app-muted); }
.agent-marketplace-card footer > span:first-child { margin-inline-end:auto; }
.agent-install-state { padding:2px 7px; border-radius:7px; color:#1c7a4a; background:#e4f6ec; }
.agent-tag-row { display:flex; flex-wrap:wrap; gap:4px; }
.agent-tag-row span { padding:2px 7px; border-radius:7px; font-size:.54rem; color:var(--app-muted); background:var(--app-surface); }

.agent-audit-health { display:flex; }
.agent-audit-status { display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:12px; width:100%; }
.agent-audit-status.is-ok { color:#1c7a4a; background:#e4f6ec; }
.agent-audit-status.is-broken { color:#a12a2a; background:#fdeaea; }
.agent-audit-status i { font-size:1.1rem; }
.agent-audit-status strong { display:block; font-size:.7rem; }
.agent-audit-status small { display:block; margin-top:2px; font-size:.57rem; opacity:.85; }

.agent-platform-page .agent-enterprise-card p.is-danger { color:#a12a2a; font-size:.6rem; }

@media (max-width:1199.98px) { .agent-platform-grid { grid-template-columns:1fr; } .agent-form-row { grid-template-columns:1fr; } }
@media (max-width:575.98px) { .agent-org-picker select { min-width:150px; } .agent-marketplace-grid { grid-template-columns:1fr; } }