:root {
    /* ── Royal Indigo & Sapphire Primary (Dark Mode) ── */
    --primary-50: #eef2ff;
    --primary-100: #e0e7ff;
    --primary-200: #c7d2fe;
    --primary-300: #a5b4fc;
    --primary-400: #818cf8;
    --primary-500: #6366f1;
    --primary-600: #4f46e5;
    --primary-700: #4338ca;
    --primary-800: #3730a3;
    --primary-900: #1e1b4b;

    /* ── Luxury Judicial Gold & Amber (Court Seals & Precedents) ── */
    --gold-100: #fef3c7;
    --gold-200: #fde68a;
    --gold-300: #fcd34d;
    --gold-400: #fbbf24;
    --gold-500: #f59e0b;
    --gold-600: #d97706;
    --gold-700: #b45309;
    --gold-glow: rgba(245, 158, 11, 0.28);

    /* ── Electric Sapphire & Cyan ── */
    --sapphire-300: #7dd3fc;
    --sapphire-400: #38bdf8;
    --sapphire-500: #0ea5e9;
    --sapphire-600: #0284c7;

    /* ── Semantic Colors (Dark Mode High-Contrast) ── */
    --success-50: #022c22;
    --success-400: #34d399;
    --success-500: #10b981;
    --success-600: #059669;
    --success-700: #047857;
    --success-glow: rgba(16, 185, 129, 0.25);

    --warning-50: #422006;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-800: #92400e;
    --warning-900: #78350f;

    --error-50: #450a0a;
    --error-100: #fee2e2;
    --error-200: #fecaca;
    --error-400: #f87171;
    --error-500: #ef4444;
    --error-600: #dc2626;
    --error-700: #b91c1c;
    --error-800: #991b1b;
    --error-900: #7f1d1d;
    --error-glow: rgba(239, 68, 68, 0.25);
    --danger-400: #f87171;
    --danger-500: #ef4444;

    /* ── Neutrals (Obsidian Velvet Dark Mode) ── */
    --bg-base: #070b14;
    --bg-surface: #0e1424;
    --bg-elevated: #141c30;
    --gray-50: #070b14;
    --gray-100: #0e1424;
    --gray-200: #17223b;
    --gray-300: #263554;
    --gray-400: #475569;
    --gray-500: #64748b;
    --gray-550: #8291a5;
    --gray-600: #94a3b8;
    --gray-700: #cbd5e1;
    --gray-800: #e2e8f0;
    --gray-850: #0a0f1d;
    --gray-900: #f8fafc;
    --white: #ffffff;

    /* ── Typography ── */
    --font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif: 'Cinzel', 'Playfair Display', Georgia, serif;

    /* Fluid Type Scale — clamp(min, preferred, max) */
    --text-xs: clamp(0.68rem, 1.5vw, 0.78rem);
    --text-sm: clamp(0.82rem, 2vw, 0.885rem);
    --text-base: clamp(0.92rem, 2.5vw, 1.02rem);
    --text-lg: clamp(1.05rem, 3vw, 1.15rem);
    --text-xl: clamp(1.18rem, 3.5vw, 1.3rem);
    --text-2xl: clamp(1.35rem, 4vw, 1.58rem);
    --text-3xl: clamp(1.6rem, 5vw, 1.95rem);
    --text-4xl: clamp(1.85rem, 6vw, 2.35rem);
    --text-5xl: clamp(2.15rem, 7vw, 3.15rem);
    --text-hero: clamp(2.25rem, 6vw + 0.5rem, 3.75rem);

    /* ── Spacing Scale ── */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;

    /* ── Border Radius ── */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* ── Shadows (Deep Obsidian Glass Elevation) ── */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.65), 0 8px 16px rgba(0, 0, 0, 0.4);
    --shadow-2xl: 0 28px 60px rgba(0, 0, 0, 0.75);
    --shadow-glow: 0 0 24px rgba(99, 102, 241, 0.4);

    /* ── Glassmorphism ── */
    --glass-bg: rgba(14, 20, 36, 0.78);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.09);
    --glass-blur: 20px;
    --accent-glow: rgba(99, 102, 241, 0.2);

    /* ── Gradients ── */
    --grad-primary: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #4338ca 100%);
    --grad-gold: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    --grad-accent: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    --grad-surface: linear-gradient(180deg, rgba(23, 34, 59, 0.7), rgba(14, 20, 36, 0.9));
    --grad-hero: linear-gradient(135deg, #070b14 0%, #111827 40%, #1e1b4b 100%);

    /* ── Transitions ── */
    --tx-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --tx-normal: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --tx-premium: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    /* ── Theme Semantic Aliases (Dark Mode Defaults) ── */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(99, 102, 241, 0.4);
    --bg-card: #0e1424;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    /* Legacy aliases for JS-dependent code */
    --transition-fast: var(--tx-fast);
    --transition-normal: var(--tx-normal);
    --transition-premium: var(--tx-premium);
    --font-size-xs: var(--text-xs);
    --font-size-sm: var(--text-sm);
    --font-size-base: var(--text-base);
    --font-size-lg: var(--text-lg);
    --font-size-xl: var(--text-xl);
    --font-size-2xl: var(--text-2xl);
    --font-size-3xl: var(--text-3xl);
    --font-size-4xl: var(--text-4xl);
    --spacing-1: var(--sp-1);
    --spacing-2: var(--sp-2);
    --spacing-3: var(--sp-3);
    --spacing-4: var(--sp-4);
    --spacing-5: var(--sp-5);
    --spacing-6: var(--sp-6);
    --spacing-8: var(--sp-8);
    --spacing-10: var(--sp-10);
    --spacing-12: var(--sp-12);
    --spacing-16: var(--sp-16);
}

/* ── Light Mode Comprehensive Token Overrides ── */
[data-theme="light"] {
    --primary-50: #eef2ff;
    --primary-100: #e0e7ff;
    --primary-200: #c7d2fe;
    --primary-300: #a5b4fc;
    --primary-400: #818cf8;
    --primary-500: #6366f1;
    --primary-600: #4f46e5;
    --primary-700: #4338ca;
    --primary-800: #3730a3;
    --primary-900: #1e1b4b;

    --gold-100: #fef3c7;
    --gold-200: #fde68a;
    --gold-300: #fcd34d;
    --gold-400: #fbbf24;
    --gold-500: #d97706;
    --gold-600: #b45309;
    --gold-700: #92400e;
    --gold-glow: rgba(217, 119, 6, 0.2);

    --sapphire-300: #7dd3fc;
    --sapphire-400: #38bdf8;
    --sapphire-500: #0ea5e9;
    --sapphire-600: #0284c7;

    --success-50: #f0fdf4;
    --success-400: #34d399;
    --success-500: #16a34a;
    --success-600: #15803d;
    --success-700: #166534;
    --success-glow: rgba(22, 163, 74, 0.2);

    --warning-50: #fffbeb;
    --warning-500: #d97706;
    --warning-600: #b45309;
    --warning-800: #92400e;
    --warning-900: #78350f;

    --error-50: #fef2f2;
    --error-100: #fee2e2;
    --error-200: #fecaca;
    --error-400: #f87171;
    --error-500: #dc2626;
    --error-600: #b91c1c;
    --error-700: #991b1b;
    --error-800: #7f1d1d;
    --error-900: #450a0a;
    --error-glow: rgba(220, 38, 38, 0.2);
    --danger-400: #f87171;
    --danger-500: #dc2626;

    /* ── Light Neutrals (Crisp Porcelain & Slate) ── */
    --bg-base: #f8fafc;
    --bg-surface: #ffffff;
    --bg-elevated: #f1f5f9;
    --bg-card: #ffffff;
    --border-color: rgba(15, 23, 42, 0.1);
    --border-hover: rgba(99, 102, 241, 0.5);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;

    --gray-50: #ffffff;
    --gray-100: #f8fafc;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-550: #5a6474;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-850: #f1f5f9;
    --gray-900: #0f172a;
    --white: #ffffff;

    --glass-bg: rgba(255, 255, 255, 0.92);
    --glass-border: rgba(15, 23, 42, 0.09);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 1);
    --accent-glow: rgba(99, 102, 241, 0.15);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.09), 0 4px 8px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 32px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.06);
    --shadow-2xl: 0 28px 56px rgba(0, 0, 0, 0.14);
    --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.2);

    --grad-primary: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    --grad-gold: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --grad-surface: linear-gradient(180deg, #ffffff, #f8fafc);
    --grad-hero: linear-gradient(135deg, #f0f9ff 0%, #e0e7ff 50%, #f8fafc 100%);

    color: #0f172a;
}

/* ============================================================================
   2. GLOBAL RESET & BASE
   ============================================================================ */

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

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    /* Prevent dark mode flash — honor system preference */
    color-scheme: dark;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

[data-theme="light"] html,
html[data-theme="light"] {
    color-scheme: light;
}

body {
    font-family: var(--font-family);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--gray-800);
    /* Use the CSS variable so body always matches the theme — NO flash */
    background: var(--gray-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    overflow-x: hidden;
    max-width: 100vw;
}

/* Background gradient for body (applies in dark mode) */
html:not([data-theme="light"]) body,
html[data-theme="dark"] body {
    background-color: var(--bg-base);
    background-image:
        radial-gradient(circle at 50% -10%, rgba(99, 102, 241, 0.18) 0%, transparent 60%),
        radial-gradient(circle at 100% 40%, rgba(168, 85, 247, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 0% 80%, rgba(14, 165, 233, 0.06) 0%, transparent 40%);
    background-attachment: fixed;
    color: var(--gray-800);
}

html[data-theme="light"] body {
    background-color: #f8fafc;
    background-image:
        radial-gradient(at 0% 0%, hsla(201, 100%, 96%, 1) 0, transparent 50%),
        radial-gradient(at 50% 0%, hsla(225, 100%, 98%, 1) 0, transparent 50%),
        radial-gradient(at 100% 0%, hsla(201, 100%, 96%, 1) 0, transparent 50%);
    background-attachment: fixed;
    color: #1e293b;
}

/* Fluid heading scale */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 750;
    line-height: 1.25;
    color: var(--gray-900);
    letter-spacing: -0.025em;
}

h1 {
    font-size: var(--text-4xl);
    font-weight: 800;
}

h2 {
    font-size: var(--text-3xl);
    font-weight: 750;
}

h3 {
    font-size: var(--text-2xl);
    font-weight: 700;
}

h4 {
    font-size: var(--text-xl);
    font-weight: 700;
}

h5 {
    font-size: var(--text-lg);
    font-weight: 650;
}

h6 {
    font-size: var(--text-base);
    font-weight: 600;
}

a {
    color: var(--primary-400);
    text-decoration: none;
    transition: color var(--tx-fast);
}

a:hover {
    color: var(--primary-300);
}

button {
    font-family: inherit;
    cursor: pointer;
}

/* Prevent iOS auto-zoom on input focus */
input,
textarea,
select {
    font-family: inherit;
    font-size: max(16px, 1rem);
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

.hidden,
.u-hidden,
.system-deployment-alert-banner.hidden,
.system-deployment-alert-banner.u-hidden {
    display: none !important;
}

/* Touch-target safety */
button,
[role="button"],
.btn,
a.btn,
.tab-button,
.faq-question,
.sim-preset-btn,
.explorer-tab,
.docs-tab-btn {
    min-height: 44px;
    min-width: 44px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* ============================================================================
   3. UTILITY CLASSES
   ============================================================================ */

.brand-name-serif {
    font-family: var(--font-serif);
}

.text-muted {
    color: var(--gray-600);
}

.hide-on-mobile {
    display: none;
}

/* Reveal on scroll animation */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.75s cubic-bezier(0.215, 0.61, 0.355, 1),
        transform 0.75s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Skeleton loader */
.skeleton {
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite ease-in-out;
    border-radius: var(--radius-sm);
}

.skeleton-text {
    height: 1.2rem;
    margin-bottom: 0.5rem;
    width: 100%;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-title {
    height: 2rem;
    margin-bottom: 1rem;
    width: 80%;
}

.skeleton-card {
    height: 150px;
    border-radius: var(--radius-lg);
}

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

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

/* ============================================================================
   4. KEYFRAMES
   ============================================================================ */

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

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

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

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

@keyframes slideInRight {
    from {
        transform: translateX(110%);
        opacity: 0;
    }

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

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(110%);
        opacity: 0;
    }
}

@keyframes progressAnimation {
    0% {
        width: 0%;
    }

    50% {
        width: 70%;
    }

    100% {
        width: 100%;
    }
}

@keyframes heroPulse {

    0%,
    100% {
        box-shadow: 0 30px 80px rgba(239, 68, 68, 0.15);
    }

    50% {
        box-shadow: 0 30px 100px rgba(239, 68, 68, 0.3);
    }
}

@keyframes badgePop {
    0% {
        transform: scale(0.9);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

@keyframes tourCardPop {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(10px);
    }

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

@keyframes tourPulse {
    0% {
        outline-color: var(--primary-500);
        box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
    }

    100% {
        outline-color: var(--primary-300);
        box-shadow: 0 0 35px rgba(99, 102, 241, 0.7);
    }
}

/* ============================================================================
   5. TOAST NOTIFICATION SYSTEM
   ============================================================================ */

.toast-container {
    position: fixed;
    bottom: var(--sp-6);
    right: var(--sp-6);
    left: auto;
    top: auto;
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--sp-3);
    max-width: 420px;
    width: auto;
    pointer-events: none;
}

@media (max-width: 640px) {
    .toast-container {
        bottom: var(--sp-4);
        right: var(--sp-4);
        left: var(--sp-4);
        max-width: none;
    }
}

.toast {
    background: var(--bg-surface, #ffffff);
    color: var(--text-primary, #0f172a);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: var(--radius-lg);
    padding: 0.75rem 1.15rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: slideInUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border-left: 4px solid var(--gray-400);
    pointer-events: all;
    max-width: 100%;
    position: relative;
}

.toast.toast-success {
    border-left-color: var(--success-500);
}

.toast.toast-error {
    border-left-color: var(--error-500);
}

.toast.toast-warning {
    border-left-color: var(--warning-500);
}

.toast.toast-info {
    border-left-color: var(--primary-500);
}

.toast.removing {
    animation: slideOutRight 0.3s ease-in forwards;
}

.toast-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.toast-success .toast-icon {
    color: var(--success-500);
}

.toast-error .toast-icon {
    color: var(--error-500);
}

.toast-warning .toast-icon {
    color: var(--warning-500);
}

.toast-info .toast-icon {
    color: var(--primary-500);
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    margin-bottom: var(--sp-1);
    color: var(--gray-800);
    font-size: var(--text-sm);
}

.toast-message {
    font-size: var(--text-sm);
    color: var(--gray-600);
    line-height: 1.45;
}

.toast-close {
    background: none;
    border: none;
    color: var(--gray-500);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 2px;
    margin-left: auto;
    transition: color var(--tx-fast);
    min-height: 0;
    min-width: 0;
    /* override touch-target rule for close btn */
}

.toast-close:hover {
    color: var(--gray-800);
}

/* ============================================================================
   6. LOADING OVERLAYS
   ============================================================================ */

/* App boot spinner */
.loading-screen {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-800));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-content {
    text-align: center;
}

.loading-spinner {
    width: 56px;
    height: 56px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto var(--sp-4);
}

.loading-text {
    color: white;
    font-size: var(--text-lg);
    font-weight: 500;
}

/* Analysis in-progress overlay */
.analysis-loading {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: var(--sp-4);
}

.analysis-loading-content {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    padding: clamp(1.5rem, 6vw, 3rem);
    width: min(480px, 100%);
    text-align: center;
    box-shadow: var(--shadow-2xl);
}

.analysis-spinner {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--sp-6);
    border: 6px solid var(--primary-100);
    border-top-color: var(--primary-500);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

.analysis-loading-content h3 {
    font-size: var(--text-2xl);
    margin-bottom: var(--sp-3);
}

.analysis-loading-content p {
    color: var(--gray-600);
    margin-bottom: var(--sp-6);
}

.analysis-progress {
    height: 6px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.analysis-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-400));
    border-radius: var(--radius-full);
    animation: progressAnimation 2s ease-in-out infinite;
}

/* ============================================================================
   7. BUTTONS
   ============================================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0.65rem 1.35rem;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: 650;
    text-align: center;
    cursor: pointer;
    transition: var(--tx-premium);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.btn:active:not(:disabled) {
    transform: scale(0.97);
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary {
    background: var(--grad-primary);
    color: white;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.12);
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.48), 0 0 15px rgba(129, 140, 248, 0.4);
    border-color: rgba(255, 255, 255, 0.25);
}

.btn-gold {
    background: var(--grad-gold);
    color: #0b1120;
    font-weight: 750;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-gold:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.45);
}

.btn-success {
    background: linear-gradient(135deg, var(--success-500), var(--success-700));
    color: white;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-success:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

.btn-outline {
    background: rgba(255, 255, 255, 0.04);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--gray-700);
}

.btn-outline:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--gray-900);
    transform: translateY(-1px);
}

.btn-text {
    background: transparent;
    color: var(--gray-600);
    padding: var(--sp-2) var(--sp-4);
}

.btn-text:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
    color: var(--gray-900);
}

.btn-full {
    width: 100%;
}

.btn.loading .btn-text {
    opacity: 0;
}

.btn-loader {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: none;
}

.btn.loading .btn-loader {
    display: block;
}

/* ── Draft Tone Buttons ── */
.btn-tone {
    background: var(--gray-200);
    color: var(--gray-600);
    border: 1px solid var(--gray-300);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: var(--tx-fast);
}

.btn-tone:hover {
    background: var(--gray-300);
    color: var(--gray-900);
    transform: translateY(-1px);
}

.btn-tone.active {
    background: var(--grad-primary);
    color: white;
    border-color: var(--primary-500);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

/* ── Primary button (Prestigious Royal Indigo) ── */
button.primary,
.btn-primary {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 50%, #3730a3 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-weight: 650;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

button.primary:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #4338ca 100%);
    box-shadow: 0 8px 22px rgba(79, 70, 229, 0.45), 0 0 12px rgba(99, 102, 241, 0.3);
}

/* ============================================================================
   8. FORMS (GLOBAL)
   ============================================================================ */

.form-group {
    margin-bottom: var(--sp-5);
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--sp-2);
    color: var(--gray-700);
    font-size: var(--text-sm);
}

.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group textarea,
.form-group select {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-lg);
    font-size: max(16px, var(--text-base));
    /* prevent iOS zoom */
    transition: var(--tx-fast);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    color: var(--gray-800);
}

.form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.error-message {
    color: var(--error-600);
    font-size: var(--text-sm);
    margin-top: var(--sp-2);
    margin-bottom: var(--sp-4);
    padding: var(--sp-3);
    background: var(--error-50);
    border-radius: var(--radius-md);
    display: none;
}

.error-message.show {
    display: block;
}

/* Dark mode inputs */
[data-theme='dark'] input,
[data-theme='dark'] select,
[data-theme='dark'] textarea {
    background: rgba(15, 23, 42, 0.55);
    border-color: var(--glass-border);
    color: var(--gray-900);
    transition: all 0.3s ease;
}

[data-theme='dark'] input:focus,
[data-theme='dark'] select:focus,
[data-theme='dark'] textarea:focus {
    outline: none;
    border-color: #818cf8;
    box-shadow: 0 0 15px rgba(129, 140, 248, 0.3);
    background: rgba(15, 23, 42, 0.8);
}

/* ============================================================================
   9. SWITCH TOGGLE (iOS-style)
   ============================================================================ */

.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--gray-400);
    transition: .3s;
    border-radius: 26px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.switch input:checked+.slider {
    background: var(--primary-500);
}

.switch input:checked+.slider:before {
    transform: translateX(20px);
}

.switch input:focus-visible+.slider {
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ============================================================================
   10. INSTITUTIONAL COMPLIANCE BAR
   ============================================================================ */

.institutional-compliance-bar {
    background: linear-gradient(90deg, #090d16 0%, #1e1b4b 50%, #090d16 100%);
    color: #e2e8f0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: var(--text-xs);
    padding: 0.4rem 1rem;
    text-align: center;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.compliance-bar-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.compliance-badge {
    color: #f59e0b;
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.compliance-divider {
    color: var(--gray-500);
}

.compliance-status {
    color: #38bdf8;
}

/* ============================================================================
   11. LANDING SCREEN & NAVIGATION
   ============================================================================ */

.landing-screen {
    position: relative;
    min-height: 100vh;
    background: var(--bg-base);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.landing-screen.hidden {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Corporate Head Utility Bar (Upside of Website)
   ═══════════════════════════════════════════════════════════════════════════ */
.corporate-head-bar {
    background: linear-gradient(90deg, #070d18 0%, #0f172a 45%, #131c31 100%);
    border-bottom: 1px solid rgba(99, 102, 241, 0.25);
    color: #cbd5e1;
    font-size: 0.78rem;
    line-height: 1.4;
    padding: 0.42rem 1.5rem;
    position: relative;
    z-index: 205;
    font-family: 'Outfit', sans-serif;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.corporate-head-container {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.corp-head-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.corp-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(79, 70, 229, 0.15));
    border: 1px solid rgba(129, 140, 248, 0.35);
    color: #ffffff;
    padding: 0.18rem 0.65rem;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.03em;
    font-size: 0.76rem;
}

.corp-badge i {
    color: #fbbf24;
    font-size: 0.78rem;
}

.corp-name-text {
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #ffffff;
}

.corp-head-sep {
    color: rgba(148, 163, 184, 0.4);
    font-size: 0.72rem;
}

.corp-directors-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #94a3b8;
    font-size: 0.75rem;
}

.corp-directors-label i {
    color: #38bdf8;
    font-size: 0.74rem;
}

.corp-directors-label strong {
    color: #f1f5f9;
    font-weight: 600;
}

.corp-head-center {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.corp-reg-address {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #94a3b8;
    font-size: 0.74rem;
    cursor: default;
    transition: color 0.2s ease;
}

.corp-reg-address i {
    color: #f43f5e;
    font-size: 0.76rem;
}

.corp-reg-address:hover {
    color: #e2e8f0;
}

.corp-head-right {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.corp-contact-group {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.corp-phone-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #34d399;
    font-weight: 700;
    text-decoration: none;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 0.16rem 0.55rem;
    border-radius: 6px;
    font-size: 0.74rem;
    transition: all 0.2s ease;
}

.corp-phone-pill i {
    color: #10b981;
    font-size: 0.72rem;
}

.corp-phone-pill:hover {
    background: rgba(16, 185, 129, 0.25);
    color: #6ee7b7;
    border-color: #34d399;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2);
}

.corp-phone-sep {
    color: rgba(148, 163, 184, 0.5);
    font-size: 0.72rem;
}

.corp-email-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #818cf8;
    text-decoration: none;
    font-size: 0.74rem;
    font-weight: 600;
    transition: color 0.2s ease;
}

.corp-email-link i {
    color: #6366f1;
}

.corp-email-link:hover {
    color: #a5b4fc;
    text-decoration: underline;
}

/* Light Mode Overrides for Corporate Head Bar */
[data-theme="light"] .corporate-head-bar {
    background: linear-gradient(90deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
    color: #cbd5e1;
}

/* Landing Header Brand Component */
.landing-header-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    flex-shrink: 0;
    padding-right: 0.75rem;
    border-right: 1px solid rgba(148, 163, 184, 0.2);
    transition: transform 0.2s ease;
}

.landing-header-brand:hover {
    transform: translateY(-1px);
}

.header-brand-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.05rem;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
    flex-shrink: 0;
}

.header-brand-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.header-brand-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
}

[data-theme="light"] .header-brand-title {
    color: #0f172a;
}

.header-brand-accent {
    color: #6366f1;
    font-weight: 800;
}

.header-brand-corp {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #94a3b8;
    text-transform: uppercase;
}

@media (max-width: 991px) {
    .corp-head-center {
        display: none;
    }
}

@media (max-width: 768px) {
    .corporate-head-bar {
        padding: 0.35rem 0.85rem;
    }
    .corporate-head-container {
        justify-content: center;
        text-align: center;
    }
    .corp-head-left {
        justify-content: center;
    }
    .corp-head-right {
        justify-content: center;
        width: 100%;
    }
    .landing-header-brand {
        border-right: none;
        padding-right: 0;
    }
}

/* Landing Header */
.landing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1.5rem;
    background: var(--bg-surface);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    position: sticky;
    top: 0;
    z-index: 200;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    gap: 0.75rem;
}

.landing-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: clamp(1.1rem, 3vw, 1.45rem);
    font-weight: 800;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary-600) 100%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    flex-shrink: 0;
}

.landing-logo i {
    -webkit-text-fill-color: var(--primary-500);
    flex-shrink: 0;
}

.landing-nav-links {
    display: none;
    align-items: center;
    gap: 1.25rem;
}

@media (min-width: 1024px) {
    .landing-nav-links {
        display: flex;
    }
}

.landing-nav-links a {
    color: rgba(248, 250, 252, 0.85);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: var(--tx-fast);
}

.landing-nav-links a:hover {
    color: #ffffff;
}

.landing-nav {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.landing-nav .btn-outline {
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
    background: var(--bg-surface);
    padding: 0.45rem 0.85rem;
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-full);
    transition: var(--tx-fast);
}

.landing-nav .btn-outline:hover {
    background: var(--bg-elevated);
    border-color: var(--primary-500);
    color: var(--primary-600);
}

.theme-toggle-btn {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--tx-fast);
}

.theme-toggle-btn:hover {
    background: var(--bg-elevated);
    color: var(--primary-600);
    border-color: var(--primary-400);
}

.theme-toggle-btn i {
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cmd-palette-trigger {
    padding: 0.35rem 0.65rem;
    font-size: var(--text-xs);
    border-radius: var(--radius-full);
}

.mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-md);
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--tx-fast);
}

.mobile-nav-toggle:hover {
    background: var(--bg-elevated);
    color: var(--primary-600);
}

/* Mobile Nav Drawer */
.mobile-nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 88vw);
    background: var(--bg-surface);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border-left: 1px solid var(--border-color);
    box-shadow: -15px 0 40px rgba(0, 0, 0, 0.15);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    transform: translateX(105%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
}

.mobile-nav-drawer.open {
    transform: translateX(0);
}

.mobile-nav-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.25rem;
}

.mobile-nav-close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    min-height: 0;
    min-width: 0;
    transition: color 0.2s;
}

.mobile-nav-close-btn:hover {
    color: var(--error-500);
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.mobile-nav-links a {
    color: var(--text-secondary);
    font-size: 1.05rem;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-md);
    transition: background 0.2s, color 0.2s;
}

.mobile-nav-links a:hover {
    background: var(--bg-elevated);
    color: var(--primary-600);
}

.mobile-nav-actions {
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-nav-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

/* Hero Section */
.hero-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 3rem 1.5rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

@media (min-width: 1024px) {
    .hero-section {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        align-items: center;
        gap: 3.5rem;
        padding: 4rem 2rem 3rem;
    }
}

.hero-content h1 {
    font-size: var(--text-hero);
    line-height: 1.12;
    margin-bottom: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.hero-content .highlight {
    background: linear-gradient(135deg, #4f46e5 0%, #0284c7 65%, #0ea5e9 100%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

[data-theme="dark"] .hero-content .highlight,
html:not([data-theme="light"]) .hero-content .highlight {
    background: linear-gradient(135deg, #818cf8 0%, #38bdf8 65%, #7dd3fc 100%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-content p {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.65;
}

.hero-actions {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
}

@media (min-width: 640px) {
    .hero-actions {
        flex-direction: row;
        align-items: center;
    }
}

.hero-actions .btn {
    justify-content: center;
    padding: 0.9rem 1.75rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: var(--radius-lg);
}

.hero-actions .btn-outline {
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
}

.hero-actions .btn-outline:hover {
    background: var(--bg-elevated);
    border-color: var(--primary-500);
}

.hero-actions .hero-sim-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(14, 165, 233, 0.1);
    color: var(--primary-600);
    border: 1.5px solid rgba(14, 165, 233, 0.35);
    backdrop-filter: blur(8px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.hero-actions .hero-sim-btn:hover {
    background: rgba(14, 165, 233, 0.18);
    border-color: var(--primary-500);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.25);
}

.hero-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.5rem;
    align-items: center;
}

.hero-mini-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-full);
    letter-spacing: -0.01em;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.hero-mini-badge i {
    color: var(--primary-500);
    font-size: 0.75rem;
}

.hero-mini-badge:hover {
    border-color: var(--primary-400);
    transform: translateY(-1px);
}

.hero-image {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-2xl);
    border: 1px solid var(--border-color);
}

.hero-image img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* Trust Metrics Strip */
.trust-metrics-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 1200px;
    margin: 1rem auto 3rem;
    padding: 1.5rem 1.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    width: calc(100% - 2rem);
    position: relative;
    z-index: 10;
}

@media (min-width: 768px) {
    .trust-metrics-strip {
        grid-template-columns: repeat(4, 1fr);
    }
}

.trust-metric-item {
    text-align: center;
    padding: 0.75rem 0.5rem;
}

.trust-metric-value {
    font-size: clamp(1.6rem, 5vw, 2.35rem);
    font-weight: 800;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 50%, #d97706 100%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
}

.trust-metric-label {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.4rem;
}

.legal-seal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    background: rgba(217, 119, 6, 0.1);
    border: 1px solid rgba(217, 119, 6, 0.3);
    border-radius: var(--radius-full);
    color: #b45309;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    font-family: var(--font-serif);
    text-transform: uppercase;
}

/* Section Common Header */
.section-heading {
    text-align: center;
    margin-bottom: 2.5rem;
}

.section-heading h2 {
    font-size: var(--text-3xl);
    margin-bottom: 0.75rem;
    color: var(--text-primary);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.section-heading p {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    max-width: 750px;
    margin: 0 auto;
}

/* Visual Workflow Section */
.workflow-section {
    padding: 3.5rem 1.5rem 4rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.badge-tag-workflow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: var(--radius-full, 9999px);
    color: #2563eb;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
}

[data-theme="dark"] .badge-tag-workflow {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.3);
    color: #38bdf8;
}

.workflow-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 2rem;
}

@media (min-width: 640px) {
    .workflow-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .workflow-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .workflow-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

.workflow-card {
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-xl, 16px);
    padding: 1.5rem 1.2rem;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.workflow-card:hover {
    transform: translateY(-4px);
    border-color: #2563eb;
    box-shadow: 0 12px 24px -10px rgba(37, 99, 235, 0.18);
}

.workflow-step-num {
    position: absolute;
    top: 1rem;
    right: 1.1rem;
    font-size: 1.4rem;
    font-weight: 800;
    font-family: var(--font-serif, 'Cinzel', serif);
    color: rgba(37, 99, 235, 0.18);
    line-height: 1;
}

[data-theme="dark"] .workflow-step-num {
    color: rgba(56, 189, 248, 0.25);
}

.workflow-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-lg, 12px);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(56, 189, 248, 0.15) 100%);
    border: 1px solid rgba(37, 99, 235, 0.2);
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 1.1rem;
}

[data-theme="dark"] .workflow-icon {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(56, 189, 248, 0.25) 100%);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.3);
}

.workflow-card h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.workflow-card p {
    font-size: 0.82rem;
    color: var(--text-secondary, #64748b);
    line-height: 1.45;
    margin: 0;
}

/* Features Section */
.features-section {
    padding: 4rem 1.5rem;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.features-grid,
.feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

@media (min-width: 640px) {

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

@media (min-width: 1024px) {

    .features-grid,
    .feature-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.feature-card {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-400);
}

.feature-card img {
    width: 100%;
    border-radius: var(--radius-md);
    margin-bottom: 1.25rem;
    border: 1px solid var(--border-color);
}

.feature-card h3 {
    font-size: var(--text-xl);
    margin-bottom: 0.65rem;
    color: var(--text-primary);
    font-weight: 700;
}

.feature-card p {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: var(--text-sm);
}

/* Feature Explorer Widget */
.feature-explorer {
    margin: 2.5rem auto 0;
    max-width: 1200px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    box-shadow: var(--shadow-lg);
}

.explorer-tabs {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.explorer-tab {
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-weight: 700;
    font-size: var(--text-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--tx-fast);
}

.explorer-tab.active {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
    color: #ffffff;
    border-color: var(--primary-600);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
}

.explorer-display {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.explorer-title {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--text-primary);
}

.explorer-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}

.explorer-preview-box {
    background: #0f172a;
    color: #f8fafc;
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    font-family: 'Fira Code', monospace;
    font-size: var(--text-xs);
    line-height: 1.6;
    border: 1px solid #1e293b;
}

/* ============================================================================
   12. STRATEGY SIMULATOR (CROSS-EXAMINATION RISK WORKBENCH)
   ============================================================================ */

.strategy-sim-section {
    max-width: 1200px;
    margin: 3.5rem auto;
    padding: 0 1.5rem;
}

.sim-workbench-container {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: 2rem;
    box-shadow: var(--shadow-xl);
}

.sim-preset-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.sim-preset-label {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.sim-preset-btn {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 0.45rem 1rem;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.sim-preset-btn:hover {
    background: var(--primary-50);
    border-color: var(--primary-400);
    color: var(--primary-600);
}

.sim-preset-btn.active {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
    border-color: var(--primary-600);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
}

.sim-main-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .sim-main-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.sim-controls-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sim-domain-badge {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(14, 165, 233, 0.3);
    border-radius: var(--radius-md);
    color: #0284c7;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

.sim-controls-card h3 {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.sim-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.sim-form-group label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.sim-range-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sim-range-wrapper input[type="range"] {
    flex: 1;
    accent-color: var(--primary-600);
    height: 6px;
    background: var(--gray-300);
    border-radius: 3px;
    cursor: pointer;
    font-size: max(16px, 1rem);
}

.sim-range-val {
    font-weight: 800;
    color: var(--primary-600);
    font-size: var(--text-lg);
    min-width: 2.25rem;
}

.sim-toggles-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sim-toggle-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.55rem 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all 0.2s;
}

.sim-toggle-item:hover {
    background: var(--bg-elevated);
    border-color: var(--primary-300);
}

.sim-toggle-item input[type="checkbox"] {
    accent-color: var(--primary-600);
    width: 16px;
    height: 16px;
    cursor: pointer;
    font-size: max(16px, 1rem);
}

.sim-output-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    box-shadow: var(--shadow-md);
}

.sim-score-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sim-score-title {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sim-score-num {
    font-size: clamp(1.85rem, 5vw, 2.4rem);
    font-weight: 800;
    font-family: var(--font-serif);
    color: var(--primary-600);
}

.sim-score-badge {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 700;
    margin-top: 0.2rem;
}

.sim-score-badge.safe {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.sim-score-badge.warning {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.sim-score-badge.danger {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.sim-meter-track {
    width: 100%;
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
}

.sim-meter-fill {
    height: 100%;
    background: linear-gradient(90deg, #4f46e5, #0284c7);
    border-radius: 4px;
    transition: width 0.4s ease, background 0.4s ease;
}

.sim-vector-box {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius-lg);
    padding: 0.9rem 1.15rem;
}

.sim-vector-box.success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.sim-vector-box h4 {
    font-size: var(--text-sm);
    font-weight: 700;
    margin: 0 0 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #991b1b;
}

.sim-vector-box.success h4 {
    color: #166534;
}

.sim-vector-box p {
    font-size: var(--text-sm);
    color: #7f1d1d;
    margin: 0;
    line-height: 1.5;
}

.sim-vector-box.success p {
    color: #14532d;
}

.sim-ratio-box {
    background: #eff6ff;
    border: 1px dashed #93c5fd;
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-size: var(--text-xs);
    color: #1e40af;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    line-height: 1.45;
}

/* ============================================================================
   13. DEADLINE SANDBOX & READINESS SUITE
   ============================================================================ */

.sandbox-section {
    padding: 4rem 1.5rem;
    background: var(--bg-base);
}

.sandbox-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .sandbox-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.sandbox-input-box {
    background: var(--bg-surface);
    padding: 1.75rem;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-shadow: var(--shadow-lg);
}

.sandbox-input-box h3 {
    font-size: var(--text-xl);
    color: var(--text-primary);
    margin: 0;
    font-weight: 700;
}

.sandbox-input-box .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.sandbox-input-box label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: 600;
}

.sandbox-input-box input {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.8rem 1rem;
    border-radius: var(--radius-md);
    font-size: max(16px, 1rem);
    width: 100%;
}

.sandbox-input-box input:focus {
    outline: none;
    border-color: var(--primary-500);
}

.sandbox-results-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.timeline-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: var(--bg-surface);
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.timeline-status-header h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--text-lg);
}

.status-badge {
    padding: 0.4rem 1rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.status-badge.compliant {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.status-badge.vulnerable {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.status-badge.animate-pop {
    animation: badgePop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.timeline-step-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    padding-left: 2rem;
}

.timeline-step-list::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: var(--gray-300);
}

.timeline-step-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.timeline-step-icon {
    position: absolute;
    left: -2rem;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 3px solid var(--gray-400);
    z-index: 2;
    transition: all 0.3s;
}

.timeline-step-item.success .timeline-step-icon {
    border-color: var(--success-500);
    background: var(--success-500);
}

.timeline-step-item.danger .timeline-step-icon {
    border-color: var(--danger-500);
    background: var(--danger-500);
}

.timeline-step-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-primary);
}

.timeline-step-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

.timeline-step-date {
    font-size: var(--text-sm);
    color: var(--primary-600);
    font-weight: 600;
}

/* Litigation Readiness Suite */
.readiness-section {
    padding: 4rem 1.5rem;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.readiness-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .readiness-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.checklist-card {
    background: var(--bg-surface);
    padding: 1.75rem;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-shadow: var(--shadow-lg);
}

.checklist-card h3 {
    font-size: var(--text-xl);
    color: var(--text-primary);
    margin: 0;
    font-weight: 700;
}

.checklist-item-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.checklist-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    line-height: 1.45;
}

.checklist-checkbox-label input {
    margin-top: 3px;
    accent-color: var(--primary-600);
    font-size: max(16px, 1rem);
}

.readiness-gauge-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: var(--bg-elevated);
    padding: 1.25rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 1rem;
}

.readiness-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.progress-svg {
    transform: rotate(-90deg);
}

.progress-circle-bg {
    fill: none;
    stroke: var(--gray-200);
    stroke-width: 8;
}

.progress-circle-bar {
    fill: none;
    stroke: var(--primary-600);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.4s ease-out;
}

.progress-text {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--text-primary);
}

.precedent-card {
    background: var(--bg-surface);
    padding: 1.75rem;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-shadow: var(--shadow-lg);
}

.precedent-card h3 {
    font-size: var(--text-xl);
    color: var(--text-primary);
    margin: 0;
    font-weight: 700;
}

.search-wrapper {
    position: relative;
}

.search-wrapper i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.precedent-search-bar {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.85rem 1rem 0.85rem 2.75rem;
    border-radius: var(--radius-md);
    font-size: max(16px, 1rem);
}

.precedent-search-bar:focus {
    outline: none;
    border-color: var(--primary-500);
}

.citations-list-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 0.4rem;
}

.citations-list-container::-webkit-scrollbar {
    width: 4px;
}

.citations-list-container::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 2px;
}

.citation-result-card {
    background: var(--bg-elevated);
    padding: 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.citation-result-card:hover {
    border-color: var(--primary-500);
    transform: translateX(4px);
}

.citation-result-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.citation-result-title {
    font-weight: 700;
    color: var(--text-primary);
    font-size: var(--text-base);
    margin: 0;
}

.citation-result-tag {
    font-size: var(--text-xs);
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-600);
    border: 1px solid rgba(99, 102, 241, 0.25);
    white-space: nowrap;
}

.citation-result-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.citation-result-source {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--primary-600);
}

.precedent-tag-pills {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin: 0.75rem 0 1rem 0;
}

.precedent-tag-pill {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.precedent-tag-pill:hover {
    background: var(--primary-50);
    border-color: var(--primary-300);
    color: var(--primary-600);
    transform: translateY(-1px);
}

.precedent-tag-pill.active {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
}

.rl-precedent-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 0.85rem;
    background: var(--bg-elevated);
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.rl-precedent-card:hover {
    border-color: var(--primary-400);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* ============================================================================
   14. PRICING SECTION
   ============================================================================ */

.pricing-section {
    padding: 4rem 1.5rem;
    background: var(--bg-base);
}

.pricing-toggle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.pricing-toggle-label {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-muted);
}

.pricing-toggle-label.active {
    color: var(--text-primary);
    font-weight: 700;
}

.pricing-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.pricing-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-switch {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--gray-300);
    transition: .4s;
    border-radius: 34px;
}

.slider-switch:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background: #ffffff;
    transition: .4s;
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
}

input:checked+.slider-switch {
    background: var(--primary-600);
}

input:checked+.slider-switch:before {
    transform: translateX(26px);
}

.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.pricing-card {
    background: var(--bg-surface);
    border-radius: var(--radius-2xl);
    padding: 2.25rem 1.75rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-6px);
    border-color: var(--primary-500);
    box-shadow: var(--shadow-xl);
}

.pricing-card.popular {
    border: 2px solid var(--primary-600);
    box-shadow: 0 15px 35px rgba(79, 70, 229, 0.15);
}

.pricing-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: linear-gradient(135deg, var(--primary-600), #0284c7);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.05em;
}

.pricing-header h3 {
    font-size: var(--text-xl);
    margin-bottom: 0.4rem;
    color: var(--text-primary);
    font-weight: 700;
}

.pricing-header p {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.45;
    margin: 0;
}

.pricing-price {
    font-size: clamp(2rem, 6vw, 2.75rem);
    font-weight: 800;
    color: var(--text-primary);
    margin: 1.25rem 0;
    display: flex;
    align-items: baseline;
}

.pricing-price span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 0.5rem;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    flex-grow: 1;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.4;
}

.pricing-features li i {
    color: var(--success-500);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.pricing-features li.disabled {
    color: var(--text-muted);
    opacity: 0.6;
}

.pricing-card .btn {
    width: 100%;
    text-align: center;
    padding: 0.85rem 0;
    font-weight: 700;
    border-radius: var(--radius-md);
}

/* ============================================================================
   15. TESTIMONIALS, FAQ & CONTACT
   ============================================================================ */

.testimonials-section {
    padding: 4rem 1.5rem;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.testimonial-card {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s;
}

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

.testimonial-content {
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.65;
    font-size: var(--text-sm);
    margin-bottom: 1.25rem;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.author-avatar {
    width: 44px;
    height: 44px;
    background: var(--primary-600);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 750;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.author-info h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 700;
}

.author-info p {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
}

/* FAQ */
.faq-section {
    padding: 4rem 1.5rem;
    background: var(--bg-base);
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.faq-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--tx-normal);
    box-shadow: var(--shadow-sm);
}

.faq-item:hover {
    border-color: var(--primary-400);
}

.faq-question {
    padding: 1.1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--text-base);
    min-height: 44px;
}

.faq-question i {
    transition: transform var(--tx-normal);
    color: var(--primary-500);
    flex-shrink: 0;
}

.faq-answer {
    padding: 0 1.25rem 1.1rem;
    color: var(--text-secondary);
    line-height: 1.65;
    display: none;
    font-size: var(--text-sm);
}

.faq-item.active .faq-answer {
    display: block;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

/* ============================================================================
   16. LEGAL TECH RESOURCE HUB
   ============================================================================ */

.resource-section {
    padding: 5rem 1.5rem;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
}

.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 2.5rem auto 0;
}

@media (min-width: 768px) {
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-card:hover {
    transform: translateY(-6px);
    border-color: var(--primary-400);
    box-shadow: 0 20px 35px -10px rgba(79, 70, 229, 0.15);
}

.blog-image {
    height: 180px;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 1px solid var(--border-color);
}

.blog-image i {
    font-size: 3.5rem;
    color: var(--primary-600);
    opacity: 0.85;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-image i {
    transform: scale(1.08);
}

.blog-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--primary-600);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-full);
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
}

.blog-content {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 0.85rem;
}

.blog-content h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.blog-card:hover .blog-content h3 {
    color: var(--primary-600);
}

.blog-content p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}

.blog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
}

.blog-footer div {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.blog-footer i {
    color: var(--primary-500);
}

/* Contact Section */
.contact-section {
    padding: 4rem 1.5rem;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-color);
}

.contact-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .contact-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.contact-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-info h2 {
    font-size: var(--text-3xl);
    color: var(--text-primary);
    margin-bottom: 0.85rem;
    font-weight: 800;
}

.contact-info p.contact-subtitle {
    color: var(--text-secondary);
    font-size: var(--text-lg);
    margin-bottom: 2rem;
    line-height: 1.65;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background: var(--bg-surface);
    padding: 1.1rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.contact-card i {
    font-size: 1.4rem;
    color: var(--primary-600);
    background: var(--primary-50);
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.contact-card div h4 {
    margin: 0 0 0.2rem;
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: 700;
}

.contact-card div p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.social-icons-row {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.social-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.25s ease;
    text-decoration: none;
}

.social-icon-btn:hover {
    color: white;
    background: var(--primary-600);
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
}

.contact-form-container {
    background: var(--bg-surface);
    padding: 1.75rem;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contact-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}

.contact-form label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.contact-form input,
.contact-form textarea {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.85rem 1rem;
    border-radius: 8px;
    font-size: max(16px, var(--text-base));
    transition: border-color 0.25s;
    width: 100%;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-500);
}

/* Landing Footer */
.landing-footer {
    background: #0f172a;
    color: #94a3b8;
    padding: 4rem 1.5rem 2.5rem;
    border-top: 1px solid #1e293b;
    margin-top: 3rem;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media (min-width: 768px) {
    .footer-content {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
    }
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--text-xl);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.footer-brand i {
    color: var(--primary-400);
}

.footer-desc {
    font-size: var(--text-sm);
    line-height: 1.65;
    margin-bottom: 1.25rem;
    color: #94a3b8;
}

.social-links {
    display: flex;
    gap: 0.85rem;
}

.social-links a {
    color: #94a3b8;
    font-size: 1.2rem;
    transition: color 0.2s, transform 0.2s;
}

.social-links a:hover {
    color: #ffffff;
    transform: translateY(-2px);
}

.footer-col h4 {
    color: #ffffff;
    font-size: var(--text-base);
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.footer-col a {
    display: block;
    color: #94a3b8;
    font-size: var(--text-sm);
    margin-bottom: 0.65rem;
    transition: color 0.2s;
    text-decoration: none;
}

.footer-col a:hover {
    color: #ffffff;
}

.footer-bottom {
    max-width: 1200px;
    margin: 3rem auto 0;
    padding: 1.5rem 0 0;
    text-align: center;
    border-top: 1px solid #1e293b;
    font-size: var(--text-xs);
    color: #64748b;
}

/* Newsletter */
.footer-col.newsletter-col {
    flex: 1.4;
}

.newsletter-box {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0.85rem;
}

.newsletter-box p {
    font-size: var(--text-sm);
    color: #94a3b8;
    line-height: 1.55;
    margin: 0;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.newsletter-form input {
    background: #1e293b;
    border: 1px solid #334155;
    color: #ffffff;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: max(16px, var(--text-sm));
    width: 100%;
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--primary-400);
}

.newsletter-form .btn {
    width: 100%;
    padding: 0.75rem;
    font-size: var(--text-sm);
}

/* ============================================================================
   12. AUTHENTICATION SCREENS
   ============================================================================ */

.auth-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-50) 0%, var(--gray-50) 100%);
    padding: var(--sp-4);
}

.auth-container {
    width: 100%;
    max-width: min(440px, 100% - 2rem);
}

#registerScreen .auth-container,
#loginScreen .auth-container {
    max-width: min(720px, 100% - 2rem);
}

.auth-brand {
    text-align: center;
    margin-bottom: var(--sp-8);
}

.brand-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--sp-4);
    box-shadow: var(--shadow-xl);
}

.brand-icon i {
    font-size: 2.2rem;
    color: white;
}

.auth-brand h1 {
    font-size: var(--text-3xl);
    margin-bottom: var(--sp-2);
    background: linear-gradient(135deg, var(--primary-600), var(--primary-800));
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.brand-tagline {
    color: var(--gray-600);
    font-size: var(--text-base);
}

.auth-box {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    padding: clamp(1.5rem, 5vw, 2.5rem);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

.auth-box h2 {
    font-size: var(--text-2xl);
    margin-bottom: var(--sp-2);
}

.auth-subtitle {
    color: var(--gray-600);
    margin-bottom: var(--sp-6);
    font-size: var(--text-sm);
}

.auth-form {
    margin-bottom: var(--sp-6);
}

.auth-footer {
    text-align: center;
    color: var(--gray-600);
    font-size: var(--text-sm);
}

.auth-footer a {
    font-weight: 600;
    color: var(--primary-500);
}

/* Domain Picker */
.domain-picker-section {
    margin: 1.25rem 0 0.5rem;
}

.domain-picker-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-400);
    margin-bottom: 0.75rem;
    display: block;
}

.domain-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.domain-card {
    position: relative;
    border: 2px solid var(--gray-700);
    border-radius: 14px;
    padding: 1rem 0.9rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
    background: var(--gray-900);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    color: inherit;
    font: inherit;
    appearance: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.domain-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    border-color: var(--primary-400);
}

.domain-card .dc-icon {
    font-size: 1.4rem;
    line-height: 1;
}

.domain-card .dc-title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--gray-100);
    line-height: 1.2;
}

.domain-card .dc-sub {
    font-size: var(--text-xs);
    color: var(--gray-500);
    line-height: 1.4;
}

.domain-card .dc-check {
    position: absolute;
    top: 0.55rem;
    right: 0.65rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    transition: all 0.2s;
    opacity: 0.4;
}

/* Domain Card Selected States */
.domain-card.selected--all {
    border-color: #0ea5e9;
    background: rgba(14, 165, 233, 0.08);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

.domain-card.selected--all .dc-check {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: white;
    opacity: 1;
}

.domain-card.selected--all .dc-title {
    color: #38bdf8;
}

.domain-card.selected--composite {
    border-color: #0284c7;
    background: rgba(2, 132, 199, 0.08);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2);
}

.domain-card.selected--composite .dc-check {
    background: #0284c7;
    border-color: #0284c7;
    color: white;
    opacity: 1;
}

.domain-card.selected--composite .dc-title {
    color: #38bdf8;
}

.domain-card.selected--ni {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.08);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.domain-card.selected--ni .dc-check {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
    opacity: 1;
}

.domain-card.selected--ni .dc-title {
    color: #a5b4fc;
}

.domain-card.selected--sarfaesi {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.domain-card.selected--sarfaesi .dc-check {
    background: #10b981;
    border-color: #10b981;
    color: white;
    opacity: 1;
}

.domain-card.selected--sarfaesi .dc-title {
    color: #6ee7b7;
}

.domain-card.selected--criminal {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.domain-card.selected--criminal .dc-check {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
    opacity: 1;
}

.domain-card.selected--criminal .dc-title {
    color: #fca5a5;
}

.domain-card.selected--civil {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.08);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.domain-card.selected--civil .dc-check {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: white;
    opacity: 1;
}

.domain-card.selected--civil .dc-title {
    color: #c4b5fd;
}

.domain-card.selected--notary {
    border-color: #0891b2;
    background: rgba(8, 145, 178, 0.08);
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.18);
}

.domain-card.selected--notary .dc-check {
    background: #0891b2;
    border-color: #0891b2;
    color: white;
    opacity: 1;
}

.domain-card.selected--notary .dc-title {
    color: #67e8f9;
}

.domain-picker-error {
    font-size: var(--text-xs);
    color: #f87171;
    margin-top: 0.4rem;
    display: none;
}

.domain-picker-error.visible {
    display: block;
}

.auth-domain-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 700;
    margin-top: 0.5rem;
}

.auth-domain-pill--ni {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.auth-domain-pill--sarfaesi {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* ============================================================================
   13. MAIN APP SCREEN & TOP NAV
   ============================================================================ */

.main-screen {
    min-height: 100vh;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--gray-50);
    overscroll-behavior: contain;
}

.main-screen::-webkit-scrollbar {
    width: 6px;
}

.main-screen::-webkit-scrollbar-track {
    background: var(--gray-100);
}

.main-screen::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: var(--radius-full);
}

.main-screen::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

.top-nav {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--glass-border);
    padding: var(--sp-2) var(--sp-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    gap: 0.75rem;
    flex-wrap: wrap;
    min-height: 56px;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(0.9rem, 2vw, 1.15rem);
    font-weight: 700;
    color: var(--primary-500);
    flex-shrink: 0;
}

.nav-brand .brand-title {
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--gray-800);
    white-space: nowrap;
}

.nav-brand i {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.nav-actions .btn {
    padding: 0.4rem 0.75rem;
    font-size: var(--text-xs);
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.user-role-badge {
    padding: 0.25rem 0.65rem;
    background: var(--primary-50);
    color: var(--primary-700);
    border: 1px solid var(--primary-200);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: capitalize;
    white-space: nowrap;
    line-height: 1;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.user-email-text,
.user-menu span#userEmail {
    color: var(--gray-600);
    font-size: var(--text-xs);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

.user-menu .btn {
    padding: 0.3rem 0.55rem;
    font-size: var(--text-xs);
}

.domain-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.2;
    margin-left: 0.25rem;
}

.domain-badge--ni {
    background: linear-gradient(135deg, #4338ca, #6366f1);
}

.domain-badge--sarfaesi {
    background: linear-gradient(135deg, #b45309, #f59e0b);
    color: #0f172a;
}

.domain-badge--criminal {
    background: linear-gradient(135deg, #b91c1c, #ef4444);
}

.domain-badge--civil {
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
}

.lang-toggle-btn {
    padding: 0.25rem 0.65rem;
    font-size: var(--text-xs);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1;
}

/* ============================================================================
   14. DASHBOARD
   ============================================================================ */

.dashboard-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(1rem, 4vw, 2rem);
}

.dashboard-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: var(--sp-6);
}

.dashboard-header h1 {
    font-size: var(--text-4xl);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.dashboard-subtitle {
    font-size: var(--text-base);
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.01em;
}

.kb-status-badge {
    padding: 0.4rem 0.85rem;
    font-size: var(--text-xs);
    border-radius: var(--radius-full);
    font-weight: 600;
    border: 1px solid currentColor;
}

.action-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    margin-bottom: var(--sp-10);
}

.action-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--sp-5);
    box-shadow: var(--shadow-md);
    transition: var(--tx-premium);
    cursor: pointer;
}

.action-card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    border-color: rgba(239, 68, 68, 0.2);
}

.action-card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--sp-4);
    font-size: 1.65rem;
}

.action-card h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--sp-2);
    font-weight: 700;
    color: #111827;
}

.action-card p {
    color: #6b7280;
    line-height: 1.55;
    margin-bottom: var(--sp-4);
    font-size: var(--text-sm);
}

.action-card .btn {
    width: 100%;
}

.action-card .action-card-image img {
    transition: transform 0.4s ease, opacity 0.3s ease;
}

.action-card:hover .action-card-image img {
    transform: scale(1.06);
    opacity: 1;
}

/* Recent Cases */
.recent-section {
    margin-top: var(--sp-8);
}

.recent-section h3 {
    margin-bottom: 1.25rem;
    font-size: var(--text-xl);
    color: var(--gray-800);
}

.recent-cases {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.recent-case-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    cursor: pointer;
}

.recent-case-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-300);
}

.recent-case-info h4 {
    margin: 0 0 0.2rem;
    font-size: var(--text-base);
    color: var(--gray-800);
    font-weight: 600;
}

.recent-case-info p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--gray-500);
}

.recent-case-score {
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--primary-600);
    background: var(--primary-50);
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-full);
}

.btn-delete-case {
    transition: color 0.2s ease, transform 0.2s ease;
}

.btn-delete-case:hover {
    color: var(--error-600);
    transform: scale(1.15);
}

.btn-delete-case:active {
    transform: scale(0.95);
}

/* Domain Stats & Action Grids (Dashboard) */
.domain-section-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--gray-800);
}

.domain-section-header h3 {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-400);
    margin: 0;
}

.domain-stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin: 1.25rem 0;
}

.domain-stat-card {
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    border: 1px solid var(--border-color);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
}

.domain-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-400);
}

.domain-stat-card--ni {
    background: var(--bg-surface);
    border-color: var(--border-color);
}

.domain-stat-card--ni:hover {
    border-color: var(--primary-400);
}

.domain-stat-card--sarfaesi {
    background: var(--bg-surface);
    border-color: var(--border-color);
}

.dsc-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.dsc-icon--ni {
    background: rgba(99, 102, 241, 0.12);
    color: var(--primary-500);
}

.dsc-icon--sarfaesi {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.dsc-content .dsc-value {
    font-size: clamp(1.4rem, 4vw, 1.85rem);
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
}

.dsc-content .dsc-label {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-secondary);
    margin-top: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.domain-actions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-top: 1.25rem;
}

.domain-action-card {
    border-radius: 14px;
    padding: 1.25rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    border: 1px solid;
    text-align: left;
    background: var(--white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.domain-action-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.domain-action-card--ni {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(99, 102, 241, 0.01));
    border-color: rgba(99, 102, 241, 0.25);
}

.domain-action-card--ni:hover {
    border-color: #6366f1;
}

.domain-action-card--sarfaesi {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(245, 158, 11, 0.01));
    border-color: rgba(245, 158, 11, 0.25);
}

.domain-action-card--sarfaesi:hover {
    border-color: #f59e0b;
}

.dac-icon {
    font-size: 1.5rem;
    margin-bottom: 0.65rem;
}

.dac-icon--ni {
    color: #4338ca;
}

.dac-icon--sarfaesi {
    color: #b45309;
}

.dac-title {
    font-size: var(--text-base);
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 0.25rem;
}

.dac-sub {
    font-size: var(--text-xs);
    color: var(--gray-600);
    line-height: 1.45;
}

/* Dark mode domain card text */
[data-theme="dark"] .dsc-content .dsc-value,
.dark-mode .dsc-content .dsc-value,
body.dark-theme .dsc-content .dsc-value {
    color: var(--gray-100);
}

[data-theme="dark"] .dac-title,
.dark-mode .dac-title,
body.dark-theme .dac-title {
    color: var(--gray-100);
}

[data-theme="dark"] .dsc-icon--ni,
.dark-mode .dsc-icon--ni,
body.dark-theme .dsc-icon--ni {
    color: #818cf8;
}

[data-theme="dark"] .dac-icon--ni,
.dark-mode .dac-icon--ni,
body.dark-theme .dac-icon--ni {
    color: #818cf8;
}

[data-theme="dark"] .dsc-icon--sarfaesi,
.dark-mode .dsc-icon--sarfaesi,
body.dark-theme .dsc-icon--sarfaesi {
    color: #f59e0b;
}

[data-theme="dark"] .dac-icon--sarfaesi,
.dark-mode .dac-icon--sarfaesi,
body.dark-theme .dac-icon--sarfaesi {
    color: #f59e0b;
}

/* Domain Theme Accents */
.dashboard--138 #scoreProgress {
    stroke: #6366f1;
}

.dashboard--138 .tab-button.active {
    background: #6366f1;
}

.dashboard--138 .metric-icon {
    background: rgba(99, 102, 241, 0.12);
    color: #818cf8;
}

.dashboard--138 .result-card-hero {
    border-top: 4px solid #6366f1;
}

.dashboard--138 .top-nav {
    border-bottom: 1px solid rgba(99, 102, 241, 0.25);
}

.dashboard--138 .progress-fill,
.dashboard--138 .step-badge {
    background: #6366f1;
}

.dashboard--sarfaesi #scoreProgress {
    stroke: #f59e0b;
}

.dashboard--sarfaesi .tab-button.active {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

.dashboard--sarfaesi .metric-icon {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.dashboard--sarfaesi .result-card-hero {
    border-top: 4px solid #f59e0b;
}

.dashboard--sarfaesi .top-nav {
    border-bottom: 1px solid rgba(245, 158, 11, 0.25);
}

.dashboard--sarfaesi .progress-fill,
.dashboard--sarfaesi .step-badge {
    background: #f59e0b;
}

/* ============================================================================
   15. QUICK ANALYSIS CARD
   ============================================================================ */

.quick-analysis-card {
    max-width: 800px;
    margin: 0 auto;
    background: var(--glass-bg);
    padding: 1.25rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200);
    width: 100%;
}

.quick-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.quick-proof-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}

.quick-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 0.9rem;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 500;
    min-height: 44px;
    transition: all 0.2s;
}

.quick-checkbox-label:hover {
    border-color: var(--primary-300);
    background: var(--primary-50);
}

.quick-checkbox-label input {
    accent-color: var(--primary-500);
    flex-shrink: 0;
    font-size: max(16px, 1rem);
}

.quick-actions-row {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
    margin-top: 1.25rem;
}

.quick-actions-row .btn {
    width: 100%;
    justify-content: center;
}

/* ============================================================================
   16. CASE INTAKE WIZARD
   ============================================================================ */

.wizard-container {
    max-width: 980px;
    margin: 1rem auto;
    padding: 0;
    width: calc(100% - 2rem);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.wizard-progress {
    padding: 1.25rem 1rem;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
}

.progress-bar-wrapper {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-400));
    width: 10%;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-percentage {
    font-weight: 700;
    color: var(--primary-600);
    min-width: 40px;
    font-size: var(--text-sm);
}

.progress-steps {
    display: flex;
    align-items: center;
    overflow-x: auto;
    gap: 0;
    padding: 0.35rem 0;
    scrollbar-width: none;
}

.progress-steps::-webkit-scrollbar {
    display: none;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: default;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.progress-step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gray-200);
    color: var(--gray-500);
    font-size: var(--text-xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.progress-step-label {
    font-size: 0.6rem;
    color: var(--gray-400);
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    max-width: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progress-step.active .progress-step-num {
    background: var(--primary-500);
    color: white;
    box-shadow: 0 0 0 3px var(--primary-100);
}

.progress-step.active .progress-step-label {
    color: var(--primary-600);
    font-weight: 600;
}

.progress-step.completed .progress-step-num {
    background: var(--success-500);
    color: white;
}

.progress-step-connector {
    flex: 1;
    height: 2px;
    background: var(--gray-200);
    min-width: 10px;
    max-width: 36px;
    margin-bottom: 12px;
    transition: background 0.3s ease;
}

/* Pill-style progress steps (alternative) */
.progress-step-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 600;
    background: var(--gray-200);
    color: var(--gray-600);
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 32px;
}

.progress-step-pill.active {
    background: var(--primary-500);
    color: white;
}

.progress-step-pill.done {
    background: var(--success-500);
    color: white;
}

.step-label {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wizard-content {
    padding: 1.25rem 1rem;
}

.wizard-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.wizard-header h2 {
    font-size: var(--text-2xl);
    color: var(--gray-800);
    margin-bottom: 0.4rem;
}

.wizard-header p {
    color: var(--gray-500);
    font-size: var(--text-base);
}

.step-badge {
    display: inline-block;
    padding: 0.25rem 0.85rem;
    background: var(--primary-50);
    color: var(--primary-700);
    border-radius: 20px;
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: 0.85rem;
}

/* Wizard Step Forms */
.wizard-steps .form-group,
.step-form .form-group {
    margin-bottom: 1rem;
    width: 100%;
}

.wizard-steps label,
.step-form label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    color: var(--gray-700);
    font-size: var(--text-sm);
}

.wizard-steps input,
.wizard-steps select,
.wizard-steps textarea,
.step-form input,
.step-form select,
.step-form textarea {
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: max(16px, var(--text-base));
    transition: all 0.2s ease;
    background: var(--gray-100);
    color: var(--gray-800);
    box-sizing: border-box;
}

.wizard-steps input:focus,
.wizard-steps select:focus,
.wizard-steps textarea:focus,
.step-form input:focus,
.step-form select:focus,
.step-form textarea:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
    background: var(--glass-bg);
}

.wizard-steps textarea,
.step-form textarea {
    min-height: 100px;
    line-height: 1.5;
    resize: vertical;
}

.wizard-steps input.input-error,
.wizard-steps select.input-error,
.wizard-steps textarea.input-error {
    border-color: var(--error-400);
    background: #fff5f5;
}

#wizardStepsContainer .wizard-step {
    display: none;
    animation: stepFadeIn 0.3s ease;
}

#wizardStepsContainer .wizard-step.active {
    display: block;
}

.form-grid-2col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

.form-grid-2col .form-group {
    margin-bottom: 0;
}

.form-grid-2col .form-group.full-width {
    grid-column: 1 / -1;
}

.wizard-validation {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 0.8rem 1rem;
    margin-bottom: 1.25rem;
    font-size: var(--text-sm);
    color: var(--error-700);
}

.wizard-validation i {
    color: var(--error-500);
    margin-top: 2px;
    flex-shrink: 0;
}

.wizard-validation h4 {
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--error-700);
}

.wizard-validation-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.85rem;
}

.wizard-validation-list li {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--text-xs);
    color: var(--error-600);
}

.wizard-validation-list li::before {
    content: '•';
    color: var(--error-400);
}

/* Wizard Navigation — STICKY bottom on mobile */
.wizard-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    background: var(--gray-100);
    border-top: 1px solid var(--gray-200);
    position: sticky;
    bottom: 0;
    z-index: 10;
    /* The sticky bottom means Next is always reachable without scrolling */
}

.wizard-navigation .btn {
    min-height: 48px;
    font-size: var(--text-base);
    font-weight: 700;
    border-radius: 8px;
}

#prevBtn,
#nextBtn,
#submitBtn {
    flex: 1 1 calc(50% - 0.4rem);
    justify-content: center;
}

.wizard-step-indicator {
    width: 100%;
    text-align: center;
    order: -1;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--gray-500);
    margin-bottom: 0.2rem;
}

/* ============================================================================
   17. RESULTS / ANALYSIS SCREEN
   ============================================================================ */

.results-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Results Tabs — STICKY while scrolling with clean horizontal scroll */
.results-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #ffffff;
    border: 1px solid var(--gray-200);
    padding: 0.5rem 0.75rem;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(37, 99, 235, 0.3) transparent;
    position: sticky;
    top: 72px;
    z-index: 40;
    margin-bottom: 1.75rem;
    margin-top: 0.75rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.results-tabs::-webkit-scrollbar {
    height: 5px;
    display: block;
}

.results-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.results-tabs::-webkit-scrollbar-thumb {
    background: rgba(37, 99, 235, 0.3);
    border-radius: 4px;
}

.results-tabs::-webkit-scrollbar-thumb:hover {
    background: rgba(37, 99, 235, 0.6);
}

.tab-button {
    padding: 0.6rem 1.15rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--gray-600);
    font-weight: 600;
    font-size: 0.92rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.tab-button:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.tab-button.active {
    background: var(--primary-600);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
}

.tab-content {
    display: none;
    animation: fadeIn 0.35s ease forwards;
}

.tab-content.active {
    display: block;
}

/* Nav actions above results */
.results-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 1rem;
}

.results-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    padding: 0.85rem;
}

/* Result Cards */
.result-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 1.25rem 0.9rem;
    box-shadow: var(--shadow-md), var(--glass-highlight);
    margin-bottom: 1.25rem;
    transition: var(--tx-premium);
    width: 100%;
    box-sizing: border-box;
}

.result-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl), var(--glass-highlight);
}

.result-card h3 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: var(--text-xl);
    color: var(--gray-800);
    margin-bottom: 0.4rem;
    gap: 0.5rem;
    line-height: 1.3;
}

.result-card h3 i {
    color: var(--primary-500);
    flex-shrink: 0;
}

.card-subtitle {
    color: var(--gray-500);
    font-size: var(--text-sm);
    margin-bottom: 1.25rem;
}

/* Hero Verdict Card */
.result-card-hero {
    background: var(--grad-surface);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border-top: 4px solid var(--primary-600);
    box-shadow: var(--shadow-xl);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    text-align: center;
    padding: 1.5rem 1rem;
    border-radius: 14px;
}

.result-verdict {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    width: 100%;
}

.verdict-icon {
    font-size: 3rem;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    min-width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--primary-600);
    box-shadow: var(--shadow-md);
}

.verdict-content {
    flex-grow: 1;
}

.verdict-content h1 {
    font-size: var(--text-4xl);
    font-weight: 800;
    margin-bottom: 0.4rem;
    color: var(--gray-800);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

#verdictDescription {
    font-size: var(--text-base);
    color: var(--gray-600);
    line-height: 1.6;
}

.verdict-score {
    width: 130px;
    height: 130px;
    position: relative;
    margin: 0 auto;
}

.score-circle svg {
    width: 100%;
    height: 100%;
}

.score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
}

#scoreNumber {
    font-size: clamp(1.5rem, 5vw, 2.2rem);
    font-weight: 800;
    color: var(--gray-800);
    line-height: 1;
}

.score-unit {
    font-size: var(--text-xs);
    color: var(--gray-500);
    font-weight: 600;
}

/* Fatal alert */
.cynical-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.75rem;
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(220, 38, 38, 0.35);
    border-radius: 999px;
    color: #ef4444;
    font-size: var(--text-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

/* Key Metrics Grid */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.metric-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.9rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    border-color: var(--primary-300);
}

.metric-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--primary-50);
    color: var(--primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.metric-content h4 {
    font-size: var(--text-xs);
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.metric-content p {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1;
}

/* Results Grid (Issues & Strengths columns) */
.results-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

/* AI Reasoning Layer */
.ai-reasoning-layer {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.rl-row-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.rl-card {
    padding: 1.35rem 1rem;
    height: auto;
}

.rl-card-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--gray-100);
    padding-bottom: 0.85rem;
}

.rl-card-header h4 {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--gray-800);
}

.rl-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.rl-blue {
    background: #eff6ff;
    color: #3b82f6;
}

.rl-purple {
    background: #faf5ff;
    color: #a855f7;
}

.rl-green {
    background: #f0fdf4;
    color: #22c55e;
}

.rl-red {
    background: #fef2f2;
    color: #ef4444;
}

.rl-teal {
    background: #f0fdfa;
    color: #14b8a6;
}

.rl-amber {
    background: #fffbeb;
    color: #f59e0b;
}

.rl-orange {
    background: #fff7ed;
    color: #f97316;
}

.rl-content-box {
    color: var(--gray-700);
    line-height: 1.7;
    font-size: var(--text-base);
}

.rl-outcome-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem 0;
}

.rl-trail-item {
    padding: 1rem;
    border-left: 3px solid var(--primary-400);
    background: #f8fafc;
    border-radius: 0 8px 8px 0;
    margin-bottom: 0.85rem;
}

.rl-trail-step {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--primary-700);
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.rl-statutes-grid,
.rl-precedents-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.rl-outcome-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

/* XAI Badges */
.xai-badge,
.rl-xai-badge {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--primary-50);
    color: var(--primary-700);
}

.provenance-statutory {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

.provenance-empirical {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
}

.provenance-precedential {
    background: #f3e8ff;
    color: #6b21a8;
    border: 1px solid #e9d5ff;
}

.confidence-badge {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

/* Precedent & Statute Cards */
.rl-precedent-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1.25rem;
    transition: transform 0.2s ease;
}

.rl-precedent-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.rl-precedent-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.rl-precedent-badge {
    background: #e0e7ff;
    color: #4338ca;
    padding: 0.25rem 0.65rem;
    border-radius: 99px;
    font-size: var(--text-xs);
    font-weight: 700;
}

.rl-prec-live {
    background: #dcfce7;
    color: #166534;
    padding: 0.25rem 0.65rem;
    border-radius: 99px;
    font-size: var(--text-xs);
    font-weight: 700;
}

.rl-precedent-citation {
    font-weight: 800;
    color: var(--gray-800);
    font-size: var(--text-base);
    margin-bottom: 0.4rem;
}

.rl-precedent-principle {
    color: var(--gray-600);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin-bottom: 0.85rem;
}

.rl-precedent-relevance {
    font-size: var(--text-sm);
    color: var(--primary-600);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.rl-status-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rl-status-badge.rl-success-badge {
    background: rgba(22, 163, 74, 0.12);
    color: #16a34a;
    border: 1px solid rgba(22, 163, 74, 0.25);
}

.rl-status-badge.rl-danger-badge {
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.25);
}

.rl-status-badge.rl-info-badge {
    background: rgba(14, 165, 233, 0.12);
    color: #0ea5e9;
    border: 1px solid rgba(14, 165, 233, 0.25);
}

.rl-status-badge.rl-warning-badge {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
    border: 1px solid rgba(217, 119, 6, 0.25);
}

/* Risks & Rebuttals */
.rl-risk-item {
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}

.rl-risk-item.sev-HIGH,
.rl-risk-item.sev-FATAL {
    border-left: 4px solid var(--error-500);
    background: #fef2f2;
}

.rl-risk-item.sev-MEDIUM {
    border-left: 4px solid #f59e0b;
    background: #fffbeb;
}

.rl-risk-item.sev-LOW {
    border-left: 4px solid #10b981;
    background: #f0fdf4;
}

.rl-risk-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.rl-sev-badge {
    padding: 0.25rem 0.65rem;
    border-radius: 99px;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
}

.rl-risk-header.sev-HIGH .rl-sev-badge,
.rl-risk-header.sev-FATAL .rl-sev-badge {
    background: var(--error-100);
    color: var(--error-700);
}

.rl-risk-header.sev-MEDIUM .rl-sev-badge {
    background: #fef3c7;
    color: #b45309;
}

.rl-risk-header.sev-LOW .rl-sev-badge {
    background: #d1fae5;
    color: #065f46;
}

.rl-risk-title {
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--gray-800);
}

.rl-risk-desc {
    color: var(--gray-700);
    margin-bottom: 1rem;
    font-size: var(--text-sm);
    line-height: 1.6;
}

.rl-rebuttal-box {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    padding: 1rem;
    border-radius: 8px;
    border: 1px dashed var(--gray-300);
}

.rl-rebuttal-box strong {
    color: var(--primary-700);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.55rem;
    font-size: var(--text-sm);
}

.rl-case-law {
    margin-top: 0.75rem;
    padding: 0.55rem 0.9rem;
    background: var(--gray-100);
    border-radius: 6px;
    font-size: var(--text-xs);
    color: var(--gray-600);
    display: inline-block;
}

/* Score Breakdown */
.score-attr-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--gray-100);
    flex-wrap: wrap;
    gap: 0.5rem;
}

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

.attr-label {
    font-weight: 700;
    color: var(--gray-800);
    font-size: var(--text-base);
}

.attr-desc {
    font-size: var(--text-sm);
    color: var(--gray-500);
    margin-top: 0.25rem;
}

.attr-value {
    font-weight: 800;
    font-size: var(--text-xl);
}

.attr-pos {
    color: var(--success-600);
}

.attr-neg {
    color: var(--error-600);
}

/* Evidence Meter */
.evidence-progress-bar {
    height: 10px;
    background: var(--gray-200);
    border-radius: 99px;
    overflow: hidden;
    margin-top: 0.75rem;
}

.evidence-fill {
    height: 100%;
    border-radius: 99px;
    background: var(--primary-500);
}

/* Defences */
.defence-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.1rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}

.defence-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06);
    border-color: var(--primary-300);
}

.defence-header {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 0.65rem;
}

.defence-header h4 {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
}

.defence-strength {
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
}

.defence-strength.fatal {
    background: #fef2f2;
    color: #ef4444;
    border: 1px solid #fca5a5;
}

.defence-strength.critical {
    background: #fff7ed;
    color: #ea580c;
    border: 1px solid #ffedd5;
}

.defence-strength.high {
    background: #fef9c3;
    color: #ca8a04;
    border: 1px solid #fef08a;
}

.defence-strength.medium {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.defence-strength.low {
    background: #f0f9ff;
    color: #0284c7;
    border: 1px solid #bae6fd;
}

.defence-metric {
    font-size: var(--text-xs);
    font-weight: 600;
    color: #4f46e5;
    background: #e0e7ff;
    border: 1px solid #c7d2fe;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.defence-probability-badge {
    font-size: var(--text-xl);
    font-weight: 800;
    color: #4f46e5;
    background: #e0e7ff;
    padding: 0.25rem 0.65rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-start;
}

.defence-details {
    font-size: var(--text-sm);
    color: #475569;
    margin: 0 0 0.75rem;
    line-height: 1.5;
}

.defence-rebuttal {
    font-size: var(--text-sm);
    color: #0f172a;
    background: #f0f9ff;
    padding: 0.85rem;
    border-radius: 8px;
    border-left: 4px solid #0284c7;
    line-height: 1.5;
    margin-top: 0.65rem;
}

/* Semantic Analysis */
.concept-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.1rem;
    margin-bottom: 1.1rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    transition: transform 0.22s, box-shadow 0.22s;
}

.concept-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.05);
    border-color: var(--primary-300);
}

.concept-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.55rem;
}

.concept-header h4 {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 700;
    text-transform: capitalize;
    color: #1e293b;
}

.concept-confidence {
    font-size: var(--text-xs);
    font-weight: 700;
    color: #4f46e5;
    background: #e0e7ff;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    border: 1px solid #c7d2fe;
}

.concept-phrases {
    font-size: var(--text-sm);
    color: #64748b;
    margin: 0;
    line-height: 1.4;
    font-style: italic;
}

/* Charts */
#survivabilityChart,
#attackChart {
    max-height: 260px;
    width: 100%;
}

/* Limitation Countdown Card */
#limitationCountdown,
.limitation-clock-card {
    border-radius: 14px;
    border: 1px solid var(--gray-200);
    border-left: 6px solid var(--error-500) !important;
    background: #ffffff;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.limitation-clock-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.limitation-clock-info {
    flex: 1;
    min-width: 250px;
}

.limitation-clock-badge {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--error-600);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.limitation-clock-desc {
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.45;
    margin: 0;
}

.limitation-clock-status {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

#countdownDays,
.limitation-days-number {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--error-600);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.limitation-days-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.2rem;
}

#limitationStatusBar,
.limitation-progress-track {
    height: 8px;
    background: var(--gray-200);
    border-radius: 999px;
    margin-top: 1.1rem;
    overflow: hidden;
    width: 100%;
}

#limitationStatusFill,
.limitation-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ef4444, #dc2626);
    border-radius: 999px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Timeline items */
.timeline-item {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    align-items: flex-start;
}

.timeline-item>div:last-child {
    padding: 0.85rem;
    border-radius: 10px;
    flex: 1;
}

/* Economics list */
#economicsList {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

/* Fatal Defect Alerts */
.fatal-alert-container {
    margin-bottom: 1rem;
}

.fatal-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.25rem;
    background: var(--error-50);
    border: 1px solid var(--error-200);
    border-left: 4px solid var(--error-600);
    color: var(--error-800);
    box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.1);
}

.fatal-banner i {
    font-size: 1.35rem;
    color: var(--error-600);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.fatal-banner strong {
    display: block;
    font-size: var(--text-base);
    margin-bottom: 0.2rem;
    color: var(--error-900);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.fatal-banner p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
}

.fatal-warning {
    background: var(--warning-50);
    border-color: #fde68a;
    border-left-color: var(--warning-500);
    color: var(--warning-800);
    box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.1);
}

.fatal-warning i,
.fatal-warning strong {
    color: var(--warning-500);
}

.fatal-warning strong {
    color: var(--warning-900);
}

.fatal-info {
    background: var(--primary-50);
    border-color: var(--primary-200);
    border-left-color: var(--primary-500);
    color: var(--primary-800);
}

.fatal-info i {
    color: var(--primary-500);
}

.fatal-info strong {
    color: var(--primary-900);
}

/* Insight & Suggestion panels */
.insight-panel {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    margin-top: var(--sp-5);
    box-shadow: var(--shadow-md);
}

.insight-success {
    border-left: 4px solid var(--success-500);
}

.insight-warning {
    border-left: 4px solid var(--warning-500);
}

.insight-danger {
    border-left: 4px solid var(--error-500);
}

.insight-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    color: var(--gray-800);
}

.insight-header i {
    font-size: 1.2rem;
    color: var(--primary-500);
}

.insight-header h4 {
    margin: 0;
    font-size: var(--text-lg);
}

.insight-list {
    margin-top: var(--sp-3);
    padding-left: var(--sp-4);
    color: var(--gray-700);
}

.insight-list li {
    margin-bottom: var(--sp-2);
}

.suggestions-panel {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    margin-top: var(--sp-5);
    box-shadow: var(--shadow-md);
}

.suggestions-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.suggestions-header i {
    font-size: 1.4rem;
    color: var(--warning-500);
}

.suggestions-header h4 {
    margin: 0;
    font-size: var(--text-xl);
    color: var(--gray-800);
}

.suggestions-grid {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.suggestion-item {
    background: var(--gray-100);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--primary-500);
    color: var(--gray-800);
    font-size: var(--text-sm);
}

/* ============================================================================
   18. DRAFT TAB
   ============================================================================ */

#draftTemplateSelector {
    width: 100%;
    min-height: 48px;
    font-size: max(16px, var(--text-base));
}

.draft-customization-bar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem;
}

.tone-selector {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.draft-preview-container {
    width: 100%;
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.draft-preview-textarea {
    width: 100%;
    min-height: 340px;
    background: var(--gray-100);
    color: var(--gray-800);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 1rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: max(14px, 0.9rem);
    line-height: 1.6;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.draft-preview-textarea:focus {
    outline: none;
    border-color: var(--primary-400);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

.draft-actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.6rem;
}

.draft-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-size: var(--text-base);
}

/* Draft Generator */
.draft-gen-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.draft-gen-header {
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--gray-100);
    padding-bottom: 1.25rem;
}

.draft-gen-header h2 {
    font-size: var(--text-3xl);
    color: var(--gray-800);
    margin: 0.4rem 0 0.2rem;
}

.draft-gen-header p {
    color: var(--gray-500);
    font-size: var(--text-sm);
}

.draft-gen-badge {
    display: inline-block;
    padding: 0.25rem 0.85rem;
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
    border-radius: 20px;
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.draft-type-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.draft-type-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.draft-type-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-300);
}

.draft-type-num {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-lg);
    flex-shrink: 0;
}

.draft-type-icon-wrap {
    font-size: 1.4rem;
    opacity: 0.8;
}

.draft-type-info h4 {
    font-size: var(--text-xl);
    margin-bottom: 0.2rem;
    color: var(--gray-800);
}

.draft-type-sub {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--gray-500);
    display: block;
    margin-bottom: 0.65rem;
}

.draft-type-info p {
    color: var(--gray-600);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.draft-type-chevron {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: all 0.3s ease;
}

.draft-type-card.card-exhausted {
    background: rgba(239, 68, 68, 0.03);
    border-color: rgba(239, 68, 68, 0.25);
}

.draft-type-card.card-exhausted:hover {
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow: 0 10px 25px rgba(239, 68, 68, 0.1);
}

.draft-plan-quota-notice {
    animation: fadeInNotice 0.4s ease-out;
}

@keyframes fadeInNotice {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.draft-back-link {
    background: none;
    border: none;
    color: var(--gray-500);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    padding: 0;
    font-family: inherit;
}

.draft-back-link:hover {
    color: var(--primary-600);
}

.draft-fields-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 2rem;
    padding: 1.25rem;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 1.25rem;
}

.draft-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.draft-field-group.full-width {
    grid-column: 1 / -1;
}

.draft-field-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--gray-700);
}

.req-star {
    color: var(--error-500);
    margin-left: 2px;
}

.draft-field-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: max(16px, var(--text-base));
    font-family: inherit;
    background: var(--gray-100);
    color: var(--gray-800);
    transition: all 0.2s;
}

.draft-field-input:focus {
    outline: none;
    border-color: var(--primary-500);
    background: var(--glass-bg);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.draft-field-input.field-error {
    border-color: var(--error-400);
    background: #fff5f5;
}

.draft-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.85rem;
    padding: 1.25rem 0;
    flex-wrap: wrap;
}

.draft-form-actions .btn-lg {
    padding: 0.875rem 2rem;
    font-size: var(--text-base);
    font-weight: 600;
    border-radius: 10px;
}

.draft-missing-toast {
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.85rem;
    color: var(--error-700);
    font-size: var(--text-sm);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.draft-input-grid {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.draft-output-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.draft-output-header {
    background: var(--gray-100);
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.draft-output-actions {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.draft-output-content {
    padding: 1.5rem;
    font-family: 'Times New Roman', Times, serif;
    font-size: clamp(0.9rem, 2.5vw, 1.05rem);
    line-height: 1.9;
    color: #111;
    min-height: 300px;
    max-height: 65vh;
    overflow-y: auto;
    background: var(--glass-bg);
    white-space: pre-wrap;
}

.draft-output-content p {
    margin-bottom: 1rem;
}

.draft-output-toolbar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.25rem;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
    border-radius: 12px 12px 0 0;
    flex-wrap: wrap;
}

.draft-output-wrapper {
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* ============================================================================
   19. SARFAESI / NI Act SPECIFIC PANELS
   ============================================================================ */

.sarfaesi-enforcement-panel {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(180, 83, 9, 0.03));
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.sarfaesi-enforcement-panel h3 {
    color: #fcd34d;
    font-size: var(--text-base);
    font-weight: 700;
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.enforcement-stage-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fcd34d;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cersai-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--gray-900);
    border: 1px solid var(--gray-800);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.55rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cersai-ok {
    color: #10b981;
}

.cersai-fail {
    color: #ef4444;
}

.ni-pillars-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin-top: 0.65rem;
}

.ni-pillar {
    border-radius: 10px;
    padding: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid;
    font-size: var(--text-sm);
    font-weight: 600;
}

.ni-pillar--pass {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
    color: #34d399;
}

.ni-pillar--fail {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
    color: #f87171;
}

.ni-pillar--warn {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.25);
    color: #fcd34d;
}

/* ============================================================================
   20. LEGAL MODAL
   ============================================================================ */

.legal-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.88);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 1rem;
    padding-top: max(1rem, env(safe-area-inset-top));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    overscroll-behavior: contain;
}

.legal-modal:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

.legal-modal-content {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    width: 100%;
    max-width: min(700px, 95vw);
    max-height: 88vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.45);
    transform: translateY(16px) scale(0.97);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: auto;
    margin-bottom: auto;
    color: #0f172a;
}

.legal-modal:not(.hidden) .legal-modal-content {
    transform: translateY(0) scale(1);
}

.legal-modal-content::-webkit-scrollbar {
    width: 6px;
}

.legal-modal-content::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 0 16px 16px 0;
}

.legal-modal-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.legal-modal-content::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.close-modal {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    font-size: 1.75rem;
    font-weight: 300;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, transform 0.2s;
    z-index: 10;
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-modal:hover {
    color: #ef4444;
    transform: scale(1.1);
}

.legal-modal-header {
    padding: 1.5rem 1.5rem 1.1rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 16px 16px 0 0;
}

.legal-modal-header h2 {
    color: #0f172a;
    font-size: var(--text-2xl);
    font-weight: 800;
    margin-bottom: 0.35rem;
    letter-spacing: -0.02em;
}

.effective-date {
    font-size: var(--text-sm);
    color: #64748b;
    font-weight: 500;
}

.legal-text {
    padding: 1.5rem;
    color: #334155;
    line-height: 1.75;
    font-size: var(--text-base);
}

.legal-text h3 {
    color: #0f172a;
    font-size: var(--text-lg);
    font-weight: 700;
    margin: 1.5rem 0 0.75rem;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.4rem;
}

.legal-text p {
    margin-bottom: 1rem;
    text-align: left;
    color: #334155;
}

.legal-text ul {
    margin-bottom: 1.25rem;
    padding-left: 1.25rem;
}

.legal-text li {
    margin-bottom: 0.65rem;
    color: #334155;
}

.legal-text strong {
    color: #0f172a;
    font-weight: 600;
}

.warning-box {
    background: #fff5f5;
    border-left: 4px solid var(--error-500);
    padding: 1.1rem 1.25rem;
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.warning-box i {
    color: var(--error-500);
    font-size: 1.4rem;
    flex-shrink: 0;
}

.warning-box span {
    color: var(--error-700);
    font-weight: 700;
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
}

/* Generic Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    overscroll-behavior: contain;
}

.modal-overlay:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

.modal-container,
.modal-content {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    width: min(95vw, 700px);
    max-height: 88vh;
    overflow-y: auto;
    padding: 1.25rem 1rem;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55);
    margin: auto;
    overscroll-behavior: contain;
}

.modal-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    font-size: 1.5rem;
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.modal-close:hover {
    color: var(--error-500);
}

/* Documentation Modal */
.docs-modal-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-height: 400px;
    max-height: 60vh;
}

.docs-modal-sidebar {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 0.4rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-200);
    scrollbar-width: none;
}

.docs-modal-sidebar::-webkit-scrollbar {
    display: none;
}

.docs-tab-btn {
    background: none;
    border: none;
    color: var(--gray-600);
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    text-align: left;
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.docs-tab-btn:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.docs-tab-btn.active {
    background: var(--primary-50);
    color: var(--primary-700);
}

[data-theme="dark"] .docs-tab-btn {
    color: var(--gray-400);
}

[data-theme="dark"] .docs-tab-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--gray-900);
}

[data-theme="dark"] .docs-tab-btn.active {
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary-400);
}

.docs-modal-content {
    overflow-y: auto;
    padding-right: 0.4rem;
    text-align: left;
}

.docs-content-pane {
    display: none;
}

.docs-content-pane.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.docs-content-pane h3 {
    margin-top: 0;
    font-size: var(--text-xl);
    color: #0f172a;
    margin-bottom: 0.85rem;
    font-weight: 700;
}

.docs-content-pane h4 {
    color: #1e293b;
    margin-top: 1rem;
    margin-bottom: 0.4rem;
    font-size: var(--text-base);
    font-weight: 600;
}

.docs-content-pane p {
    color: #334155;
    line-height: 1.65;
    font-size: var(--text-sm);
    margin-bottom: 1rem;
}

.docs-content-pane ul {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}

.docs-content-pane li {
    color: #334155;
    margin-bottom: 0.45rem;
    font-size: var(--text-sm);
}

.docs-content-pane strong {
    color: #0f172a;
    font-weight: 600;
}

.docs-code-block {
    background: #090d16;
    color: #a9b2c3;
    padding: 1.1rem;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: var(--text-sm);
    line-height: 1.55;
    overflow-x: auto;
    margin: 1.1rem 0;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.docs-code-block span.keyword {
    color: #f472b6;
}

.docs-code-block span.string {
    color: #34d399;
}

.docs-code-block span.comment {
    color: #6b7280;
}

.docs-code-block span.func {
    color: #60a5fa;
}

/* ============================================================================
   21. AI CO-COUNSEL FLOATING ASSISTANT
   ============================================================================ */

.co-counsel-floating-btn {
    position: fixed;
    bottom: 1.25rem;
    right: 1rem;
    z-index: 500;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-400));
    color: white;
    border: none;
    cursor: pointer;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.45);
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.co-counsel-floating-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(79, 70, 229, 0.55);
}

.co-counsel-drawer {
    position: fixed;
    bottom: 4.5rem;
    right: 0.5rem;
    left: 0.5rem;
    width: auto;
    max-width: calc(100vw - 1rem);
    height: calc(var(--dvh, 100vh) - 6rem);
    max-height: 82vh;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--shadow-2xl);
    z-index: 499;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(110%) scale(0.96);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.co-counsel-drawer.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* ============================================================================
   22. COMMAND PALETTE
   ============================================================================ */

.command-palette-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(15, 23, 42, 0.88);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: max(10vh, 3rem);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}

.command-palette-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.command-palette {
    width: min(90%, 640px);
    background: var(--gray-900);
    border: 1px solid var(--gray-700);
    border-radius: var(--radius-xl);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(56, 189, 248, 0.2);
    overflow: hidden;
    transform: translateY(-16px) scale(0.98);
    transition: transform 0.2s ease-out;
}

.command-palette-backdrop.open .command-palette {
    transform: translateY(0) scale(1);
}

.command-input-wrapper {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-800);
    gap: 0.65rem;
}

.command-input-wrapper i {
    color: var(--primary-400);
    font-size: 1.15rem;
}

.command-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #f8fafc;
    font-size: 1rem;
    font-family: inherit;
}

.command-input::placeholder {
    color: #64748b;
}

.command-shortcut-hint {
    font-size: var(--text-xs);
    padding: 0.2rem 0.45rem;
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.command-list {
    max-height: 350px;
    overflow-y: auto;
    padding: 0.5rem;
}

.command-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.9rem;
    border-radius: 8px;
    color: #e2e8f0;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.command-item:hover,
.command-item.selected {
    background: rgba(14, 165, 233, 0.15);
    color: #38bdf8;
}

.command-item-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.command-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8;
    font-size: 0.9rem;
}

.command-item-title {
    font-weight: 600;
    font-size: var(--text-sm);
}

.command-item-desc {
    font-size: var(--text-xs);
    color: #64748b;
}

.cmd-palette-trigger {
    padding: 0.35rem 0.6rem;
    font-size: var(--text-xs);
}

/* ============================================================================
   23. GUIDED TOUR
   ============================================================================ */

.tour-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 17, 32, 0.88);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.tour-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.tour-card {
    background: var(--gray-900);
    border: 1px solid var(--gray-700);
    border-radius: var(--radius-xl);
    padding: 2rem 1.5rem 1.5rem;
    max-width: min(440px, 92vw);
    width: 100%;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85), 0 0 35px rgba(79, 70, 229, 0.3);
    position: relative;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    animation: tourCardPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

[data-theme="light"] .tour-card {
    background: white;
    border-color: var(--gray-300);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.22);
}

.tour-icon {
    font-size: 2rem;
    color: var(--primary-400);
    background: var(--primary-50);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.2rem;
    border: 2px solid var(--primary-200);
}

.tour-card h3 {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--gray-100);
}

[data-theme="light"] .tour-card h3 {
    color: var(--gray-900);
}

.tour-card p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--gray-400);
}

[data-theme="light"] .tour-card p {
    color: var(--gray-700, #334155);
}

.tour-steps-indicator {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}

.tour-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray-600);
    transition: all 0.3s ease;
}

.tour-dot.active {
    width: 24px;
    border-radius: 12px;
    background: var(--primary-500);
}

.tour-actions-row {
    display: flex;
    gap: 0.85rem;
    width: 100%;
    margin-top: 0.5rem;
}

.tour-actions-row button {
    flex: 1;
    padding: 0.75rem 1rem;
    font-weight: 600;
}

.tour-highlight {
    position: relative;
    z-index: 99995;
    box-shadow: 0 0 0 4px var(--primary-500), 0 0 30px rgba(79, 70, 229, 0.4);
    border-radius: var(--radius-lg);
    animation: tourPulse 1.5s infinite alternate;
}

/* ============================================================================
   24. LIGHT MODE OVERRIDES (Landing Page)
   ============================================================================ */

[data-theme="light"] .landing-header {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--gray-200);
}

[data-theme="light"] .landing-logo {
    background: linear-gradient(135deg, var(--gray-900), var(--primary-600));
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] .hero-content h1 {
    color: var(--gray-900);
    -webkit-text-fill-color: var(--gray-900);
}

[data-theme="light"] .hero-content p {
    color: var(--gray-600);
}

[data-theme="light"] .landing-nav .btn-outline,
[data-theme="light"] .hero-actions .btn-outline {
    color: var(--gray-800);
    border-color: var(--gray-300);
    background: white;
}

[data-theme="light"] .landing-nav .btn-outline:hover,
[data-theme="light"] .hero-actions .btn-outline:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
}

[data-theme="light"] .landing-nav-links a {
    color: var(--gray-600);
}

[data-theme="light"] .landing-nav-links a:hover {
    color: var(--gray-900);
}

/* Light Mode AI Co-Counsel Assistant Dock */
[data-theme="light"] .co-counsel-drawer {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.16), 0 0 20px rgba(99, 102, 241, 0.08) !important;
}

[data-theme="light"] .co-counsel-header {
    background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .co-counsel-header-title {
    color: #0f172a !important;
}

[data-theme="light"] .co-counsel-header-title i {
    color: #0284c7 !important;
}

[data-theme="light"] #closeCoCounselBtn {
    color: #475569 !important;
}

[data-theme="light"] #closeCoCounselBtn:hover {
    color: #0f172a !important;
}

[data-theme="light"] .co-counsel-welcome {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #1e293b !important;
}

[data-theme="light"] .co-counsel-welcome strong {
    color: #166534 !important;
}

[data-theme="light"] .co-counsel-welcome p {
    color: #334155 !important;
}

[data-theme="light"] .co-counsel-pill {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0369a1 !important;
    font-weight: 500 !important;
}

[data-theme="light"] .co-counsel-pill:hover {
    background: #e0f2fe !important;
    border-color: #38bdf8 !important;
    color: #0284c7 !important;
}

[data-theme="light"] .co-counsel-msg.ai {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

[data-theme="light"] .co-counsel-msg.user {
    background: #4f46e5 !important;
    color: #ffffff !important;
}

[data-theme="light"] .co-counsel-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .co-counsel-input {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

[data-theme="light"] .co-counsel-input::placeholder {
    color: #94a3b8 !important;
}

[data-theme="light"] .co-counsel-input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15) !important;
}

/* Light Mode Readiness Checklist & Gauge Overrides */
[data-theme="light"] .checklist-card,
[data-theme="light"] .precedent-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .checklist-card h3,
[data-theme="light"] .precedent-card h3 {
    color: #0f172a !important;
}

[data-theme="light"] .checklist-checkbox-label {
    color: #1e293b !important;
}

[data-theme="light"] .readiness-gauge-box {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .u-is-25 {
    color: #0f172a !important;
}

[data-theme="light"] .u-is-26 {
    color: #475569 !important;
}

[data-theme="light"] .progress-circle-bg {
    stroke: #cbd5e1 !important;
}

[data-theme="light"] .progress-text {
    color: #0f172a !important;
}

[data-theme="light"] .citation-result-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .citation-title {
    color: #4338ca !important;
}

[data-theme="light"] .citation-desc {
    color: #334155 !important;
}

/* ============================================================================
   25. DARK MODE GLASSMORPHISM OVERRIDES
   ============================================================================ */

[data-theme='dark'] body {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
    color: #f8fafc;
}

[data-theme='dark'] .card,
[data-theme='dark'] .step-form,
[data-theme='dark'] .modal-content,
[data-theme='dark'] .dashboard-card {
    background: rgba(30, 41, 59, 0.65);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    color: #f1f5f9;
}

[data-theme='dark'] .analysis-loading {
    background: rgba(15, 23, 42, 0.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

[data-theme='dark'] h1,
[data-theme='dark'] h2,
[data-theme='dark'] h3,
[data-theme='dark'] h4,
[data-theme='dark'] h5,
[data-theme='dark'] h6 {
    color: #f8fafc;
}

[data-theme='dark'] .text-muted,
[data-theme='dark'] p {
    color: #cbd5e1;
}

/* ============================================================================
   26. ABOUT / STAT BOX SECTION
   ============================================================================ */

.about-section {
    padding: var(--sp-8) var(--sp-5);
    max-width: 1200px;
    margin: 0 auto;
}

.about-content {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    font-size: var(--text-lg);
    line-height: 1.8;
    color: var(--gray-700);
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-5);
    margin-top: var(--sp-6);
}

.stat-box {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    text-align: center;
    transition: var(--tx-premium);
    box-shadow: var(--shadow-sm);
}

.stat-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg), var(--glass-highlight);
}

.stat-box h4 {
    font-size: var(--text-4xl);
    font-weight: 800;
    color: var(--primary-600);
    margin-bottom: var(--sp-2);
}

.stat-box span {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================================================
   27. MISC UI ELEMENTS
   ============================================================================ */

/* Court Memo Paper */
.court-memo-paper {
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-top: 4px solid var(--primary-500);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.court-memo-paper::before {
    content: "JUDIQ VERIFIED";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font-family: var(--font-serif);
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 900;
    color: rgba(255, 255, 255, 0.015);
    pointer-events: none;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

/* Theme Toggle */
.theme-toggle-btn {
    background: transparent;
    border: none;
    color: var(--gray-600);
    font-size: 1.2rem;
    cursor: pointer;
    padding: var(--sp-2);
    border-radius: var(--radius-full);
    transition: var(--tx-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.theme-toggle-btn:hover {
    background: var(--gray-200);
    color: var(--primary-600);
}

/* Collapsible sections */
.collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0.75rem 0;
}

.collapsible-header:hover {
    opacity: 0.8;
}

/* List items */
.list-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
    font-size: var(--text-sm);
}

/* Statutory Rules Container */
#statutoryRulesContainer {
    margin-bottom: 1rem;
}

/* Strategy content */
.strategy-content {
    color: var(--gray-700);
    line-height: 1.7;
    font-size: var(--text-base);
}

.strategy-list {
    margin-top: 1rem;
}

/* Corporate Alert & Limitation Countdown */
#corporateAlert {
    border-left: 5px solid var(--warning-500);
    background: var(--warning-50);
}

#corporateAlert h3 {
    color: var(--warning-700);
}

/* ============================================================================
   28. BREAKPOINT: 640px — Large phones / small tablets
   ============================================================================ */

@media (min-width: 640px) {

    /* Layout */
    .hero-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .hero-actions .btn {
        width: auto;
        flex: 1 1 auto;
    }

    .newsletter-form {
        flex-direction: row;
    }

    .newsletter-form input {
        flex-grow: 1;
    }

    .newsletter-form .btn {
        width: auto;
        padding: 0 1.25rem;
    }

    .draft-form-actions {
        flex-direction: row;
    }

    .results-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .results-actions .btn {
        width: auto;
        flex: 1 1 auto;
    }

    .toast-container {
        left: auto;
        max-width: 400px;
    }

    /* Typography */
    .hero-content h1 {
        font-size: clamp(2.25rem, 5vw + 0.5rem, 3.5rem);
    }

    .trust-metrics-strip {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Grids */
    .quick-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .quick-actions-row {
        flex-direction: row;
    }

    .quick-actions-row .btn {
        width: auto;
        flex: 1 1 auto;
    }

    .form-grid-2col {
        grid-template-columns: 1fr 1fr;
        gap: 1.1rem 1.5rem;
    }

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

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

    .recent-case-item {
        flex-direction: row;
        align-items: center;
    }

    .recent-case-item>div:last-child {
        width: auto;
    }

    /* Features grid */
    .features-grid,
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Blog */
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }

    /* Role grid */
    .role-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Action cards */
    .action-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Domain section */
    .domain-stat-card {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Wizard nav */
    #prevBtn,
    #nextBtn,
    #submitBtn {
        flex: 0 1 auto;
    }

    .wizard-step-indicator {
        width: auto;
        order: 0;
        margin-bottom: 0;
    }

    /* Draft type cards */
    .draft-type-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Draft fields */
    .draft-fields-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Sim main grid */
    .sim-main-grid {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
    }
}

/* ============================================================================
   29. BREAKPOINT: 768px — Tablets
   ============================================================================ */

@media (min-width: 768px) {

    /* Landing header */
    .landing-header {
        padding: 1rem 2rem;
    }

    .hide-on-mobile {
        display: flex;
    }

    .landing-nav-links {
        display: flex;
        gap: 1.5rem;
        align-items: center;
    }

    .landing-nav-links a {
        color: rgba(248, 250, 252, 0.85);
        font-weight: 500;
        font-size: var(--text-sm);
        transition: color var(--tx-normal);
    }

    .landing-nav-links a:hover {
        color: #ffffff;
    }

    .mobile-nav-toggle {
        display: none;
    }

    /* Hero */
    .hero-section {
        padding: 4rem 2rem;
        gap: 2.5rem;
    }

    .hero-actions {
        gap: 1rem;
    }

    /* Trust strip */
    .trust-metrics-strip {
        padding: 1.5rem 2rem;
    }

    /* Dashboard */
    .top-nav {
        padding: var(--sp-3) var(--sp-6);
    }

    .nav-brand span {
        max-width: 240px;
    }

    .user-role-badge {
        display: inline-flex;
    }

    .user-menu span {
        display: inline;
    }

    .dashboard-header {
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
        justify-content: space-between;
    }

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

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

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

    /* Features */
    .features-section {
        padding: 4rem 2rem;
    }

    /* Wizard */
    .wizard-container {
        margin: 1.5rem auto;
        width: calc(100% - 3rem);
    }

    .wizard-content {
        padding: 2rem 1.75rem;
    }

    .wizard-navigation {
        padding: 1.25rem 1.75rem;
    }

    .wizard-header h2 {
        font-size: var(--text-3xl);
    }

    /* Results */
    .results-container {
        padding: 1.5rem 1.25rem;
    }

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

    .rl-row-2 {
        grid-template-columns: 1.5fr 1fr;
    }

    .rl-statutes-grid,
    .rl-precedents-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .result-verdict {
        flex-direction: row;
        text-align: left;
        gap: 2rem;
    }

    .verdict-score {
        order: 1;
    }

    .verdict-content {
        order: 2;
        text-align: left;
    }

    .verdict-icon {
        order: 0;
    }

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

    .results-actions {
        flex-direction: row;
    }

    .defence-header {
        flex-direction: row;
        align-items: flex-start;
    }

    /* Tab sticky offset */
    .results-tabs {
        top: 64px;
    }

    /* Draft tab */
    .draft-customization-bar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .tone-selector {
        width: auto;
    }

    .draft-actions {
        flex-direction: row;
    }

    .draft-actions .btn {
        width: auto;
        flex: 1 1 auto;
    }

    /* Legal modal */
    .legal-modal {
        align-items: center;
    }

    .legal-modal-header {
        padding: 2rem 2.5rem 1.5rem;
    }

    .legal-text {
        padding: 2rem 2.5rem;
    }

    /* Docs modal */
    .docs-modal-container {
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: 2rem;
    }

    .docs-modal-sidebar {
        display: flex;
        flex-direction: column;
        overflow-x: visible;
        white-space: normal;
        border-right: 1px solid var(--gray-200);
        border-bottom: none;
        padding-right: 1.25rem;
        padding-bottom: 0;
    }

    .docs-tab-btn {
        white-space: normal;
    }

    /* Sandbox */
    .sandbox-grid {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 3rem;
    }

    /* Readiness */
    .readiness-grid {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 3rem;
    }

    /* Contact */
    .contact-grid {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 3rem;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 2.5rem;
    }

    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Blog */
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Pricing */
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Co-counsel drawer */
    .co-counsel-floating-btn {
        bottom: 1.5rem;
        right: 1.5rem;
    }

    .co-counsel-drawer {
        bottom: 5rem;
        right: 1.5rem;
        left: auto;
        width: 380px;
        max-width: calc(100vw - 3rem);
        height: calc(100vh - 7rem);
        max-height: 80vh;
    }

    /* Quick analysis */
    .quick-proof-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Domain actions */
    .domain-action-card {
        padding: 1.75rem;
    }

    /* Feature explorer */
    .feature-explorer {
        display: grid;
        grid-template-columns: 260px 1fr;
        gap: 2rem;
        padding: 2rem;
    }

    .explorer-tabs {
        flex-direction: column;
        overflow-x: visible;
        padding-bottom: 0;
        gap: 0.65rem;
    }

    .explorer-tab {
        white-space: normal;
        flex-shrink: 1;
    }
}

/* ============================================================================
   30. BREAKPOINT: 1024px — Laptops
   ============================================================================ */

@media (min-width: 1024px) {

    /* Landing */
    .landing-header {
        padding: 1.25rem 3rem;
    }

    .landing-nav-links {
        gap: 2rem;
    }

    .hero-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        padding: 5rem 3rem;
        align-items: center;
    }

    .hero-image {
        transform: perspective(1000px) rotateY(-5deg);
        transition: transform 0.5s ease;
    }

    .hero-image:hover {
        transform: perspective(1000px) rotateY(0deg);
    }

    .hero-content h1 {
        font-size: var(--text-hero);
    }

    .trust-metrics-strip {
        width: auto;
        margin: -1.5rem auto 3rem;
    }

    /* Features */
    .features-section {
        padding: 5rem 3rem;
    }

    .features-grid,
    .feature-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Blog */
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Pricing */
    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Dashboard */
    .action-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .domain-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .domain-actions-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .dashboard-header {
        align-items: center;
    }

    /* Wizard */
    .wizard-container {
        margin: 2rem auto;
        padding: 0;
    }

    .wizard-content {
        padding: 2.5rem 3rem;
    }

    .wizard-navigation {
        padding: 1.5rem 3rem;
    }

    .wizard-header h2 {
        font-size: 2rem;
    }

    .form-grid-2col {
        gap: 1.25rem 2rem;
    }

    /* Results */
    .results-container {
        padding: 2rem 1.5rem;
    }

    .result-card {
        padding: 2rem;
    }

    /* Draft */
    .draft-type-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .draft-fields-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Misc */
    .faq-section {
        padding: 5rem 3rem;
    }

    .sandbox-section {
        padding: 5rem 3rem;
    }

    .readiness-section {
        padding: 5rem 3rem;
    }

    .contact-section {
        padding: 5rem 3rem;
    }

    .pricing-section {
        padding: 5rem 3rem;
    }

    .testimonials-section {
        padding: 5rem 3rem;
    }

    .resource-section {
        padding: 5rem 3rem;
    }

    .landing-footer {
        padding: 5rem 0 2rem;
    }
}

/* ============================================================================
   31. BREAKPOINT: 1280px — Desktop & Wide
   ============================================================================ */

@media (min-width: 1280px) {
    .landing-header {
        padding: 1.5rem 3rem;
    }

    .hero-section {
        padding: 6rem 3rem;
    }

    .hero-content p {
        max-width: 600px;
    }

    .action-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .domain-actions-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .results-container {
        padding: 2rem;
    }

    .result-card {
        padding: 2.5rem;
    }

    .wizard-container {
        padding: 0;
    }

    .co-counsel-drawer {
        width: 420px;
    }

    .results-tabs {
        top: 70px;
    }

    /* Footer becomes 5-col */
    .footer-content {
        grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr;
    }
}

/* ============================================================================
   32. SAFE AREA INSETS (Notch / Home bar support)
   ============================================================================ */

@supports (padding-top: env(safe-area-inset-top)) {

    .landing-header,
    .top-nav {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .wizard-navigation {
        padding-bottom: max(0.85rem, env(safe-area-inset-bottom));
    }

    .co-counsel-floating-btn {
        bottom: max(1.25rem, env(safe-area-inset-bottom) + 0.5rem);
        right: max(1rem, env(safe-area-inset-right));
    }
}

/* ============================================================================
   33. PRINT OVERRIDES
   ============================================================================ */

@media print {

    .landing-screen,
    .auth-screen,
    .top-nav,
    .wizard-navigation,
    .results-tabs,
    .co-counsel-floating-btn,
    .co-counsel-drawer,
    .toast-container,
    .tour-overlay,
    .command-palette-backdrop,
    .mobile-nav-drawer,
    .mobile-nav-backdrop,
    .results-actions,
    .analysis-loading {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .result-card,
    .draft-output-content {
        box-shadow: none;
        border: 1px solid #e2e8f0;
    }

    /* Certificate Modal Print Isolation */
    #adminUserCertificateModal:not(.hidden) {
        position: fixed !important;
        inset: 0 !important;
        background: white !important;
        z-index: 99999999 !important;
        display: block !important;
        padding: 0 !important;
    }

    #adminUserCertificateModal .cert-toolbar,
    .no-print {
        display: none !important;
    }

    #certPrintArea {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
}

/* ============================================================================
   34. UNIFIED DOMAIN COLOR SYSTEM & SWITCHER STYLING
   ============================================================================ */

/* Universal Domain Badges */
.domain-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 750;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: all 0.25s ease;
}

.domain-badge--all {
    background: rgba(14, 165, 233, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(14, 165, 233, 0.35);
    box-shadow: 0 0 12px rgba(14, 165, 233, 0.15);
}

.domain-badge--composite {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.35);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.15);
}

.domain-badge--ni {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.35);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.15);
}

.domain-badge--sarfaesi {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.35);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.15);
}

.domain-badge--criminal {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.35);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.15);
}

.domain-badge--civil {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.35);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.15);
}

/* Light Mode Overrides for Badges */
[data-theme="light"] .domain-badge--all {
    background: #e0f2fe;
    color: #0284c7;
    border-color: #7dd3fc;
}

[data-theme="light"] .domain-badge--composite {
    background: #fef3c7;
    color: #b45309;
    border-color: #fcd34d;
}

[data-theme="light"] .domain-badge--ni {
    background: #e0e7ff;
    color: #4338ca;
    border-color: #a5b4fc;
}

[data-theme="light"] .domain-badge--sarfaesi {
    background: #d1fae5;
    color: #065f46;
    border-color: #6ee7b7;
}

[data-theme="light"] .domain-badge--criminal {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}

[data-theme="light"] .domain-badge--civil {
    background: #ede9fe;
    color: #5b21b6;
    border-color: #c4b5fd;
}

/* Institutional Engine Toolbar */
.institutional-engine-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
}

.engine-status-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.engine-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--primary-600);
    background: var(--primary-50);
    border: 1px solid var(--primary-200);
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-full);
}

[data-theme="dark"] .engine-badge {
    color: var(--primary-300);
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.35);
}

.engine-status-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--success-600);
}

[data-theme="dark"] .engine-status-tag {
    color: var(--success-400);
}

.engine-statutory-clock {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.engine-status-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.brand-emblem-svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
    transition: transform 0.2s ease;
}

.landing-logo:hover .brand-emblem-svg,
.nav-brand:hover .brand-emblem-svg {
    transform: scale(1.06) rotate(-3deg);
}

.domain-switch-tab {
    background: transparent;
    color: var(--gray-400);
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 600;
    padding: 0.45rem 0.95rem;
    border-radius: 10px;
    font-size: 0.84rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.domain-switch-tab:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--gray-100);
    transform: translateY(-1px);
}

[data-theme="light"] .domain-switch-tab:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #0f172a;
}

.domain-switch-tab.active {
    background: var(--primary-600) !important;
    color: white !important;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Individual Domain Switch Tab Active Accents */
#tab_domain_all.active {
    background: #0284c7 !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.45) !important;
}

#tab_domain_composite.active {
    background: #d97706 !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45) !important;
}

#tab_domain_ni.active {
    background: #4f46e5 !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45) !important;
}

#tab_domain_sarfaesi.active {
    background: #059669 !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45) !important;
}

#tab_domain_criminal.active {
    background: #dc2626 !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45) !important;
}

#tab_domain_civil.active {
    background: #7c3aed !important;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.45) !important;
}

/* Admin Multi-Domain Switcher Strip */
.admin-domain-switcher-bar {
    margin: 1.25rem 0 1.5rem 0;
    padding: 0.85rem 1.25rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(30, 41, 59, 0.8));
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    animation: fadeIn 0.3s ease;
}

[data-theme="light"] .admin-domain-switcher-bar {
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border: 1px solid rgba(245, 158, 11, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.admin-domain-switcher-bar .ads-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.admin-domain-switcher-bar .ads-label {
    font-size: 0.86rem;
    font-weight: 700;
    color: #f8fafc;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    letter-spacing: 0.02em;
}

[data-theme="light"] .admin-domain-switcher-bar .ads-label {
    color: #1e293b;
}

.admin-domain-switcher-bar .ads-label i {
    color: #f59e0b;
    font-size: 1rem;
}

.admin-domain-switcher-bar .ads-tabs {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.admin-domain-switcher-bar .domain-switch-tab {
    padding: 0.5rem 1.15rem;
    font-size: 0.86rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="light"] .admin-domain-switcher-bar .domain-switch-tab {
    border: 1px solid #e2e8f0;
    background: #f1f5f9;
    color: #475569;
}

.admin-domain-switcher-bar .domain-switch-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.admin-domain-switcher-bar .domain-switch-tab.active {
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.admin-domain-switcher-bar #tab_domain_ni.active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.25), rgba(59, 130, 246, 0.2)) !important;
    border-color: #3b82f6 !important;
    color: #60a5fa !important;
}

[data-theme="light"] .admin-domain-switcher-bar #tab_domain_ni.active {
    background: #eff6ff !important;
    border-color: #3b82f6 !important;
    color: #1d4ed8 !important;
}

.admin-domain-switcher-bar #tab_domain_criminal.active {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(220, 38, 38, 0.2)) !important;
    border-color: #ef4444 !important;
    color: #f87171 !important;
}

[data-theme="light"] .admin-domain-switcher-bar #tab_domain_criminal.active {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #b91c1c !important;
}

.admin-domain-switcher-bar #tab_domain_civil.active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(124, 58, 237, 0.2)) !important;
    border-color: #8b5cf6 !important;
    color: #a78bfa !important;
}

[data-theme="light"] .admin-domain-switcher-bar #tab_domain_civil.active {
    background: #f5f3ff !important;
    border-color: #8b5cf6 !important;
    color: #6d28d9 !important;
}


/* Domain Card Selection Styles in Registration Form */
.domain-card {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.domain-card.selected--all {
    border-color: #0ea5e9 !important;
    background: rgba(14, 165, 233, 0.1) !important;
    box-shadow: 0 0 0 2px #0ea5e9, 0 8px 24px rgba(14, 165, 233, 0.22) !important;
}

.domain-card.selected--all .dc-check {
    background: #0ea5e9 !important;
    border-color: #0ea5e9 !important;
    color: white !important;
    opacity: 1 !important;
    display: flex !important;
}

.domain-card.selected--all .dc-title {
    color: #38bdf8 !important;
}

.domain-card.selected--composite {
    border-color: #0284c7 !important;
    background: rgba(2, 132, 199, 0.1) !important;
    box-shadow: 0 0 0 2px #0284c7, 0 8px 24px rgba(2, 132, 199, 0.22) !important;
}

.domain-card.selected--composite .dc-check {
    background: #0284c7 !important;
    border-color: #0284c7 !important;
    color: white !important;
    opacity: 1 !important;
    display: flex !important;
}

.domain-card.selected--composite .dc-title {
    color: #38bdf8 !important;
}

.domain-card.selected--ni {
    border-color: #6366f1 !important;
    background: rgba(99, 102, 241, 0.1) !important;
    box-shadow: 0 0 0 2px #6366f1, 0 8px 24px rgba(99, 102, 241, 0.22) !important;
}

.domain-card.selected--ni .dc-check {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
    color: white !important;
    opacity: 1 !important;
    display: flex !important;
}

.domain-card.selected--ni .dc-title {
    color: #a5b4fc !important;
}

.domain-card.selected--sarfaesi {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.1) !important;
    box-shadow: 0 0 0 2px #10b981, 0 8px 24px rgba(16, 185, 129, 0.22) !important;
}

.domain-card.selected--sarfaesi .dc-check {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: white !important;
    opacity: 1 !important;
    display: flex !important;
}

.domain-card.selected--sarfaesi .dc-title {
    color: #34d399 !important;
}

.domain-card.selected--criminal {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.1) !important;
    box-shadow: 0 0 0 2px #ef4444, 0 8px 24px rgba(239, 68, 68, 0.22) !important;
}

.domain-card.selected--criminal .dc-check {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: white !important;
    opacity: 1 !important;
    display: flex !important;
}

.domain-card.selected--criminal .dc-title {
    color: #f87171 !important;
}

.domain-card.selected--civil {
    border-color: #8b5cf6 !important;
    background: rgba(139, 92, 246, 0.1) !important;
    box-shadow: 0 0 0 2px #8b5cf6, 0 8px 24px rgba(139, 92, 246, 0.22) !important;
}

.domain-card.selected--civil .dc-check {
    background: #8b5cf6 !important;
    border-color: #8b5cf6 !important;
    color: white !important;
    opacity: 1 !important;
    display: flex !important;
}

.domain-card.selected--civil .dc-title {
    color: #a78bfa !important;
}

.domain-card.selected--notary {
    border-color: #0891b2 !important;
    background: rgba(8, 145, 178, 0.1) !important;
    box-shadow: 0 0 0 2px #0891b2, 0 8px 24px rgba(8, 145, 178, 0.22) !important;
}

.domain-card.selected--notary .dc-check {
    background: #0891b2 !important;
    border-color: #0891b2 !important;
    color: white !important;
    opacity: 1 !important;
    display: flex !important;
}

.domain-card.selected--notary .dc-title {
    color: #67e8f9 !important;
}

/* Light Mode Overrides for Selected Domain Cards */
[data-theme="light"] .domain-card {
    background: white;
    border-color: #cbd5e1;
}

[data-theme="light"] .domain-card .dc-title {
    color: #1e293b;
}

[data-theme="light"] .domain-card .dc-sub {
    color: #64748b;
}

[data-theme="light"] .domain-card.selected--all {
    background: #f0f9ff !important;
    border-color: #0284c7 !important;
}

[data-theme="light"] .domain-card.selected--all .dc-title {
    color: #0369a1 !important;
}

[data-theme="light"] .domain-card.selected--composite {
    background: #f0f9ff !important;
    border-color: #0284c7 !important;
}

[data-theme="light"] .domain-card.selected--composite .dc-title {
    color: #0369a1 !important;
}

[data-theme="light"] .domain-card.selected--ni {
    background: #eef2ff !important;
    border-color: #4f46e5 !important;
}

[data-theme="light"] .domain-card.selected--ni .dc-title {
    color: #3730a3 !important;
}

[data-theme="light"] .domain-card.selected--sarfaesi {
    background: #ecfdf5 !important;
    border-color: #059669 !important;
}

[data-theme="light"] .domain-card.selected--sarfaesi .dc-title {
    color: #065f46 !important;
}

[data-theme="light"] .domain-card.selected--criminal {
    background: #fef2f2 !important;
    border-color: #dc2626 !important;
}

[data-theme="light"] .domain-card.selected--criminal .dc-title {
    color: #991b1b !important;
}

[data-theme="light"] .domain-card.selected--civil {
    background: #f5f3ff !important;
    border-color: #7c3aed !important;
}

[data-theme="light"] .domain-card.selected--civil .dc-title {
    color: #5b21b6 !important;
}

[data-theme="light"] .domain-card.selected--notary {
    background: #ecfeff !important;
    border-color: #0891b2 !important;
}

[data-theme="light"] .domain-card.selected--notary .dc-title {
    color: #0e7490 !important;
}

.workspace-plan-hint {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 12px 2px 3px;
    padding: 11px 13px;
    border: 1px solid rgba(79, 109, 226, .18);
    border-radius: 11px;
    background: linear-gradient(115deg, rgba(238, 243, 255, .92), rgba(238, 252, 250, .78));
    color: #3d527f;
    font-size: 12px;
    line-height: 1.55;
}
.workspace-plan-hint > i {
    margin-top: 2px;
    color: #4e70e8;
}
[data-theme="dark"] .workspace-plan-hint {
    border-color: rgba(129, 153, 255, .24);
    background: linear-gradient(115deg, rgba(39, 52, 91, .66), rgba(20, 64, 72, .45));
    color: #d6e2ff;
}

#dashboardScreen .dashboard-plans-page {
    min-height: 100vh;
    padding-bottom: 72px;
}
#dashboardScreen .dashboard-plans-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 0 20px;
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid rgba(126, 153, 220, .25);
    border-radius: 22px;
    background: radial-gradient(circle at 92% 8%, rgba(122, 158, 255, .2), transparent 34%), linear-gradient(120deg, #fff, #f2f7ff 62%, #effbf9);
    box-shadow: 0 16px 42px rgba(46, 73, 132, .08);
}
#dashboardScreen .dashboard-plans-hero-icon,
#dashboardScreen .dashboard-current-plan-icon,
#dashboardScreen .dashboard-notary-plan-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(145deg, #4267ec, #2d8de0);
    color: #fff;
    box-shadow: 0 9px 22px rgba(61, 102, 227, .24);
    font-size: 20px;
}
#dashboardScreen .dashboard-plans-hero-copy { flex: 1 1 auto; }
#dashboardScreen .dashboard-plans-hero h1 {
    margin: 7px 0 6px;
    color: #172849;
    font: 700 clamp(24px, 3vw, 34px)/1.15 'Outfit', sans-serif;
    letter-spacing: -.035em;
}
#dashboardScreen .dashboard-plans-hero p {
    max-width: 650px;
    margin: 0;
    color: #60718f;
    font-size: 14px;
    line-height: 1.65;
}
#dashboardScreen .dashboard-current-plan-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 24px;
    padding: 16px 20px;
    border: 1px solid #dfe7f4;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(41, 62, 111, .055);
}
#dashboardScreen .dashboard-current-plan-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: #edf2ff;
    color: #4768df;
    box-shadow: none;
    font-size: 17px;
}
#dashboardScreen .dashboard-current-plan-card > div:nth-child(2) {
    display: grid;
    flex: 1 1 auto;
    gap: 2px;
}
#dashboardScreen .dashboard-current-plan-label,
#dashboardScreen .dashboard-plans-kicker {
    color: #72819c;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
}
#dashboardScreen .dashboard-current-plan-card strong { color: #1b2b4b; font-size: 15px; }
#dashboardScreen .dashboard-current-plan-card #dashboardCurrentPlanDetails { color: #77849b; font-size: 12px; }
#dashboardScreen .dashboard-current-plan-status {
    padding: 6px 10px;
    border: 1px solid #bfe8d7;
    border-radius: 999px;
    background: #effbf5;
    color: #14825a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
}
#dashboardPlansCatalog .j2-section {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 26px 0 20px;
    background: transparent;
}
#dashboardPlansCatalog .j2-section-head { max-width: 720px; margin: 0 auto 25px; }
#dashboardPlansCatalog .j2-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#dashboardPlansCatalog .j2-plan { min-width: 0; }
#dashboardPlansCatalog .j2-plan.workspace-plan-match {
    border-color: #5474e9;
    box-shadow: 0 13px 34px rgba(58, 88, 195, .17), 0 0 0 2px rgba(84, 116, 233, .14);
    transform: translateY(-3px);
}
#dashboardPlansCatalog .workspace-plan-match-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    padding: 6px 9px;
    border-radius: 999px;
    background: #edf2ff;
    color: #3d5ed0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
#dashboardPlansCatalog .dashboard-plan-admin-included { border-color: #bfe8d7; background: #effbf5; color: #168255; cursor: default; opacity: 1; }
#dashboardScreen .dashboard-notary-plan-card {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-top: 26px;
    padding: 21px 23px;
    border: 1px solid rgba(22, 150, 134, .2);
    border-radius: 18px;
    background: linear-gradient(110deg, #f1fbfa, #f7f8ff 72%);
}
#dashboardScreen .dashboard-notary-plan-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(145deg, #138e86, #28a5a1);
    box-shadow: 0 9px 22px rgba(28, 151, 140, .17);
}
#dashboardScreen .dashboard-notary-plan-card > div:nth-child(2) { flex: 1; }
#dashboardScreen .dashboard-notary-plan-card h2 { margin: 4px 0; color: #18324d; font-size: 18px; }
#dashboardScreen .dashboard-notary-plan-card p { margin: 0; color: #687a91; font-size: 12px; line-height: 1.6; }
#dashboardScreen .dashboard-billing-footnote {
    margin: 18px 0 0;
    color: #7a879a;
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
}
#dashboardScreen .dashboard-billing-footnote i { margin-right: 4px; color: #6682d8; }
[data-theme="dark"] #dashboardScreen .dashboard-plans-hero { border-color: #344366; background: radial-gradient(circle at 92% 8%, rgba(78, 105, 194, .24), transparent 34%), linear-gradient(120deg, #19243a, #1b2944 62%, #183432); }
[data-theme="dark"] #dashboardScreen .dashboard-plans-hero h1,
[data-theme="dark"] #dashboardScreen .dashboard-current-plan-card strong,
[data-theme="dark"] #dashboardScreen .dashboard-notary-plan-card h2 { color: #edf3ff; }
[data-theme="dark"] #dashboardScreen .dashboard-plans-hero p,
[data-theme="dark"] #dashboardScreen .dashboard-current-plan-card #dashboardCurrentPlanDetails,
[data-theme="dark"] #dashboardScreen .dashboard-notary-plan-card p { color: #a9b8d2; }
[data-theme="dark"] #dashboardScreen .dashboard-current-plan-card { border-color: #34415c; background: #1a253a; }
[data-theme="dark"] #dashboardScreen .dashboard-current-plan-icon { background: #29395d; color: #9fb3ff; }
[data-theme="dark"] #dashboardScreen .dashboard-notary-plan-card { border-color: #285955; background: linear-gradient(110deg, #152f34, #1c2842 72%); }
[data-theme="dark"] #dashboardPlansCatalog .j2-plan { background: #1a253a; border-color: #34415c; }
[data-theme="dark"] #dashboardPlansCatalog .j2-plan h3,
[data-theme="dark"] #dashboardPlansCatalog .j2-plan p,
[data-theme="dark"] #dashboardPlansCatalog .j2-plan ul { color: #d8e2f4; }
@media (max-width: 900px) {
    #dashboardPlansCatalog .j2-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    #dashboardScreen .dashboard-plans-hero,
    #dashboardScreen .dashboard-notary-plan-card { align-items: flex-start; flex-wrap: wrap; }
    #dashboardScreen .dashboard-plans-hero .dashboard-secondary-action,
    #dashboardScreen .dashboard-notary-plan-card .dashboard-primary-action { width: 100%; justify-content: center; }
    #dashboardScreen .dashboard-current-plan-card { align-items: flex-start; flex-wrap: wrap; }
    #dashboardScreen .dashboard-current-plan-status { margin-left: 56px; }
    #dashboardPlansCatalog .j2-plan-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   22. ADMIN CONTROL CENTER & USER QUOTA STYLES
   ============================================================================ */

.admin-portal-btn {
    transition: all 0.2s ease;
}

.admin-portal-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.45) !important;
}

.user-quota-pill {
    transition: all 0.2s ease;
}

.user-quota-pill:hover {
    background: var(--primary-100) !important;
}

.admin-data-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.admin-data-table th {
    font-weight: 700;
    color: var(--gray-600);
}

.admin-data-table td {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.admin-data-table tr:hover td {
    background: rgba(245, 158, 11, 0.03);
}

.quota-preset-btn {
    padding: 0.2rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--gray-100);
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.15s ease;
}

.quota-preset-btn:hover {
    background: var(--primary-500);
    color: #ffffff;
    border-color: var(--primary-500);
}

.quota-progress-track {
    width: 100%;
    height: 6px;
    background: var(--gray-200);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}

.quota-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #3b82f6);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.quota-progress-fill.warning {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
}

.status-badge-active {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
}

.status-badge-suspended {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
}

/* ============================================================================
   BANKING & RECOVERY OS — EXECUTIVE INSTITUTIONAL SUITE (LIGHT THEME)
   ========================================================================== */
.bank-screen {
    width: 100%;
    min-height: calc(100vh - 40px);
    background: radial-gradient(ellipse at 50% 0%, #f0f9ff 0%, #f8fafc 45%, #ffffff 100%);
    color: #0f172a;
    padding: 2rem 2.5rem 5rem;
    box-sizing: border-box;
    animation: fadeIn 0.35s ease-out;
}

/* Institutional Portal Header */
.bank-portal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 249, 255, 0.95));
    border: 1.5px solid rgba(14, 165, 233, 0.25);
    border-radius: 16px;
    padding: 1.25rem 2rem;
    margin-bottom: 1.5rem;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.06), 0 0 15px rgba(14, 165, 233, 0.08);
}

.bank-header-left {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.bank-logo-badge {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.bank-portal-title {
    font-family: 'Cinzel', serif;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #0369a1;
}

.bank-portal-subtitle {
    font-size: 0.88rem;
    color: #475569;
    margin-top: 0.25rem;
    font-weight: 500;
}

.bank-officer-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #f0f9ff;
    color: #0284c7;
    border: 1.5px solid #bae6fd;
    padding: 0.45rem 0.95rem;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
}

.bank-header-right .btn-outline {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #0369a1 !important;
    font-weight: 600;
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    transition: all 0.25s ease;
}

.bank-header-right .btn-outline:hover {
    background: #f0f9ff;
    border-color: #0284c7;
    color: #0284c7 !important;
    box-shadow: 0 0 12px rgba(2, 132, 199, 0.15);
    transform: translateY(-1px);
}

/* Control & Scenario Quick Launcher Bar */
.bank-control-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.75rem;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04);
}

.bank-unit-selector {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.bank-unit-selector label {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0369a1;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.bank-unit-selector .bank-input-select {
    min-width: 380px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #0f172a;
    font-weight: 600;
}

.bank-quick-scenarios {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.preset-label {
    font-size: 0.8rem;
    font-weight: 800;
    color: #0284c7;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 0.3rem;
}

.bank-quick-scenarios .btn-primary {
    background: linear-gradient(135deg, #0284c7, #2563eb);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
    font-weight: 600;
}

.bank-quick-scenarios .btn-outline {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    color: #334155;
    font-weight: 600;
}

.bank-quick-scenarios .btn-outline:hover {
    background: #f0f9ff;
    border-color: #0284c7;
    color: #0284c7;
}

.bank-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #f0fdf4;
    color: #16a34a;
    border: 1.5px solid #bbf7d0;
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Main Dual Column Workspace Grid */
.bank-workspace-grid {
    display: grid;
    grid-template-columns: 48% 52%;
    gap: 1.75rem;
    align-items: start;
}

@media (max-width: 1140px) {
    .bank-workspace-grid {
        grid-template-columns: 1fr;
    }
}

.bank-panel {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.75rem;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06);
}

.bank-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    border-bottom: 1.5px solid #f1f5f9;
    padding-bottom: 0.85rem;
}

.bank-panel-header h4 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    letter-spacing: -0.01em;
}

.badge-subtle {
    font-size: 0.74rem;
    background: #f0f9ff;
    color: #0284c7;
    border: 1px solid #bae6fd;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Form Inputs & Sub-Cards */
.bank-form-group {
    margin-bottom: 1.15rem;
}

.bank-form-group label {
    display: block;
    font-size: 0.84rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 0.4rem;
    letter-spacing: 0.01em;
}

.bank-form-row {
    display: flex;
    gap: 1rem;
}

.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

.flex-center {
    display: flex;
    align-items: flex-end;
    padding-bottom: 0.5rem;
}

.bank-input-text,
.bank-input-select {
    width: 100%;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 0.7rem 0.95rem;
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 500;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.bank-input-text:focus,
.bank-input-select:focus {
    border-color: #0284c7;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
}

.bank-sub-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.15rem 1.25rem;
    margin-bottom: 1.25rem;
}

.bank-sub-card h5 {
    font-size: 0.9rem;
    font-weight: 800;
    color: #0369a1;
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 0.02em;
}

.bank-checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.bank-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: #1e293b;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.bank-checkbox-label:hover {
    border-color: #0284c7;
    background: #f0f9ff;
}

.bank-checkbox-label input[type="checkbox"] {
    accent-color: #0284c7;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    cursor: pointer;
}

/* Score Card */
.bank-score-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #f0f9ff, #ffffff);
    border: 1.5px solid rgba(14, 165, 233, 0.3);
    border-radius: 14px;
    padding: 1.35rem 1.75rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.08);
}

.score-label {
    font-size: 0.78rem;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.score-display {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 0.4rem;
}

.score-number {
    font-size: 2.3rem;
    font-weight: 900;
    color: #0f172a;
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.02em;
}

.score-gauge-container {
    width: 180px;
    height: 14px;
    background: #e2e8f0;
    border-radius: 7px;
    overflow: hidden;
    padding: 2px;
    box-sizing: border-box;
}

.bank-gauge-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease-out;
}

.gauge-green {
    background: linear-gradient(90deg, #10b981, #059669);
}

.gauge-amber {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.gauge-red {
    background: linear-gradient(90deg, #ef4444, #b91c1c);
}

.bank-verdict-chip {
    padding: 0.65rem 1.15rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.verdict-ready {
    background: #f0fdf4;
    color: #16a34a;
    border: 1.5px solid #bbf7d0;
}

.verdict-remedy {
    background: #fffbeb;
    color: #d97706;
    border: 1.5px solid #fde68a;
}

.verdict-fatal {
    background: #fef2f2;
    color: #dc2626;
    border: 1.5px solid #fecaca;
}

.bank-output-section {
    margin-bottom: 1.5rem;
    border-top: 1.5px solid #f1f5f9;
    padding-top: 1.25rem;
}

.bank-output-section h5 {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.85rem;
}

.section-header-row .btn-outline {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0369a1;
}

.section-header-row .btn-outline:hover {
    background: #f0f9ff;
    border-color: #0284c7;
    color: #0284c7;
}

.btn-xs {
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    border-radius: 6px;
}

/* Milestones Grid */
.bank-milestones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
}

.bank-milestone-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.9rem 1rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease;
}

.bank-milestone-card:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    background: #f8fafc;
}

.milestone-passed {
    border-left: 4px solid #16a34a;
    background: rgba(22, 163, 74, 0.04);
}

.milestone-fatal {
    border-left: 4px solid #dc2626;
    background: rgba(220, 38, 38, 0.04);
}

.milestone-warning {
    border-left: 4px solid #d97706;
    background: rgba(217, 119, 6, 0.04);
}

.milestone-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.milestone-badge {
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.milestone-passed .milestone-badge {
    color: #16a34a;
}

.milestone-fatal .milestone-badge {
    color: #dc2626;
}

.milestone-warning .milestone-badge {
    color: #d97706;
}

.milestone-statute {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 600;
    text-align: right;
    max-width: 60%;
    line-height: 1.3;
}

.milestone-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.4rem;
}

.milestone-meta {
    font-size: 0.78rem;
    color: #64748b;
    display: flex;
    gap: 0.85rem;
    font-weight: 500;
}

.milestone-defect-note {
    margin-top: 0.5rem;
    font-size: 0.76rem;
    color: #dc2626;
    background: #fef2f2;
    padding: 0.3rem 0.55rem;
    border-radius: 4px;
    font-weight: 600;
}

/* Defects */
.bank-clean-file-alert {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    color: #166534;
}

.bank-clean-file-alert i {
    font-size: 1.8rem;
    color: #16a34a;
}

.bank-clean-file-alert strong {
    color: #15803d;
    font-size: 0.95rem;
    display: block;
    margin-bottom: 0.2rem;
}

.bank-clean-file-alert p {
    font-size: 0.84rem;
    margin: 0;
    color: #1e293b;
}

.bank-defect-card {
    border-radius: 10px;
    padding: 1rem 1.2rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.defect-fatal {
    border-left: 4px solid #dc2626;
    background: #fef2f2;
}

.defect-limitation {
    border-left: 4px solid #d97706;
    background: #fffbeb;
}

.defect-curable {
    border-left: 4px solid #0284c7;
    background: #f0f9ff;
}

.defect-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.defect-badge {
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.defect-fatal .defect-badge {
    color: #dc2626;
}

.defect-limitation .defect-badge {
    color: #d97706;
}

.defect-curable .defect-badge {
    color: #0284c7;
}

.defect-statute {
    font-size: 0.76rem;
    color: #64748b;
    font-weight: 600;
}

.defect-title {
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.3rem;
    font-size: 0.92rem;
}

.defect-finding {
    color: #334155;
    margin-bottom: 0.4rem;
    line-height: 1.45;
}

.defect-precedent {
    font-size: 0.78rem;
    color: #64748b;
    margin-bottom: 0.3rem;
    font-style: italic;
}

.defect-remediation {
    font-size: 0.82rem;
    color: #0369a1;
    font-weight: 600;
    background: #e0f2fe;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
}

/* Advocate Dossier Box */
.dossier-box {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 1.25rem;
    font-size: 0.86rem;
    color: #1e293b;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.dossier-header-strip {
    display: flex;
    justify-content: space-between;
    border-bottom: 1.5px dashed #cbd5e1;
    padding-bottom: 0.7rem;
    margin-bottom: 0.85rem;
    font-weight: 700;
    color: #0f172a;
}

.dossier-section {
    margin-bottom: 0.85rem;
}

.dossier-section h6 {
    font-size: 0.8rem;
    font-weight: 800;
    color: #0284c7;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dossier-chronology-list {
    margin: 0;
    padding-left: 1.3rem;
    color: #334155;
    line-height: 1.5;
}

.chrono-date {
    font-weight: 800;
    color: #0f172a;
}

.dossier-instructions {
    background: #f0f9ff;
    border-left: 3.5px solid #0284c7;
    padding: 0.65rem 0.85rem;
    border-radius: 6px;
    color: #0c4a6e;
    margin: 0;
    line-height: 1.5;
}

/* Compliance Evidence Ledger */
.compliance-ledger-card {
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 1.15rem;
    font-size: 0.82rem;
    box-shadow: none;
}

.ledger-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.6rem;
    margin-bottom: 0.75rem;
}

.ledger-seal {
    font-size: 0.82rem;
    font-weight: 900;
    color: #0284c7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.ledger-hash-chip {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.74rem;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    color: #0369a1;
}

.ledger-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.35rem;
    color: #475569;
    font-size: 0.82rem;
}

.ledger-row strong {
    color: #0f172a;
}

.ledger-governance-note {
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px dashed #cbd5e1;
    font-size: 0.74rem;
    color: #64748b;
    line-height: 1.45;
}

.bank-action-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.85rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1.5px solid #f1f5f9;
}

.bank-action-footer .btn-primary {
    background: linear-gradient(135deg, #0284c7, #2563eb);
    padding: 0.75rem 1.6rem;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(2, 132, 199, 0.3);
}

.bank-action-footer .btn-primary:hover {
    box-shadow: 0 6px 25px rgba(2, 132, 199, 0.45);
    transform: translateY(-1px);
}

/* ============================================================================
   LIGHT MODE COMPONENT POLISH & BANK AUTH STYLES
   ============================================================================ */

/* ── Light Mode Bank Recovery OS (Executive Financial Suite) ── */
[data-theme="light"] .bank-screen {
    background: radial-gradient(ellipse at 50% 0%, #f0f9ff 0%, #f8fafc 45%, #ffffff 100%);
    color: #0f172a;
}

[data-theme="light"] .bank-portal-header {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 249, 255, 0.95));
    border: 1.5px solid rgba(14, 165, 233, 0.25);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.06), 0 0 15px rgba(14, 165, 233, 0.08);
}

[data-theme="light"] .bank-portal-title {
    color: #0369a1;
    text-shadow: none;
}

[data-theme="light"] .bank-portal-subtitle {
    color: #475569;
}

[data-theme="light"] .bank-header-right .btn-outline {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #0369a1 !important;
}

[data-theme="light"] .bank-header-right .btn-outline:hover {
    background: #f0f9ff;
    border-color: #0284c7;
    color: #0284c7 !important;
}

[data-theme="light"] .bank-control-strip {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .bank-unit-selector label {
    color: #0369a1;
}

[data-theme="light"] .bank-panel {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .bank-panel-header {
    border-bottom: 1.5px solid #f1f5f9;
}

[data-theme="light"] .bank-panel-header h4 {
    color: #0f172a;
}

[data-theme="light"] .bank-form-group label {
    color: #334155;
    font-weight: 700;
}

[data-theme="light"] .bank-sub-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

[data-theme="light"] .bank-sub-card h5 {
    color: #0369a1;
}

[data-theme="light"] .bank-input-text,
[data-theme="light"] .bank-input-select {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #0f172a;
}

[data-theme="light"] .bank-input-text:focus,
[data-theme="light"] .bank-input-select:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
}

[data-theme="light"] .bank-checkbox-label {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #1e293b;
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
}

[data-theme="light"] .bank-checkbox-label:hover {
    border-color: #0284c7;
    background: #f0f9ff;
}

[data-theme="light"] .bank-score-card {
    background: linear-gradient(135deg, #f0f9ff, #ffffff);
    border: 1.5px solid rgba(14, 165, 233, 0.3);
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.08);
}

[data-theme="light"] .score-number {
    color: #0f172a;
}

[data-theme="light"] .score-label {
    color: #64748b;
}

[data-theme="light"] .bank-output-section {
    border-top: 1.5px solid #f1f5f9;
}

[data-theme="light"] .bank-output-section h5 {
    color: #0f172a;
}

[data-theme="light"] .bank-milestone-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .bank-milestone-card:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

[data-theme="light"] .milestone-title {
    color: #0f172a;
}

[data-theme="light"] .milestone-meta {
    color: #64748b;
}

[data-theme="light"] .bank-milestone-card.milestone-passed {
    border-left: 4px solid #16a34a;
    background: rgba(22, 163, 74, 0.04);
}

[data-theme="light"] .bank-milestone-card.milestone-fatal {
    border-left: 4px solid #dc2626;
    background: rgba(220, 38, 38, 0.04);
}

[data-theme="light"] .bank-milestone-card.milestone-warning {
    border-left: 4px solid #d97706;
    background: rgba(217, 119, 6, 0.04);
}

[data-theme="light"] .bank-defect-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .bank-defect-card.defect-fatal {
    border-left: 4px solid #dc2626;
    background: #fef2f2;
}

[data-theme="light"] .bank-defect-card.defect-limitation {
    border-left: 4px solid #d97706;
    background: #fffbeb;
}

[data-theme="light"] .bank-defect-card.defect-curable {
    border-left: 4px solid #0284c7;
    background: #f0f9ff;
}

[data-theme="light"] .defect-title {
    color: #0f172a;
}

[data-theme="light"] .defect-finding {
    color: #334155;
}

[data-theme="light"] .defect-precedent {
    color: #64748b;
}

[data-theme="light"] .dossier-box {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #1e293b;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .dossier-header-strip {
    border-bottom: 1.5px dashed #cbd5e1;
    color: #0f172a;
}

[data-theme="light"] .chrono-date {
    color: #0f172a;
}

[data-theme="light"] .dossier-chronology-list {
    color: #334155;
}

[data-theme="light"] .dossier-instructions {
    background: #f0f9ff;
    border-left: 3.5px solid #0284c7;
    color: #0c4a6e;
}

[data-theme="light"] .compliance-ledger-card {
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    box-shadow: none;
}

[data-theme="light"] .ledger-row {
    color: #475569;
}

[data-theme="light"] .ledger-row strong {
    color: #0f172a;
}

[data-theme="light"] .ledger-hash-chip {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0369a1;
}

[data-theme="light"] .ledger-governance-note {
    color: #64748b;
    border-top: 1px dashed #cbd5e1;
}

/* ── Light Mode Admin Control Center ── */
[data-theme="light"] #adminPortalScreen .top-nav {
    background: #ffffff !important;
    color: #0f172a !important;
    border-bottom: 2px solid #d97706 !important;
}

[data-theme="light"] .admin-header-card {
    background: linear-gradient(135deg, #ffffff, #fef3c7) !important;
    border: 1px solid rgba(217, 119, 6, 0.35) !important;
    box-shadow: var(--shadow-md) !important;
}

[data-theme="light"] .admin-header-card h1 {
    color: #92400e !important;
}

[data-theme="light"] .admin-header-card p {
    color: #78350f !important;
}

[data-theme="light"] .admin-stat-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.09) !important;
    box-shadow: var(--shadow-sm) !important;
}

[data-theme="light"] .admin-users-panel {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.09) !important;
    box-shadow: var(--shadow-md) !important;
}

[data-theme="light"] .admin-data-table thead tr {
    background: #f8fafc !important;
    color: #475569 !important;
}

[data-theme="light"] .admin-data-table tbody tr:hover {
    background: #f1f5f9 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MASTER ADMIN CONTROL CENTER: INSTITUTIONAL EXECUTIVE THEME OVERHAUL
   ═══════════════════════════════════════════════════════════════════════════ */

.admin-portal-container {
    max-width: 1400px;
    margin: 1.5rem auto 3rem auto;
    padding: 0 1.5rem;
}

.admin-header-card {
    background: linear-gradient(135deg, #090d16 0%, #111827 50%, #0f172a 100%);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--radius-xl);
    padding: 1.75rem 2rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.4), 0 0 20px rgba(99, 102, 241, 0.12);
}

[data-theme="light"] .admin-header-card {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.25);
}

.admin-badge-gov {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.25), rgba(6, 182, 212, 0.2));
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.35);
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Admin Tabs & Navigation ── */
.admin-tab-nav {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.6rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.admin-tab-nav::-webkit-scrollbar {
    height: 4px;
}

.admin-tab-nav::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.admin-tab-btn {
    padding: 0.75rem 1.35rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--gray-700);
    font-weight: 700;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.admin-tab-btn:hover {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.08);
    border-color: rgba(56, 189, 248, 0.35);
    transform: translateY(-1px);
}

.admin-tab-btn.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%) !important;
    border-color: #6366f1 !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.38) !important;
}

[data-theme="light"] .admin-tab-btn {
    background: #ffffff;
    color: #334155;
    border-color: #cbd5e1;
    font-weight: 700;
}

[data-theme="light"] .admin-tab-btn:hover {
    background: #f8fafc;
    color: #0284c7;
    border-color: #38bdf8;
}

[data-theme="light"] .admin-tab-btn.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border-color: #1d4ed8 !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

/* ── Admin Stat Cards ── */
.admin-stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.35rem 1.6rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: rgba(99, 102, 241, 0.3);
}

[data-theme="light"] .admin-stat-card {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

/* ── Admin Panel Card ── */
.admin-users-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .admin-users-panel {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

/* ── Status Badges ── */
.status-badge-active {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-badge-suspended {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 700;
    background: rgba(244, 63, 94, 0.12);
    color: #f43f5e;
    border: 1px solid rgba(244, 63, 94, 0.3);
}

.status-badge-pending {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 700;
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-badge-unlimited {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 700;
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

/* ── Admin Action Buttons ── */
.admin-btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.admin-btn-primary {
    background: linear-gradient(135deg, #4f46e5, #3b82f6);
    color: #ffffff;
    border-color: #4f46e5;
}

.admin-btn-primary:hover {
    background: linear-gradient(135deg, #4338ca, #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(79, 70, 229, 0.3);
}

.admin-btn-success {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.4);
}

.admin-btn-success:hover {
    background: #10b981;
    color: #ffffff;
}

.admin-btn-warning {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.4);
}

.admin-btn-warning:hover {
    background: #f59e0b;
    color: #ffffff;
}

.admin-btn-danger {
    background: rgba(244, 63, 94, 0.12);
    color: #f43f5e;
    border-color: rgba(244, 63, 94, 0.4);
}

.admin-btn-danger:hover {
    background: #f43f5e;
    color: #ffffff;
}

/* ── Bank Authentication Badge & Modals ── */
.bank-officer-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(14, 165, 233, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.35);
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.82rem;
    color: #38bdf8;
    font-weight: 600;
}

[data-theme="light"] .bank-officer-badge {
    background: rgba(14, 165, 233, 0.08);
    border-color: rgba(14, 165, 233, 0.3);
    color: #0369a1;
}

.admin-master-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.2), rgba(6, 182, 212, 0.2));
    border: 1px solid rgba(99, 102, 241, 0.4);
    color: #38bdf8;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

[data-theme="light"] .admin-master-badge {
    color: #1e40af;
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
}

/* Theme Toggle Button */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--gray-700);
    cursor: pointer;
    transition: var(--tx-fast);
    font-size: 1rem;
}

/* ── Admin Filter Pills & Table Styling ── */
.admin-filter-pills-strip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--border-color);
}

.admin-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.15s ease;
}

.admin-filter-pill:hover {
    color: #4f46e5;
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.08);
}

.admin-filter-pill.active {
    background: linear-gradient(135deg, #4f46e5, #3b82f6);
    color: #ffffff;
    border-color: #4f46e5;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

.admin-filter-pill .pill-count {
    background: rgba(0, 0, 0, 0.15);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
}

.admin-filter-pill.active .pill-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.admin-user-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-avatar-bubble {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    color: #ffffff;
    flex-shrink: 0;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.admin-copy-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    transition: color 0.15s ease;
}

.admin-copy-chip:hover {
    color: #4f46e5 !important;
}

.admin-module-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    margin: 1px;
}



/* ============================================================================
   ENTERPRISE BANK RECOVERY OS: 5-TAB SUITE STYLES (EXECUTIVE LIGHT THEME)
   ============================================================================ */

/* ── 5-Tab Executive Navigation Strip ── */
.bank-function-tabs-strip {
    display: flex;
    gap: 0.5rem;
    background: #ffffff;
    padding: 0.5rem;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);
    overflow-x: auto;
}

.bank-fn-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.15rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: #475569;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bank-fn-tab i {
    font-size: 0.95rem;
    color: #0284c7;
}

.bank-fn-tab:hover {
    background: #f0f9ff;
    color: #0369a1;
}

.bank-fn-tab.active {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

.bank-fn-tab.active i {
    color: #ffffff;
}

/* ── View Container Visibility ── */
.bank-function-view {
    display: none;
    animation: fadeInBankView 0.25s ease-out;
}

.bank-function-view.active {
    display: block;
}

@keyframes fadeInBankView {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

/* ── Multi-Track Orchestrator View ── */
.bank-multi-track-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    background: #ffffff;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);
}

.bank-multi-track-header h3 {
    margin: 0 0 0.3rem 0;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 800;
}

.bank-multi-track-header p {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
}

.bank-multitrack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

/* ── Drafter & OTS 2-Column Grids ── */
.bank-drafter-grid,
.bank-ots-grid {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 1.5rem;
}

@media (max-width: 1024px) {

    .bank-drafter-grid,
    .bank-ots-grid {
        grid-template-columns: 1fr;
    }
}

.bank-legal-draft-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ── Advocate Directory Cards Grid ── */
.bank-advocates-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.25rem;
}

/* ── Executive Bank OS Function Navigation Strip ── */
.bank-function-tabs-strip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f1f5f9;
    padding: 0.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    scrollbar-width: thin;
    border: 1px solid #e2e8f0;
}

.bank-function-tabs-strip::-webkit-scrollbar {
    height: 4px;
}

.bank-function-tabs-strip::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.bank-fn-tab {
    background: transparent;
    border: none;
    color: #64748b;
    padding: 0.65rem 1.1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.bank-fn-tab:hover {
    background: rgba(255, 255, 255, 0.7);
    color: #0f172a;
}

.bank-fn-tab.active {
    background: #ffffff;
    color: #0284c7;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.12), 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid #bae6fd;
}

/* Dark mode theme adaptations */
[data-theme="dark"] .bank-function-tabs-strip {
    background: #0f172a;
    border-color: #1e293b;
}

[data-theme="dark"] .bank-fn-tab {
    color: #94a3b8;
}

[data-theme="dark"] .bank-fn-tab:hover {
    background: #1e293b;
    color: #f8fafc;
}

[data-theme="dark"] .bank-fn-tab.active {
    background: #1e293b;
    color: #38bdf8;
    border-color: #0284c7;
}

[data-theme="dark"] .bank-multi-track-header,
[data-theme="dark"] .bank-card,
[data-theme="dark"] .bank-panel {
    background: #0f172a !important;
    border-color: #1e293b !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .bank-multi-track-header h3,
[data-theme="dark"] .bank-panel-header h4 {
    color: #f8fafc !important;
}

/* ============================================================================
   MODULAR SUBSCRIPTION PRICING CONFIGURATOR (₹500 / Module / 10 Cases)
   ============================================================================ */
.pricing-section {
    padding: 5rem 1.5rem;
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
}

.pricing-configurator-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 2.5rem;
    align-items: start;
    margin-top: 2.5rem;
}

.pricing-modules-selection {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: 1.75rem;
    box-shadow: var(--shadow-lg);
}

.modules-selection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.selection-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.selection-rate-tag {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary-600);
    background: var(--primary-50);
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--primary-200);
}

.modules-checkbox-grid {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.module-choice-card {
    display: block;
    cursor: pointer;
    position: relative;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.module-choice-card:hover {
    border-color: var(--primary-400);
    background: var(--bg-elevated);
    transform: translateY(-2px);
}

.module-choice-card.active {
    background: var(--primary-50);
    border-color: var(--primary-600);
    box-shadow: 0 4px 18px rgba(79, 70, 229, 0.15);
}

.module-choice-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.module-card-body {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.1rem;
}

.module-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--primary-50);
    color: var(--primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    border: 1px solid var(--primary-200);
    transition: all 0.2s ease;
}

.module-choice-card.active .module-card-icon {
    background: var(--primary-600);
    color: #ffffff;
    border-color: var(--primary-600);
    box-shadow: 0 0 12px rgba(79, 70, 229, 0.4);
}

.module-card-info h4 {
    margin: 0 0 0.25rem 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-primary);
}

.module-card-info p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.module-quota-pill {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary-600);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-md);
    white-space: nowrap;
}

/* Pricing Summary Card */
.pricing-summary-card {
    background: var(--bg-surface);
    border: 2px solid var(--primary-500);
    border-radius: var(--radius-2xl);
    padding: 2.25rem;
    box-shadow: 0 15px 40px rgba(79, 70, 229, 0.12);
    position: sticky;
    top: 6rem;
}

.plan-summary-header {
    margin-bottom: 1.5rem;
}

.plan-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary-600);
    background: var(--primary-50);
    border: 1px solid var(--primary-200);
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-full);
    margin-bottom: 0.6rem;
}

.plan-summary-header h3 {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 0.35rem 0;
}

.plan-summary-header p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 1rem 0;
    line-height: 1.45;
}

.billing-cycle-selector {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.35rem;
    margin-bottom: 1.25rem;
    background: rgba(15, 23, 42, 0.4);
    padding: 0.35rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

@media (max-width: 640px) {
    .billing-cycle-selector {
        grid-template-columns: repeat(auto-fit, minmax(65px, 1fr));
        gap: 0.25rem;
    }
}

[data-theme="light"] .billing-cycle-selector {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.billing-cycle-tab {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 0.55rem 0.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: center;
    line-height: 1.35;
    outline: none;
}

.billing-cycle-tab span {
    display: block;
    font-size: 0.67rem;
    font-weight: 600;
    margin-top: 2px;
    opacity: 0.9;
}

.billing-cycle-tab.active {
    background: #4f46e5;
    color: #ffffff;
    border-color: #6366f1;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
}

.billing-cycle-tab.active span {
    color: #e0e7ff;
}

[data-theme="light"] .billing-cycle-tab {
    color: #475569;
}

[data-theme="light"] .billing-cycle-tab.active {
    background: #4f46e5;
    color: #ffffff;
}

.billing-cycle-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

[data-theme="light"] .billing-cycle-tab:hover:not(.active) {
    background: #e2e8f0;
    color: #0f172a;
}

.plan-calculation-box {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.plan-price-display {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    margin-bottom: 0.25rem;
}

.plan-price-display .currency-symbol {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary-600);
}

.plan-price-display .price-number {
    font-size: 2.75rem;
    font-weight: 900;
    color: var(--text-primary);
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.02em;
}

.plan-price-display .price-cycle {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 600;
}

.plan-rate-detail {
    font-size: 0.78rem;
    color: var(--primary-600);
    font-weight: 700;
    margin-bottom: 1.1rem;
}

.plan-metrics-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.plan-metric-col {
    display: flex;
    flex-direction: column;
}

.plan-metric-col .metric-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
}

.plan-metric-col .metric-value {
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 800;
    margin-top: 0.2rem;
}

.plan-features-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.plan-feature-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.83rem;
    color: var(--text-secondary);
}

.plan-feature-item i {
    color: var(--success-500);
    font-size: 0.9rem;
}

.plan-preset-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.preset-pill {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-md);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.preset-pill:hover {
    background: var(--primary-50);
    border-color: var(--primary-400);
    color: var(--primary-600);
}

.preset-pill.active {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

.subscribe-plan-btn {
    padding: 0.95rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 800;
    border-radius: var(--radius-md);
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.plan-guarantee-note {
    font-size: 0.73rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

@media (max-width: 900px) {
    .pricing-configurator-grid {
        grid-template-columns: 1fr;
    }

    .pricing-summary-card {
        position: static;
    }
}

/* Light Theme Modular Pricing Overrides */
[data-theme="light"] .pricing-modules-selection {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .modules-selection-header {
    border-bottom: 1px solid #e2e8f0;
}

[data-theme="light"] .selection-title {
    color: #0f172a;
}

[data-theme="light"] .selection-rate-tag {
    color: #4f46e5;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
}

[data-theme="light"] .modular-pricing-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .module-choice-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .module-choice-card:hover {
    background: #f8fafc;
    border-color: #4f46e5;
}

[data-theme="light"] .module-choice-card.active {
    background: #eef2ff;
    border-color: #4f46e5;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.15);
}

[data-theme="light"] .module-card-info h4 {
    color: #0f172a;
}

[data-theme="light"] .module-card-info p {
    color: #475569;
}

[data-theme="light"] .module-quota-pill {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #4f46e5;
}

[data-theme="light"] .pricing-summary-card {
    background: #ffffff;
    border: 2px solid #4f46e5;
    box-shadow: 0 15px 40px rgba(79, 70, 229, 0.12);
}

[data-theme="light"] .plan-summary-header h3 {
    color: #0f172a;
}

[data-theme="light"] .plan-summary-header p {
    color: #64748b;
}

[data-theme="light"] .plan-calculation-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

[data-theme="light"] .plan-price-display .price-number {
    color: #0f172a;
}

[data-theme="light"] .plan-price-display .currency-symbol {
    color: #4f46e5;
}

[data-theme="light"] .plan-price-display .price-cycle {
    color: #64748b;
}

[data-theme="light"] .plan-metric-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

[data-theme="light"] .plan-metric-val {
    color: #0f172a;
}

[data-theme="light"] .plan-metric-lbl {
    color: #64748b;
}

[data-theme="light"] .plan-feature-item {
    color: #334155;
}

[data-theme="light"] .preset-pill {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #334155;
}

[data-theme="light"] .preset-pill:hover {
    background: #eef2ff;
    border-color: #4f46e5;
    color: #4f46e5;
}

[data-theme="light"] .preset-pill.active {
    background: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
}

/* ══════════════════════════════════════════════════════════════
   CMS — CASE MANAGEMENT SYSTEM STYLES
   ══════════════════════════════════════════════════════════════ */

.cms-layout-container {
    display: flex;
    min-height: calc(100vh - 70px);
    background: #0b0f19;
}

.cms-sidebar {
    width: 240px;
    background: rgba(15, 23, 42, 0.95);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
}

.cms-sidebar-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    font-weight: 700;
    padding: 0.5rem 0.75rem;
}

.cms-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.cms-nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.cms-nav-item.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.2));
    border: 1px solid rgba(99, 102, 241, 0.4);
    color: #ffffff;
}

.cms-nav-item i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
}

.cms-main-content {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    max-width: 1400px;
}

/* Header & Controls */
.cms-view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.cms-view-title h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.cms-view-title p {
    color: #94a3b8;
    font-size: 0.85rem;
    margin: 0.2rem 0 0 0;
}

.cms-filter-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.6);
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.cms-search-box {
    position: relative;
    flex: 1;
    min-width: 240px;
}

.cms-search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
}

.cms-search-box input {
    width: 100%;
    padding: 0.6rem 1rem 0.6rem 2.2rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.85rem;
}

.cms-filter-pills {
    display: flex;
    gap: 0.4rem;
}

.cms-filter-pill {
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cms-filter-pill:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

.cms-filter-pill.active {
    background: #6366f1;
    border-color: #6366f1;
    color: #ffffff;
}

/* CMS Data Table */
.cms-table-wrapper {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.cms-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.88rem;
}

.cms-table th {
    background: rgba(255, 255, 255, 0.02);
    color: #94a3b8;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cms-table td {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
}

.cms-table-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.cms-table-row:hover {
    background: rgba(99, 102, 241, 0.06);
}

.cms-cell-id {
    color: #818cf8;
    font-family: monospace;
    font-size: 0.85rem;
}

.case-name-text {
    font-weight: 700;
    color: #ffffff;
}

.case-tags {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.25rem;
}

.cms-tag {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
}

.cms-type-tag {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.cms-status-pill {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.status-pill--draft {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.status-pill--ongoing {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.status-pill--resolved {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-pill--archived {
    background: rgba(156, 163, 175, 0.1);
    color: #6b7280;
}

.cms-priority-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.3rem;
}

.cms-score-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.8rem;
}

.score--green {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.score--yellow {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.score--red {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.score--gray {
    color: #64748b;
}

/* Detail View */
.cms-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
    gap: 1rem;
}

.cms-dh-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cms-dh-title-group h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.cms-dh-id {
    color: #818cf8;
    font-family: monospace;
    font-weight: 700;
    margin-right: 0.5rem;
}

.cms-dh-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cms-status-select {
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
}

.cms-detail-tabs {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

.cms-tab-btn {
    padding: 0.75rem 1.2rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #94a3b8;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cms-tab-btn:hover {
    color: #ffffff;
}

.cms-tab-btn.active {
    color: #818cf8;
    border-bottom-color: #818cf8;
}

.cms-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.cms-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.5rem;
}

.cms-card h4 {
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cms-prop-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.88rem;
}

.cms-prop-row .label {
    color: #94a3b8;
}

/* Document & Upload Cards */
.cms-doc-dropzone {
    border: 2px dashed rgba(99, 102, 241, 0.35);
    background: rgba(99, 102, 241, 0.03);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cms-doc-dropzone.drag-active {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
}

.cms-doc-dropzone i {
    color: #818cf8;
    margin-bottom: 0.5rem;
}

.cms-docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.2rem;
}

.cms-doc-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.dc-top {
    display: flex;
    gap: 0.8rem;
    align-items: center;
}

.dc-file-icon {
    font-size: 1.8rem;
    color: #ef4444;
}

.dc-filename {
    font-weight: 700;
    color: #ffffff;
    font-size: 0.88rem;
    word-break: break-all;
}

.dc-sub {
    font-size: 0.75rem;
    color: #94a3b8;
}

.cms-cert-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
}

.cert--certified {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.cert--pending {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.dc-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
}

/* Draft Cards & Workflow */
.cms-draft-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.drc-type {
    font-weight: 800;
    color: #ffffff;
    font-size: 0.95rem;
}

.drc-meta {
    font-size: 0.78rem;
    color: #94a3b8;
}

.cms-wf-pill {
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.wf-status--draft {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

.wf-status--pending_approval {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.wf-status--approved {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.wf-status--filed {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

/* Deadline Cards */
.cms-deadline-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 1rem 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    border-left: 4px solid #64748b;
}

.cms-deadline-card.urgency--critical {
    border-left-color: #ef4444;
}

.cms-deadline-card.urgency--urgent {
    border-left-color: #f59e0b;
}

.cms-deadline-card.urgency--upcoming {
    border-left-color: #3b82f6;
}

.cms-deadline-card.urgency--safe {
    border-left-color: #10b981;
}

.cms-deadline-card.completed {
    opacity: 0.5;
    text-decoration: line-through;
}

.dc-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dc-title {
    font-weight: 700;
    color: #ffffff;
}

.dc-basis {
    font-size: 0.75rem;
    color: #94a3b8;
}

.cms-urgency-badge {
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 800;
}

/* Modals */
.cms-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.cms-modal-dialog {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.cms-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cms-modal-header h3 {
    color: #ffffff;
    font-size: 1.2rem;
    margin: 0;
}

.cms-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cms-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.2rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cms-textarea-large {
    width: 100%;
    height: 250px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #e2e8f0;
    font-family: monospace;
    font-size: 0.85rem;
    padding: 0.75rem;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .cms-layout-container {
        flex-direction: column;
    }

    .cms-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: 0.75rem;
    }

    .cms-overview-grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   JUDIQ AI — ENTERPRISE MOBILE LANDING PAGE PERFECTION & RESPONSIVE DESIGN SYSTEM
   ══════════════════════════════════════════════════════════════════════════════ */

/* --- 1. Global Viewport & Overflow Shields --- */
html,
body {
    max-width: 100vw;
    overflow-x: hidden !important;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

#app,
.app-container,
.landing-screen {
    max-width: 100vw;
    overflow-x: hidden !important;
    width: 100%;
}

/* Institutional Compliance Top Banner */
.institutional-compliance-bar {
    background: linear-gradient(90deg, #070b14 0%, #0d1527 50%, #070b14 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.4rem 1rem;
    position: relative;
    z-index: 1001;
    width: 100%;
    box-sizing: border-box;
}

.compliance-bar-content {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    font-size: 0.75rem;
    color: var(--gray-400, #94a3b8);
    font-weight: 500;
    flex-wrap: wrap;
    text-align: center;
}

.compliance-badge {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.compliance-divider {
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.85rem;
}

.compliance-status {
    color: #38bdf8;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Header & Mobile Toggle Base */
.landing-header {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 2rem;
    background: rgba(10, 15, 29, 0.92);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.mobile-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 1.15rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
}

.mobile-nav-toggle:hover,
.mobile-nav-toggle:active {
    background: rgba(56, 189, 248, 0.18);
    border-color: rgba(56, 189, 248, 0.5);
    color: #38bdf8;
    transform: scale(1.05);
}

[data-theme="light"] .mobile-nav-toggle {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .mobile-nav-toggle:hover,
[data-theme="light"] .mobile-nav-toggle:active {
    background: #e2e8f0;
    border-color: #94a3b8;
    color: #0284c7;
}

/* Off-canvas Mobile Drawer */
.mobile-nav-drawer {
    position: fixed;
    top: 0;
    right: -340px;
    width: min(320px, 85vw);
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(180deg, #0b1120 0%, #070b14 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.8);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    transition: right 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    padding: 1.25rem 1.25rem 2.5rem 1.25rem;
    box-sizing: border-box;
}

.mobile-nav-drawer.open {
    right: 0 !important;
}

.mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 7, 18, 0.75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 99998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-nav-backdrop.open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.mobile-nav-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav-close-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    transition: all 0.2s ease;
}

.mobile-nav-close-btn:hover,
.mobile-nav-close-btn:active {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.75rem;
}

.mobile-nav-links a {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    color: #cbd5e1;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.mobile-nav-links a i {
    width: 20px;
    text-align: center;
    color: #38bdf8;
    font-size: 1rem;
}

.mobile-nav-links a:hover,
.mobile-nav-links a:active {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.3);
    color: #38bdf8;
    transform: translateX(4px);
}

.mobile-nav-actions {
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Light Mode Mobile Slidebar & Drawer Overrides */
[data-theme="light"] .mobile-nav-drawer {
    background: #ffffff !important;
    border-left: 1px solid #e2e8f0 !important;
    box-shadow: -12px 0 40px rgba(15, 23, 42, 0.15) !important;
}

[data-theme="light"] .mobile-nav-drawer-header {
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .mobile-nav-drawer-header .brand-name-serif {
    color: #0f172a !important;
}

[data-theme="light"] .mobile-nav-close-btn {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

[data-theme="light"] .mobile-nav-close-btn:hover,
[data-theme="light"] .mobile-nav-close-btn:active {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
}

[data-theme="light"] .mobile-nav-links a {
    color: #1e293b !important;
}

[data-theme="light"] .mobile-nav-links a i {
    color: #0284c7 !important;
}

[data-theme="light"] .mobile-nav-links a:hover,
[data-theme="light"] .mobile-nav-links a:active {
    background: #f0f9ff !important;
    border-color: #bae6fd !important;
    color: #0284c7 !important;
}

[data-theme="light"] .mobile-nav-actions {
    border-top: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .mobile-nav-backdrop {
    background: rgba(15, 23, 42, 0.45) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MEDIA QUERY: TABLETS & MOBILE (<= 992px)
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .landing-nav-links {
        display: none !important;
    }

    .mobile-nav-toggle {
        display: inline-flex !important;
    }

    .landing-header {
        padding: 0.75rem 1.25rem !important;
    }

    .landing-nav {
        gap: 0.5rem !important;
    }

    .landing-nav .bank-nav-btn,
    .landing-nav .cmd-palette-trigger,
    .landing-nav #navLoginBtn,
    .landing-nav #navRegisterBtn {
        display: none !important;
    }

    /* Hero Section Responsive */
    .hero-section {
        grid-template-columns: 1fr !important;
        padding: 2.5rem 1.25rem 3rem 1.25rem !important;
        gap: 2rem !important;
        text-align: center !important;
    }

    .hero-content {
        max-width: 100% !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .hero-content h1 {
        font-size: clamp(2.1rem, 7vw, 3rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }

    .hero-content p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        max-width: 92% !important;
        margin-bottom: 1.75rem !important;
    }

    .hero-actions {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 360px !important;
        gap: 0.85rem !important;
    }

    .hero-actions .btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.9rem 1.5rem !important;
        font-size: 1rem !important;
    }

    .hero-image {
        max-width: 100% !important;
        margin-top: 0.5rem !important;
    }

    .hero-image img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: var(--radius-lg, 12px) !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6) !important;
    }

    /* Strategy Simulator Grid */
    .sim-main-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Precedent & Readiness Grid */
    .readiness-workbench-grid {
        grid-template-columns: 1fr !important;
        gap: 1.75rem !important;
    }

    /* Modular Pricing Configurator Grid */
    .pricing-configurator-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .pricing-summary-card {
        position: static !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Footer Grid */
    .footer-content {
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem !important;
    }

    .brand-col {
        grid-column: span 2 !important;
    }

    .newsletter-col {
        grid-column: span 2 !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MEDIA QUERY: SMARTPHONES (<= 768px)
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Hide desktop controls */
    .hide-on-mobile {
        display: none !important;
    }

    /* Compliance Banner on Mobile */
    .institutional-compliance-bar {
        padding: 0.35rem 0.5rem !important;
    }

    .compliance-bar-content {
        font-size: 0.68rem !important;
        gap: 0.5rem !important;
    }

    .compliance-divider {
        display: none !important;
    }

    /* Trust & Metrics Strip */
    .trust-metrics-strip {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.85rem !important;
        padding: 1.25rem 1rem !important;
        margin: 1.5rem auto !important;
        max-width: 95% !important;
        width: calc(100% - 2rem) !important;
        box-sizing: border-box !important;
        border-radius: var(--radius-xl, 16px) !important;
    }

    .trust-metric-item {
        padding: 0.85rem 0.5rem !important;
        text-align: center !important;
    }

    .trust-metric-value {
        font-size: 1.45rem !important;
        font-weight: 800 !important;
        margin-bottom: 0.25rem !important;
    }

    .trust-metric-label {
        font-size: 0.72rem !important;
        line-height: 1.3 !important;
    }

    /* Sections Padding & Headings */
    .features-section,
    .strategy-sim-section,
    .sandbox-section,
    .readiness-section,
    .about-section,
    .testimonials-section,
    .pricing-section,
    .faq-section,
    .resource-section,
    .contact-section {
        padding: 2.75rem 1.15rem !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    .section-heading {
        margin-bottom: 1.75rem !important;
        text-align: center !important;
    }

    .section-heading h2 {
        font-size: clamp(1.45rem, 5.5vw, 1.9rem) !important;
        line-height: 1.25 !important;
        margin-bottom: 0.5rem !important;
    }

    .section-heading p {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
    }

    /* Feature Cards */
    .feature-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .feature-card {
        padding: 1.5rem 1.25rem !important;
        text-align: center !important;
    }

    .feature-card img {
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto 1rem auto !important;
    }

    /* Feature Explorer */
    .feature-explorer {
        margin-top: 1.75rem !important;
        padding: 1rem !important;
        border-radius: var(--radius-lg, 12px) !important;
    }

    .explorer-tabs {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .explorer-tab {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.85rem !important;
    }

    .explorer-display {
        padding: 1rem 0.75rem !important;
    }

    .explorer-preview-box {
        font-size: 0.78rem !important;
        padding: 0.85rem !important;
        max-height: 240px !important;
        overflow-y: auto !important;
    }

    /* Strategy Simulator Controls */
    .sim-workbench-container {
        padding: 1.25rem 1rem !important;
        border-radius: var(--radius-xl, 16px) !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .sim-preset-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        margin-bottom: 1.25rem !important;
    }

    .sim-preset-label {
        width: 100% !important;
        font-size: 0.82rem !important;
        margin-bottom: 0.2rem !important;
    }

    .sim-preset-btn {
        flex: 1 1 calc(50% - 0.5rem) !important;
        font-size: 0.78rem !important;
        padding: 0.6rem 0.5rem !important;
        text-align: center !important;
        justify-content: center !important;
        white-space: normal !important;
        line-height: 1.25 !important;
        min-height: 44px !important;
    }

    .sim-controls-card,
    .sim-output-card {
        padding: 1.25rem 1rem !important;
        border-radius: var(--radius-lg, 12px) !important;
    }

    .sim-card-header h3 {
        font-size: 1.05rem !important;
        line-height: 1.3 !important;
    }

    .sim-range-wrapper {
        gap: 0.75rem !important;
    }

    .sim-range-wrapper input[type="range"] {
        height: 8px !important;
        cursor: pointer;
    }

    .sim-toggles-grid {
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
    }

    .sim-toggle-item {
        padding: 0.75rem 0.85rem !important;
        font-size: 0.85rem !important;
        min-height: 44px !important;
    }

    .sim-score-header {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }

    .sim-score-num {
        font-size: 2.2rem !important;
    }

    .sim-vector-box {
        padding: 0.85rem !important;
    }

    .sim-vector-box h4 {
        font-size: 0.82rem !important;
    }

    .sim-vector-box p {
        font-size: 0.78rem !important;
        line-height: 1.45 !important;
    }

    .sim-ratio-box {
        font-size: 0.78rem !important;
        padding: 0.75rem !important;
    }

    /* Deadline Sandbox */
    .sandbox-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .sandbox-input-box,
    .sandbox-results-panel {
        padding: 1.25rem 1rem !important;
        border-radius: var(--radius-lg, 12px) !important;
    }

    /* Precedent Explorer */
    .precedent-card {
        padding: 1.25rem 1rem !important;
    }

    .precedent-card h3 {
        font-size: 1.15rem !important;
    }

    .search-wrapper {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .precedent-search-bar {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 0.85rem !important;
        padding: 0.75rem 1rem 0.75rem 2.4rem !important;
    }

    .precedent-tag-pills {
        gap: 0.35rem !important;
        margin: 0.65rem 0 1rem 0 !important;
    }

    .precedent-tag-pill {
        font-size: 0.72rem !important;
        padding: 0.35rem 0.55rem !important;
        flex: 0 0 auto !important;
        min-height: 32px !important;
    }

    /* Pricing Configurator */
    .modules-selection-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.4rem !important;
    }

    .selection-rate-tag {
        font-size: 0.75rem !important;
    }

    .modules-checkbox-grid {
        gap: 0.75rem !important;
    }

    .module-choice-card {
        padding: 0.85rem 0.75rem !important;
    }

    .module-card-body {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    .module-card-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
        flex-shrink: 0 !important;
    }

    .module-card-info h4 {
        font-size: 0.88rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.25rem !important;
    }

    .module-card-info p {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
    }

    .module-quota-pill {
        display: inline-block !important;
        font-size: 0.7rem !important;
        padding: 0.2rem 0.5rem !important;
        align-self: flex-start !important;
    }

    .pricing-summary-card {
        padding: 1.35rem 1rem !important;
        border-radius: var(--radius-xl, 16px) !important;
    }

    .plan-type-badge {
        font-size: 0.75rem !important;
    }

    .plan-summary-header h3 {
        font-size: 1.25rem !important;
    }

    .plan-price-display .price-number {
        font-size: 2.4rem !important;
    }

    .plan-metrics-row {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.4rem !important;
        padding: 0.75rem 0.4rem !important;
    }

    .plan-metric-col .metric-label {
        font-size: 0.68rem !important;
    }

    .plan-metric-col .metric-value {
        font-size: 0.9rem !important;
    }

    .plan-preset-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
        margin: 1rem 0 !important;
    }

    .preset-pill {
        padding: 0.6rem 0.35rem !important;
        font-size: 0.75rem !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .subscribe-plan-btn {
        width: 100% !important;
        font-size: 0.95rem !important;
        padding: 0.95rem 1rem !important;
        min-height: 48px !important;
    }

    /* About, Testimonials & Blog */
    .about-stats {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }

    .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .testimonial-card {
        padding: 1.35rem 1.15rem !important;
    }

    .blog-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    /* Contact Grid */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .contact-info h2 {
        font-size: 1.55rem !important;
    }

    .contact-details {
        gap: 0.85rem !important;
    }

    .contact-card {
        padding: 1rem !important;
    }

    .contact-form-container {
        padding: 1.25rem 1rem !important;
    }

    /* Footer */
    .landing-footer {
        padding: 2.5rem 1.15rem 2rem 1.15rem !important;
    }

    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 1.75rem !important;
    }

    .brand-col,
    .newsletter-col {
        grid-column: span 1 !important;
    }

    .newsletter-form {
        flex-direction: column !important;
        gap: 0.65rem !important;
    }

    .newsletter-form input {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.8rem 1rem !important;
    }

    .newsletter-form button {
        width: 100% !important;
        min-height: 44px !important;
    }

    .footer-disclaimer-strip {
        text-align: left !important;
        font-size: 0.72rem !important;
        padding: 0.85rem !important;
    }

    /* Floating AI Co-Counsel Button on Mobile */
    .co-counsel-floating-btn {
        bottom: 1.25rem !important;
        right: 1.25rem !important;
        padding: 0.6rem 0.9rem !important;
        font-size: 0.85rem !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
        z-index: 999 !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MEDIA QUERY: ULTRA COMPACT SCREENS (<= 400px)
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
    .trust-metrics-strip {
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
    }

    .sim-preset-btn {
        flex: 1 1 100% !important;
    }

    .plan-preset-buttons {
        grid-template-columns: 1fr !important;
    }
}



/* ============================================================================
   EXTRACTED INLINE STYLES (MIGRATED FROM INDEX.HTML)
   ============================================================================ */
.u-is-1 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.u-is-2 {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 1.3rem;
}

.u-is-3 {
    font-size: 0.8rem;
    padding: 0.35rem 0.7rem;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(14, 165, 233, 0.1);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.4);
}

.u-is-4 {
    font-size: 0.82rem;
    padding: 0.4rem 0.85rem;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    border-color: rgba(99, 102, 241, 0.45);
    font-weight: 600;
}

.u-is-5 {
    font-size: 0.82rem;
    padding: 0.4rem 0.85rem;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(14, 165, 233, 0.15);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.45);
    font-weight: 600;
}

.u-is-6 {
    font-size: 0.8rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.05);
    color: var(--gray-300);
    border-color: rgba(255, 255, 255, 0.2);
}

.u-is-7 {
    color: #38bdf8;
}

.u-is-8 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.u-is-9 {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
}

.u-is-10 {
    width: 100%;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.6rem;
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.4);
    background: rgba(14, 165, 233, 0.1);
    font-weight: 600;
}

.u-is-11 {
    width: 100%;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.6rem;
}

.u-is-12 {
    width: 100%;
    margin-bottom: 0.75rem;
    padding: 0.65rem;
}

.u-is-13 {
    width: 100%;
    padding: 0.65rem;
}

.u-is-14 {
    margin-bottom: 1.25rem;
}

.u-is-15 {
    color: #6b7280;
}

.u-is-16 {
    color: #60a5fa;
}

.u-is-17 {
    color: #fbbf24;
}

.u-is-18 {
    color: #f87171;
}

.u-is-19 {
    color: #34d399;
}

.u-is-20 {
    width: 68%;
}

.u-is-21 {
    color: #ef4444;
}

.u-is-22 {
    color: #10b981;
}

.u-is-23 {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0 0 1rem 0;
}

.u-is-24 {
    text-align: left;
    max-width: 140px;
}

.u-is-25 {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.u-is-26 {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.u-is-27 {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0.75rem 0 1rem 0;
}

.u-is-28 {
    margin-bottom: 0.75rem;
}

.u-is-29 {
    padding: 1rem 0;
    font-weight: 700;
}

.u-is-30 {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.u-is-31 {
    margin-top: 0.75rem;
    font-size: 0.7rem;
    padding: 0.25rem 0.6rem;
}

.u-is-32 {
    margin-top: 1rem;
}

.u-is-33 {
    max-width: 1200px;
    margin: 1.5rem auto 0 auto;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    color: var(--gray-400);
    text-align: center;
    line-height: 1.5;
}

.u-is-34 {
    color: #f59e0b;
    margin-right: 0.4rem;
}

.u-is-35 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.u-is-42 {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.terms-agreement-group,
.u-is-43 {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0.65rem !important;
    margin-top: 1.25rem !important;
    margin-bottom: 1.5rem !important;
    text-align: left !important;
    width: 100% !important;
}

.terms-agreement-group input[type="checkbox"],
.u-is-44 {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    margin: 0.15rem 0 0 0 !important;
    padding: 0 !important;
    border: 1.5px solid var(--gray-400, #94a3b8) !important;
    border-radius: 4px !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    cursor: pointer !important;
    accent-color: var(--primary-500, #6366f1) !important;
    flex: 0 0 18px !important;
}

.terms-agreement-group label,
.u-is-45 {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    color: var(--gray-600, #4b5563) !important;
    line-height: 1.45 !important;
    cursor: pointer !important;
    user-select: none !important;
    text-align: left !important;
    flex: 1 1 auto !important;
}

.terms-agreement-group label a,
.u-is-46 {
    color: var(--primary-600, #4f46e5) !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
    transition: color 0.15s ease !important;
}

.terms-agreement-group label a:hover,
.u-is-46:hover {
    color: var(--primary-500, #6366f1) !important;
}

.u-is-47 {
    display: none;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: var(--primary-50);
    border: 1px solid var(--primary-200);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-700);
}

.u-is-48 {
    color: var(--primary-600);
}

.u-is-49 {
    display: none;
    background: linear-gradient(135deg, #d97706, #b45309);
    color: #ffffff;
    border: none;
    font-weight: 700;
    border-radius: 8px;
    padding: 0.4rem 0.85rem;
    gap: 0.4rem;
    align-items: center;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35);
}

.u-is-50 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.u-is-51 {
    background: var(--primary-50);
    border: 1px solid var(--primary-200);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.u-is-52 {
    width: 10px;
    height: 10px;
    background: var(--success-500);
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(16, 185, 129, 0.4);
    animation: pulse 2s infinite;
}

.u-is-53 {
    font-size: 10px;
    font-weight: 700;
    color: var(--primary-700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.u-is-54 {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-700);
}

.u-is-55 {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 1.25rem 0 1.75rem 0;
    padding: 0.6rem;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
}

.u-is-56 {
    border-radius: 8px;
    font-weight: 600;
    padding: 0.45rem 0.9rem;
}

.u-is-57 {
    color: #3b82f6;
}

.u-is-58 {
    color: #8b5cf6;
}

.u-is-59 {
    font-size: 0.78rem;
    color: var(--gray-400);
    padding-left: 0.5rem;
}

.u-is-60 {
    max-width: 960px;
}

.u-is-61 {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.u-is-62 {
    height: 520px;
    width: 100%;
}

.u-is-63 {
    margin-bottom: 2rem;
}

.u-is-64 {
    margin-bottom: 1rem;
    color: var(--gray-900);
    font-weight: 700;
}

.u-is-65 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.u-is-67 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.u-is-68 {
    display: none;
}

.u-is-69 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.u-is-72 {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
    color: white;
}

.u-is-73 {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border-color: #10b981;
    font-weight: 700;
}

.u-is-74 {
    margin-top: 15px;
    background: rgba(239, 68, 68, 0.1);
    border-left: 4px solid #ef4444;
    padding: 12px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    word-break: break-word;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.u-is-75 {
    color: #ef4444;
    font-size: 0.9rem;
}

.u-is-76 {
    color: #f87171;
    margin: 0;
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 1.4;
}

.u-is-77 {
    margin-top: 1.5rem;
}

.u-is-78 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.u-is-79 {
    margin-bottom: 0;
}

.u-is-80 {
    color: var(--primary-400);
}

.u-is-81 {
    margin-top: 0.2rem;
}

.u-is-82 {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.u-is-83 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    padding: 1rem;
    background: var(--gray-100);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
}

.u-is-84 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    background: var(--glass-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
}

.u-is-85 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
}

.u-is-86 {
    margin: 0;
}

.u-is-87 {
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-300);
    font-size: 0.8rem;
    background: var(--gray-200);
    color: var(--gray-900);
}

.u-is-88 {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    margin-left: 0.5rem;
    background: #f3f4f6;
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
}

.u-is-89 {
    color: #9ca3af;
    font-size: 0.88rem;
}

.u-is-90 {
    border-left: 5px solid var(--warning-500);
    background: var(--warning-50);
}

.u-is-91 {
    color: var(--warning-700);
}

.u-is-92 {
    font-size: 0.9rem;
    color: var(--warning-800);
    margin-top: 0.5rem;
}

.u-is-93 {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.u-is-94 {
    position: relative;
    height: 300px;
    width: 100%;
    margin-top: 1rem;
}

.u-is-95 {
    background: var(--gray-50);
    padding: 1.5rem;
    border-radius: 0.5rem;
    white-space: pre-wrap;
    line-height: 1.6;
}

.u-is-96 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 1rem;
}

.u-is-97 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.u-is-98 {
    color: var(--primary-500);
}

.u-is-99 {
    margin: 0.25rem 0 0 0;
}

.u-is-100 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.u-is-101 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--gray-700);
}

.u-is-102 {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-300);
    background: var(--gray-100);
    color: var(--gray-800);
    font-weight: 600;
    font-family: var(--font-family);
    cursor: pointer;
}

.u-is-103 {
    background: var(--gray-100);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-lg);
    margin-bottom: 1.25rem;
    border: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.u-is-104 {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.u-is-105 {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.u-is-106 {
    display: flex;
    gap: 0.5rem;
}

.u-is-107 {
    background: var(--primary-100);
    color: var(--primary-700);
    border: 1px solid var(--primary-200);
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.u-is-108 {
    color: var(--success-500);
}

.u-is-109 {
    background: var(--gray-50);
    padding: 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
}

.u-is-110 {
    width: 100%;
    min-height: 520px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95rem;
    line-height: 1.6;
    padding: 1.5rem;
    background: var(--gray-900);
    color: var(--gray-100);
    border: 1px solid var(--gray-700);
    border-radius: var(--radius-md);
    resize: vertical;
    box-sizing: border-box;
}

.u-is-111 {
    margin-top: 1.25rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.u-is-112 {
    margin-bottom: 1rem;
}

.u-is-113 {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.u-is-114 {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.u-is-115 {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.u-is-116 {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.u-is-117 {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.u-is-118 {
    display: grid;
    gap: 1.5rem;
    margin-top: 1rem;
}

.u-is-119 {
    height: 500px;
}

.u-is-120 {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 500px;
    overflow-y: auto;
}

.u-is-121 {
    margin: 0;
    font-size: 0.95rem;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.u-is-122 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.u-is-123 {
    color: #9ca3af;
    font-size: 0.8rem;
    margin: 0;
    text-align: center;
    padding: 1rem 0;
}

.u-is-124 {
    border-bottom: 1px solid rgba(99, 102, 241, 0.25);
    background: #090d16;
    color: #ffffff;
}

.u-is-125 {
    color: #ffffff;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.u-is-126 {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
}

.u-is-127 {
    font-size: 0.5rem;
    margin-right: 0.3rem;
}

.u-is-128 {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.u-is-129 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.06);
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.u-is-130 {
    font-weight: 600;
}

.u-is-131 {
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.3);
    background: rgba(14, 165, 233, 0.08);
}

.u-is-132 {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.05);
    font-weight: 600;
}

.u-is-133 {
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 0 0.4rem 0;
    letter-spacing: -0.02em;
}

.u-is-134 {
    color: #94a3b8;
    font-size: 0.95rem;
    margin: 0;
    max-width: 800px;
}

.u-is-135 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.u-is-136 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.4);
    background: rgba(14, 165, 233, 0.1);
    font-weight: 700;
}

.u-is-137 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #a78bfa;
    border-color: rgba(167, 139, 250, 0.4);
    background: rgba(139, 92, 246, 0.1);
    font-weight: 700;
}

.u-is-138 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #4f46e5, #3b82f6);
    border: none;
}

.u-is-139 {
    background: #ef4444;
    color: #ffffff;
    border-radius: 10px;
    padding: 2px 7px;
    font-size: 0.72rem;
    margin-left: 6px;
    font-weight: 800;
    display: none;
}

.u-is-140 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.u-is-141 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.u-is-142 {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.u-is-143 {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.u-is-144 {
    font-size: 1.95rem;
    font-weight: 800;
    color: var(--gray-900);
}

.u-is-145 {
    font-size: 0.82rem;
    color: var(--gray-500);
    margin-top: 0.35rem;
}

.u-is-146 {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.u-is-147 {
    color: var(--gray-800);
}

.u-is-148 {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.u-is-149 {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.u-is-150 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.u-is-151 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--gray-900);
    margin: 0 0 0.25rem 0;
}

.u-is-152 {
    font-size: 0.85rem;
    color: var(--gray-500);
    margin: 0;
}

.u-is-153 {
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

.u-is-154 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.u-is-155 {
    position: relative;
}

.u-is-156 {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 0.85rem;
}

.u-is-157 {
    padding: 0.55rem 1rem 0.55rem 2.2rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--gray-800);
    font-size: 0.85rem;
    width: 270px;
    outline: none;
}

.u-is-158 {
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--gray-800);
    font-size: 0.85rem;
    outline: none;
    font-weight: 600;
}

.u-is-159 {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
}

.u-is-160 {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
}

.u-is-161 {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.25rem;
}

.u-is-162 {
    font-size: 0.72rem;
}

.u-is-163 {
    font-size: 0.72rem;
    color: #f59e0b;
}

.u-is-164 {
    font-size: 0.72rem;
    color: #f43f5e;
}

.u-is-165 {
    overflow-x: auto;
}

.u-is-166 {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
}

.u-is-167 {
    background: var(--gray-50);
    color: var(--gray-700);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-align: left;
}

.u-is-168 {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
    border-top-left-radius: 8px;
}

.u-is-169 {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.u-is-170 {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
    width: 210px;
}

.u-is-171 {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
    width: 170px;
}

.u-is-172 {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
    text-align: right;
    border-top-right-radius: 8px;
}

.u-is-173 {
    padding: 2.5rem;
    text-align: center;
    color: var(--gray-400);
}

.u-is-174 {
    margin-right: 0.5rem;
}

.u-is-175 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.u-is-176 {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
    width: 150px;
}

.u-is-177 {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
    width: 140px;
}

.u-is-178 {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(14, 165, 233, 0.12);
    color: #0ea5e9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.u-is-179 {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.u-is-180 {
    padding: 0.55rem 1rem 0.55rem 2.2rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--gray-800);
    font-size: 0.85rem;
    width: 260px;
    outline: none;
}

.u-is-181 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
}

.u-is-182 {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
    width: 200px;
}

.u-is-183 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.u-is-184 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--gray-900);
    margin: 0 0 0.25rem 0;
}

.u-is-185 {
    font-size: 0.82rem;
    color: var(--gray-500);
    margin: 0;
}

.u-is-186 {
    background: rgba(14, 165, 233, 0.12);
    color: #0ea5e9;
    border: 1px solid rgba(14, 165, 233, 0.35);
    font-weight: 700;
}

.u-is-187 {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
}

.u-is-188 {
    background: var(--gray-50);
    color: var(--gray-700);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-align: left;
}

.u-is-189 {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border-color);
}

.u-is-190 {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border-color);
    text-align: right;
}

.u-is-191 {
    padding: 2rem;
    text-align: center;
    color: var(--gray-400);
}

.u-is-192 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.u-is-193 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.u-is-194 {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(79, 70, 229, 0.12);
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.u-is-195 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--gray-900);
    margin: 0;
}

.u-is-196 {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.u-is-197 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    cursor: pointer;
}

.u-is-198 {
    accent-color: #4f46e5;
}

.u-is-199 {
    font-weight: 700;
    color: var(--gray-900);
    font-size: 0.9rem;
}

.u-is-200 {
    font-size: 0.78rem;
    color: var(--gray-500);
}

.u-is-201 {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    font-weight: 700;
}

.u-is-202 {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
    font-weight: 700;
}

.u-is-203 {
    background: rgba(14, 165, 233, 0.15);
    color: #0ea5e9;
    font-weight: 700;
}

.u-is-204 {
    font-weight: 700;
    width: 100%;
}

.u-is-205 {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.u-is-206 {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.u-is-207 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--gray-50);
}

.u-is-208 {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--gray-900);
}

.u-is-209 {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.u-is-210 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--gray-900);
    margin: 0 0 0.25rem 0;
}

.u-is-211 {
    color: #4f46e5;
    margin-right: 0.4rem;
}

.u-is-212 {
    background: rgba(79, 70, 229, 0.12);
    color: #4f46e5;
    font-weight: 700;
}

.u-is-213 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.u-is-214 {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gray-700);
    margin-bottom: 0.35rem;
}

.u-is-215 {
    width: 100%;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--gray-900);
    font-size: 0.85rem;
}

.u-is-216 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.u-is-217 {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.u-is-218 {
    font-weight: 700;
}

.u-is-219 {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
}

.u-is-220 {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
}

.u-is-221 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #10b981;
}

.u-is-222 {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.u-is-223 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--gray-900);
}

.u-is-224 {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.u-is-225 {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.u-is-226 {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.u-is-227 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: #4f46e5;
    border-color: rgba(79, 70, 229, 0.4);
}

.u-is-228 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
}

.u-is-229 {
    margin-bottom: 1.5rem;
}

.u-is-230 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.u-is-231 {
    background: var(--gray-50);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

.u-is-232 {
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}

.u-is-233 {
    font-size: 0.85rem;
    color: var(--gray-600);
}

.u-is-234 {
    color: #6366f1;
}

.u-is-235 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.u-is-236 {
    display: flex;
    gap: 0.75rem;
}

.u-is-237 {
    position: fixed;
    inset: 0;
    background: rgba(7, 11, 20, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1.5rem;
}

.u-is-238 {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    width: 100%;
    max-width: 540px;
    box-shadow: var(--shadow-2xl);
    overflow: hidden;
}

.u-is-239 {
    background: linear-gradient(135deg, #4f46e5, #3b82f6);
    color: #ffffff;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.u-is-240 {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.u-is-241 {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.u-is-242 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
}

.u-is-243 {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: #e0e7ff;
}

.u-is-244 {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
}

.u-is-245 {
    padding: 1.75rem 2rem;
}

.u-is-246 {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 0.35rem;
}

.u-is-247 {
    width: 100%;
}

.u-is-248 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.u-is-249 {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.u-is-250 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    background: var(--gray-50);
    padding: 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.u-is-251 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-800);
    cursor: pointer;
}

.u-is-252 {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.u-is-253 {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    width: 100%;
    max-width: 480px;
    box-shadow: var(--shadow-2xl);
    overflow: hidden;
}

.u-is-254 {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: #ffffff;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.u-is-255 {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: #ede9fe;
}

.u-is-256 {
    width: 100%;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
}

.u-is-257 {
    font-size: 0.78rem;
    color: var(--gray-500);
    margin: 0.4rem 0 0;
}

.u-is-258 {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    font-weight: 700;
    border: none;
}

.u-is-259 {
    position: fixed;
    inset: 0;
    background: rgba(7, 11, 20, 0.88);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1.5rem;
}

.u-is-260 {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-2xl);
    position: relative;
}

.u-is-261 {
    background: linear-gradient(135deg, #1e1b4b, #312e81, #1e293b);
    color: #ffffff;
    padding: 1.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.u-is-262 {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #4f46e5, #3b82f6);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
}

.u-is-263 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
}

.u-is-264 {
    background: rgba(56, 189, 248, 0.2);
    color: #38bdf8;
    font-weight: 800;
    border: 1px solid rgba(56, 189, 248, 0.4);
    font-size: 0.72rem;
}

.u-is-265 {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: #94a3b8;
    font-family: monospace;
}

.u-is-266 {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    width: 34px;
    height: 34px;
    color: #ffffff;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.u-is-267 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.u-is-268 {
    background: var(--gray-50);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.9rem 1rem;
}

.u-is-269 {
    font-size: 0.75rem;
    color: var(--gray-500);
    font-weight: 700;
    text-transform: uppercase;
}

.u-is-270 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-top: 0.2rem;
}

.u-is-271 {
    font-size: 0.72rem;
    color: var(--gray-400);
}

.u-is-272 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #f59e0b;
    margin-top: 0.2rem;
}

.u-is-273 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #10b981;
    margin-top: 0.2rem;
}

.u-is-274 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #6366f1;
    margin-top: 0.2rem;
}

.u-is-275 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-top: 0.35rem;
}

.u-is-276 {
    font-size: 0.72rem;
    color: #10b981;
    font-weight: 700;
}

.u-is-277 {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.u-is-278 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.u-is-279 {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--gray-900);
}

.u-is-280 {
    color: #38bdf8;
    margin-right: 0.4rem;
}

.u-is-281 {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    font-weight: 700;
}

.u-is-282 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.u-is-283 {
    background: var(--gray-50);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1.75rem;
    font-size: 0.83rem;
}

.u-is-284 {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 0.75rem;
}

.u-is-285 {
    color: #10b981;
    margin-right: 0.4rem;
}

.u-is-286 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.u-is-287 {
    color: var(--gray-500);
}

.u-is-288 {
    font-weight: 700;
    color: var(--gray-800);
    margin-top: 2px;
}

.u-is-289 {
    border-top: 1px solid var(--border-color);
    padding-top: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.u-is-290 {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-2xl);
}

.u-is-291 {
    background: linear-gradient(135deg, #0c4a6e, #0369a1, #0f172a);
    color: #ffffff;
    padding: 1.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.u-is-292 {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
}

.u-is-293 {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: #7dd3fc;
    font-family: monospace;
}

.u-is-294 {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    width: 34px;
    height: 34px;
    color: #ffffff;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.u-is-295 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.u-is-296 {
    background: var(--gray-50);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
}

.u-is-297 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-top: 0.2rem;
}

.u-is-298 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0284c7;
    margin-top: 0.2rem;
}

.u-is-299 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0284c7;
    margin-top: 0.35rem;
}

.u-is-300 {
    background: var(--gray-50);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1.75rem;
    font-size: 0.85rem;
}

.u-is-301 {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 0.75rem;
}

.u-is-302 {
    color: #0284c7;
    margin-right: 0.4rem;
}

.u-is-303 {
    display: inline-flex;
}

.u-is-304 {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
}

.u-is-305 {
    display: none;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
}

.u-is-306 {
    color: #0284c7;
    border-color: rgba(2, 132, 199, 0.3);
}

.u-is-307 {
    gap: 0.4rem;
}

.u-is-308 {
    background: #ffffff;
    color: #0284c7;
    border-color: #0284c7;
    font-weight: 700;
}

.u-is-309 {
    width: 0%;
}

.u-is-310 {
    background: #f1f5f9;
    color: #475569;
    border: 1.5px solid #cbd5e1;
}

.u-is-311 {
    color: #64748b;
    font-size: 0.85rem;
    padding: 0.75rem;
}

.u-is-312 {
    text-align: center;
    padding: 3rem;
    grid-column: 1 / -1;
}

.u-is-313 {
    font-size: 3rem;
    color: #0284c7;
    margin-bottom: 1rem;
}

.u-is-314 {
    color: #64748b;
    max-width: 500px;
    margin: 0 auto 1.5rem auto;
}

.u-is-315 {
    resize: vertical;
}

.u-is-316 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.u-is-317 {
    color: #64748b;
    font-size: 0.9rem;
    text-align: center;
    padding: 2rem;
}

.u-is-318 {
    background: #f1f5f9;
    color: #475569;
}

.u-is-319 {
    padding-top: 1rem;
}

.u-is-320 {
    padding: 0.4rem 0.8rem;
    font-size: 0.82rem;
    width: 220px;
}

.u-is-321 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.u-is-322 {
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: #1e293b;
}

.u-is-323 {
    color: #0284c7;
}

.u-is-324 {
    padding: 2rem;
    text-align: center;
    color: #64748b;
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
}

.u-is-325 {
    font-size: 2rem;
    color: #94a3b8;
    margin-bottom: 0.75rem;
}

.u-is-326 {
    margin: 0;
    font-size: 0.85rem;
}

.u-is-327 {
    background: #fff5f5;
    border-left: 4px solid #ef4444;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    color: #991b1b;
    font-size: 0.9rem;
    font-weight: 600;
}

.u-is-328 {
    font-size: 1.1rem;
    margin-top: 2px;
}

.u-is-329 {
    max-width: 620px;
    max-height: 88vh;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
}

.u-is-330 {
    color: #64748b;
    font-size: 1.5rem;
}

.u-is-331 {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 1.5rem 1.75rem;
    border-radius: 16px 16px 0 0;
}

.u-is-332 {
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
}

.u-is-333 {
    font-size: 0.88rem;
    color: #64748b;
    margin: 0;
}

.u-is-334 {
    padding: 1.75rem 2rem;
    background: #ffffff;
}

.u-is-335 {
    margin-top: 0;
    color: #0f172a;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.6rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.u-is-336 {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.88rem;
    color: #334155;
    font-weight: 600;
}

.u-is-337 {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border-radius: 8px;
    border: 1.5px solid #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 500;
    box-sizing: border-box;
}

.u-is-338 {
    width: 100%;
    margin-top: 0.75rem;
    margin-bottom: 2rem;
    font-weight: 700;
    padding: 0.8rem;
    font-size: 0.95rem;
    border-radius: 8px;
}

.u-is-339 {
    color: #0f172a;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.6rem;
    font-size: 1.15rem;
    font-weight: 700;
    margin-top: 1.5rem;
}

.u-is-340 {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 2rem;
}

.u-is-341 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    padding: 1rem 1.15rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.u-is-342 {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95rem;
}

.u-is-343 {
    font-size: 0.82rem;
    color: #64748b;
    margin-top: 0.15rem;
}

.u-is-344 {
    white-space: nowrap;
    font-size: 0.82rem;
    color: #334155;
    border-color: #cbd5e1;
}

.u-is-345 {
    color: #0f172a;
    margin-bottom: 0.85rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.u-is-346 {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.88rem;
    color: #334155;
    font-weight: 600;
}

.u-is-347 {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border-radius: 8px;
    border: 1.5px solid #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.u-is-348 {
    width: 100%;
    font-weight: 600;
    padding: 0.75rem;
    color: #334155;
    border-color: #cbd5e1;
}

.u-is-349 {
    max-width: 850px;
}

.u-is-350 {
    padding: 2rem;
}

.u-is-351 {
    grid-template-columns: 220px 1fr;
}

.u-is-352 {
    color: #818cf8;
}

.u-is-353 {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    width: 100%;
    max-width: 620px;
    box-shadow: var(--shadow-2xl);
    overflow: hidden;
}

.u-is-354 {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    padding: 1.35rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.u-is-355 {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.u-is-356 {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: #e0f2fe;
}

.u-is-357 {
    display: flex;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.5rem 1.5rem 0;
    gap: 0.5rem;
}

.u-is-358 {
    border-radius: 8px 8px 0 0;
    border: 1px solid #0284c7;
    border-bottom: none;
    background: #ffffff;
    color: #0284c7;
    font-weight: 700;
    padding: 0.6rem 1.25rem;
}

.u-is-359 {
    border-radius: 8px 8px 0 0;
    border: 1px solid transparent;
    background: transparent;
    color: #64748b;
    font-weight: 700;
    padding: 0.6rem 1.25rem;
}

.u-is-360 {
    padding: 1.5rem 2rem;
    max-height: 75vh;
    overflow-y: auto;
}

.u-is-361 {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}

.u-is-362 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
}

.u-is-363 {
    justify-content: flex-start;
    text-align: left;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    font-size: 0.8rem;
    line-height: 1.3;
    background: #ffffff;
}

.u-is-364 {
    color: #0ea5e9;
}

.u-is-365 {
    font-size: 0.72rem;
    color: var(--gray-500);
}

.u-is-366 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.u-is-367 {
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.u-is-368 {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-400);
    text-transform: uppercase;
}

.u-is-369 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.u-is-370 {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.35rem;
}

.u-is-371 {
    margin-bottom: 0.85rem;
}

.u-is-372 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.u-is-373 {
    font-size: 0.74rem;
    margin-top: 0.25rem;
}

.u-is-374 {
    font-size: 0.8rem;
    color: #64748b;
}

.u-is-375 {
    color: #0284c7;
    font-weight: 700;
}

.u-is-376 {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    font-weight: 700;
}

.u-is-377 {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.82rem;
    color: #0369a1;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.u-is-378 {
    font-size: 1.1rem;
}

.u-is-379 {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.u-is-380 {
    color: #dc2626;
    font-size: 0.74rem;
}

.u-is-381 {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    width: 100%;
    max-width: 580px;
    box-shadow: var(--shadow-2xl);
    overflow: hidden;
}

.u-is-382 {
    background: linear-gradient(135deg, #d97706, #b45309);
    color: #ffffff;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.u-is-383 {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: #fef3c7;
}

.u-is-384 {
    background: linear-gradient(135deg, #d97706, #b45309);
    font-weight: 700;
}

.u-is-402 {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.8);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.u-is-403 {
    background: var(--bg-card, #ffffff);
    border-radius: 1rem;
    max-width: 800px;
    width: 100%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border-color, #e2e8f0);
    overflow: hidden;
}

.u-is-404 {
    padding: 1.25rem 1.75rem;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.u-is-405 {
    color: #38bdf8;
    font-size: 1.3rem;
}

.u-is-406 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
}

.u-is-407 {
    font-size: 0.75rem;
    color: #94a3b8;
}

.u-is-408 {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.5rem;
    cursor: pointer;
}

.u-is-409 {
    padding: 1.75rem;
    overflow-y: auto;
    flex: 1;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--gray-800);
}

.u-is-410 {
    background: rgba(59, 130, 246, 0.08);
    border-left: 4px solid #2563eb;
    padding: 0.85rem 1rem;
    border-radius: 0.4rem;
    margin-bottom: 1.25rem;
    font-weight: 600;
    color: #1e3a8a;
}

.u-is-411 {
    font-size: 1rem;
    color: #0f172a;
    margin-top: 1rem;
    margin-bottom: 0.4rem;
    font-weight: 700;
}

.u-is-412 {
    padding: 1rem 1.75rem;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.u-is-413 {
    margin-top: auto;
}

.u-is-414 {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.u-is-415 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
}

.u-is-416 {
    grid-column: 1/-1;
}

.u-is-417 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.u-is-418 {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.u-is-419 {
    height: 260px;
    position: relative;
}

.u-is-420 {
    font-size: 0.8rem;
}

.u-is-421 {
    height: 150px;
}

.u-is-422 {
    background: var(--bg-card, #ffffff);
    border-radius: 1rem;
    max-width: 780px;
    width: 100%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border-color, #e2e8f0);
    overflow: hidden;
}

.u-is-423 {
    color: #10b981;
    font-size: 1.3rem;
}

.u-is-424 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
}

.u-is-425 {
    font-size: 1rem;
    color: #0f172a;
    margin-top: 0;
    font-weight: 700;
}

.u-is-426 {
    font-size: 1rem;
    color: #0f172a;
    margin-top: 1rem;
    font-weight: 700;
}

.u-is-427 {
    padding: 1rem 1.75rem;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
}

.u-is-428 {
    background: var(--bg-card, #ffffff);
    border-radius: 1rem;
    max-width: 740px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border-color, #e2e8f0);
    overflow: hidden;
}

.u-is-429 {
    color: #f59e0b;
    font-size: 1.3rem;
}

.u-is-430 {
    color: #0f172a;
    font-weight: 700;
    margin-top: 0;
}

.u-is-431 {
    color: #0f172a;
    font-weight: 700;
    margin-top: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
/* ═══════════════════════════════════════════════════════════════════════════
   DOCUMENT & CASE FACT INTELLIGENCE — Full UI System
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Top Dashboard Toolbar Button ────────────────────────────────────────── */
.btn-doc-intel {
    background: linear-gradient(135deg, #3730a3 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    font-weight: 650 !important;
    padding: 0.45rem 1rem !important;
    border-radius: var(--radius-lg, 8px) !important;
    box-shadow: 0 3px 12px rgba(79, 70, 229, 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    text-decoration: none !important;
}
.btn-doc-intel:hover {
    background: linear-gradient(135deg, #312e81 0%, #4338ca 100%) !important;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.5) !important;
    transform: translateY(-1.5px) !important;
    color: #ffffff !important;
}
.btn-doc-intel i {
    color: #fde047 !important; /* Vivid Gold icon for high contrast and prestige */
    font-size: 0.92rem !important;
}

/* ── Quick Actions Card (Dashboard) ──────────────────────────────────────── */
.domain-action-card--doc-intel {
    border: 1.5px solid rgba(99, 102, 241, 0.35) !important;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.03) 100%) !important;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
}
.domain-action-card--doc-intel::before {
    content: 'OCR & AI';
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.12);
    color: #4338ca;
    border: 1px solid rgba(99, 102, 241, 0.3);
}
[data-theme='dark'] .domain-action-card--doc-intel::before {
    background: rgba(99, 102, 241, 0.25);
    color: #c7d2fe;
    border-color: rgba(99, 102, 241, 0.5);
}
.domain-action-card--doc-intel:hover {
    border-color: #6366f1 !important;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.06) 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.25) !important;
}
.dac-icon--doc-intel {
    background: rgba(99, 102, 241, 0.12) !important;
    color: #4338ca !important;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}
[data-theme='dark'] .dac-icon--doc-intel {
    background: rgba(99, 102, 241, 0.25) !important;
    color: #a5b4fc !important;
}

/* ── Smart Fill Button in Wizard ─────────────────────────────────────────── */
#smartFillBtn {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    border: 1.5px solid rgba(99, 102, 241, 0.45);
    color: #4338ca;
    font-weight: 650;
    transition: all 0.25s ease;
}
[data-theme='dark'] #smartFillBtn {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    border-color: rgba(129, 140, 248, 0.5);
    color: #c7d2fe;
}
#smartFillBtn:hover {
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
    border-color: #4338ca;
    color: #ffffff !important;
    box-shadow: 0 4px 18px rgba(99, 102, 241, 0.4);
    transform: translateY(-1.5px);
}
#smartFillBtn i {
    color: #f59e0b; /* Amber spark icon */
}
#smartFillBtn:hover i {
    color: #fde047;
}

/* ── Modal Overlay ───────────────────────────────────────────────────────── */
.di-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    z-index: 9500;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    animation: diFadeIn 0.2s ease;
}
.di-modal-overlay.hidden { display: none; }

@keyframes diFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.di-modal-panel {
    background: #ffffff;
    border-left: 1px solid #e2e8f0;
    width: min(880px, 100vw);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: -15px 0 45px rgba(15, 23, 42, 0.12);
    animation: diSlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes diSlideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* ── Modal Header ────────────────────────────────────────────────────────── */
.di-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 1.6rem;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.di-modal-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 1.15rem;
    font-weight: 750;
    color: #0f172a;
}
.di-modal-brand i { color: #4f46e5; font-size: 1.25rem; }
.di-modal-sub {
    font-size: 0.72rem;
    color: #4338ca;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 4px;
    margin-left: 0.4rem;
}
.di-modal-close {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.di-modal-close:hover { background: #fee2e2; border-color: #ef4444; color: #dc2626; }

/* ── Modal Body ──────────────────────────────────────────────────────────── */
.di-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.6rem;
    background: #f8fafc;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* ── Step Container ──────────────────────────────────────────────────────── */
.di-step { display: flex; flex-direction: column; gap: 1.4rem; }
.di-step--error .di-step-header h3 { color: #dc2626; }

.di-step-header { margin-bottom: 0.2rem; }
.di-step-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4338ca;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    margin-bottom: 0.7rem;
}
.di-step-badge--success { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
.di-step-badge--error   { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }

.di-step-header h3 { font-size: 1.3rem; font-weight: 800; color: #0f172a; margin: 0 0 0.4rem; }
.di-step-header p  { color: #64748b; font-size: 0.9rem; margin: 0; line-height: 1.5; }

.di-mandatory-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 750;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    padding: 0.2rem 0.55rem;
    border-radius: 12px;
    margin-left: 0.5rem;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Doc Pills ───────────────────────────────────────────────────────────── */
.di-doc-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.di-doc-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #334155;
    padding: 0.3rem 0.65rem;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.di-doc-pill em { color: #94a3b8; font-style: normal; }

/* ── Upload Zone ─────────────────────────────────────────────────────────── */
.di-upload-zone {
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    padding: 2.75rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    position: relative;
}
.di-upload-zone:hover,
.di-upload-zone.di-drag-over {
    border-color: #4f46e5;
    background: #f5f3ff;
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.12);
}
.di-upload-icon { font-size: 2.75rem; color: #4f46e5; margin-bottom: 0.8rem; }
.di-upload-label { color: #0f172a; font-size: 0.98rem; font-weight: 600; margin: 0 0 0.35rem; }
.di-upload-link  { color: #4338ca; font-weight: 700; text-decoration: underline; cursor: pointer; }
.di-upload-formats { color: #64748b; font-size: 0.8rem; margin: 0; }

/* ── File List ───────────────────────────────────────────────────────────── */
.di-file-list { display: flex; flex-direction: column; gap: 0.6rem; }
.di-file-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.75rem 1.1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    animation: diFadeIn 0.15s ease;
}
.di-file-icon { font-size: 1.4rem; flex-shrink: 0; }
.di-fi--pdf { color: #ef4444; }
.di-fi--img { color: #10b981; }
.di-file-info { flex: 1; min-width: 0; }
.di-file-name { display: block; font-size: 0.88rem; color: #0f172a; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.di-file-size { font-size: 0.75rem; color: #64748b; }
.di-type-select {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 550;
    padding: 0.4rem 0.65rem;
    border-radius: 8px;
    max-width: 190px;
}
.di-file-remove {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.di-file-remove:hover { background: #fee2e2; border-color: #ef4444; color: #b91c1c; }

/* ── Upload Actions ──────────────────────────────────────────────────────── */
.di-upload-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; }

.di-upload-actions .btn-outline {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #475569 !important;
    font-weight: 600 !important;
    border-radius: 8px;
    padding: 0.6rem 1.25rem;
    transition: all 0.2s;
}
.di-upload-actions .btn-outline:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

#diExtractBtn:disabled {
    background: #e2e8f0 !important;
    color: #94a3b8 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}
#diExtractBtn:not(:disabled) {
    background: linear-gradient(135deg, #3730a3 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.35) !important;
}

/* ── Processing Track with Document Progress Bars ───────────────────────── */
.di-processing-list { display: flex; flex-direction: column; gap: 1rem; }
.di-process-row {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.1rem 1.3rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}
.di-process-row:hover {
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.06);
}

.di-proc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}
.di-proc-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.di-proc-file-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.di-proc-filename {
    font-size: 0.92rem;
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 3px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.di-proc-submeta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.di-doc-type-pill {
    font-size: 0.7rem;
    font-weight: 750;
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.02em;
}
.di-doc-size-pill {
    font-size: 0.72rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 4px;
}
.di-doc-stage-badge {
    font-size: 0.74rem;
    font-weight: 600;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.di-doc-percent-num {
    font-size: 1.25rem;
    font-weight: 800;
    color: #6366f1;
    letter-spacing: -0.02em;
    min-width: 52px;
    display: inline-block;
    transition: color 0.3s ease;
}
.di-doc-percent-num.complete {
    color: #10b981;
}

.di-doc-progressbar-track {
    height: 8px;
    background: #f1f5f9;
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
    margin-bottom: 8px;
}
.di-doc-progressbar-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #3b82f6);
    border-radius: 9999px;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.di-doc-progressbar-fill.di-progress-fill--complete {
    background: linear-gradient(90deg, #10b981, #059669) !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.di-doc-status-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: #64748b;
    margin-bottom: 10px;
}
.di-doc-status-msg i {
    color: #6366f1;
}

.di-proc-track { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.di-proc-step {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 650;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    transition: all 0.3s ease;
}
.di-proc-pending { color: #64748b; background: #f1f5f9; border: 1px solid #e2e8f0; }
.di-proc-active  { color: #4338ca; background: #eef2ff; border: 1px solid #c7d2fe; box-shadow: 0 0 8px rgba(99, 102, 241, 0.2); }
.di-proc-done    { color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; }
.di-proc-error   { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }

/* Dark Mode Overrides for Processing Cards */
[data-theme='dark'] .di-process-row {
    background: rgba(30, 27, 75, 0.45);
    border-color: rgba(99, 102, 241, 0.2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
[data-theme='dark'] .di-proc-filename {
    color: #f1f5f9;
}
[data-theme='dark'] .di-doc-size-pill {
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}
[data-theme='dark'] .di-doc-progressbar-track {
    background: rgba(255, 255, 255, 0.08);
}
[data-theme='dark'] .di-doc-status-line {
    color: #94a3b8;
}
[data-theme='dark'] .di-proc-pending {
    color: #94a3b8;
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(99, 102, 241, 0.15);
}

/* ── Section Container ───────────────────────────────────────────────────── */
.di-section {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.2rem 1.3rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.di-section--danger  { border-color: #fca5a5; background: #fff5f5; }
.di-section--warning { border-color: #fde68a; background: #fffbeb; }
.di-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.92rem;
    font-weight: 750;
    color: #0f172a;
    margin-bottom: 0.9rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid #f1f5f9;
}
.di-section-title--danger  { color: #b91c1c; border-bottom-color: #fecaca; }
.di-section-title--warning { color: #b45309; border-bottom-color: #fde68a; }

.di-conf-legend { display: flex; gap: 0.5rem; margin-left: auto; }

/* ── Contradiction Cards ─────────────────────────────────────────────────── */
.di-contradiction-card {
    border: 1px solid #fca5a5;
    border-radius: 10px;
    padding: 0.95rem 1.1rem;
    margin-bottom: 0.65rem;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.08);
}
.di-contradiction-card--warning { border-color: #fde68a; box-shadow: 0 1px 3px rgba(245, 158, 11, 0.08); }
.di-cc-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.di-severity-badge {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
}
.di-severity-critical { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.di-severity-warning  { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.di-cc-desc { font-size: 0.85rem; color: #7f1d1d; margin: 0 0 0.75rem; line-height: 1.5; }
.di-contradiction-card--warning .di-cc-desc { color: #92400e; }
.di-cc-values { display: flex; flex-direction: column; gap: 0.5rem; }
.di-cc-value {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.82rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    flex-wrap: wrap;
}
.di-cc-doc   { color: #64748b; font-style: italic; }
.di-cc-val   { color: #0f172a; font-weight: 700; }
.di-cc-conf  { color: #4338ca; font-size: 0.75rem; font-weight: 600; }
.di-cc-snippet { color: #64748b; font-size: 0.75rem; font-style: italic; width: 100%; }
.di-cc-resolve { margin-top: 0.5rem; font-size: 0.78rem; color: #b45309; font-weight: 600; }

/* ── Missing Panels ──────────────────────────────────────────────────────── */
.di-missing-group { margin-bottom: 0.8rem; }
.di-missing-group strong { font-size: 0.85rem; color: #b45309; }
.di-missing-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.di-missing-doc, .di-missing-fact {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.82rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(245, 158, 11, 0.15);
    flex-wrap: wrap;
}
.di-missing-pill, .di-missing-field {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #b45309;
    padding: 0.15rem 0.55rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.74rem;
    white-space: nowrap;
}
.di-missing-reason, .di-missing-for { color: #475569; }
.di-missing-hint { color: #64748b; font-style: italic; width: 100%; }

/* ── Facts Table ─────────────────────────────────────────────────────────── */
.di-facts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.di-facts-table thead tr {
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}
.di-facts-table th {
    padding: 0.65rem 0.85rem;
    text-align: left;
    font-size: 0.74rem;
    font-weight: 750;
    color: #475569;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.di-fact-row {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}
.di-fact-row:hover { background: #f8fafc; }
.di-fact-row--conflict { background: #fef2f2; }
.di-fact-row--rejected { opacity: 0.4; text-decoration: line-through; }
.di-facts-table td { padding: 0.65rem 0.85rem; vertical-align: middle; }

.di-fact-field { color: #334155; font-weight: 600; white-space: nowrap; }
.di-conflict-badge {
    display: inline-block;
    font-size: 0.7rem;
    margin-left: 0.4rem;
    color: #dc2626;
    cursor: help;
}
.di-fact-value { color: #0f172a; font-weight: 550; }
.di-fact-val-text { display: inline; }
.di-fact-val--edited { color: #15803d; font-style: italic; font-weight: 700; }
.di-null { color: #94a3b8; font-style: italic; }
.di-multi-src {
    display: inline-block;
    font-size: 0.68rem;
    color: #4338ca;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    padding: 0.1rem 0.45rem;
    margin-left: 0.4rem;
    cursor: pointer;
    font-weight: 600;
}

/* ── Confidence Badges ───────────────────────────────────────────────────── */
.di-conf-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.74rem;
    font-weight: 750;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    white-space: nowrap;
}
.di-conf-high   { color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; }
.di-conf-medium { color: #b45309; background: #fffbeb; border: 1px solid #fde68a; }
.di-conf-low    { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }

/* ── Fact Action Buttons ─────────────────────────────────────────────────── */
.di-fact-actions { display: flex; gap: 0.35rem; }
.di-action-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: all 0.2s;
}
.di-action-source { color: #4338ca; }
.di-action-source:hover { background: #eef2ff; border-color: #c7d2fe; }
.di-action-edit { color: #15803d; }
.di-action-edit:hover { background: #f0fdf4; border-color: #bbf7d0; }
.di-action-reject { color: #dc2626; }
.di-action-reject:hover { background: #fef2f2; border-color: #fecaca; }

/* ── Inline Edit ─────────────────────────────────────────────────────────── */
.di-edit-inline { display: flex; align-items: center; gap: 0.35rem; }
.di-edit-input {
    flex: 1;
    background: #ffffff;
    border: 1.5px solid #4f46e5;
    border-radius: 6px;
    padding: 0.35rem 0.55rem;
    font-size: 0.82rem;
    color: #0f172a;
    outline: none;
}
.di-edit-save, .di-edit-cancel {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: all 0.15s;
}
.di-edit-save   { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.di-edit-save:hover { background: #dcfce7; }
.di-edit-cancel { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.di-edit-cancel:hover { background: #fee2e2; }

/* ── Source Evidence Drawer ──────────────────────────────────────────────── */
.di-source-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 50vh;
    background: #ffffff;
    border-top: 2px solid #4f46e5;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 20px 20px 0 0;
    z-index: 9600;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: diSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.di-source-drawer.hidden { display: none; }

@keyframes diSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.di-sd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.95rem 1.3rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    flex-shrink: 0;
}
.di-sd-header h4 { margin: 0; font-size: 0.95rem; font-weight: 750; color: #0f172a; }
.di-sd-header button { background: none; border: none; color: #64748b; cursor: pointer; font-size: 1.1rem; }
.di-sd-header button:hover { color: #dc2626; }

.di-sd-body { overflow-y: auto; padding: 1.1rem 1.3rem; background: #ffffff; }
.di-sd-entry { margin-bottom: 0.65rem; }
.di-sd-meta { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.45rem; font-size: 0.78rem; }
.di-sd-doc    { color: #4338ca; font-weight: 650; }
.di-sd-page   { color: #64748b; }
.di-sd-conf   { color: #15803d; font-weight: 650; }
.di-sd-doctype { color: #b45309; font-size: 0.72rem; background: #fffbeb; border: 1px solid #fde68a; padding: 0.1rem 0.45rem; border-radius: 6px; font-weight: 600; }
.di-sd-value  { font-size: 0.85rem; color: #0f172a; margin-bottom: 0.45rem; font-weight: 600; }
.di-sd-snippet { font-size: 0.8rem; }
.di-sd-quote {
    background: #f8fafc;
    border-left: 3px solid #4f46e5;
    border-radius: 0 6px 6px 0;
    padding: 0.5rem 0.8rem;
    margin: 0.35rem 0 0;
    color: #475569;
    font-style: italic;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.di-sd-divider { border: none; border-top: 1px solid #e2e8f0; margin: 0.75rem 0; }

/* ── Timeline ────────────────────────────────────────────────────────────── */
.di-timeline { display: flex; flex-direction: column; gap: 0; padding-left: 0.5rem; }
.di-tl-row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.6rem 0;
    position: relative;
}
.di-tl-row:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 10px;
    top: 24px;
    bottom: -6px;
    width: 1.5px;
    background: #e2e8f0;
}
.di-tl-missing .di-tl-content { opacity: 0.5; }
.di-tl-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
    position: relative;
    z-index: 1;
}
.di-tl-dot--found   { background: #4f46e5; box-shadow: 0 0 0 3px #e0e7ff; }
.di-tl-dot--missing { background: #ffffff; border: 2px dashed #94a3b8; }
.di-tl-content { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.di-tl-date  { font-size: 0.82rem; font-weight: 750; color: #4338ca; white-space: nowrap; }
.di-tl-label { font-size: 0.85rem; color: #0f172a; font-weight: 550; }
.di-tl-src   { font-size: 0.74rem; color: #64748b; }

/* ── Case Story ──────────────────────────────────────────────────────────── */
.di-story-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.2rem 1.3rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.di-story-card--summary { border-color: #bbf7d0; background: #f0fdf4; }
.di-story-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 750;
    color: #4338ca;
    margin-bottom: 0.75rem;
}
.di-story-card--summary .di-story-title { color: #15803d; }
.di-story-text { color: #334155; font-size: 0.9rem; line-height: 1.7; margin: 0; }

/* ── Fill Preview ────────────────────────────────────────────────────────── */
.di-fill-preview {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.2rem 1.3rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.di-fill-title {
    font-size: 0.88rem;
    font-weight: 750;
    color: #0f172a;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.di-fill-note { font-size: 0.8rem; color: #64748b; margin: 0 0 0.9rem; line-height: 1.5; }
.di-fill-grid { display: flex; flex-direction: column; gap: 0.35rem; max-height: 240px; overflow-y: auto; }
.di-fill-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.82rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid #f1f5f9;
}
.di-fill-field { color: #475569; min-width: 160px; font-weight: 550; }
.di-fill-value { color: #0f172a; flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.di-fill-badge { font-size: 0.7rem; font-weight: 750; white-space: nowrap; }
.di-fill-auto   { color: #15803d; }
.di-fill-review { color: #b45309; }
.di-fill-manual { color: #94a3b8; }

/* ── Review Actions ──────────────────────────────────────────────────────── */
.di-review-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; padding-top: 0.5rem; }

/* ── Loading ─────────────────────────────────────────────────────────────── */
.di-loading-spinner { display: flex; justify-content: center; padding: 3rem; color: #4f46e5; }
.di-empty { color: #94a3b8; font-style: italic; font-size: 0.85rem; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE ADAPTIVE OVERRIDES (when user toggles dark theme)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme='dark'] .di-modal-overlay {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
}
[data-theme='dark'] .di-modal-panel {
    background: #0f172a;
    border-left: 1px solid rgba(99, 102, 241, 0.3);
    box-shadow: -15px 0 45px rgba(0, 0, 0, 0.5);
}
[data-theme='dark'] .di-modal-header {
    background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%);
    border-bottom: 1px solid rgba(99, 102, 241, 0.3);
}
[data-theme='dark'] .di-modal-brand { color: #ffffff; }
[data-theme='dark'] .di-modal-brand i { color: #818cf8; }
[data-theme='dark'] .di-modal-sub {
    color: #c7d2fe;
    background: rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.4);
}
[data-theme='dark'] .di-modal-close {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
}
[data-theme='dark'] .di-modal-close:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #ef4444;
}
[data-theme='dark'] .di-modal-body {
    background: #0f172a;
    scrollbar-color: rgba(99, 102, 241, 0.35) transparent;
}
[data-theme='dark'] .di-step-header h3 { color: #f8fafc; }
[data-theme='dark'] .di-step-header p { color: #94a3b8; }
[data-theme='dark'] .di-step-badge {
    color: #c7d2fe;
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.35);
}
[data-theme='dark'] .di-upload-zone {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(99, 102, 241, 0.04);
}
[data-theme='dark'] .di-upload-zone:hover,
[data-theme='dark'] .di-upload-zone.di-drag-over {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
}
[data-theme='dark'] .di-upload-label { color: #cbd5e1; }
[data-theme='dark'] .di-upload-link { color: #818cf8; }
[data-theme='dark'] .di-upload-actions .btn-outline {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: #cbd5e1 !important;
}
[data-theme='dark'] .di-upload-actions .btn-outline:hover {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #ffffff !important;
}
[data-theme='dark'] #diExtractBtn:disabled {
    background: rgba(15, 23, 42, 0.6) !important;
    color: #64748b !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
}
[data-theme='dark'] .di-file-row {
    background: rgba(30, 27, 75, 0.6);
    border-color: rgba(99, 102, 241, 0.15);
}
[data-theme='dark'] .di-file-name { color: #e2e8f0; }
[data-theme='dark'] .di-type-select {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(99, 102, 241, 0.25);
    color: #cbd5e1;
}
[data-theme='dark'] .di-section {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(99, 102, 241, 0.15);
}
[data-theme='dark'] .di-section-title {
    color: #a5b4fc;
    border-bottom-color: rgba(99, 102, 241, 0.12);
}
[data-theme='dark'] .di-facts-table thead tr {
    background: rgba(30, 27, 75, 0.8);
    border-bottom-color: rgba(99, 102, 241, 0.2);
}
[data-theme='dark'] .di-facts-table th { color: #64748b; }
[data-theme='dark'] .di-fact-field { color: #94a3b8; }
[data-theme='dark'] .di-fact-value { color: #e2e8f0; }
[data-theme='dark'] .di-fact-row:hover { background: rgba(99, 102, 241, 0.04); }
[data-theme='dark'] .di-action-btn {
    background: none;
    border-color: transparent;
}
[data-theme='dark'] .di-source-drawer {
    background: #0f172a;
    border-top-color: rgba(99, 102, 241, 0.4);
}
[data-theme='dark'] .di-sd-header {
    background: rgba(30, 27, 75, 0.8);
    border-bottom-color: rgba(99, 102, 241, 0.15);
}
[data-theme='dark'] .di-sd-header h4 { color: #a5b4fc; }
[data-theme='dark'] .di-sd-body { background: #0f172a; }
[data-theme='dark'] .di-story-card {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(99, 102, 241, 0.2);
}
[data-theme='dark'] .di-story-text { color: #cbd5e1; }
[data-theme='dark'] .di-fill-preview {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(99, 102, 241, 0.15);
}
[data-theme='dark'] .di-fill-value { color: #e2e8f0; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .di-modal-panel { width: 100vw; }
    .di-upload-zone { padding: 1.5rem 1rem !important; }
    .di-upload-icon { font-size: 2rem !important; margin-bottom: 0.5rem !important; }
    .di-type-select { max-width: 120px; }
    .di-fact-field { font-size: 0.72rem; }
    .di-conf-legend { display: none; }
    .di-fill-field { min-width: 100px; }
    .di-review-actions { flex-direction: column; }
    .di-review-actions .btn { width: 100%; }
}

/* ── btn-success state ───────────────────────────────────────────────────── */
.btn.btn-success {
    background: rgba(52, 211, 153, 0.15);
    border-color: rgba(52, 211, 153, 0.4);
    color: #34d399;
    cursor: default;
}

/* ── Status Banners & Conflict Resolution ────────────────────────────────── */
.di-status-banner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1.1rem;
    border-radius: 8px;
    font-size: 0.88rem;
    margin: 0.75rem 0 1rem 0;
    font-weight: 600;
}
.di-status-banner--warning {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #d97706;
}
[data-theme='dark'] .di-status-banner--warning {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}
.di-status-banner--success {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #059669;
}
[data-theme='dark'] .di-status-banner--success {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.4);
    color: #34d399;
}
.di-step-badge--warning {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
[data-theme='dark'] .di-step-badge--warning {
    color: #fbbf24;
}
.di-step-badge--info {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.di-contradiction-card--resolved {
    border-color: rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.04);
}
.di-severity-resolved {
    background: #10b981;
    color: #ffffff;
}
.di-resolved-tag {
    font-size: 0.76rem;
    color: #10b981;
    margin-left: auto;
    font-weight: 500;
}
.di-btn-accept-val {
    margin-left: auto;
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    border-color: #6366f1;
    color: #6366f1;
    cursor: pointer;
    background: transparent;
    transition: all 0.15s ease;
}
.di-btn-accept-val:hover {
    background: #6366f1;
    color: #ffffff;
}
.di-cc-value--selected {
    border: 1px solid #10b981;
    background: rgba(16, 185, 129, 0.08);
}
.di-cc-value--selected .di-btn-accept-val {
    border-color: #10b981;
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
}

.di-fill-row--conflict {
    background: rgba(239, 68, 68, 0.05);
    border-left: 3px solid #ef4444;
}
.di-fill-value--conflict {
    color: #dc2626 !important;
    font-weight: 600;
}
[data-theme='dark'] .di-fill-value--conflict {
    color: #f87171 !important;
}
.di-fill-row--missing {
    opacity: 0.75;
}
.di-fill-value--missing {
    color: #94a3b8 !important;
    font-style: italic;
}
.di-conflict-badge--resolved {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
[data-theme='dark'] .di-conflict-badge--resolved {
    color: #34d399;
}

.di-btn-auto-analyze {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}
.di-btn-auto-analyze:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.55) !important;
}

/* ============================================================================
   22. MOBILE VIEW & TOUCH RESPONSIVE ENHANCEMENTS (PRICING, DRAFTING, NAVBAR)
   ============================================================================ */

/* Quota Text Responsive Helpers */
.quota-compact {
    display: none;
}
.quota-full {
    display: inline;
}

/* Base Free Tier Banner */
.free-tier-banner {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: var(--radius-xl, 14px);
    padding: 1.15rem 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    transition: all 0.2s ease;
}
[data-theme='light'] .free-tier-banner {
    background: #f8fafc;
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Draft Form Actions */
.draft-form-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.draft-lang-select-group {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.draft-lang-select-group label {
    font-size: 0.85rem;
    color: var(--gray-300);
    margin: 0;
    white-space: nowrap;
    font-weight: 600;
}
[data-theme='light'] .draft-lang-select-group label {
    color: var(--gray-700);
}
.draft-lang-select-group select {
    width: auto;
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    background: var(--slate-800, #1e293b);
    color: #ffffff;
    border: 1px solid var(--slate-700, #334155);
    border-radius: 8px;
    cursor: pointer;
}
[data-theme='light'] .draft-lang-select-group select {
    background: #ffffff;
    color: #0f172a;
    border-color: #cbd5e1;
}

/* Draft Output Toolbar */
.draft-output-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
    border-radius: 12px 12px 0 0;
    flex-wrap: wrap;
}
[data-theme='dark'] .draft-output-toolbar {
    background: rgba(15, 23, 42, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.draft-export-btns {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.draft-lang-picker-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(99, 102, 241, 0.35);
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
}
[data-theme='light'] .draft-lang-picker-wrap {
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.draft-lang-picker-wrap label {
    font-size: 0.8rem;
    color: #a5b4fc;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
}
[data-theme='light'] .draft-lang-picker-wrap label {
    color: #4f46e5;
}
.draft-lang-picker-wrap select {
    background: transparent;
    color: #ffffff;
    border: none;
    font-size: 0.82rem;
    font-weight: 600;
    outline: none;
    cursor: pointer;
}
[data-theme='light'] .draft-lang-picker-wrap select {
    color: #0f172a;
}
.draft-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Tablet & Mobile Media Queries */
@media (max-width: 900px) {
    .pricing-configurator-grid {
        grid-template-columns: 1fr !important;
        gap: 1.75rem !important;
        margin-top: 1.5rem !important;
    }
}

@media (max-width: 768px) {
    /* Responsive Quota Text switch */
    .quota-full {
        display: none !important;
    }
    .quota-compact {
        display: inline !important;
    }

    /* Top Nav on Mobile */
    .top-nav {
        padding: 0.5rem 0.75rem !important;
        min-height: 50px !important;
        gap: 0.4rem !important;
    }
    .nav-brand {
        font-size: 1rem !important;
    }
    .nav-brand i {
        font-size: 1.25rem !important;
    }
    .nav-user {
        gap: 0.35rem !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
    }
    .user-quota-pill {
        padding: 0.25rem 0.55rem !important;
        font-size: 0.72rem !important;
        border-radius: 999px !important;
    }
    .user-email-text,
    .user-menu span#userEmail {
        display: none !important;
    }
    .admin-portal-btn span {
        display: none !important;
    }
    .admin-portal-btn {
        padding: 0.35rem 0.55rem !important;
    }
    .user-menu {
        gap: 0.25rem !important;
    }
    .user-menu .btn {
        padding: 0.35rem 0.5rem !important;
        font-size: 0.72rem !important;
    }

    /* Free Tier Banner */
    .free-tier-banner {
        padding: 1rem !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.85rem !important;
        margin-bottom: 1.5rem !important;
    }
    .free-tier-banner > div:first-child {
        width: 100% !important;
    }
    .free-tier-banner .badge {
        align-self: flex-start !important;
        font-size: 0.75rem !important;
    }

    /* Billing Cycle Tabs (4-grid layout) */
    .billing-cycle-selector {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.45rem !important;
        padding: 0.4rem !important;
    }
    .billing-cycle-tab {
        padding: 0.65rem 0.35rem !important;
        font-size: 0.8rem !important;
        min-height: 48px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .billing-cycle-tab span {
        display: block !important;
        font-size: 0.72rem !important;
        margin-top: 2px !important;
        opacity: 0.9 !important;
    }

    /* Plan Metrics on mobile */
    .plan-metrics-row {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.35rem !important;
        padding: 0.65rem 0.25rem !important;
    }
    .plan-metric-col .metric-label {
        font-size: 0.65rem !important;
    }
    .plan-metric-col .metric-value {
        font-size: 0.85rem !important;
    }

    /* Report Top-up card */
    .report-topup-card {
        padding: 0.85rem !important;
        margin-top: 1rem !important;
    }
    .report-topup-card button {
        min-height: 44px !important;
        font-size: 0.82rem !important;
    }

    /* Draft Form Actions */
    .draft-form-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }
    .draft-lang-select-group {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }
    .draft-lang-select-group select {
        flex: 1 !important;
        max-width: 60% !important;
        min-height: 42px !important;
    }
    .draft-form-actions .btn-primary {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.85rem 1rem !important;
        min-height: 48px !important;
        font-size: 0.95rem !important;
    }

    /* Draft Output Toolbar */
    .draft-output-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.65rem !important;
        padding: 0.85rem 0.75rem !important;
    }
    .draft-export-btns {
        width: 100% !important;
        display: flex !important;
        gap: 0.4rem !important;
    }
    .draft-export-btns .btn {
        flex: 1 1 0 !important;
        min-height: 42px !important;
        justify-content: center !important;
        font-size: 0.8rem !important;
        padding: 0.5rem 0.25rem !important;
    }
    .draft-lang-picker-wrap {
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.55rem 0.75rem !important;
        min-height: 44px !important;
    }
    .draft-lang-picker-wrap select {
        flex: 1 !important;
        text-align: right !important;
        direction: rtl;
    }
    .draft-lang-picker-wrap select option {
        direction: ltr;
    }
    .draft-toolbar-actions {
        width: 100% !important;
    }
    .draft-toolbar-actions .btn {
        width: 100% !important;
        min-height: 44px !important;
        justify-content: center !important;
    }
    .draft-output-textarea {
        min-height: 380px !important;
        font-size: 0.9rem !important;
        padding: 0.85rem !important;
        line-height: 1.6 !important;
    }

    /* Shared Report Mobile Grids */
    .report-executive-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
        margin-bottom: 1.75rem !important;
    }
    .report-strengths-risks-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
        margin-bottom: 1.75rem !important;
    }
    .report-parties-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    /* Admin Litigators Table & Toolbar on Mobile */
    .u-is-154 {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }
    .u-is-154 .search-input-wrapper {
        width: 100% !important;
    }
    .u-is-154 input,
    .u-is-154 select,
    .u-is-154 button {
        width: 100% !important;
        min-height: 42px !important;
        justify-content: center !important;
    }
    .admin-filter-pills-strip {
        overflow-x: auto !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 0.5rem !important;
        scrollbar-width: thin;
    }
    .admin-filter-pill {
        flex-shrink: 0 !important;
    }

    /* Modals Responsive */
    .modal-container,
    .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 0.75rem auto !important;
        padding: 1.25rem 0.85rem !important;
    }
}

/* Extra small devices (iPhone SE, Galaxy fold, width <= 400px) */
@media (max-width: 400px) {
    .plan-metrics-row {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
        text-align: center !important;
    }
    .billing-cycle-selector {
        grid-template-columns: 1fr !important;
    }
    .draft-export-btns .btn {
        font-size: 0.74rem !important;
        padding: 0.4rem 0.2rem !important;
    }
}

/* ============================================================================
   23. UPLOAD-FIRST INTAKE & HOME PAGE MOBILE REFINEMENTS
   ============================================================================ */

/* Wizard Intake Routes (OCR, Vidhi Voice, and Manual Entry) */
.wizard-intake-mode-card {
    display: grid;
    gap: 1.1rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(79, 70, 229, 0.05));
    border: 1.5px solid rgba(99, 102, 241, 0.35);
    border-radius: var(--radius-xl, 14px);
    margin-bottom: 2rem;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.08);
}
[data-theme='light'] .wizard-intake-mode-card {
    background: linear-gradient(135deg, #eef2ff, #f8fafc);
    border-color: #c7d2fe;
}
.wim-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.wim-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.2);
    color: #6366f1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}
[data-theme='light'] .wim-icon {
    background: #e0e7ff;
    color: #4f46e5;
}
.wim-text h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
}
.wim-text p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.45;
}
.wim-intake-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.wim-intake-option { display: flex; align-items: flex-start; gap: .75rem; min-width: 0; min-height: 98px; padding: .9rem; border: 1px solid rgba(100, 116, 139, .24); border-radius: 12px; color: var(--text-primary); background: var(--surface, rgba(255,255,255,.68)); text-align: left; font: inherit; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.wim-intake-option:hover { transform: translateY(-2px); border-color: #818cf8; box-shadow: 0 8px 22px rgba(79, 70, 229, .12); }
.wim-intake-option:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.wim-option-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 11px; font-size: 16px; }
.wim-option-icon--ocr { color: #4f46e5; background: rgba(99, 102, 241, .13); }
.wim-option-icon--voice { color: #047857; background: rgba(16, 185, 129, .14); }
.wim-option-icon--manual { color: #2563eb; background: rgba(59, 130, 246, .13); }
.wim-option-copy { display: grid; gap: .3rem; min-width: 0; }
.wim-option-copy strong { font-size: .85rem; font-weight: 800; }
.wim-option-copy small { color: var(--text-secondary); font-size: .74rem; line-height: 1.45; }

@media (max-width: 768px) {
    /* Wizard Intake Mode Card on Mobile */
    .wizard-intake-mode-card {
        display: grid !important;
        padding: 1rem !important;
        gap: .9rem !important;
        margin-bottom: 1.5rem !important;
    }
    .wim-content {
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    .wim-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.15rem !important;
    }
    .wim-text h4 {
        font-size: 0.95rem !important;
    }
    .wim-text p {
        font-size: 0.8rem !important;
    }
    .wim-intake-options { grid-template-columns: 1fr; }
    .wim-intake-option { min-height: 0; }

    /* Home Page Hero on Mobile */
    .hero-section {
        padding: 2rem 1rem 2.25rem 1rem !important;
        gap: 1.5rem !important;
        text-align: center !important;
    }
    .hero-content {
        max-width: 100% !important;
    }
    .hero-content h1 {
        font-size: clamp(1.75rem, 6.2vw, 2.3rem) !important;
        line-height: 1.22 !important;
        margin-bottom: 0.75rem !important;
    }
    .hero-content p {
        font-size: 0.92rem !important;
        line-height: 1.55 !important;
        margin-bottom: 1.35rem !important;
    }
    .hero-actions {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.65rem !important;
    }
    .hero-actions .btn {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 0.95rem !important;
        justify-content: center !important;
        padding: 0.75rem 1rem !important;
    }
    .hero-badges-row {
        justify-content: center !important;
        gap: 0.45rem !important;
        margin-top: 1.25rem !important;
        width: 100% !important;
    }
    .hero-mini-badge {
        font-size: 0.72rem !important;
        padding: 0.25rem 0.55rem !important;
    }
    .hero-image {
        margin-top: 1rem !important;
        max-width: 100% !important;
    }
    .hero-image img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: var(--radius-lg, 12px) !important;
    }

    /* Institutional Engine Toolbar on Mobile */
    .institutional-engine-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.85rem !important;
        padding: 0.85rem !important;
    }
    .engine-status-left {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }
    .engine-status-actions {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    .engine-status-actions .btn {
        width: 100% !important;
        justify-content: center !important;
        min-height: 44px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* MEMBERSHIP & SUBSCRIPTION VALIDITY STYLES (START & END DATES)             */
/* ══════════════════════════════════════════════════════════════════════════ */

/* Top Navigation Validity Pill */
.subscription-validity-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.28);
    color: var(--primary-300, #a5b4fc);
    cursor: default;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.subscription-validity-pill i {
    color: #38bdf8;
    font-size: 0.85rem;
}

.subscription-validity-pill:hover {
    background: rgba(99, 102, 241, 0.16);
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.25);
    transform: translateY(-1px);
}

.validity-pill-text-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.validity-pill-label {
    opacity: 0.75;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.validity-pill-dates {
    font-weight: 700;
    color: #f8fafc;
}

/* Executive Membership & Subscription Validity Banner on Dashboard */
.membership-validity-banner {
    background: linear-gradient(135deg, rgba(14, 20, 36, 0.96) 0%, rgba(22, 32, 58, 0.92) 50%, rgba(15, 23, 42, 0.98) 100%);
    border: 1px solid rgba(99, 102, 241, 0.24);
    border-radius: var(--radius-xl, 16px);
    padding: 1.25rem 1.6rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.membership-validity-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #38bdf8, #10b981, #f59e0b);
}

.membership-banner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.15rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.membership-banner-title {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.membership-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(168, 85, 247, 0.2));
    border: 1px solid rgba(99, 102, 241, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #818cf8;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.2);
}

.membership-badge-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.membership-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
}

.membership-live-dot.pulse {
    animation: livePulse 2s infinite;
}

@keyframes livePulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.membership-plan-heading {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.2px;
}

.membership-status-badge {
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.membership-status-badge.status-active {
    background: rgba(16, 185, 129, 0.16);
    border: 1px solid rgba(16, 185, 129, 0.45);
    color: #34d399;
}

.membership-status-badge.status-pending {
    background: rgba(245, 158, 11, 0.16);
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: #fbbf24;
}

.membership-status-badge.status-expired {
    background: rgba(239, 68, 68, 0.16);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #f87171;
}

.membership-subtext {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0.25rem 0 0 0;
}

.membership-banner-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.membership-quota-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.82rem;
    font-weight: 600;
    color: #cbd5e1;
}

.membership-quota-badge i {
    color: #818cf8;
}

.membership-upgrade-btn {
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    background: rgba(245, 158, 11, 0.1) !important;
    color: #fbbf24 !important;
    transition: all 0.2s ease !important;
    font-weight: 600 !important;
}

.membership-upgrade-btn:hover {
    background: rgba(245, 158, 11, 0.22) !important;
    border-color: rgba(245, 158, 11, 0.7) !important;
    color: #fde68a !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

.membership-validity-metrics {
    display: grid;
    grid-template-columns: 1fr auto 1fr 1fr;
    align-items: center;
    gap: 1rem;
}

.validity-metric-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    transition: all 0.25s ease;
}

.validity-metric-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(99, 102, 241, 0.35);
    transform: translateY(-1px);
}

.validity-metric-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.validity-metric-icon.start-icon {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.32);
    color: #818cf8;
}

.validity-metric-icon.end-icon {
    background: rgba(244, 63, 94, 0.15);
    border: 1px solid rgba(244, 63, 94, 0.32);
    color: #fb7185;
}

.validity-metric-icon.duration-icon {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.32);
    color: #34d399;
}

.validity-metric-icon i,
.membership-icon-box i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.validity-metric-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.validity-metric-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
    color: #94a3b8;
}

.validity-metric-value {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    margin-top: 0.15rem;
    white-space: nowrap;
}

.validity-metric-value.text-emerald {
    color: #34d399;
}

.validity-metric-hint {
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.validity-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 0.9rem;
    padding: 0 0.2rem;
}

/* Light Mode Overrides for Validity Banner */
[data-theme='light'] .membership-validity-banner {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-color: rgba(99, 102, 241, 0.2);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
}

[data-theme='light'] .membership-plan-heading {
    color: #1e293b;
}

[data-theme='light'] .membership-subtext {
    color: #64748b;
}

[data-theme='light'] .validity-metric-card {
    background: #f1f5f9;
    border-color: #e2e8f0;
}

[data-theme='light'] .validity-metric-value {
    color: #0f172a;
}

[data-theme='light'] .validity-metric-label {
    color: #64748b;
}

[data-theme='light'] .membership-quota-badge {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #334155;
}

[data-theme='light'] .subscription-validity-pill {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4338ca;
}

[data-theme='light'] .validity-pill-dates {
    color: #1e1b4b;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .membership-validity-metrics {
        grid-template-columns: 1fr 1fr;
    }
    .validity-connector {
        display: none;
    }
}

@media (max-width: 640px) {
    .membership-validity-banner {
        padding: 1rem;
    }
    .membership-validity-metrics {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .validity-pill-label {
        display: none;
    }
}

/* ==========================================================================
   LOW QUOTA WARNING ALERT & PULSE STYLES (2-3 REPORTS REMAINING)
   ========================================================================== */

.low-quota-warning-alert {
    margin-top: 1.25rem;
    padding: 1rem 1.35rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.14) 0%, rgba(217, 119, 6, 0.08) 100%);
    border: 1px solid rgba(245, 158, 11, 0.45);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.12);
    animation: alertSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(10px);
}

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

.low-quota-alert-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.low-quota-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f59e0b;
    font-size: 1.35rem;
    flex-shrink: 0;
    animation: iconPulseWarning 2s infinite ease-in-out;
}

@keyframes iconPulseWarning {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
}

.low-quota-alert-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #fbbf24;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}

.warning-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 8px #f59e0b;
    animation: pulseWarning 1.2s infinite ease-in-out;
}

@keyframes pulseWarning {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

.low-quota-alert-text p {
    margin: 0;
    font-size: 0.92rem;
    color: #cbd5e1;
    line-height: 1.4;
}

.remaining-count-highlight {
    color: #f59e0b;
    font-size: 1.15rem;
    font-weight: 800;
    padding: 0.1rem 0.35rem;
    background: rgba(245, 158, 11, 0.15);
    border-radius: 6px;
    display: inline-block;
}

.low-quota-alert-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

/* User Quota Pill Warning State */
.user-quota-pill.quota-pill-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.5) !important;
    color: #f59e0b !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.25) !important;
    animation: pillWarningPulse 2s infinite ease-in-out !important;
}

@keyframes pillWarningPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(245, 158, 11, 0.2); }
    50% { box-shadow: 0 0 16px rgba(245, 158, 11, 0.5); }
}

/* Light Theme support for low quota warning */
[data-theme='light'] .low-quota-warning-alert {
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.95) 0%, rgba(253, 230, 138, 0.85) 100%);
    border-color: rgba(217, 119, 6, 0.45);
    box-shadow: 0 4px 20px rgba(217, 119, 6, 0.12);
}

[data-theme='light'] .low-quota-alert-heading {
    color: #b45309;
}

[data-theme='light'] .low-quota-alert-text p {
    color: #78350f;
}

[data-theme='light'] .remaining-count-highlight {
    color: #9a3412;
    background: rgba(245, 158, 11, 0.25);
}

@media (max-width: 768px) {
    .low-quota-warning-alert {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
    }
    .low-quota-alert-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN DASHBOARD ENTERPRISE SUITE: VALIDITY, PAYMENTS, LOGS & CATALOG
   ═══════════════════════════════════════════════════════════════════ */

.validity-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 9999px;
    line-height: 1;
    letter-spacing: 0.2px;
}

.validity-badge-active {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.validity-badge-warning {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.35);
    animation: validityPulse 2s infinite ease-in-out;
}

.validity-badge-expired {
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
    font-weight: 800;
}

.validity-badge-lifetime {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(99, 102, 241, 0.18));
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.35);
    font-weight: 800;
}

@keyframes validityPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.admin-live-pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 rgba(16, 185, 129, 0.7);
    animation: liveDotPulse 1.8s infinite;
}

@keyframes liveDotPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.btn-xs {
    padding: 2px 6px;
    font-size: 0.72rem;
    line-height: 1.2;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* SYSTEM DEPLOYMENT & RELEASE WARNING ALERT BANNER                            */
/* ═══════════════════════════════════════════════════════════════════════════ */
.system-deployment-alert-banner {
    position: relative;
    width: 100%;
    z-index: 1000;
    margin: 0;
    padding: 10px 18px;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.14) 0%, rgba(217, 119, 6, 0.08) 50%, rgba(245, 158, 11, 0.14) 100%);
    border-bottom: 2px solid rgba(245, 158, 11, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
    animation: alertSlideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: all 0.3s ease;
}

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

.system-deployment-alert-banner.alert-closing {
    animation: alertSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.deployment-alert-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.deployment-alert-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(245, 158, 11, 0.22);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.45);
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    flex-shrink: 0;
}

.deployment-alert-badge i {
    font-size: 0.82rem;
    animation: warningIconPulse 2s infinite ease-in-out;
}

@keyframes warningIconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.18);
        filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.8));
    }
}

.deployment-alert-content {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.deployment-alert-headline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--text-primary);
    font-size: 0.88rem;
}

.deployment-alert-headline strong {
    font-weight: 700;
    color: var(--text-primary);
}

.deployment-version-tag {
    display: inline-flex;
    align-items: center;
    background: rgba(99, 102, 241, 0.16);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.35);
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.deployment-schedule-chip,
.deployment-duration-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.06);
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid rgba(150, 150, 150, 0.15);
}

[data-theme='dark'] .deployment-schedule-chip,
[data-theme='dark'] .deployment-duration-chip {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.deployment-schedule-chip i {
    color: #f59e0b;
}

.deployment-duration-chip i {
    color: #ec4899;
}

.deployment-alert-message {
    font-size: 0.81rem;
    line-height: 1.4;
    color: var(--text-secondary);
    margin: 0;
}

.deployment-alert-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.deployment-alert-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.deployment-alert-btn-acknowledge {
    background: #f59e0b;
    color: #111827;
    border-color: #d97706;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
}

.deployment-alert-btn-acknowledge:hover {
    background: #d97706;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.4);
    transform: translateY(-1px);
}

.deployment-alert-btn-close {
    background: transparent;
    color: var(--text-secondary);
    border: none;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.deployment-alert-btn-close:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
}

[data-theme='dark'] .deployment-alert-btn-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Alert Type Variations */
.system-deployment-alert-banner.alert-type-version_release {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.14) 0%, rgba(139, 92, 246, 0.08) 50%, rgba(99, 102, 241, 0.14) 100%);
    border-bottom-color: rgba(99, 102, 241, 0.45);
}
.system-deployment-alert-banner.alert-type-version_release .deployment-alert-badge {
    background: rgba(99, 102, 241, 0.22);
    color: #818cf8;
    border-color: rgba(99, 102, 241, 0.45);
}
.system-deployment-alert-banner.alert-type-version_release .deployment-alert-btn-acknowledge {
    background: #6366f1;
    color: #ffffff;
    border-color: #4f46e5;
}
.system-deployment-alert-banner.alert-type-version_release .deployment-alert-btn-acknowledge:hover {
    background: #4f46e5;
}

.system-deployment-alert-banner.alert-type-maintenance {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.14) 0%, rgba(6, 182, 212, 0.08) 50%, rgba(14, 165, 233, 0.14) 100%);
    border-bottom-color: rgba(14, 165, 233, 0.45);
}
.system-deployment-alert-banner.alert-type-maintenance .deployment-alert-badge {
    background: rgba(14, 165, 233, 0.22);
    color: #38bdf8;
    border-color: rgba(14, 165, 233, 0.45);
}
.system-deployment-alert-banner.alert-type-maintenance .deployment-alert-btn-acknowledge {
    background: #0ea5e9;
    color: #ffffff;
    border-color: #0284c7;
}

.system-deployment-alert-banner.alert-type-critical_warning {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.16) 0%, rgba(220, 38, 38, 0.1) 50%, rgba(239, 68, 68, 0.16) 100%);
    border-bottom-color: rgba(239, 68, 68, 0.5);
}
.system-deployment-alert-banner.alert-type-critical_warning .deployment-alert-badge {
    background: rgba(239, 68, 68, 0.22);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.5);
}
.system-deployment-alert-banner.alert-type-critical_warning .deployment-alert-btn-acknowledge {
    background: #ef4444;
    color: #ffffff;
    border-color: #dc2626;
}

@media (max-width: 768px) {
    .system-deployment-alert-banner {
        padding: 10px 14px;
    }
    .deployment-alert-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .deployment-alert-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   FINALIZED DRAFT & EVIDENTIARY LOCK STYLES
   ═══════════════════════════════════════════════════════════════════ */
.draft-finalized-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.12) 100%);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-left: 4px solid #10b981;
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
    animation: fadeInDraftSeal 0.3s ease-out;
}

@keyframes fadeInDraftSeal {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.finalized-seal-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
    flex-shrink: 0;
}

.btn-finalize-draft {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
    cursor: pointer;
}
.btn-finalize-draft:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45) !important;
}

.badge-draft-locked {
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.12);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Locked Textarea Appearance */
.draft-preview-textarea.draft-finalized-locked,
.draft-textarea.draft-finalized-locked,
.draft-output-textarea.draft-finalized-locked {
    background-color: #f8fafc !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
    cursor: not-allowed !important;
    outline: none !important;
    position: relative;
    user-select: text;
}

[data-theme="dark"] .draft-preview-textarea.draft-finalized-locked,
[data-theme="dark"] .draft-textarea.draft-finalized-locked,
[data-theme="dark"] .draft-output-textarea.draft-finalized-locked {
    background-color: #0f172a !important;
    color: #94a3b8 !important;
    border-color: #1e293b !important;
}

[data-theme="dark"] .draft-finalized-banner {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.18) 100%);
    border-color: rgba(16, 185, 129, 0.45);
}

.draft-control-disabled {
    opacity: 0.55 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* TRIAL BATTLECARD & MISSING PREREQUISITES STYLING (AndhaKaanun Synergy)      */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Tab Counter Badge */
.prereq-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
}

/* Overview Alert Banner */
.missing-prereq-alert {
    margin-bottom: 1.5rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(245, 158, 11, 0.08) 100%);
    border: 1px solid rgba(239, 68, 68, 0.28);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.06);
    overflow: hidden;
}

.prereq-alert-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.1rem 1.4rem;
    flex-wrap: wrap;
}

.prereq-alert-icon {
    font-size: 1.8rem;
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.12);
    flex-shrink: 0;
}

.prereq-alert-body {
    flex: 1;
    min-width: 250px;
}

.prereq-alert-body h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #b91c1c;
}

[data-theme="dark"] .prereq-alert-body h4 {
    color: #fca5a5;
}

.prereq-alert-body p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.45;
}

.prereq-alert-action {
    flex-shrink: 0;
}

/* Missing Prerequisites Wrapper */
.missing-prerequisites-wrapper {
    padding: 0.5rem 0 2rem 0;
}

.prereq-tab-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gray-200);
}

.prereq-tab-header h2 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--gray-900);
    margin: 0 0 0.35rem 0;
}

.prereq-tab-header .subtitle {
    color: var(--gray-500);
    font-size: 0.9rem;
    margin: 0;
}

.prereq-tab-counter {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.prereq-tab-counter .count-val {
    display: block;
    font-size: 1.8rem;
    font-weight: 900;
    color: #ef4444;
    line-height: 1;
}

.prereq-tab-counter .count-lbl {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gray-500);
}

.prereq-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.prereq-card {
    background: var(--glass-bg);
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
    border-left: 5px solid #f59e0b;
}

.prereq-card--critical {
    border-left: 5px solid #ef4444;
}

.prereq-card--resolved {
    opacity: 0.6;
    background: rgba(16, 185, 129, 0.04) !important;
    border-left-color: #10b981 !important;
}

.prereq-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}

.prereq-header-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.prereq-number {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--gray-400);
}

.prereq-statute {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-600);
    background: rgba(99, 102, 241, 0.1);
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
}

.badge-critical {
    background: rgba(239, 68, 68, 0.14);
    color: #dc2626;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    border: 1px solid rgba(239, 68, 68, 0.25);
    text-transform: uppercase;
}

.badge-high {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    border: 1px solid rgba(245, 158, 11, 0.25);
    text-transform: uppercase;
}

.prereq-point-pill {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 750;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.prereq-question {
    font-size: 1.05rem;
    font-weight: 750;
    color: var(--gray-900);
    line-height: 1.4;
    margin-bottom: 0.85rem;
}

.prereq-details {
    background: var(--gray-100);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.prereq-rationale, .prereq-action-hint {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.prereq-rationale strong {
    color: var(--gray-800);
}

.prereq-action-hint strong {
    color: var(--primary-600);
}

.prereq-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--gray-200);
    padding-top: 0.85rem;
}

.prereq-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700);
    cursor: pointer;
}

.prereq-checkbox-label input[type="checkbox"] {
    width: 17px;
    height: 17px;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* TRIAL BATTLECARD (DUAL COLUMN COURT MATRIX)                                */
/* ═══════════════════════════════════════════════════════════════════════════ */

.trial-battlecard-wrapper {
    padding: 0.5rem 0 2.5rem 0;
}

.battlecard-top-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.battlecard-strip-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow-sm);
}

.strip-interim {
    border-left: 5px solid #10b981;
}

.strip-dynamics {
    border-left: 5px solid #6366f1;
}

.strip-icon {
    font-size: 1.8rem;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.strip-interim .strip-icon {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.strip-dynamics .strip-icon {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

.strip-label {
    font-size: 0.78rem;
    font-weight: 750;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 0.2rem;
}

.strip-value {
    font-size: 1.55rem;
    font-weight: 900;
    color: #059669;
    line-height: 1.2;
}

.strip-hint {
    font-size: 0.78rem;
    color: var(--gray-500);
}

.strip-subtext {
    font-size: 0.85rem;
    color: var(--gray-700);
    line-height: 1.4;
    font-weight: 500;
}

/* Dual Column Grid */
.battlecard-duel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
}

@media (max-width: 992px) {
    .battlecard-duel-grid {
        grid-template-columns: 1fr;
    }
}

.battlecard-column {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.battlecard-col-offense {
    border-top: 4px solid #3b82f6;
}

.battlecard-col-defense {
    border-top: 4px solid #f97316;
}

.battlecard-col-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 1rem;
}

.col-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.battlecard-col-offense .col-header-icon {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.battlecard-col-defense .col-header-icon {
    background: rgba(249, 115, 22, 0.12);
    color: #f97316;
}

.battlecard-col-header h3 {
    margin: 0 0 0.2rem 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--gray-900);
}

.col-subtitle {
    margin: 0;
    font-size: 0.8rem;
    color: var(--gray-500);
}

.battle-section h4 {
    margin: 0 0 0.85rem 0;
    font-size: 0.95rem;
    font-weight: 750;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.battle-subcard {
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.75rem;
    transition: transform 0.15s ease;
}

.battle-subcard:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.battle-subcard-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.92rem;
    color: var(--gray-900);
}

.badge-statute {
    background: #3b82f6;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 750;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.strike-icon {
    color: #eab308;
}

.battle-subcard-text {
    margin: 0 0 0.4rem 0;
    font-size: 0.85rem;
    color: var(--gray-700);
    line-height: 1.45;
}

.battle-citation {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--primary-600);
    font-style: italic;
}

.battle-outcome {
    font-size: 0.8rem;
    color: #059669;
    font-weight: 600;
}

.battle-trigger {
    font-size: 0.8rem;
    color: #d97706;
    margin-bottom: 0.35rem;
}

.rebuttal-standard-box {
    background: rgba(249, 115, 22, 0.08);
    border: 1px solid rgba(249, 115, 22, 0.25);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    color: var(--gray-800);
    line-height: 1.45;
}

.battle-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.battle-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--gray-800);
}

.battle-checklist-item i {
    color: #10b981;
    margin-top: 0.2rem;
}

.battle-question-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.battle-question-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--gray-800);
    background: var(--gray-100);
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
}

.q-badge {
    background: #ef4444;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Presiding Magistrate Panel */
.magistrate-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    border-left: 6px solid #d97706;
}

.magistrate-panel-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 0.85rem;
}

.mag-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.magistrate-panel-header h3 {
    margin: 0 0 0.2rem 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--gray-900);
}

.magistrate-panel-header p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--gray-500);
}

.magistrate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.magistrate-checkpoint {
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
}

.chk-num {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #d97706;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.magistrate-checkpoint p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--gray-800);
    line-height: 1.45;
}

/* Empty State */
.empty-prereq-state {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.empty-prereq-state .empty-icon {
    font-size: 2.8rem;
    color: #10b981;
    margin-bottom: 0.75rem;
}

.empty-prereq-state h3 {
    margin: 0 0 0.35rem 0;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--gray-900);
}

.empty-prereq-state p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--gray-500);
    max-width: 500px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   JUDIQ AI OFFICIAL PRICING & LITIGATION INTELLIGENCE STYLES
   Colors: Royal Blue (#2563eb), Electric Sapphire (#38bdf8), Crisp White / Navy Surfaces
   Design: Formal Legal Trust, Clean Serif Headings, High-Contrast White & Blue
   ═══════════════════════════════════════════════════════════════════════════ */

.pricing-section {
    padding: 3.5rem 1.5rem;
    max-width: 1240px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-primary, #e2e8f0);
}

.pricing-header-wrap {
    text-align: center;
    margin-bottom: 2.5rem;
}

.pricing-header-wrap h2 {
    font-family: 'Cinzel', 'Merriweather', 'Georgia', serif;
    font-size: 2.15rem;
    font-weight: 700;
    color: var(--text-primary, #f8fafc);
    letter-spacing: 0.02em;
    margin-bottom: 0.6rem;
}

.pricing-subhead {
    font-size: 1.05rem;
    color: var(--text-secondary, #94a3b8);
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ── Founding Advocate Banner ─────────────────────────────────────────────── */
.founding-banner {
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(14, 20, 36, 0.95) 100%);
    border: 1.5px solid rgba(59, 130, 246, 0.35);
    border-radius: 12px;
    padding: 1.75rem;
    margin-bottom: 3.5rem;
    gap: 1.25rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-theme="light"] .founding-banner {
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
    border: 1.5px solid #bfdbfe;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.08);
}

.founding-banner-content {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.founding-badge {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.founding-slots-box {
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.35);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    text-align: center;
}

[data-theme="light"] .founding-slots-box {
    background: #e0f2fe;
    border-color: #7dd3fc;
}

.founding-slot-card {
    background: var(--bg-surface, #0e1424);
    border: 1px solid rgba(59, 130, 246, 0.22);
    border-radius: 8px;
    padding: 1.15rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.founding-slot-card:hover {
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.18);
}

.founding-slot-card.featured {
    border: 1.5px solid #3b82f6;
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.08) 0%, var(--bg-surface, #0e1424) 100%);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.22);
}

[data-theme="light"] .founding-slot-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .founding-slot-card.featured {
    border-color: #2563eb;
    background: #f8faff;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.12);
}

.founding-price {
    color: #38bdf8;
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
}

[data-theme="light"] .founding-price {
    color: #1d4ed8;
}

.founding-banner p {
    margin: 0;
    font-size: 0.96rem;
    color: var(--text-secondary, #cbd5e1);
    line-height: 1.45;
}

.founding-banner p strong {
    color: #38bdf8;
}

[data-theme="light"] .founding-banner p strong {
    color: #1d4ed8;
}

.btn-founding {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 0.65rem 1.35rem;
    border-radius: 6px;
    border: 1px solid #3b82f6;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-founding:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45);
}

/* ── Pricing Tab Switchers ── */
.btn-sub-tab {
    padding: 0.45rem 1.25rem;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary, #94a3b8);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-sub-tab:hover {
    color: #ffffff;
    background: rgba(37, 99, 235, 0.15);
}

.btn-sub-tab.active {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

/* ── Monthly Plans Grid & Cards ───────────────────────────────────────────── */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-bottom: 3rem;
}

.plan-card {
    background: var(--bg-surface, #0e1424);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 10px;
    padding: 1.75rem 1.35rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="light"] .plan-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.plan-card:hover {
    border-color: #3b82f6;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.18);
}

/* Featured Card — Signature Blue Glow Highlight */
.plan-card.featured {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.08) 0%, var(--bg-surface, #0e1424) 100%);
    border: 1.5px solid #3b82f6;
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.22);
}

[data-theme="light"] .plan-card.featured {
    background: #f8faff;
    border: 1.5px solid #2563eb;
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.14);
}

.plan-card .tag {
    position: absolute;
    top: -11px;
    right: 14px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.plan-card-header {
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
    padding-bottom: 1.15rem;
}

[data-theme="light"] .plan-card-header {
    border-bottom-color: #e2e8f0;
}

.plan-card.featured .plan-card-header {
    border-bottom-color: rgba(59, 130, 246, 0.35);
}

.plan-card h3 {
    font-family: 'Cinzel', 'Merriweather', 'Georgia', serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary, #f8fafc);
    margin: 0 0 0.65rem 0;
}

.plan-card .price {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary, #ffffff);
    margin: 0;
    line-height: 1.1;
}

.plan-card .price span {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-secondary, #94a3b8);
}

.plan-card .validity {
    font-size: 0.78rem;
    color: var(--primary-400, #38bdf8);
    margin: 0.35rem 0 0 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

[data-theme="light"] .plan-card .validity {
    color: #2563eb;
}

/* Features List */
.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    flex-grow: 1;
}

.plan-features li {
    font-size: 0.88rem;
    color: var(--text-secondary, #cbd5e1);
    padding: 0.45rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    line-height: 1.4;
    border-bottom: 1px dashed rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .plan-features li {
    color: #475569;
    border-bottom-color: #e2e8f0;
}

.plan-features li:last-child {
    border-bottom: none;
}

.plan-features li i {
    color: #2563eb;
    font-size: 0.82rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.plan-features li strong {
    color: #38bdf8;
}

[data-theme="light"] .plan-features li strong {
    color: #1d4ed8;
}

/* Plan Action Buttons */
.plan-btn {
    width: 100%;
    padding: 0.7rem 1rem;
    font-size: 0.92rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    border: 1px solid transparent;
}

.plan-card .btn-secondary {
    background: rgba(37, 99, 235, 0.08);
    color: var(--text-primary, #e2e8f0);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

[data-theme="light"] .plan-card .btn-secondary {
    background: #f1f5f9;
    color: #1e293b;
    border-color: #cbd5e1;
}

.plan-card .btn-secondary:hover {
    background: rgba(37, 99, 235, 0.18);
    border-color: #2563eb;
    color: #ffffff;
}

[data-theme="light"] .plan-card .btn-secondary:hover {
    background: #e2e8f0;
    color: #0f172a;
    border-color: #2563eb;
}

.plan-card.featured .btn-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    border-color: #3b82f6;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.plan-card.featured .btn-primary:hover {
    background: #1d4ed8;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
    transform: translateY(-1px);
}

/* ── Top-Ups Section ──────────────────────────────────────────────────────── */
.topups-section {
    background: var(--bg-surface, #0e1424);
    border: 1px solid rgba(59, 130, 246, 0.22);
    border-radius: 12px;
    padding: 1.75rem 2rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .topups-section {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.topups-header {
    margin-bottom: 1.25rem;
}

.topups-header h3 {
    font-family: 'Cinzel', 'Merriweather', 'Georgia', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary, #f8fafc);
    margin: 0 0 0.25rem 0;
}

.topups-header p {
    font-size: 0.9rem;
    color: var(--text-secondary, #94a3b8);
    margin: 0;
}

.topup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.topup-card {
    background: rgba(37, 99, 235, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 8px;
    padding: 1.15rem 1.35rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

[data-theme="light"] .topup-card {
    background: #f8faff;
    border-color: #e2e8f0;
}

.topup-card:hover {
    border-color: #3b82f6;
    transform: translateY(-2px);
}

.topup-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #f8fafc);
    margin: 0 0 0.2rem 0;
}

.topup-units {
    font-size: 0.88rem;
    color: var(--text-secondary, #cbd5e1);
    margin: 0 0 0.2rem 0;
}

[data-theme="light"] .topup-units {
    color: #475569;
}

.topup-validity {
    font-size: 0.76rem;
    color: var(--text-muted, #64748b);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.topup-action {
    text-align: right;
    flex-shrink: 0;
}

.topup-price {
    font-size: 1.35rem;
    font-weight: 800;
    color: #38bdf8;
    margin: 0 0 0.35rem 0;
}

[data-theme="light"] .topup-price {
    color: #1d4ed8;
}

.topup-action .btn-sm {
    padding: 0.45rem 0.95rem;
    font-size: 0.82rem;
    font-weight: 600;
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--text-primary, #e2e8f0);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
}

[data-theme="light"] .topup-action .btn-sm {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.topup-action .btn-sm:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

/* ── Policy Badge ─────────────────────────────────────────────────────────── */
.policy-badge {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.22);
    border-radius: 8px;
    padding: 1rem 1.35rem;
}

[data-theme="light"] .policy-badge {
    background: #f0f9ff;
    border-color: #bae6fd;
}

.policy-icon {
    color: #3b82f6;
    font-size: 1.15rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.policy-badge p {
    margin: 0;
    font-size: 0.86rem;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.5;
}

.policy-badge p strong {
    color: var(--text-primary, #e2e8f0);
}

@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    .founding-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    .topup-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .topup-action {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* SECTION 138 POSTAL TRACKING & AUTO-COMPLAINT WORKFLOW                      */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Top Dashboard Widget */
.postal-workflow-widget {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    transition: all 0.3s ease;
}

.postal-widget-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.postal-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.postal-state-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.postal-state-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.postal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.postal-tracking-chip,
.postal-service-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    color: #1d4ed8;
    font-size: 0.78rem;
    font-family: var(--font-mono, monospace);
    font-weight: 600;
}

.postal-widget-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.postal-btn-gold {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.postal-countdown-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.postal-countdown-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.postal-date-milestone {
    color: #94a3b8;
    font-size: 0.78rem;
}

.postal-date-milestone strong {
    color: #f1f5f9;
}

.postal-progress-track {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    overflow: hidden;
}

.postal-progress-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Draft Studio Dispatch Form & Tracking Cards */
.draft-postal-section {
    margin: 1.5rem 0;
}

.postal-dispatch-card,
.postal-tracking-card {
    background: rgba(13, 27, 42, 0.85);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.postal-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #D4AF37;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.postal-card-desc {
    color: #94a3b8;
    font-size: 0.84rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.postal-dispatch-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.postal-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.postal-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.postal-form-group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #cbd5e1;
}

.postal-input,
.postal-select {
    background: rgba(10, 25, 47, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    color: #f8fafc;
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.2s;
}

.postal-input:focus,
.postal-select:focus {
    border-color: #D4AF37;
}

.postal-form-submit {
    display: flex;
    justify-content: flex-end;
}

.postal-tracking-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.postal-tracking-status-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.postal-tracking-meta {
    display: flex;
    gap: 1rem;
    color: #94a3b8;
    font-size: 0.8rem;
    margin-top: 0.3rem;
    flex-wrap: wrap;
}

.postal-tracking-meta strong {
    color: #f8fafc;
}

.postal-tracking-btn-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.postal-tracking-latest-event {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.84rem;
    color: #cbd5e1;
}

.postal-event-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}

.postal-event-details {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.postal-event-time {
    color: #64748b;
    font-size: 0.75rem;
}

/* Notification Center */
.notification-center-wrapper {
    position: relative;
    display: inline-block;
}

.notif-bell-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #cbd5e1;
    border-radius: 8px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.notif-bell-btn:hover {
    border-color: #D4AF37;
    color: #D4AF37;
    background: rgba(212, 175, 55, 0.1);
}

.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 9999px;
    padding: 1px 6px;
    line-height: 1.2;
    border: 2px solid #ffffff;
}

.notif-dropdown {
    position: absolute;
    top: 46px;
    right: 0;
    width: 360px;
    max-width: 90vw;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    overflow: hidden;
}

.notif-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.notif-dropdown-header h4 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}

.notif-mark-all-btn {
    background: none;
    border: none;
    color: #2563eb;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.notif-list {
    max-height: 380px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.notif-item {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s;
    background: #ffffff;
}

.notif-item:hover {
    background: #f8fafc;
}

.notif-unread {
    background: #eff6ff;
    border-left: 3px solid #2563eb;
}

.notif-read {
    opacity: 0.85;
}

.notif-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.notif-title {
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 600;
}

.notif-time {
    color: #64748b;
    font-size: 0.72rem;
}

.notif-message {
    color: #475569;
    font-size: 0.78rem;
    line-height: 1.4;
    margin: 0;
}

.notif-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: #64748b;
    font-size: 0.84rem;
}

/* Vertical Timeline Modal */
.postal-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
}

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

.postal-modal-content {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
    padding: 1.5rem;
}

.postal-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
}

.postal-modal-header h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1.15rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.postal-modal-close {
    background: none;
    border: none;
    color: #64748b;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
}

.postal-modal-close:hover {
    color: #0f172a;
}

/* Vertical Chronology Timeline */
.vertical-timeline-track {
    position: relative;
    padding-left: 2rem;
    border-left: 2px solid #2563eb;
    margin-left: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.timeline-node {
    position: relative;
}

.timeline-node-icon {
    position: absolute;
    left: -2.75rem;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #2563eb;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.timeline-node--completed .timeline-node-icon {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}

.timeline-node--in-progress .timeline-node-icon {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.timeline-node--pending .timeline-node-icon {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #64748b;
}

.timeline-node-content {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.timeline-node-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.timeline-node-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
}

.timeline-node-date {
    font-size: 0.75rem;
    color: #64748b;
    font-family: var(--font-mono, monospace);
}

.timeline-node-desc {
    margin: 0;
    font-size: 0.8rem;
    color: #475569;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .postal-widget-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .postal-widget-actions {
        width: 100%;
        justify-content: flex-start;
    }
    .postal-form-row {
        grid-template-columns: 1fr;
    }
    .notif-dropdown {
        width: 300px;
        right: -60px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SECTION 138 HEARING TRACKER & COURT CALENDAR
   ══════════════════════════════════════════════════════════════════════════════ */

.hearing-widget-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 3px solid #2563eb;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.hearing-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.hearing-widget-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.02em;
}

.hearing-widget-subtitle {
    font-size: 0.8rem;
    color: #64748b;
}

.hearing-btn-secondary {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hearing-btn-secondary:hover {
    background: #dbeafe;
    border-color: #2563eb;
}

.hearing-btn-text {
    background: transparent;
    border: none;
    color: #2563eb;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.hearing-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hearing-item-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hearing-item-row:hover {
    border-color: #2563eb;
    background: #eff6ff;
}

.hearing-date-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 0.35rem 0.5rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
}

.hearing-day-num {
    font-size: 1.25rem;
    font-weight: 800;
    color: #2563eb;
    line-height: 1;
}

.hearing-month-name {
    font-size: 0.7rem;
    font-weight: 700;
    color: #1e40af;
    letter-spacing: 0.05em;
}

.hearing-day-name {
    font-size: 0.65rem;
    color: #64748b;
}

.hearing-info-col {
    flex: 1;
    min-width: 0;
}

.hearing-case-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.hearing-meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: #64748b;
}

.hearing-purpose-tag {
    background: #dbeafe;
    color: #1d4ed8;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.72rem;
}

.hearing-room-tag {
    background: #f1f5f9;
    color: #475569;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    font-size: 0.72rem;
}

.btn-hearing-record {
    background: #2563eb;
    color: #ffffff;
    border: none;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.45rem 0.85rem;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.btn-hearing-record:hover {
    opacity: 0.9;
}

.hearing-widget-empty {
    text-align: center;
    padding: 1.5rem;
    color: #94a3b8;
}

.hearing-widget-empty p {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #cbd5e1;
}

/* ── Case Detail Hearings Tab ── */
.hearing-tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tab-section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #F8F9FA;
    margin: 0 0 0.25rem 0;
}

.tab-section-desc {
    margin: 0;
    font-size: 0.85rem;
    color: #94a3b8;
}

.hearing-vertical-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-left: 0.5rem;
}

.hearing-timeline-node {
    display: flex;
    gap: 1.25rem;
}

.timeline-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 24px;
}

.marker-circle {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #2563eb;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 2px #2563eb;
    z-index: 2;
}

.status-completed .marker-circle {
    background: #10b981;
    box-shadow: 0 0 0 2px #10b981;
}

.status-overdue .marker-circle {
    background: #f59e0b;
    box-shadow: 0 0 0 2px #f59e0b;
}

.marker-line {
    flex: 1;
    width: 2px;
    background: #e2e8f0;
    margin-top: 4px;
}

.timeline-card {
    flex: 1;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.timeline-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}

.timeline-date-wrap {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.timeline-date-text {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.timeline-time-text {
    font-size: 0.85rem;
    color: #64748b;
}

.hearing-badge-completed {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
}

.hearing-badge-pending {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
}

.hearing-badge-upcoming {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
}

.timeline-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hearing-btn-action {
    background: #2563eb;
    color: #ffffff;
    border: none;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}

.hearing-btn-action:hover {
    background: #1d4ed8;
}

.hearing-btn-danger {
    background: transparent;
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    font-size: 0.78rem;
    padding: 0.35rem 0.65rem;
    border-radius: 4px;
    cursor: pointer;
}

.hearing-btn-danger:hover {
    background: rgba(239, 68, 68, 0.08);
}

.timeline-grid-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.88rem;
}

.field-label {
    display: block;
    color: #64748b;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
    font-weight: 600;
}

.field-value {
    color: #0f172a;
    font-weight: 600;
}

.hearing-outcome-box {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 3px solid #2563eb;
    border-radius: 6px;
    padding: 0.85rem;
    margin-top: 0.75rem;
}

.outcome-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #2563eb;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.3rem;
}

.outcome-text {
    margin: 0;
    font-size: 0.88rem;
    color: #0f172a;
    line-height: 1.5;
}

.outcome-next-date {
    margin-top: 0.6rem;
    font-size: 0.82rem;
    color: #475569;
    display: flex;
    gap: 0.4rem;
}

.outcome-next-date strong {
    color: #2563eb;
}

.hearing-notes-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 0.75rem;
    font-size: 0.84rem;
}

.notes-label {
    font-size: 0.72rem;
    color: #64748b;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.2rem;
    font-weight: 600;
}

.notes-text {
    margin: 0;
    color: #334155;
}

.hearing-empty-timeline {
    text-align: center;
    padding: 3rem 1.5rem;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
}

.empty-icon-box {
    display: inline-block;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
}

.hearing-empty-timeline h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.15rem;
    color: #0f172a;
    font-weight: 700;
}

.hearing-empty-timeline p {
    max-width: 480px;
    margin: 0 auto 1.5rem auto;
    font-size: 0.88rem;
    color: #64748b;
    line-height: 1.5;
}

/* ── Calendar Modal & Grid ── */
.modal-calendar-dialog {
    max-width: 900px;
    width: 95%;
}

.calendar-controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.calendar-month-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
}

.btn-cal-nav {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    padding: 0.35rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
}

.btn-cal-nav:hover {
    border-color: #2563eb;
    color: #2563eb;
    background: #eff6ff;
}

.calendar-week-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}

.cal-header-cell {
    padding: 0.65rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
}

.calendar-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #e2e8f0;
    gap: 1px;
    border-bottom: 1px solid #e2e8f0;
}

.cal-day-cell {
    background: #ffffff;
    min-height: 95px;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    position: relative;
}

.cal-day-empty {
    background: #f8fafc;
}

.cal-day-number {
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 0.3rem;
}

.cal-day-today {
    background: #eff6ff;
}

.cal-day-today .cal-day-number {
    color: #2563eb;
    font-weight: 800;
}

.cal-events-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow-y: auto;
    max-height: 80px;
}

.cal-event-pill {
    background: #eff6ff;
    border-left: 2px solid #2563eb;
    padding: 0.2rem 0.35rem;
    border-radius: 3px;
    font-size: 0.7rem;
    color: #1e40af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background 0.15s;
}

.cal-event-pill:hover {
    background: #dbeafe;
}

.pill-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #2563eb;
    margin-right: 0.3rem;
    vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SECTION 143A INTERIM COMPENSATION CARD & DRAFTS
   ══════════════════════════════════════════════════════════════════════════════ */

.s143a-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 3px solid #2563eb;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.s143a-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.s143a-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.3rem;
}

.s143a-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
}

.s143a-subtitle {
    margin: 0;
    font-size: 0.82rem;
    color: #64748b;
}

.s143a-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.s143a-badge-gold {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.s143a-badge-info {
    background: rgba(56, 189, 248, 0.15);
    color: #0284c7;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.s143a-badge-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.s143a-badge-success {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.s143a-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
    .s143a-metrics-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.s143a-metric-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
}

.metric-highlight {
    border-color: #93c5fd;
    background: #eff6ff;
}

.s143a-metric-label {
    font-size: 0.72rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.s143a-metric-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
}

.text-gold {
    color: #2563eb !important;
}

.text-success {
    color: #10b981 !important;
}

.s143a-status-trail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

@media (max-width: 768px) {
    .s143a-status-trail {
        grid-template-columns: 1fr;
    }
}

.s143a-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    background: #eff6ff;
    color: #2563eb;
}

.step-done .step-num {
    background: #10b981;
    color: #ffffff;
}

.step-current .step-num {
    background: #2563eb;
    color: #ffffff;
}

.step-info {
    flex: 1;
    min-width: 0;
}

.step-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
}

.step-desc {
    display: block;
    font-size: 0.72rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-step-action {
    background: #2563eb;
    color: #ffffff;
    border: none;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.35rem 0.65rem;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.btn-step-action:hover {
    background: #1d4ed8;
}

.s143a-notes-box {
    margin-top: 1rem;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    padding: 0.75rem;
    font-size: 0.82rem;
    color: #475569;
}

.s143a-notes-box strong {
    color: #2563eb;
}

.s143a-notes-box p {
    margin: 0.25rem 0 0 0;
}

/* ── Draft Modal & Preview ── */
.modal-draft-dialog {
    max-width: 850px;
    width: 95%;
}

.draft-toolbar-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.draft-lang-select-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.toolbar-label {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 600;
}

.draft-actions-wrap {
    display: flex;
    gap: 0.5rem;
}

.draft-preview-container {
    padding: 1.25rem;
    max-height: 550px;
    overflow-y: auto;
    background: #f8fafc;
}

.draft-text-preview {
    font-family: 'Times New Roman', serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #0f172a;
    white-space: pre-wrap;
    margin: 0;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   FEATURE 3: EVIDENCE ASSEMBLY & S.63(4) BSA CERTIFICATE GENERATOR
   White & Blue Theme (#ffffff, #2563eb, #0f172a)
   ========================================================================== */

.evidence-module {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1rem;
}

.evidence-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.evidence-header-title h3 {
    margin: 0 0 0.35rem 0;
    font-size: 1.35rem;
    color: #0f172a;
    font-weight: 700;
}

.evidence-subtitle {
    margin: 0;
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.4;
}

.evidence-actions {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
}

.evidence-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.evidence-stat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.stat-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 0.35rem;
    font-weight: 700;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

.stat-value.text-gold {
    color: #2563eb;
}

.stat-value.text-danger {
    color: #ef4444;
}

.stat-value.text-success {
    color: #10b981;
}

.stat-sub {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.35rem;
}

/* Statutory Alert Banners */
.statutory-alert-box {
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
}

.statutory-alert-box.alert-critical {
    background: rgba(239, 68, 68, 0.08);
    border-left: 4px solid #ef4444;
}

.statutory-alert-box.alert-warning {
    background: rgba(37, 99, 235, 0.08);
    border-left: 4px solid #2563eb;
}

.alert-title {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0f172a;
    margin-bottom: 0.35rem;
}

.alert-critical .alert-title {
    color: #dc2626;
}

.alert-warning .alert-title {
    color: #2563eb;
}

.alert-desc {
    font-size: 0.82rem;
    color: #475569;
    margin: 0 0 0.5rem 0;
}

.alert-list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.8rem;
    color: #334155;
}

.alert-list li {
    margin-bottom: 0.35rem;
}

/* Section Card & Exhibits Table */
.evidence-section-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.section-card-header {
    padding: 1rem 1.25rem;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-card-header h4 {
    margin: 0;
    font-size: 1.05rem;
    color: #0f172a;
    font-weight: 700;
}

.header-note {
    font-size: 0.78rem;
    color: #64748b;
}

.exhibits-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.exhibits-table th {
    background: #f8fafc;
    color: #475569;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    font-weight: 700;
    border-bottom: 1px solid #e2e8f0;
}

.exhibits-table td {
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.exhibits-table tr:hover {
    background: #eff6ff;
}

.order-controls {
    display: flex;
    gap: 0.25rem;
}

.order-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    border-radius: 3px;
    padding: 0.15rem 0.35rem;
    font-size: 0.65rem;
    cursor: pointer;
}

.order-btn:hover:not(:disabled) {
    background: rgba(212, 175, 55, 0.2);
    color: #D4AF37;
    border-color: #D4AF37;
}

.order-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.exhibit-tag {
    color: #D4AF37;
    font-family: monospace;
    font-size: 0.92rem;
}

.type-pill {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
}

.exhibit-desc {
    line-height: 1.4;
    color: #e2e8f0;
}

.badge-success {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
}

.badge-warning {
    background: rgba(212, 175, 55, 0.15);
    color: #D4AF37;
    border: 1px solid rgba(212, 175, 55, 0.3);
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
}

.badge-neutral {
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 500;
}

/* Modals */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-content {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-md {
    width: 550px;
    max-width: 95%;
}

.modal-lg {
    width: 850px;
    max-width: 95%;
}

.modal-header {
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h4 {
    margin: 0;
    color: #0f172a;
    font-size: 1.15rem;
    font-weight: 700;
}

.modal-close {
    background: none;
    border: none;
    color: #64748b;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.modal-close:hover {
    color: #0f172a;
}

.modal-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.statutory-notice-card {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 0.85rem 1rem;
    font-size: 0.8rem;
    color: #1e40af;
    line-height: 1.4;
}

.statutory-notice-card strong {
    color: #2563eb;
}

.row-fields {
    display: flex;
    gap: 1rem;
}

.flex-1 {
    flex: 1;
}

.action-btn-row {
    margin-top: 0.5rem;
    display: flex;
    justify-content: flex-end;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.preview-header h5 {
    margin: 0;
    color: #2563eb;
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.legal-draft-pre {
    font-family: 'Times New Roman', serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #0f172a;
    white-space: pre-wrap;
    margin: 0;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    max-height: 380px;
    overflow-y: auto;
}

.btn-gold-outline {
    background: transparent;
    border: 1px solid #2563eb;
    color: #2563eb;
    border-radius: 6px;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-gold-outline:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

/* ==========================================================================
   FEATURE 4: SECTION 147 SETTLEMENT & COMPOUNDING WORKFLOW
   Crisp White (#ffffff), Slate (#0f172a), Blue (#2563eb)
   ========================================================================== */

.settlement-module-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 3px solid #2563eb;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.settlement-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 1rem;
}

.settlement-badge-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

.settlement-tag {
    font-size: 0.72rem;
    font-weight: 700;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    letter-spacing: 0.05em;
}

.status-pill {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    text-transform: uppercase;
}

.status-no_offer {
    background: #f1f5f9;
    color: #64748b;
}

.status-offer_received, .status-negotiating {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-agreed, .status-installment_active {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.status-fully_paid, .status-compounded_closed {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-defaulted, .status-trial_resumed {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.settlement-card-title {
    margin: 0 0 0.35rem 0;
    font-size: 1.25rem;
    color: #0f172a;
    font-weight: 700;
}

.settlement-subtitle {
    margin: 0;
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.4;
}

.settlement-top-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Stepper */
.settlement-stepper {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.85rem 1.25rem;
    overflow-x: auto;
}

.stepper-node {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.stepper-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}

.stepper-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
    white-space: nowrap;
}

.stepper-line {
    flex: 1;
    height: 2px;
    background: #e2e8f0;
    margin: 0 0.75rem;
    min-width: 20px;
}

.step-complete .stepper-dot {
    background: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.step-complete .stepper-label {
    color: #10b981;
}

.step-active .stepper-dot {
    background: #2563eb;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.4);
}

.step-active .stepper-label {
    color: #2563eb;
}

.step-defaulted .stepper-dot {
    background: #ef4444;
}

.step-defaulted .stepper-label {
    color: #ef4444;
}

/* Economics Grid */
.economics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
}

.econ-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.95rem;
    display: flex;
    flex-direction: column;
}

.econ-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.econ-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.econ-sub {
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 0.25rem;
}

.rec-positive {
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.05);
}

.rec-positive .econ-value {
    color: #10b981;
}

.rec-warning {
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.05);
}

.rec-warning .econ-value {
    color: #d97706;
}

.rec-danger {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.05);
}

.rec-danger .econ-value {
    color: #ef4444;
}

/* Active Section & Balances */
.settlement-active-section {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.settlement-balance-bar {
    display: flex;
    justify-content: space-around;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.balance-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.balance-label {
    font-size: 0.72rem;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.balance-val {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
}

.progress-wrap {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.progress-track {
    flex: 1;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #10b981);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 0.75rem;
    font-weight: 700;
    color: #0f172a;
    min-width: 90px;
    text-align: right;
}

/* Installments Table */
.installments-box {
    margin-top: 0.5rem;
}

.installments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.installments-header h6 {
    margin: 0;
    font-size: 0.88rem;
    color: #0f172a;
    font-weight: 700;
}

.installments-note {
    font-size: 0.72rem;
    color: #64748b;
}

.installments-table {
    width: 100%;
    border-collapse: collapse;
}

.installments-table th {
    background: #f8fafc;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    padding: 0.6rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.installments-table td {
    padding: 0.65rem 0.85rem;
    font-size: 0.82rem;
    color: #0f172a;
    border-bottom: 1px solid #f1f5f9;
}

.settlement-footer-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid #e2e8f0;
}

.toolbar-left, .toolbar-right {
    display: flex;
    gap: 0.5rem;
}

.btn-danger-outline {
    background: transparent;
    border: 1px solid #ef4444;
    color: #ef4444;
    border-radius: 4px;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.btn-danger-outline:hover {
    background: rgba(239, 68, 68, 0.08);
}

/* ==========================================================================
   FEATURE 5: SUMMONS TRACKING, ACCUSED APPEARANCE & S.87/S.82 PROCESS
   Crisp White (#ffffff), Slate (#0f172a), Blue (#2563eb)
   ========================================================================== */

.summons-module-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 3px solid #2563eb;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.summons-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 1rem;
}

.summons-badge-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

.summons-tag {
    font-size: 0.72rem;
    font-weight: 700;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    letter-spacing: 0.05em;
}

.summons-card-title {
    margin: 0 0 0.35rem 0;
    font-size: 1.25rem;
    color: #0f172a;
    font-weight: 700;
}

.summons-subtitle {
    margin: 0;
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.4;
}

.summons-top-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Stepper */
.summons-stepper {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.85rem 1.25rem;
    overflow-x: auto;
}

.step-active-warning .stepper-dot {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

.step-active-warning .stepper-label {
    color: #ef4444;
}

/* Overview Grid */
.summons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
}

.summons-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.95rem;
    display: flex;
    flex-direction: column;
}

.summons-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.summons-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.summons-sub {
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 0.25rem;
}

/* Plea Statement Box */
.plea-statement-box {
    background: #eff6ff;
    border-left: 3px solid #2563eb;
    border-radius: 4px;
    padding: 0.75rem 1rem;
}

.plea-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #2563eb;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.plea-text {
    margin: 0.35rem 0 0 0;
    font-style: italic;
    font-size: 0.85rem;
    color: #1e293b;
    line-height: 1.4;
}

/* Footer Toolbar */
.summons-footer-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid #e2e8f0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN CONTROL CENTER: EXECUTIVE NAVIGATION & PAYMENT COMMAND SUITE
   ═══════════════════════════════════════════════════════════════════════════ */

.admin-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary, #e2e8f0);
}

.admin-nav-btn:hover {
    background: rgba(99, 102, 241, 0.18);
    border-color: #6366f1;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.admin-nav-home-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    transition: all 0.2s ease;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
}

.admin-nav-home-btn:hover {
    background: rgba(245, 158, 11, 0.22);
    border-color: #f59e0b;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

/* Payment Mode Badges */
.badge-pay-method {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.badge-method-razorpay {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.35);
}

.badge-method-cash {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.badge-method-upi {
    background: rgba(14, 165, 233, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(14, 165, 233, 0.35);
}

.badge-method-bank {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.35);
}

.badge-method-cheque {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.badge-method-test {
    background: rgba(236, 72, 153, 0.15);
    color: #f472b6;
    border: 1px solid rgba(236, 72, 153, 0.35);
}

.badge-method-complimentary {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.35);
}

/* Plan Preview Card inside Payment Modal */
.admin-plan-preview-box {
    background: linear-gradient(135deg, rgba(14, 20, 36, 0.95), rgba(20, 28, 48, 0.95));
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1rem;
}

.admin-plan-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.admin-plan-preview-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.admin-plan-preview-price {
    font-size: 1.1rem;
    font-weight: 800;
    color: #10b981;
}

.admin-plan-preview-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.74rem;
}

.admin-plan-preview-pill {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* PRACTICE VERTICALS & SERVICES SHOWCASE (LANDING PAGE)                      */
/* ═══════════════════════════════════════════════════════════════════════════ */
.vertical-services-section {
    padding: 5rem 2rem;
    background: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.08) 0%, rgba(15, 23, 42, 0.6) 70%);
    border-top: 1px solid rgba(59, 130, 246, 0.2);
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    position: relative;
    overflow: hidden;
}

[data-theme="light"] .vertical-services-section {
    background: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.05) 0%, #f8fafc 70%);
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.vertical-tabs-wrapper {
    display: flex;
    justify-content: center;
    margin: 2.5rem 0 3rem 0;
}

.vertical-selector-tabs {
    display: inline-flex;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 40px;
    padding: 0.4rem;
    gap: 0.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

[data-theme="light"] .vertical-selector-tabs {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.v-tab-btn {
    padding: 0.75rem 1.6rem;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    background: transparent;
    color: #94a3b8;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    white-space: nowrap;
}

.v-tab-btn:hover {
    color: #f8fafc;
    background: rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .v-tab-btn:hover {
    color: #1e293b;
    background: #f1f5f9;
}

.v-tab-btn.active {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
}

.v-tab-btn.active.v-tab-civil {
    background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.45);
}

.v-tab-btn.active.v-tab-dual {
    background: linear-gradient(135deg, #059669, #047857) !important;
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.45);
}

.vertical-service-panel {
    animation: fadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: none;
}

.vertical-service-panel.active {
    display: block;
}

.v-panel-banner {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 14px;
    padding: 2rem;
    margin-bottom: 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

[data-theme="light"] .v-panel-banner {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.v-panel-banner-info h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.7rem;
    color: #f8fafc;
    margin: 0.35rem 0 0.5rem 0;
}

[data-theme="light"] .v-panel-banner-info h3 {
    color: #0f172a;
}

.v-panel-banner-info p {
    color: #94a3b8;
    font-size: 1rem;
    margin: 0;
    max-width: 680px;
    line-height: 1.5;
}

[data-theme="light"] .v-panel-banner-info p {
    color: #475569;
}

.v-panel-banner-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.v-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.35rem;
    margin-bottom: 3.5rem;
}

.v-service-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 12px;
    padding: 1.6rem;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

[data-theme="light"] .v-service-card {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.v-service-card:hover {
    transform: translateY(-4px);
    border-color: #3b82f6;
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.18);
}

.v-service-card.card--civil:hover {
    border-color: #8b5cf6;
    box-shadow: 0 12px 30px rgba(139, 92, 246, 0.22);
}

.v-service-card.card--dual:hover {
    border-color: #10b981;
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.22);
}

.v-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.v-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: rgba(37, 99, 235, 0.15);
    color: #3b82f6;
}

.card--civil .v-card-icon {
    background: rgba(124, 58, 237, 0.15);
    color: #a78bfa;
}

.card--dual .v-card-icon {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.v-statute-tag {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.12);
    color: #38bdf8;
    border: 1px solid rgba(59, 130, 246, 0.25);
    text-transform: uppercase;
}

.card--civil .v-statute-tag {
    background: rgba(139, 92, 246, 0.12);
    color: #c4b5fd;
    border-color: rgba(139, 92, 246, 0.25);
}

.card--dual .v-statute-tag {
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.25);
}

.v-service-card h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0 0 0.5rem 0;
}

[data-theme="light"] .v-service-card h4 {
    color: #0f172a;
}

.v-service-card p {
    color: #94a3b8;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

[data-theme="light"] .v-service-card p {
    color: #64748b;
}

/* ── Side-by-Side Comparison Matrix Table ── */
.v-comparison-matrix-wrapper {
    margin-top: 3.5rem;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 14px;
    padding: 2rem;
    overflow-x: auto;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .v-comparison-matrix-wrapper {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

.v-comparison-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    min-width: 680px;
}

.v-comparison-table th,
.v-comparison-table td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(59, 130, 246, 0.12);
}

[data-theme="light"] .v-comparison-table th,
[data-theme="light"] .v-comparison-table td {
    border-bottom: 1px solid #e2e8f0;
}

.v-comparison-table th {
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #f8fafc;
    background: rgba(30, 41, 59, 0.6);
}

[data-theme="light"] .v-comparison-table th {
    color: #0f172a;
    background: #f1f5f9;
}

.v-comparison-table th.col-dual {
    background: rgba(5, 150, 105, 0.15);
    border-left: 2px solid #059669;
    border-right: 2px solid #059669;
    color: #34d399;
}

.v-comparison-table td.col-dual {
    background: rgba(5, 150, 105, 0.04);
    border-left: 2px solid rgba(5, 150, 105, 0.3);
    border-right: 2px solid rgba(5, 150, 105, 0.3);
}

.v-check-icon {
    color: #10b981;
    font-size: 1.15rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}

.v-cross-icon {
    color: #64748b;
    font-size: 1.05rem;
}

.v-feature-title {
    font-weight: 600;
    color: #f1f5f9;
    font-size: 0.95rem;
}

[data-theme="light"] .v-feature-title {
    color: #1e293b;
}

.v-feature-sub {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 2px;
}

[data-theme="light"] .v-feature-sub {
    color: #64748b;
}


/* ================================================================
   JUDIQ AI — PATCH CSS (added by platform audit fix)
   ================================================================ */

/* ── Dashboard nav brand ── */
.dashboard-nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: auto;
    text-decoration: none;
}
.dashboard-brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.dashboard-brand-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    color: var(--text-primary, #f1f5f9);
}
.dashboard-brand-accent {
    color: #60a5fa;
}
[data-theme="light"] .dashboard-brand-name {
    color: var(--text-primary, #0f172a);
}

/* ── Fix top-nav flex alignment after adding brand ── */
.top-nav .nav-user {
    margin-left: 0;
}

/* ── Trial Exhausted Alert (Plan Required Banner) ── */
.trial-exhausted-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.125rem;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.95), rgba(254, 215, 170, 0.92));
    border: 1.5px solid #f59e0b;
    border-radius: 14px;
    padding: 18px 22px;
    margin-top: 16px;
    box-shadow: 0 8px 24px -4px rgba(245, 158, 11, 0.22);
}
[data-theme="dark"] .trial-exhausted-alert {
    background: linear-gradient(135deg, rgba(120, 53, 15, 0.35), rgba(92, 40, 8, 0.3));
    border-color: rgba(245, 158, 11, 0.5);
}
.trial-exhausted-alert .tea-body {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 260px;
}
.trial-exhausted-alert .tea-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #fef3c7;
    border: 2px solid #f59e0b;
    color: #b45309;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2);
}
[data-theme="dark"] .trial-exhausted-alert .tea-icon {
    background: rgba(120, 53, 15, 0.4);
    color: #fbbf24;
}
.trial-exhausted-alert .tea-title {
    font-weight: 800;
    color: #78350f;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
[data-theme="dark"] .trial-exhausted-alert .tea-title {
    color: #fcd34d;
}
.trial-exhausted-alert .tea-paid-badge {
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 999px;
    background: #dc2626;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.trial-exhausted-alert .tea-message {
    font-size: 0.84rem;
    color: #92400e;
    margin-top: 4px;
    line-height: 1.45;
}
[data-theme="dark"] .trial-exhausted-alert .tea-message {
    color: #fde68a;
}
.trial-exhausted-alert .tea-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

/* ================================================================
   JUDIQ AI — ADMIN PORTAL MISSING CSS (patch)
   ================================================================ */

/* ── Admin top nav ── */
.admin-top-nav {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-bottom: 1px solid rgba(56, 189, 248, 0.2);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}
[data-theme="light"] .admin-top-nav {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
.admin-top-nav .nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.admin-top-nav .brand-title {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #f1f5f9;
    letter-spacing: 0.06em;
}
.admin-master-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 20px;
    padding: 3px 10px;
    text-transform: uppercase;
}
.admin-nav-btn,
.admin-nav-home-btn {
    font-size: 0.8rem;
    padding: 0.35rem 0.8rem;
    border-radius: 8px;
}

/* ── Admin stats grid ── */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

/* ── Admin tab content ── */
.admin-tab-content {
    display: none;
    animation: fadeIn 0.2s ease;
}
.admin-tab-content.active {
    display: block;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Admin header card inline styles => classes ── */
.admin-header-card-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}
.admin-assign-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-weight: 700;
    border: none;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    transition: opacity 0.15s, transform 0.15s;
}
.admin-assign-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

/* ── Improve admin stat card value ── */
.admin-stat-card {
    position: relative;
    overflow: hidden;
}
.admin-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #38bdf8);
    border-radius: 14px 14px 0 0;
}

/* ── Admin tab nav scrollable on mobile ── */
.admin-tab-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(56, 189, 248, 0.3) transparent;
}
.admin-tab-nav::-webkit-scrollbar {
    height: 4px;
}
.admin-tab-nav::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.3);
    border-radius: 4px;
}

/* ── Dashboard nav fixes ── */
#dashboardScreen .top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0.5rem;
}
#dashboardScreen{--dash-ink:#172746;--dash-blue:#4568e8;--dash-muted:#71809a;--dash-line:#e5eaf2;min-height:100vh;background:#f6f8fc;color:var(--dash-ink);font-family:'Outfit',sans-serif}
#dashboardScreen .top-nav{position:fixed;inset:0 0 auto 252px;width:auto;height:62px;min-height:0;padding:8px 28px;display:flex;align-items:center;justify-content:flex-end;gap:12px;overflow:visible;background:rgba(255,255,255,.96);border:0;border-bottom:1px solid #e5eaf2;border-radius:0;box-shadow:0 3px 15px rgba(31,52,82,.04);z-index:120}
#dashboardScreen .top-nav>.dashboard-nav-brand{display:none}
#dashboardScreen .nav-user{width:auto;margin:0;display:flex;flex-direction:row;align-items:center;gap:8px}
#dashboardScreen .nav-user>.lang-toggle-btn,#dashboardScreen .nav-user>.theme-toggle-btn{display:inline-flex;width:auto;min-height:36px;align-items:center;justify-content:center;margin:0;padding:7px 10px;border:1px solid #e4e9f1;border-radius:9px;color:#4c5c76;background:#fff;font:600 11px 'Outfit',sans-serif;box-shadow:none}
#dashboardScreen .nav-user>.user-role-badge,#dashboardScreen .nav-user>.user-quota-pill,#dashboardScreen .nav-user>.subscription-validity-pill{width:auto;min-height:34px;display:flex;align-items:center;gap:7px;margin:0;padding:6px 10px;border:1px solid #e5eaf2;border-radius:9px;color:#42536d;background:#f8faff;font-size:10px}
#dashboardScreen .nav-user>.subscription-validity-pill .validity-pill-text-wrapper{display:none}
#dashboardScreen .nav-user>.user-menu{width:auto;display:flex;flex-direction:row;align-items:center;gap:4px;margin:0;padding:0;border:0}
#dashboardScreen .user-email-text,#dashboardScreen .user-menu span#userEmail{max-width:175px;color:#52627b;font-size:10px}
#dashboardScreen .nav-user>.user-menu .btn{width:auto;color:#52627b;font:600 11px 'Outfit',sans-serif;padding:8px;border-radius:8px}
#dashboardScreen .dashboard-sidebar{position:fixed;inset:0 auto 0 0;z-index:121;width:252px;display:flex;flex-direction:column;gap:5px;padding:20px 13px 16px;background:linear-gradient(180deg,#1b2d59 0%,#172649 100%);box-shadow:8px 0 28px rgba(20,39,75,.08);color:#edf2ff}
#dashboardScreen .dashboard-sidebar-brand{height:45px;display:flex;align-items:center;gap:10px;padding:0 10px 15px;margin-bottom:9px;border-bottom:1px solid rgba(255,255,255,.13);color:white;font-size:18px;font-weight:750;letter-spacing:.04em}
#dashboardScreen .dashboard-sidebar-brand b{color:#aabaff}
#dashboardScreen .dashboard-sidebar .dashboard-brand-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#3954a0;color:white;font-size:14px}
#dashboardScreen .dashboard-sidebar-label{padding:12px 11px 7px;color:#93a3c6;font-size:9px;font-weight:700;letter-spacing:.14em}
#dashboardScreen .dashboard-side-link{position:relative;width:100%;min-height:41px;display:flex;align-items:center;gap:11px;padding:9px 11px;border:0;border-radius:9px;color:#dbe4f7;background:transparent;text-align:left;text-decoration:none;font:550 12px 'Outfit',sans-serif;cursor:pointer;transition:background .18s,color .18s}
#dashboardScreen .dashboard-side-link>i:first-child{width:17px;text-align:center;color:#b8c9f6;font-size:13px}
#dashboardScreen .dashboard-side-link:hover{color:white;background:rgba(255,255,255,.09)}
#dashboardScreen .dashboard-side-link.active{color:white;background:linear-gradient(110deg,rgba(99,130,234,.36),rgba(74,99,188,.25));box-shadow:inset 0 0 0 1px rgba(151,174,255,.4)}
#dashboardScreen .dashboard-side-link.active>i:first-child{color:white}
#dashboardScreen .dashboard-sidebar-spacer{flex:1;min-height:20px}
#dashboardScreen .dashboard-side-link .side-external{margin-left:auto;color:#9aadd6;font-size:9px}
#dashboardScreen .dashboard-sidebar-footer{display:flex;align-items:center;gap:7px;padding:14px 11px 5px;border-top:1px solid rgba(255,255,255,.12);color:#aebbd4;font-size:10px}
#dashboardScreen .dashboard-sidebar-footer i{color:#4bd09f}
#dashboardScreen .dashboard-content{width:min(1320px,calc(100% - 304px));max-width:none;margin:0 28px 0 276px;padding:78px 0 50px}
#dashboardScreen .dashboard-topbar{display:flex;align-items:center;justify-content:space-between;min-height:36px;margin-bottom:22px;color:#8a97aa;font-size:11px}
#dashboardScreen .dashboard-topbar-title{display:flex;align-items:center;gap:10px}#dashboardScreen .dashboard-topbar-title i{font-size:9px;color:#aeb8c7}#dashboardScreen .dashboard-topbar-title strong{color:#3c4c65;font-weight:600}
#dashboardScreen .dashboard-topbar-user{display:none}
#dashboardScreen .institutional-engine-toolbar{display:flex;align-items:center;margin-bottom:20px;padding:11px 14px}
#dashboardScreen .engine-status-left{margin:0}
#dashboardScreen #actionCardsGrid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
#dashboardScreen .domain-section-header{margin:4px 0 0!important;padding:0 2px!important;border:0!important;background:transparent!important;box-shadow:none!important}
#dashboardScreen .domain-section-header h3{color:#263955;font-size:17px;font-weight:700}
#dashboardScreen .domain-stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#dashboardScreen .domain-stat-card{min-height:96px;padding:17px 18px!important;border:1px solid #e4e9f1!important;border-left:1px solid #e4e9f1!important;border-radius:12px!important;background:#fff!important;box-shadow:0 5px 16px rgba(31,52,82,.04)!important}
#dashboardScreen .domain-stat-card .dsc-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#eef2ff}
#dashboardScreen .domain-stat-card .dsc-content .dsc-value{color:#1d2c4b;font-size:30px;font-weight:750;line-height:1}
#dashboardScreen .domain-stat-card .dsc-content .dsc-label{margin-top:6px;color:#65738b;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
#dashboardScreen .domain-actions-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
#dashboardScreen .domain-action-card{min-height:78px;display:flex!important;flex-direction:row!important;align-items:center;gap:12px;padding:15px!important;border:1px solid #e4e9f1!important;border-radius:11px!important;background:#fff!important;box-shadow:0 5px 16px rgba(31,52,82,.035)!important;cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s}
#dashboardScreen .domain-action-card>div:first-child:not(.dac-icon){display:flex;align-items:center;gap:12px;flex:1;min-width:0}
#dashboardScreen .domain-action-card>div:first-child .dac-title{margin:0}
#dashboardScreen .domain-action-card:hover{transform:translateY(-2px);border-color:#bdcbed!important;box-shadow:0 9px 22px rgba(40,65,111,.09)!important}
#dashboardScreen .domain-action-card .dac-icon{flex:0 0 38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#eef2ff;font-size:15px}
#dashboardScreen .domain-action-card .dac-title{color:#263651!important;font-size:12px!important;font-weight:650!important;line-height:1.35}
#dashboardScreen .domain-action-card .dac-sub{display:none}
#dashboardScreen .recent-section{margin-top:18px}
#dashboardScreen .dashboard-header{flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:22px;padding:2px 0 18px;border-bottom:1px solid var(--dash-line)}
#dashboardScreen .dashboard-header h1{font-size:clamp(24px,2.3vw,32px);font-weight:700;color:#1b2c4c;letter-spacing:-.035em}
#dashboardScreen .dashboard-subtitle{color:var(--dash-muted);font-size:13px}
#dashboardScreen .institutional-engine-toolbar{display:block;margin:0 0 20px;padding:13px 15px;border:1px solid var(--dash-line);border-radius:13px;background:#fff;box-shadow:0 5px 18px rgba(31,52,82,.035)}
#dashboardScreen .engine-status-left{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:13px}
#dashboardScreen .engine-status-tag{color:#286b55;background:#eaf7f1;border-radius:99px;padding:6px 10px;font-size:11px}
#dashboardScreen .engine-status-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:9px}
#dashboardScreen .engine-status-actions .btn{min-height:53px;justify-content:flex-start;padding:11px 13px;border:1px solid #e4e9f1;border-radius:10px;background:#fff;color:#233553;font-size:12px;box-shadow:0 3px 12px rgba(30,51,82,.035);white-space:normal;text-align:left}
#dashboardScreen .engine-status-actions .btn i{color:#4c69df;font-size:15px;margin-right:7px}
#dashboardScreen .engine-status-actions .btn:hover{border-color:#b9c8ef;background:#f6f8ff;transform:translateY(-1px)}
#dashboardScreen #membershipValidityBanner{border:1px solid var(--dash-line);border-radius:13px;background:#fff;box-shadow:0 5px 18px rgba(31,52,82,.035)}
#dashboardScreen .membership-validity-metrics{gap:10px}.validity-metric-card{border-radius:11px;background:#f9faff;border:1px solid #edf0f6}
#dashboardScreen .recent-section{margin-top:23px;padding:20px;border:1px solid var(--dash-line);border-radius:13px;background:#fff;box-shadow:0 5px 18px rgba(31,52,82,.035)}
/* ==========================================================================
   WORKSPACE MOBILE SLIDEBAR DRAWER NAVIGATION (Dashboard & Draft Studio)
   ========================================================================== */
.dashboard-sidebar-toggle-btn {
    display: none;
}
.dashboard-sidebar-close-btn {
    display: none;
}
.dashboard-sidebar-backdrop {
    display: none;
}

@media (max-width: 900px) {
    /* Prevent background scrolling when slidebar drawer is open */
    body.dashboard-sidebar-open,
    body.draftstudio-sidebar-open {
        overflow: hidden !important;
        touch-action: none;
    }

    /* Fixed Top Navigation Bar */
    #dashboardScreen .top-nav,
    #draftStudioScreen .top-nav {
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        width: 100% !important;
        height: 58px !important;
        min-height: 58px !important;
        padding: 6px 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: rgba(255, 255, 255, 0.98) !important;
        border-bottom: 1px solid #e2e8f0 !important;
        border-radius: 0 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
        z-index: 1200 !important;
    }

    /* Brand Header with Hamburger Button */
    #dashboardScreen .top-nav > .dashboard-nav-brand,
    #draftStudioScreen .top-nav > .dashboard-nav-brand {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex: 0 0 auto !important;
    }

    .dashboard-sidebar-toggle-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 9px;
        border: 1px solid #d8e2f0;
        background: #f8faff;
        color: #1e2e4f;
        font-size: 15px;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 1px 3px rgba(30, 46, 79, 0.08);
    }
    .dashboard-sidebar-toggle-btn:hover,
    .dashboard-sidebar-toggle-btn:active {
        background: #edf2fc;
        color: #1b2d59;
        border-color: #cbd8ec;
        transform: scale(0.97);
    }

    .dashboard-brand-name {
        display: inline-flex !important;
        align-items: center;
        font-size: 15px;
        font-weight: 750;
        color: #1a2a4c;
        letter-spacing: 0.02em;
    }
    .dashboard-brand-accent {
        color: #3b82f6;
        margin-left: 3px;
    }
    .dashboard-brand-icon {
        display: inline-grid !important;
        place-items: center;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: #2563eb;
        color: #fff;
        font-size: 13px;
    }

    /* Top Nav User Controls on Mobile */
    #dashboardScreen .nav-user,
    #draftStudioScreen .nav-user {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        margin-left: auto !important;
    }
    #dashboardScreen .nav-user > .subscription-validity-pill,
    #draftStudioScreen .nav-user > .subscription-validity-pill,
    #dashboardScreen .user-email-text,
    #draftStudioScreen .user-email-text,
    #dashboardScreen .user-menu span#userEmail,
    #draftStudioScreen .user-menu span#studioUserEmail {
        display: none !important;
    }
    #dashboardScreen .nav-user > .lang-toggle-btn,
    #dashboardScreen .nav-user > .theme-toggle-btn,
    #draftStudioScreen .nav-user > .lang-toggle-btn,
    #draftStudioScreen .nav-user > .theme-toggle-btn {
        min-height: 34px !important;
        height: 34px !important;
        padding: 5px 8px !important;
        font-size: 11px !important;
    }
    #dashboardScreen .nav-user > .user-role-badge,
    #dashboardScreen .nav-user > .user-quota-pill,
    #draftStudioScreen .nav-user > .user-role-badge,
    #draftStudioScreen .nav-user > .user-quota-pill {
        min-height: 32px !important;
        height: 32px !important;
        padding: 4px 8px !important;
        font-size: 10px !important;
    }
    #dashboardScreen .nav-user > .user-menu .btn,
    #draftStudioScreen .nav-user > .user-menu .btn {
        min-height: 34px !important;
        height: 34px !important;
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

    /* Backdrop Overlay */
    .dashboard-sidebar-backdrop {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(11, 20, 38, 0.65) !important;
        backdrop-filter: blur(3px) !important;
        -webkit-backdrop-filter: blur(3px) !important;
        z-index: 1290 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.28s ease, visibility 0.28s ease !important;
    }
    .dashboard-sidebar-backdrop.is-active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Vertical Off-Canvas Slidebar Drawer */
    #dashboardScreen .dashboard-sidebar,
    #draftStudioScreen .dashboard-sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: 290px !important;
        max-width: 86vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        padding: 16px 14px 24px !important;
        background: linear-gradient(180deg, #1b2d59 0%, #132244 100%) !important;
        box-shadow: 14px 0 36px rgba(0, 0, 0, 0.45) !important;
        z-index: 1300 !important;
        transform: translateX(-100%) !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s ease !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Slidebar Drawer Open State */
    #dashboardScreen .dashboard-sidebar.is-open,
    #draftStudioScreen .dashboard-sidebar.is-open {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Drawer Header & Close Button */
    #dashboardScreen .dashboard-sidebar-brand,
    #draftStudioScreen .dashboard-sidebar-brand {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 48px !important;
        padding: 0 4px 12px !important;
        margin-bottom: 8px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
        color: #fff !important;
        font-size: 17px !important;
        font-weight: 750 !important;
    }
    .dashboard-sidebar-close-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .dashboard-sidebar-close-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    /* Section Labels in Drawer */
    #dashboardScreen .dashboard-sidebar-label,
    #draftStudioScreen .dashboard-sidebar-label {
        display: block !important;
        padding: 10px 8px 4px !important;
        color: #9bb0db !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
    }

    /* Vertical Navigation Links */
    #dashboardScreen .dashboard-side-link,
    #draftStudioScreen .dashboard-side-link {
        display: flex !important;
        width: 100% !important;
        min-height: 42px !important;
        align-items: center !important;
        gap: 11px !important;
        padding: 9px 12px !important;
        border: 0 !important;
        border-radius: 9px !important;
        color: #dbe5f7 !important;
        background: transparent !important;
        text-align: left !important;
        font: 550 13px 'Outfit', sans-serif !important;
        box-shadow: none !important;
        cursor: pointer !important;
        transition: background 0.18s, color 0.18s !important;
    }
    #dashboardScreen .dashboard-side-link>i:first-child,
    #draftStudioScreen .dashboard-side-link>i:first-child {
        width: 18px !important;
        text-align: center !important;
        color: #a7bce9 !important;
        font-size: 14px !important;
    }
    #dashboardScreen .dashboard-side-link:hover,
    #draftStudioScreen .dashboard-side-link:hover {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.1) !important;
    }
    #dashboardScreen .dashboard-side-link.active,
    #draftStudioScreen .dashboard-side-link.active {
        color: #ffffff !important;
        background: linear-gradient(110deg, rgba(99,130,234,0.38), rgba(74,99,188,0.28)) !important;
        box-shadow: inset 0 0 0 1px rgba(151,174,255,0.45) !important;
    }

    /* Practice Area Domain Switcher in Drawer */
    #dashboardScreen .dashboard-domain-switcher,
    #draftStudioScreen .dashboard-domain-switcher {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        margin-bottom: 6px !important;
    }
    #dashboardScreen .dashboard-domain-link,
    #draftStudioScreen .dashboard-domain-link {
        display: flex !important;
        width: 100% !important;
        min-height: 40px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 8px 12px !important;
        gap: 9px !important;
        border-radius: 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: rgba(255, 255, 255, 0.04) !important;
        color: #d8e4f8 !important;
        font: 500 12px 'Outfit', sans-serif !important;
        text-align: left !important;
        cursor: pointer !important;
        transition: all 0.18s !important;
    }
    #dashboardScreen .dashboard-domain-link>small,
    #draftStudioScreen .dashboard-domain-link>small {
        margin-left: auto !important;
        padding: 2px 7px !important;
        font-size: 9px !important;
        border-radius: 4px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        color: #c4d3ee !important;
    }
    #dashboardScreen .dashboard-domain-link.active,
    #draftStudioScreen .dashboard-domain-link.active {
        background: rgba(99, 130, 234, 0.32) !important;
        border-color: rgba(151, 174, 255, 0.5) !important;
        color: #ffffff !important;
    }

    /* Drawer Spacer & Footer */
    #dashboardScreen .dashboard-sidebar-spacer,
    #draftStudioScreen .dashboard-sidebar-spacer {
        display: block !important;
        flex: 1 1 auto !important;
        min-height: 20px !important;
    }
    #dashboardScreen .dashboard-sidebar-footer,
    #draftStudioScreen .dashboard-sidebar-footer {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 14px 10px 4px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: #aebbd4 !important;
        font-size: 11px !important;
    }

    /* Main Dashboard & Studio Content Layout on Mobile */
    #dashboardScreen .dashboard-content,
    #draftStudioScreen .draft-studio-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 72px 14px 44px !important;
        box-sizing: border-box !important;
    }
    #dashboardScreen .dashboard-topbar,
    #draftStudioScreen .dashboard-topbar {
        display: none !important;
    }
    #dashboardScreen .dashboard-header,
    #draftStudioScreen .draft-studio-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        margin-bottom: 18px !important;
        padding: 0 0 16px !important;
    }
    #dashboardScreen .dashboard-header h1 {
        font-size: clamp(20px, 5.5vw, 24px) !important;
    }
    #dashboardScreen .dashboard-header-actions {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }
    #dashboardScreen .dashboard-primary-action,
    #dashboardScreen .dashboard-secondary-action {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Dashboard Cards & Grids on Mobile */
    #dashboardScreen .domain-stats-grid,
    .studio-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    #dashboardScreen .domain-actions-grid,
    .draft-type-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    #dashboardScreen .engine-status-actions {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    #dashboardScreen .membership-validity-metrics {
        grid-template-columns: 1fr !important;
    }
    #dashboardScreen .membership-banner-actions {
        width: 100% !important;
        flex-direction: column !important;
    }
    #dashboardScreen .membership-banner-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }
    #dashboardScreen .recent-section {
        padding: 14px !important;
    }
}

/* Dark mode enhancements for Mobile Nav & Drawer */
[data-theme="dark"] #dashboardScreen .top-nav,
[data-theme="dark"] #draftStudioScreen .top-nav {
    background: rgba(15, 23, 42, 0.98) !important;
    border-bottom-color: #334155 !important;
}
[data-theme="dark"] .dashboard-brand-name {
    color: #f8fafc !important;
}
[data-theme="dark"] .dashboard-sidebar-toggle-btn {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .dashboard-sidebar-toggle-btn:hover {
    background: #27354f !important;
    border-color: #475569 !important;
}

#dashboardScreen .nav-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    margin-left: 0;
}

/* Internal workspace refinement: clearer module switching and readable cards. */
#dashboardScreen .dashboard-sidebar {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(206, 219, 255, .3) transparent;
}
#dashboardScreen .dashboard-domain-label {
    padding-top: 15px;
}
#dashboardScreen .dashboard-domain-switcher {
    display: grid;
    gap: 4px;
}
#dashboardScreen .dashboard-domain-link {
    width: 100%;
    min-height: 36px;
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #dbe4f7;
    background: transparent;
    text-align: left;
    font: 500 11px 'Outfit', sans-serif;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
#dashboardScreen .dashboard-domain-link > i {
    color: #aebfe8;
    font-size: 12px;
    text-align: center;
}
#dashboardScreen .dashboard-domain-link > span {
    min-width: 0;
}
#dashboardScreen .dashboard-domain-link > small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #94a7ce;
    font-size: 8px;
    font-weight: 650;
    white-space: nowrap;
}
#dashboardScreen .dashboard-domain-link:hover,
#dashboardScreen .dashboard-domain-link:focus-visible {
    color: #fff;
    background: rgba(255,255,255,.09);
    outline: none;
}
#dashboardScreen .dashboard-domain-link.is-active {
    color: #fff;
    border-color: rgba(151,174,255,.38);
    background: rgba(99,130,234,.28);
}
#dashboardScreen .dashboard-domain-link.is-active > i,
#dashboardScreen .dashboard-domain-link.is-active > small {
    color: #c8d5ff;
}
#dashboardScreen .dashboard-domain-link.is-locked > small {
    color: #f4d38a;
}

#dashboardScreen .dashboard-content {
    padding-top: 82px;
}
#dashboardScreen .dashboard-header {
    align-items: flex-end;
    padding-bottom: 16px;
}
#dashboardScreen .dashboard-header h1 {
    margin-bottom: 5px;
}
#dashboardScreen .kb-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #52627b;
    background: #fff;
    border: 1px solid #e5eaf2;
    border-radius: 11px;
    padding: 9px 12px;
}

#dashboardScreen #membershipValidityBanner {
    margin: 0 0 18px;
    padding: 17px 18px;
    overflow: hidden;
}
#dashboardScreen .membership-banner-header {
    margin: 0 0 13px;
    padding: 0 0 13px;
    border-bottom-color: #edf0f5;
}
#dashboardScreen .membership-icon-box {
    color: #4e68dc;
    background: #eef2ff;
    border-color: #dce4ff;
    box-shadow: none;
}
#dashboardScreen .membership-plan-heading {
    color: #1c2c4b;
    font-size: 15px;
}
#dashboardScreen .membership-subtext {
    color: #748198;
    font-size: 11px;
}
#dashboardScreen .membership-live-dot {
    flex: 0 0 8px;
}
#dashboardScreen .membership-quota-badge {
    color: #43536d;
    background: #f7f9fd;
    border-color: #e6ebf3;
    font-size: 10px;
}
#dashboardScreen #membershipDraftQuotaBadge {
    color: #43536d !important;
    background: #f7f9fd !important;
    border-color: #e6ebf3 !important;
}
#dashboardScreen .membership-quota-badge i {
    color: #516be0;
}
#dashboardScreen .membership-upgrade-btn {
    color: #3554cb !important;
    border-color: #d6def8 !important;
    background: #f5f7ff !important;
}
#dashboardScreen .membership-validity-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}
#dashboardScreen .membership-validity-metrics .validity-connector {
    display: none;
}
#dashboardScreen .validity-metric-card {
    min-width: 0;
    padding: 10px 12px;
    background: #f8faff;
    border-color: #e9edf5;
    box-shadow: none;
}
#dashboardScreen .validity-metric-icon {
    width: 33px;
    height: 33px;
    border-radius: 9px;
    font-size: 13px;
}
#dashboardScreen .validity-metric-label {
    color: #77849a;
    font-size: 9px;
}
#dashboardScreen .validity-metric-value {
    color: #263651;
    font-size: 13px;
    font-weight: 700;
}
#dashboardScreen .validity-metric-hint {
    color: #8a96a8;
    font-size: 9px;
}

#dashboardScreen .institutional-engine-toolbar {
    margin-bottom: 22px;
}
#dashboardScreen .engine-badge {
    color: #354864;
    font-size: 11px;
    font-weight: 700;
}
#dashboardScreen .engine-statutory-clock {
    color: #6d7c92;
    font-size: 10px;
}
#dashboardScreen .domain-section-header {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 7px 0 1px !important;
}
#dashboardScreen .domain-section-header > i {
    font-size: 14px;
}
#dashboardScreen .domain-section-header h3 {
    margin: 0;
    font-size: 16px;
    letter-spacing: -.02em;
}
#dashboardScreen .domain-stats-grid {
    align-items: stretch;
    margin-bottom: 8px;
}
#dashboardScreen .domain-stat-card {
    display: flex;
    align-items: center;
    gap: 13px;
}
#dashboardScreen .domain-stat-card .dsc-icon {
    flex: 0 0 42px;
    color: #4f66df;
}
#dashboardScreen .domain-stat-card .dsc-content {
    min-width: 0;
}
#dashboardScreen .domain-actions-grid {
    align-items: stretch;
}
#dashboardScreen .domain-action-card {
    min-width: 0;
    min-height: 82px;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 12px;
    row-gap: 3px;
    padding: 13px 14px !important;
    color: #253653;
    text-align: left;
}
#dashboardScreen .domain-action-card > .dac-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 42px;
    height: 42px;
    flex: none;
    margin: 0;
}
#dashboardScreen .domain-action-card > .dac-title {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    min-width: 0;
    margin: 0;
    color: #253653 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}
#dashboardScreen .domain-action-card > .dac-sub {
    grid-column: 2;
    grid-row: 2;
    display: block;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #7b879a;
    font-size: 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
#dashboardScreen .domain-action-card > div:first-child:not(.dac-icon) {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 3px 12px;
    min-width: 0;
}
#dashboardScreen .domain-action-card > div:first-child:not(.dac-icon) > .dac-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 42px;
    height: 42px;
    flex: none;
    margin: 0;
}
#dashboardScreen .domain-action-card > div:first-child:not(.dac-icon) > .dac-title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    color: #253653 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}
#dashboardScreen .domain-action-card > div:first-child:not(.dac-icon) > .dac-sub {
    grid-column: 2;
    grid-row: 2;
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #7b879a;
    font-size: 10px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
#dashboardScreen .domain-action-card > div:not(:first-child) {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 7px !important;
}
#dashboardScreen .domain-action-card:focus-visible {
    outline: 3px solid rgba(69,104,232,.34);
    outline-offset: 2px;
}
/* Keep quick-action icons in their own column at every dashboard width. */
#dashboardScreen .domain-actions-grid .domain-action-card {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    min-height: 88px;
    padding: 14px 16px !important;
}
#dashboardScreen .domain-actions-grid .domain-action-card > .dac-icon {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: center;
    margin: 0 !important;
}
#dashboardScreen .domain-actions-grid .domain-action-card > .dac-title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end;
    margin: 0 !important;
    line-height: 1.4;
}
#dashboardScreen .domain-actions-grid .domain-action-card > .dac-sub {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start;
    margin: 0 !important;
    overflow: visible;
    line-height: 1.45;
}
#dashboardScreen .recent-section {
    margin-top: 24px;
}
.case-history-search {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 48px;
    margin: 0 0 6px;
    padding: 0 14px;
    border: 1px solid #dbe3f0;
    border-radius: 11px;
    background: #f9fbff;
    color: #61708a;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.case-history-search:focus-within {
    border-color: #7e98e8;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(80, 108, 218, .12);
}
.case-history-search > i {
    color: #566fce;
    font-size: 15px;
}
.case-history-search input {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #233553;
    font: 500 13px 'Outfit', sans-serif;
}
.case-history-search input::placeholder { color: #8a96aa; }
.case-history-search button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: #edf1fa;
    color: #596a88;
    cursor: pointer;
}
.case-history-search button[hidden] { display: none; }
.case-history-search-hint {
    margin: 0 0 12px 2px;
    color: #8792a5;
    font-size: 11px;
}
.case-history-home-heading,
.case-history-results-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.case-history-home-heading h3,
.case-history-results-heading h2 {
    margin: 0;
    color: #203250;
    font-size: 16px;
    font-weight: 700;
}
.case-history-home-heading p {
    margin: 4px 0 0;
    color: #8692a6;
    font-size: 11px;
}
.case-history-page {
    width: min(1160px, calc(100% - 48px));
    margin: 0 auto;
    padding: 36px 0 60px;
}
.case-history-page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e2e8f1;
}
.case-history-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    color: #586fc4;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .09em;
}
.case-history-page-heading h1 {
    margin: 0;
    color: #1e2f4d;
    font-size: clamp(25px, 3vw, 34px);
    letter-spacing: -.035em;
}
.case-history-page-heading p {
    margin: 7px 0 0;
    color: #748199;
    font-size: 13px;
}
.case-history-results-heading {
    margin: 25px 0 11px;
}
.case-history-results-heading span {
    color: #7a879c;
    font-size: 12px;
    font-weight: 600;
}
#caseHistoryScreen .case-history-search { margin-bottom: 0; }
.case-history-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.case-history-filter-row label {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 0 11px;
    border: 1px solid #e1e7f0;
    border-radius: 9px;
    background: #fff;
    color: #77849a;
    font-size: 11px;
    font-weight: 600;
}
.case-history-filter-row select {
    max-width: 230px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #253653;
    font: 600 11px 'Outfit', sans-serif;
    cursor: pointer;
}
.history-top-nav .nav-brand > span:last-child { color: #7c879a; font-size: 12px; font-weight: 550; }
#caseHistoryScreen .case-history-search-hint { margin-bottom: 0; }
#caseHistoryScreen .recent-case-item {
    min-height: 76px;
    padding: 15px 17px;
    border: 1px solid #e2e8f1;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(31, 52, 82, .035);
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
#caseHistoryScreen .recent-case-item + .recent-case-item { margin-top: 9px; }
#caseHistoryScreen .recent-case-item:hover {
    transform: translateY(-1px);
    border-color: #bac8ed;
    box-shadow: 0 7px 18px rgba(31, 52, 82, .075);
}
#caseHistoryScreen .recent-case-info h4 { margin: 0; color: #223451; font-size: 14px; }
#caseHistoryScreen .recent-case-info p { line-height: 1.7; }
.recent-case-info[role="button"] { cursor: pointer; border-radius: 5px; }
.recent-case-info[role="button"]:focus-visible {
    outline: 3px solid rgba(78, 104, 220, .35);
    outline-offset: 2px;
}
.case-history-empty {
    display: flex;
    min-height: 230px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 28px 20px;
    border: 1px dashed #d9e1ee;
    border-radius: 13px;
    background: rgba(255, 255, 255, .72);
    color: #7c899d;
    text-align: center;
}
.case-history-empty-icon {
    display: grid;
    width: 48px;
    height: 48px;
    margin-bottom: 13px;
    place-items: center;
    border-radius: 14px;
    background: #eef2ff;
    color: #526bd7;
    font-size: 18px;
}
.case-history-empty h3 { margin: 0; color: #263752; font-size: 15px; }
.case-history-empty p { max-width: 410px; margin: 6px 0 15px; font-size: 12px; line-height: 1.6; }
[data-theme="dark"] #caseHistoryScreen .case-history-page-heading { border-color: #303b50; }
[data-theme="dark"] #caseHistoryScreen .case-history-page-heading h1,
[data-theme="dark"] #caseHistoryScreen .case-history-results-heading h2,
[data-theme="dark"] #caseHistoryScreen .case-history-home-heading h3,
[data-theme="dark"] #caseHistoryScreen .recent-case-info h4,
[data-theme="dark"] #caseHistoryScreen .case-history-empty h3 { color: #e5ebf6; }
[data-theme="dark"] #caseHistoryScreen .case-history-page-heading p,
[data-theme="dark"] #caseHistoryScreen .case-history-home-heading p { color: #a5b1c4; }
[data-theme="dark"] #caseHistoryScreen .case-history-filter-row label,
[data-theme="dark"] #caseHistoryScreen .recent-case-item,
[data-theme="dark"] #caseHistoryScreen .case-history-empty { color: #c5cede; border-color: #303b50; background: #182235; }
[data-theme="dark"] #caseHistoryScreen .case-history-filter-row select { color: #e5ebf6; }
[data-theme="dark"] #caseHistoryScreen .case-history-search { border-color: #303b50; background: #182235; }
[data-theme="dark"] #caseHistoryScreen .case-history-search input { color: #e5ebf6; }
[data-theme="dark"] #caseHistoryScreen .case-history-empty-icon { color: #b4c2ff; background: #26355c; }
@media (max-width: 640px) {
    .case-history-home-heading { align-items: flex-start; }
    .case-history-home-heading h3 { font-size: 14px; }
    .case-history-home-heading > button { flex: 0 0 auto; font-size: 10px; }
    .case-history-page { width: calc(100% - 28px); padding-top: 24px; }
    .case-history-page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 18px; }
    .case-history-page-heading > button { width: 100%; justify-content: center; }
    .case-history-filter-row { display: grid; grid-template-columns: 1fr; }
    .case-history-filter-row label { justify-content: space-between; }
    .case-history-filter-row select { max-width: 65%; }
    #caseHistoryScreen .recent-case-item { align-items: flex-start !important; gap: 10px; }
    #caseHistoryScreen .recent-case-item > div:last-child { gap: 5px !important; }
}
#dashboardScreen .recent-cases:empty::after {
    display: block;
    padding: 22px 10px;
    color: #8490a3;
    content: 'No matters yet. Start a new case or upload documents to begin.';
    text-align: center;
    font-size: 12px;
}
@media (max-width: 1100px) {
    #dashboardScreen .domain-actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 900px) {
    #dashboardScreen .dashboard-domain-link {
        grid-template-columns: 17px minmax(0, 1fr) auto;
    }
    #dashboardScreen .membership-banner-header {
        align-items: flex-start;
    }
}
@media (max-width: 640px) {
    #dashboardScreen .membership-validity-metrics {
        grid-template-columns: 1fr;
    }
    #dashboardScreen .membership-banner-actions {
        width: 100%;
    }
    #dashboardScreen .domain-stats-grid {
        grid-template-columns: 1fr;
    }
    #dashboardScreen .domain-actions-grid {
        grid-template-columns: 1fr;
    }
    #dashboardScreen .domain-action-card {
        min-height: 76px;
    }
}

#dashboardScreen .dashboard-header {
    align-items: center;
    gap: 20px;
    padding: 4px 0 22px;
}
#dashboardScreen .dashboard-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    color: #6a7ba0;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .13em;
}
#dashboardScreen .dashboard-eyebrow i {
    color: #5573d9;
    font-size: 10px;
}
#dashboardScreen .dashboard-header h1 {
    font-size: clamp(25px, 2.6vw, 35px);
    line-height: 1.15;
}
#dashboardScreen .dashboard-subtitle {
    max-width: 600px;
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.6;
}
#dashboardScreen .dashboard-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex: 0 0 auto;
}
#dashboardScreen .dashboard-primary-action,
#dashboardScreen .dashboard-secondary-action {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 14px;
    border-radius: 10px;
    font: 650 11px 'Outfit', sans-serif;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
#dashboardScreen .dashboard-primary-action {
    color: #fff;
    border: 1px solid #3159d8;
    background: linear-gradient(135deg, #426ce9, #3155cf);
    box-shadow: 0 7px 17px rgba(49,85,207,.19);
}
#dashboardScreen .dashboard-primary-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(49,85,207,.24);
}
#dashboardScreen .dashboard-primary-action > i:first-child {
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 6px;
    background: rgba(255,255,255,.16);
    font-size: 9px;
}
#dashboardScreen .dashboard-action-arrow {
    margin-left: 4px;
    font-size: 9px;
    opacity: .8;
}
#dashboardScreen .dashboard-secondary-action {
    color: #455873;
    border: 1px solid #dfe5ef;
    background: #fff;
    box-shadow: 0 3px 10px rgba(34,53,82,.035);
}
#dashboardScreen .dashboard-secondary-action > i {
    color: #526ddd;
    font-size: 12px;
}
#dashboardScreen .dashboard-secondary-action:hover {
    border-color: #bdcbed;
    background: #f9faff;
}
#dashboardScreen .dashboard-primary-action:focus-visible,
#dashboardScreen .dashboard-secondary-action:focus-visible {
    outline: 3px solid rgba(69,104,232,.3);
    outline-offset: 2px;
}
@media (max-width: 1050px) {
    #dashboardScreen .dashboard-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    #dashboardScreen .dashboard-header-actions {
        width: 100%;
        justify-content: flex-start;
    }
}
@media (max-width: 640px) {
    #dashboardScreen .dashboard-header {
        gap: 13px;
    }
    #dashboardScreen .dashboard-eyebrow {
        font-size: 8px;
    }
    #dashboardScreen .dashboard-header-actions {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: 7px;
    }
    #dashboardScreen .dashboard-primary-action,
    #dashboardScreen .dashboard-secondary-action {
        width: 100%;
        min-height: 42px;
        padding: 0 9px;
        gap: 6px;
        font-size: 10px;
    }
}

/* JudiQ enterprise landing experience */
.judiq-v2{--j2-ink:#101a2d;--j2-muted:#64738a;--j2-line:#e4eaf2;--j2-blue:#315de9;--j2-cyan:#46c9de;--j2-paper:#f7f9fc;position:relative;isolation:isolate;overflow:hidden;color:var(--j2-ink);background:radial-gradient(ellipse at 74% 0%,rgba(193,217,255,.32),transparent 30%),radial-gradient(ellipse at 2% 22%,rgba(216,234,255,.35),transparent 23%),#fbfcfe;font-family:'Outfit',sans-serif;font-size:15px;line-height:1.6}
.judiq-v2 *{box-sizing:border-box}.judiq-v2:before{position:absolute;z-index:-1;top:0;right:-11%;width:74%;height:1050px;content:"";opacity:.29;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg width='900' height='800' viewBox='0 0 900 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%238eb8dd' stroke-width='1'%3E%3Cpath d='M380-30C220 120 190 210 350 310s360 100 310 250-260 220-220 300'/%3E%3Cpath d='M420-40C260 110 230 200 390 300s360 100 310 250-260 220-220 300'/%3E%3Cpath d='M460-50C300 100 270 190 430 290s360 100 310 250-260 220-220 300'/%3E%3Cpath d='M500-60C340 90 310 180 470 280s360 100 310 250-260 220-220 300'/%3E%3Cpath d='M540-70C380 80 350 170 510 270s360 100 310 250-260 220-220 300'/%3E%3Cpath d='M580-80C420 70 390 160 550 260s360 100 310 250-260 220-220 300'/%3E%3C/g%3E%3C/svg%3E");background-size:cover}
#landingScreen:has(.judiq-v2){background:#fbfcfe}.landing-header:has(+ .judiq-v2){height:74px;padding:0 max(calc((100vw - 1260px)/2),32px);background:rgba(255,255,255,.84);backdrop-filter:blur(20px);border-bottom:1px solid rgba(220,228,240,.78);box-shadow:0 8px 25px rgba(20,39,67,.035)}.landing-header:has(+ .judiq-v2) .landing-header-brand{gap:12px}.landing-header:has(+ .judiq-v2) .header-brand-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:13px;color:#fff;background:linear-gradient(145deg,#4576f7,#2449c7);box-shadow:0 6px 14px rgba(49,93,233,.22)}.landing-header:has(+ .judiq-v2) .header-brand-title{font-family:'Cinzel',serif;font-size:17px;color:#172644;letter-spacing:.04em}.landing-header:has(+ .judiq-v2) .header-brand-accent{color:#3d68e8}.landing-header:has(+ .judiq-v2) .header-brand-corp{font-size:9px;letter-spacing:.11em;color:#8492a7}.landing-header:has(+ .judiq-v2) .landing-nav-links{gap:clamp(12px,1.8vw,27px);margin-left:auto;margin-right:clamp(18px,3vw,44px)}.landing-header:has(+ .judiq-v2) .landing-nav-links a{font-size:12px;font-weight:550;color:#53627a;white-space:nowrap;transition:color .2s}.landing-header:has(+ .judiq-v2) .landing-nav-links a:hover{color:#315de9}.landing-header:has(+ .judiq-v2) .landing-nav{gap:11px}.landing-header:has(+ .judiq-v2) #navLoginBtn{color:#34435c;border:1px solid #e3e9f2;background:#fff;border-radius:999px;padding:9px 17px;font-size:12px}.landing-header:has(+ .judiq-v2) #navRegisterBtn,.j2-button{border:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:11px;font-family:inherit;font-size:13px;font-weight:650;text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}.landing-header:has(+ .judiq-v2) #navRegisterBtn{background:#315de9;color:white;border-radius:999px;padding:11px 19px;box-shadow:0 6px 15px rgba(49,93,233,.2);font-size:12px}.landing-header:has(+ .judiq-v2) #navRegisterBtn:hover,.j2-button:hover{transform:translateY(-2px);box-shadow:0 10px 23px rgba(49,93,233,.22)}.landing-header:has(+ .judiq-v2) .theme-toggle-btn,.landing-header:has(+ .judiq-v2) .notif-bell-btn{display:none}
.j2-hero{width:min(1200px,calc(100% - 64px));min-height:625px;padding:96px 0 72px;margin:auto;display:grid;grid-template-columns:.93fr 1.07fr;gap:38px;align-items:center}.j2-hero-copy{padding:5px 0 0}.j2-eyebrow,.j2-kicker{display:inline-flex;align-items:center;gap:9px;color:#49627e;font-size:10px;letter-spacing:.13em;font-weight:700;text-transform:uppercase}.j2-eyebrow{padding:9px 13px;border:1px solid rgba(138,167,203,.33);background:rgba(255,255,255,.72);border-radius:999px;letter-spacing:.06em;font-size:9px;box-shadow:0 4px 15px rgba(32,57,91,.04)}.j2-pulse{width:7px;height:7px;border-radius:50%;background:#22b987;box-shadow:0 0 0 4px rgba(34,185,135,.12)}.j2-hero h1,.j2-section-head h2,.j2-persona-intro h2,.j2-enterprise h2,.j2-final-cta h2{font-family:'Cinzel',Georgia,serif;letter-spacing:-.055em;font-weight:700;color:#152542}.j2-hero h1{font-size:clamp(43px,5.2vw,68px);line-height:1.13;margin:24px 0 17px}.j2-hero h1 span,.j2-section h2 span,.j2-enterprise h2 span,.j2-final-cta h2 span{background:linear-gradient(110deg,#315de9 4%,#3485ea 60%,#37bcd0);color:transparent;background-clip:text;-webkit-background-clip:text;position:relative;white-space:nowrap}.j2-hero h1 span:after{position:absolute;content:"";height:5px;border-radius:5px;bottom:-7px;left:3px;right:4%;background:linear-gradient(90deg,#345fe9,#54d1cf);opacity:.6}.j2-lede{color:#67768e;font-size:16px;line-height:1.8;max-width:505px;margin:0 0 28px}.j2-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.j2-button{padding:14px 21px;min-height:48px}.j2-button-primary{color:#fff;background:linear-gradient(110deg,#3769f2,#3257dc);box-shadow:0 8px 18px rgba(50,88,221,.18)}.j2-button-primary:hover{background:linear-gradient(110deg,#2859e8,#2548cb)}.j2-button-primary i,.j2-button-outline i,.j2-persona-link i{transition:transform .2s}.j2-button-primary:hover i,.j2-button-outline:hover i,.j2-persona-link:hover i{transform:translateX(4px)}.j2-button-quiet{padding:9px 0;color:#3d506c;background:transparent}.j2-play-small{width:29px;height:29px;border:1px solid #dbe4f0;display:grid;place-items:center;border-radius:50%;font-size:10px;color:#345fe9;background:white}.j2-assurances{display:flex;gap:19px;flex-wrap:wrap;margin-top:25px;color:#687991;font-size:10px}.j2-assurances span{display:flex;align-items:center;gap:6px}.j2-assurances i{color:#3987a9;font-size:10px}.j2-corporate{display:flex;align-items:center;gap:11px;border-top:1px solid #e8edf4;margin-top:32px;padding-top:20px;color:#73829a;font-size:10px;line-height:1.5}.j2-corporate strong{color:#35445e;font-size:10px;font-weight:600}.j2-seal{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;color:#365fe3;background:#eaf0ff;font-size:14px}
.j2-product-wrap{position:relative;display:grid;place-items:center;min-height:455px}.j2-orbit{position:absolute;border:1px solid rgba(105,151,203,.14);border-radius:50%;pointer-events:none}.j2-orbit-one{width:540px;height:540px}.j2-orbit-two{width:460px;height:460px;border-style:dashed;border-color:rgba(105,151,203,.16)}.j2-product-card{position:relative;width:min(100%,516px);padding:22px 24px 15px;border:1px solid rgba(215,225,238,.92);border-radius:17px;background:rgba(255,255,255,.91);box-shadow:0 28px 75px rgba(30,56,95,.12),0 4px 14px rgba(30,56,95,.04);backdrop-filter:blur(18px);z-index:1}.j2-product-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.j2-product-label,.j2-muted{display:block;color:#8b9ab0;font-size:8px;font-weight:700;letter-spacing:.12em}.j2-case-title{font-family:'Cinzel',Georgia,serif;font-weight:700;font-size:16px;color:#202f49;margin-top:5px}.j2-live{font-size:7px;letter-spacing:.09em;color:#4b977c;background:#edf8f4;padding:6px 8px;border-radius:99px}.j2-live span{display:inline-block;width:5px;height:5px;border-radius:50%;background:#36bc8b;margin-right:5px}.j2-case-meta{display:flex;gap:17px;padding:11px 0 13px;color:#77869b;font-size:9px}.j2-case-meta i{color:#8b9ab0;margin-right:4px}.j2-product-tabs{display:flex;gap:22px;border-bottom:1px solid #edf0f5;color:#8995a7;font-size:9px}.j2-product-tabs span{padding:0 0 9px}.j2-product-tabs .active{color:#315de9;border-bottom:2px solid #315de9;font-weight:650}.j2-readiness{padding:15px 14px 12px;margin:15px 0 11px;border:1px solid #ebeff5;border-radius:11px;background:linear-gradient(135deg,#fbfcfe,#f7f9fd)}.j2-readiness-copy{display:flex;align-items:center;justify-content:space-between}.j2-readiness-copy strong{display:block;font-size:11px;color:#2f405d;margin-top:3px}.j2-score{font:700 26px 'Outfit',sans-serif;color:#315de9}.j2-score span{font:500 10px 'Outfit',sans-serif;color:#98a4b6}.j2-meter{height:5px;border-radius:8px;background:#e7edf5;margin-top:10px;overflow:hidden}.j2-meter span{display:block;width:76%;height:100%;border-radius:8px;background:linear-gradient(90deg,#4a7cf6,#55c7ce)}.j2-meter-notes{display:flex;justify-content:space-between;margin-top:6px;font-size:8px;color:#8998ad}.j2-issue{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:10px;background:#fffaf1;border:1px solid #f5ecd9}.j2-issue-icon{width:27px;height:27px;display:grid;place-items:center;border-radius:8px;background:#fff1d4;color:#ce8a17;font-size:11px}.j2-issue div{flex:1}.j2-issue strong{display:block;font-size:9px;color:#4f4837}.j2-issue small{font-size:8px;color:#978969}.j2-issue>i{font-size:9px;color:#b6a87e}.j2-timeline{padding:15px 1px 8px}.j2-timeline-heading{display:flex;justify-content:space-between;color:#8a98aa;font-size:8px;letter-spacing:.09em;font-weight:700}.j2-timeline-heading a{color:#466bd2;text-decoration:none;letter-spacing:0;text-transform:none}.j2-timeline-items{position:relative;margin:13px 0 0 3px;border-left:1px solid #e0e7f0;display:grid;gap:12px}.j2-time-item{position:relative;display:flex;align-items:center;padding-left:14px;color:#57667d;font-size:8px}.j2-time-item time{margin-left:auto;color:#8996a9;font:9px 'Outfit',sans-serif}.j2-dot{position:absolute;left:-4px;width:7px;height:7px;background:#4775e9;border:2px solid #e8efff;border-radius:50%}.j2-dot-review{background:#e3a635;border-color:#fff0cf}.j2-amber{color:#c38b2a!important}.j2-product-foot{border-top:1px solid #edf0f4;padding-top:11px;margin-top:4px;color:#8795a9;font-size:8px}.j2-product-foot i{color:#4b9e85;margin-right:5px}.j2-float-note{position:absolute;z-index:2;right:-3px;bottom:34px;display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid #e5eaf2;border-radius:12px;background:rgba(255,255,255,.95);box-shadow:0 12px 30px rgba(31,55,88,.12)}.j2-float-note>span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:#3564e7;background:#eff3ff}.j2-float-note div strong,.j2-float-note div small{display:block}.j2-float-note div strong{font-size:9px;color:#31415c}.j2-float-note div small{font-size:8px;color:#8a97a9}.j2-float-note>i{font-size:12px;color:#49ae86;margin-left:3px}
.j2-trust-row{width:min(1200px,calc(100% - 64px));margin:0 auto;padding:19px 22px;border:1px solid #e5ebf3;border-radius:13px;background:rgba(255,255,255,.75);display:grid;grid-template-columns:repeat(4,1fr);align-items:center;text-align:center;box-shadow:0 8px 25px rgba(27,47,76,.035)}.j2-trust-row div{padding:5px 8px;color:#53627b;font-size:10px;font-weight:550}.j2-trust-row i{color:#4e77cf;margin-right:7px}
.j2-section{width:min(1120px,calc(100% - 64px));margin:0 auto;padding:100px 0}.j2-section-head{text-align:center;margin:0 auto 42px;max-width:640px}.j2-section-head h2,.j2-persona-intro h2,.j2-enterprise h2{font-size:clamp(32px,4vw,46px);line-height:1.23;margin:13px 0 12px}.j2-section-head p,.j2-persona-intro>p,.j2-enterprise-copy>p{font-size:13px;line-height:1.85;color:#718098;max-width:570px;margin:0 auto}.j2-compare{display:grid;grid-template-columns:1fr 40px 1fr;align-items:center;gap:19px}.j2-compare-card{padding:29px 31px;border:1px solid #e7ebf1;border-radius:15px;background:rgba(255,255,255,.85);box-shadow:0 12px 35px rgba(28,49,79,.04)}.j2-compare-card-good{border-color:#cfdfdf;background:linear-gradient(130deg,#fff,#f4fbfa)}.j2-card-label{font-size:9px;letter-spacing:.14em;font-weight:700;color:#92a0b2}.j2-compare-card-good .j2-card-label{color:#3f9b88}.j2-compare-card h3{font-family:'Cinzel',Georgia,serif;font-size:18px;margin:12px 0 19px;color:#263652}.j2-compare-card ul,.j2-persona-panel ul,.j2-plan ul{padding:0;margin:0;list-style:none;display:grid;gap:13px}.j2-compare-card li{font-size:11px;color:#718097;display:flex;align-items:center;gap:10px}.j2-compare-card li i{color:#c47a76}.j2-compare-card-good li i{color:#35a388}.j2-compare-arrow{width:37px;height:37px;border:1px solid #e1e7f0;border-radius:50%;background:#fff;color:#5b77c0;display:grid;place-items:center;font-size:12px}.j2-feature-section{width:min(1200px,calc(100% - 64px));padding-top:30px}.j2-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.j2-feature-card{position:relative;padding:25px 24px 23px;border:1px solid #e6ebf3;border-radius:14px;background:rgba(255,255,255,.79);min-height:198px;transition:transform .2s,box-shadow .2s,border .2s}.j2-feature-card:hover{transform:translateY(-4px);border-color:#cedaf4;box-shadow:0 17px 38px rgba(31,54,91,.09)}.j2-feature-icon{display:grid;place-items:center;width:37px;height:37px;border-radius:11px;background:#edf2ff;color:#4169df;font-size:15px}.j2-cyan{background:#eaf8fb;color:#2698ad}.j2-gold{background:#fff5e6;color:#ca8b2f}.j2-violet{background:#f3efff;color:#8063d4}.j2-rose{background:#fff0f0;color:#d66a76}.j2-green{background:#eaf7f1;color:#3c9c78}.j2-feature-no{position:absolute;right:22px;top:22px;color:#dce3ed;font:13px 'Outfit',sans-serif;letter-spacing:.09em}.j2-feature-card h3{font-family:'Cinzel',Georgia,serif;font-size:15px;color:#263652;margin:16px 0 6px}.j2-feature-card p{font-size:10px;color:#738199;line-height:1.7;margin:0 0 12px;max-width:290px}.j2-feature-card>a,.j2-persona-link{font-size:10px;font-weight:600;color:#4169d6;text-decoration:none}.j2-feature-card>a i{margin-left:4px;transition:transform .2s}.j2-feature-card>a:hover i{transform:translateX(3px)}
.j2-persona-section{width:min(1120px,calc(100% - 64px));display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:85px;padding-top:80px}.j2-persona-intro h2{font-size:39px}.j2-persona-intro>p{margin:0 0 23px;max-width:420px}.j2-persona-tabs{display:grid;gap:7px}.j2-persona-tabs button{display:flex;align-items:center;gap:12px;padding:13px 14px;text-align:left;border:1px solid transparent;border-radius:10px;color:#6c7a90;background:transparent;font:550 11px 'Outfit',sans-serif;cursor:pointer;transition:all .2s}.j2-persona-tabs button i{width:17px;color:#7f91aa}.j2-persona-tabs button.active{border-color:#e0e7f0;background:#fff;color:#273851;box-shadow:0 6px 18px rgba(35,56,87,.06)}.j2-persona-tabs button.active i{color:#3868e8}.j2-persona-panel{position:relative;overflow:hidden;min-height:380px;padding:29px;border:1px solid #e3e9f1;border-radius:17px;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(246,249,254,.92));box-shadow:0 20px 50px rgba(32,56,90,.075)}.j2-persona-panel-top{display:flex;align-items:center;gap:11px}.j2-persona-icon{display:grid;place-items:center;width:33px;height:33px;border-radius:10px;background:#eaf0ff;color:#426de4}.j2-persona-panel .j2-kicker{font-size:8px}.j2-persona-panel h3{max-width:355px;font-family:'Cinzel',Georgia,serif;font-size:19px;line-height:1.4;color:#24354e;margin:17px 0 8px}.j2-persona-panel>p{max-width:363px;color:#748198;font-size:10px;line-height:1.75;margin:0 0 14px}.j2-persona-panel ul{gap:9px;margin-bottom:17px}.j2-persona-panel li{color:#607088;font-size:9px;display:flex;gap:8px;align-items:center}.j2-persona-panel li i{color:#3aa588}.j2-persona-visual{position:absolute;width:179px;right:25px;bottom:25px;padding:13px 12px;border:1px solid #e6ebf3;border-radius:10px;background:rgba(255,255,255,.95);box-shadow:0 9px 24px rgba(30,53,86,.055)}.j2-persona-visual-label{display:flex;justify-content:space-between;color:#9aa6b6;font-size:7px;font-weight:700;letter-spacing:.1em}.j2-persona-visual>div:not(.j2-persona-mini-meter){display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:#7c8aa0;font-size:8px}.j2-persona-visual strong{color:#2e4260;font:700 18px 'Outfit',sans-serif}.j2-persona-mini-meter{height:4px;margin:8px 0;background:#e9eef6;border-radius:8px}.j2-persona-mini-meter span{display:block;width:73%;height:100%;border-radius:8px;background:linear-gradient(90deg,#4d7bf1,#51c5cf)}.j2-persona-visual small{font-size:7px;color:#929eaf}.j2-persona-spark{display:block;border-top:1px solid #edf0f5;padding-top:9px;margin-top:9px;color:#7589b0;font-size:7px;letter-spacing:.08em}.j2-persona-spark i{color:#5087ce;margin-right:4px}
.j2-workflow-section{padding-top:75px}.j2-workflow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.j2-workflow-grid article{position:relative;padding:22px 19px 19px;border-top:1px solid #dfe6ef}.j2-workflow-grid article>span{position:absolute;right:13px;top:19px;color:#c3ccd9;font:11px 'Outfit',sans-serif}.j2-workflow-grid article>i{color:#4770de;font-size:17px}.j2-workflow-grid h3{font-family:'Cinzel',Georgia,serif;font-size:13px;margin:12px 0 5px;color:#2c3d57}.j2-workflow-grid p{font-size:9px;line-height:1.75;color:#7e8ba0;margin:0}
.j2-enterprise{width:min(1120px,calc(100% - 64px));margin:6px auto 30px;padding:53px 58px;display:grid;grid-template-columns:1fr .9fr;align-items:center;gap:60px;border:1px solid #e1e8f1;border-radius:19px;background:linear-gradient(112deg,rgba(239,245,255,.9),rgba(248,250,253,.95) 61%,rgba(237,246,250,.9));box-shadow:0 18px 45px rgba(29,55,91,.045)}.j2-enterprise h2{font-size:37px;margin:14px 0}.j2-enterprise-copy>p{margin:0 0 22px;font-size:11px}.j2-button-outline{border:1px solid #dce5f1;color:#38567d;background:rgba(255,255,255,.82)}.j2-button-outline:hover{border-color:#aabde8;background:#fff}.j2-security-cards{display:grid;gap:10px}.j2-security-cards article{display:grid;grid-template-columns:34px 1fr 13px;align-items:center;gap:11px;padding:13px 14px;border:1px solid rgba(222,230,240,.9);border-radius:11px;background:rgba(255,255,255,.8)}.j2-security-cards article>span{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#edf3ff;color:#426de3;font-size:12px}.j2-security-cards strong{font-size:9px;color:#31425d}.j2-security-cards p{font-size:8px;color:#8491a4;margin:3px 0 0;line-height:1.5}.j2-sec-check{color:#45a889;font-size:11px}
.j2-pricing{padding-top:100px}.j2-plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:stretch}.j2-plan{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:23px 20px 19px;border:1px solid #e2e8f0;border-radius:14px;background:rgba(255,255,255,.89);box-shadow:0 10px 30px rgba(30,49,79,.045)}.j2-plan-popular{border:1.5px solid #5579e5;box-shadow:0 14px 38px rgba(53,94,210,.11);transform:translateY(-7px)}.j2-most-popular{position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:4px 12px;border-radius:99px;background:#3c65e8;color:white;font-size:7px;letter-spacing:.1em;font-weight:700;white-space:nowrap}.j2-plan-tag{color:#8391a4;font-size:7px;font-weight:700;letter-spacing:.11em}.j2-plan h3{font-family:'Cinzel',Georgia,serif;color:#273851;font-size:17px;margin:10px 0 4px}.j2-plan>p{color:#8190a4;font-size:9px;line-height:1.6;min-height:29px;margin:0 0 14px}.j2-plan-price{font-size:25px;color:#1e2e48;font-weight:700;letter-spacing:-.04em;white-space:nowrap}.j2-plan-price small{font-size:9px;color:#8390a3;font-weight:500;letter-spacing:0}.j2-plan-valid{min-height:32px;color:#7f8ca0;font-size:8px;padding:3px 0 13px}.j2-plan ul{gap:9px;padding:13px 0;margin:0 0 18px;border-top:1px solid #edf0f5;width:100%;flex:1}.j2-plan li{display:flex;align-items:flex-start;gap:7px;color:#68778d;font-size:8px}.j2-plan li i{color:#4ca78d;margin-top:2px;font-size:8px}.j2-plan .j2-button{width:100%;font-size:10px;min-height:40px;padding:10px 12px}.j2-custom-plan{display:flex;align-items:center;gap:15px;padding:17px 20px;margin-top:20px;border:1px solid #e2e8f0;border-radius:12px;background:rgba(255,255,255,.78)}.j2-custom-plan>span{width:35px;height:35px;display:grid;place-items:center;background:#eef2ff;color:#4a6bd0;border-radius:10px}.j2-custom-plan>div{flex:1}.j2-custom-plan strong{font-size:10px;color:#35445d}.j2-custom-plan p{font-size:8px;color:#8591a4;margin:3px 0 0}.j2-custom-plan>a{font-size:9px;color:#466bd2;text-decoration:none;font-weight:650}.j2-custom-plan>a i{margin-left:6px}.j2-plan-note{margin:16px auto 0;color:#8793a5;font-size:8px;text-align:center}.j2-plan-note i{margin-right:4px;color:#7288b2}
.j2-faq{display:grid;grid-template-columns:.72fr 1.28fr;gap:82px;align-items:start;padding-top:75px}.j2-faq-heading h2{font-family:'Cinzel',Georgia,serif;font-size:34px;line-height:1.25;color:#1d2d47;margin:12px 0}.j2-faq-heading p{font-size:10px;line-height:1.8;color:#7b899d}.j2-faq-heading>a{display:inline-flex;margin-top:13px;color:#466ad2;font-size:9px;font-weight:650;text-decoration:none}.j2-faq-heading>a i{margin:3px 0 0 7px}.j2-faq-list{border-top:1px solid #e5eaf1}.j2-faq-list details{border-bottom:1px solid #e5eaf1}.j2-faq-list summary{display:flex;justify-content:space-between;align-items:center;padding:16px 2px;color:#33445e;font-size:10px;font-weight:600;cursor:pointer;list-style:none}.j2-faq-list summary::-webkit-details-marker{display:none}.j2-faq-list summary i{color:#8c9bb0;font-size:9px;transition:transform .2s}.j2-faq-list details[open] summary i{transform:rotate(45deg);color:#4c70d5}.j2-faq-list details p{max-width:570px;margin:-4px 0 16px;color:#7c899b;font-size:9px;line-height:1.8}
.j2-final-cta{position:relative;overflow:hidden;text-align:center;width:min(1120px,calc(100% - 64px));margin:5px auto 70px;padding:61px 25px 53px;border-radius:19px;background:radial-gradient(ellipse at 84% 20%,rgba(92,149,241,.23),transparent 35%),radial-gradient(ellipse at 12% 112%,rgba(56,173,198,.15),transparent 35%),linear-gradient(125deg,#101d35,#182d4d 70%,#1a3552);box-shadow:0 22px 55px rgba(22,41,72,.16)}.j2-final-cta:before{position:absolute;inset:0;content:"";pointer-events:none;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg width='500' height='250' viewBox='0 0 500 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23adcaef' stroke-width='1'%3E%3Cpath d='M120 0C20 80 30 140 160 150S390 120 340 250'/%3E%3Cpath d='M150 0C50 80 60 140 190 150S420 120 370 250'/%3E%3Cpath d='M180 0C80 80 90 140 220 150S450 120 400 250'/%3E%3C/g%3E%3C/svg%3E");background-position:right center}.j2-final-cta>*{position:relative}.j2-final-cta .j2-kicker{color:#a2b5d3}.j2-final-cta h2{color:white;font-size:41px;line-height:1.2;margin:13px 0}.j2-final-cta h2 span{background:linear-gradient(110deg,#82a8ff,#73d8e1);background-clip:text;-webkit-background-clip:text}.j2-final-cta>p{color:#bdc9db;font-size:11px}.j2-final-cta>div{display:flex;justify-content:center;gap:11px;margin:20px 0}.j2-button-dark{color:#e1e8f4;border:1px solid rgba(209,224,246,.32);background:rgba(255,255,255,.065)}.j2-button-dark:hover{background:rgba(255,255,255,.13)}.j2-final-cta>small{color:#93a5c1;font-size:8px}.j2-footer{width:min(1200px,calc(100% - 64px));margin:auto;padding:0 0 33px;display:flex;align-items:center;gap:23px;flex-wrap:wrap;color:#7d899d}.j2-footer-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:#26364f}.j2-brand-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#eaf0ff;color:#3c63d8;font-size:12px}.j2-footer-brand strong{font:700 13px 'Cinzel',Georgia,serif;letter-spacing:.03em}.j2-footer-brand strong span{color:#476bda}.j2-footer>p{font-size:8px;margin-right:auto}.j2-footer>a:not(.j2-footer-brand){font-size:8px;color:#7a879a;text-decoration:none}.j2-footer>span{width:100%;border-top:1px solid #e8edf3;padding-top:15px;font-size:8px;color:#9aa5b5}
.j2-cookie{position:fixed;z-index:1003;bottom:19px;left:20px;display:flex;align-items:center;gap:9px;padding:10px 11px;border:1px solid rgba(218,226,237,.92);border-radius:999px;background:rgba(255,255,255,.92);backdrop-filter:blur(15px);box-shadow:0 6px 22px rgba(27,47,76,.09);color:#65748c;font-size:8px}.j2-cookie>i{color:#bb8741}.j2-cookie button{border:0;background:transparent;color:#94a0b0;cursor:pointer;font-size:9px;padding:2px}.j2-cookie.dismissed{display:none}.j2-support{position:fixed;z-index:1003;bottom:19px;right:20px;display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(255,255,255,.4);border-radius:50%;background:linear-gradient(145deg,#4875ef,#3155ce);box-shadow:0 8px 22px rgba(50,85,204,.31);color:white;text-decoration:none;transition:width .2s,border-radius .2s,transform .2s;overflow:hidden}.j2-support i{font-size:16px}.j2-support span{display:none;font-size:9px;font-weight:600;white-space:nowrap;margin-left:8px}.j2-support:hover{width:158px;border-radius:99px;display:flex;justify-content:center;transform:translateY(-2px)}.j2-support:hover span{display:inline}
.j2-modal{position:fixed;inset:0;z-index:1100;display:none;place-items:center;padding:20px;background:rgba(12,23,42,.66);backdrop-filter:blur(8px)}.j2-modal.open{display:grid}.j2-modal-screen{position:relative;display:grid;grid-template-columns:1fr 150px;align-items:center;gap:25px;width:min(660px,100%);min-height:330px;padding:40px;border:1px solid rgba(218,229,244,.3);border-radius:18px;color:#fff;background:radial-gradient(ellipse at 0 100%,rgba(57,126,197,.3),transparent 50%),linear-gradient(130deg,#15253f,#10192a);box-shadow:0 32px 90px rgba(0,0,0,.35)}.j2-modal-screen>div:nth-of-type(1){grid-column:1}.j2-play-large{grid-column:2;grid-row:1;display:grid;place-items:center;width:100px;height:100px;border:1px solid rgba(152,188,236,.43);border-radius:50%;color:#a8c7ff;font-size:25px;background:rgba(106,155,222,.12);box-shadow:0 0 0 15px rgba(118,163,226,.05),0 0 0 30px rgba(118,163,226,.035)}.j2-modal-screen .j2-kicker{color:#a8c0e3;font-size:8px}.j2-modal-screen h3{font:700 24px 'Cinzel',Georgia,serif;color:white;margin:11px 0}.j2-modal-screen p{color:#c1cede;font-size:10px;line-height:1.75;max-width:330px;margin:0 0 17px}.j2-tour-steps{grid-column:1/-1;display:flex;gap:18px;border-top:1px solid rgba(227,237,249,.14);padding-top:17px;color:#8294af;font-size:8px}.j2-tour-steps span.active{color:#c9ddff}.j2-modal-close{position:absolute;right:16px;top:14px;border:0;background:transparent;color:#aab8cc;cursor:pointer;font-size:17px}
@media(max-width:1050px){.landing-header:has(+ .judiq-v2){padding:0 22px}.landing-header:has(+ .judiq-v2) .landing-nav-links{gap:12px;margin-right:13px}.landing-header:has(+ .judiq-v2) .landing-nav-links a{font-size:10px}.j2-hero{width:calc(100% - 44px);gap:20px}.j2-hero h1{font-size:51px}.j2-product-card{padding:19px}.j2-float-note{right:-4px}.j2-plan-grid{grid-template-columns:repeat(2,1fr);gap:17px}.j2-plan-popular{transform:none}.j2-plan{min-height:290px}.j2-persona-section{gap:45px}}
@media(max-width:760px){.landing-header:has(+ .judiq-v2){height:65px;padding:0 18px}.landing-header:has(+ .judiq-v2) .landing-nav-links,.landing-header:has(+ .judiq-v2) #navLoginBtn{display:none}.landing-header:has(+ .judiq-v2) .landing-nav{margin-left:auto}.landing-header:has(+ .judiq-v2) #navRegisterBtn{display:none}.landing-header:has(+ .judiq-v2) .mobile-nav-toggle{display:flex;border:1px solid #e0e7f0;background:#fff;color:#334966}.j2-hero{grid-template-columns:1fr;width:calc(100% - 40px);padding:61px 0 40px;gap:23px;min-height:0}.j2-hero h1{font-size:clamp(42px,10vw,57px)}.j2-lede{font-size:14px}.j2-assurances{gap:10px 15px}.j2-product-wrap{min-height:400px}.j2-product-card{max-width:510px}.j2-float-note{right:1%;bottom:20px}.j2-orbit-one{width:430px;height:430px}.j2-orbit-two{width:365px;height:365px}.j2-trust-row{width:calc(100% - 40px);grid-template-columns:repeat(2,1fr);gap:8px;padding:14px 9px}.j2-trust-row div{font-size:9px}.j2-section{width:calc(100% - 40px);padding:72px 0}.j2-section-head{margin-bottom:30px}.j2-section-head h2,.j2-persona-intro h2{font-size:34px}.j2-compare{grid-template-columns:1fr;gap:10px}.j2-compare-arrow{margin:0 auto;transform:rotate(90deg)}.j2-compare-card{padding:23px}.j2-feature-section{width:calc(100% - 40px);padding-top:0}.j2-feature-grid{grid-template-columns:repeat(2,1fr);gap:10px}.j2-feature-card{padding:18px 15px;min-height:206px}.j2-feature-card h3{font-size:13px}.j2-feature-card p{font-size:9px}.j2-persona-section{grid-template-columns:1fr;gap:27px}.j2-persona-intro h2{font-size:35px}.j2-persona-tabs button{padding:11px}.j2-persona-panel{min-height:410px;padding:23px}.j2-persona-visual{width:156px;right:15px;bottom:17px}.j2-persona-panel h3,.j2-persona-panel>p,.j2-persona-panel ul{max-width:calc(100% - 1px)}.j2-workflow-grid{grid-template-columns:repeat(2,1fr);row-gap:10px}.j2-enterprise{width:calc(100% - 40px);grid-template-columns:1fr;padding:31px 23px;gap:25px}.j2-enterprise h2{font-size:32px}.j2-pricing{padding-top:70px}.j2-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.j2-plan{padding:19px 15px;min-height:300px}.j2-plan h3{font-size:15px}.j2-plan-price{font-size:21px}.j2-custom-plan{align-items:flex-start;flex-wrap:wrap}.j2-custom-plan>div{width:calc(100% - 60px);flex:auto}.j2-custom-plan>a{margin-left:50px}.j2-faq{grid-template-columns:1fr;gap:22px}.j2-final-cta{width:calc(100% - 40px);padding:48px 18px;margin-bottom:53px}.j2-final-cta h2{font-size:35px}.j2-footer{width:calc(100% - 40px);gap:14px}.j2-footer>p{width:100%;order:2}.j2-footer>span{order:3}.j2-cookie{bottom:12px;left:10px;max-width:calc(100% - 78px);font-size:7px;padding:9px}.j2-support{right:10px;bottom:12px;width:42px;height:42px}.j2-modal-screen{grid-template-columns:1fr;min-height:400px;padding:28px}.j2-play-large{grid-column:1;grid-row:1;width:72px;height:72px;font-size:19px}.j2-modal-screen>div:nth-of-type(1){grid-row:2}.j2-tour-steps{grid-row:3}}
@media(max-width:420px){.j2-eyebrow{font-size:7px}.j2-actions{gap:10px}.j2-button{font-size:11px;padding:12px 15px}.j2-product-card{padding:15px}.j2-product-tabs{gap:15px}.j2-case-meta{gap:10px;font-size:8px}.j2-float-note{transform:scale(.9);transform-origin:right bottom}.j2-feature-grid{grid-template-columns:1fr}.j2-feature-card{min-height:172px}.j2-persona-visual{position:relative;right:auto;bottom:auto;width:100%;margin-top:20px}.j2-persona-panel{min-height:0}.j2-persona-panel h3,.j2-persona-panel>p,.j2-persona-panel ul{max-width:100%}.j2-plan-grid{grid-template-columns:1fr}.j2-plan{min-height:0}.j2-plan-valid,.j2-plan>p{min-height:0}.j2-final-cta>div{flex-direction:column;align-items:center}.j2-final-cta>div>*{width:min(100%,240px)}}
@media(prefers-reduced-motion:reduce){.judiq-v2 *, .judiq-v2 *:before,.judiq-v2 *:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Public product scope and availability cards */
.j2-coverage{padding-top:66px}
.j2-coverage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.j2-coverage-card{padding:22px 21px;border:1px solid #e2e8f0;border-radius:14px;background:rgba(255,255,255,.86);box-shadow:0 9px 26px rgba(31,52,82,.04)}
.j2-coverage-primary{border-color:#cfdcf7;background:linear-gradient(145deg,#fff,#f4f7ff)}
.j2-coverage-limited{background:#fafbfc}
.j2-coverage-status{display:inline-flex;align-items:center;gap:6px;color:#687991;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.j2-coverage-primary .j2-coverage-status{color:#2d8b70}.j2-coverage-limited .j2-coverage-status{color:#9a7540}
.j2-coverage-card h3{margin:13px 0 7px;color:#263652;font:700 14px/1.4 'Cinzel',Georgia,serif}
.j2-coverage-card p{margin:0;color:#718097;font-size:10px;line-height:1.75}
.j2-score i{font-size:22px}
.j2-preview-divider{height:1px;margin:10px 0;background:#e9edf4}
.j2-toolkit-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:34px 0 12px}
.j2-toolkit-heading>p{margin:0;color:#8793a5;font-size:9px}
.j2-toolkit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.j2-toolkit-grid article{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:13px;border:1px solid #e5eaf1;border-radius:11px;background:rgba(255,255,255,.8)}
.j2-toolkit-grid article>span{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#edf2ff;color:#456cdb;font-size:12px}
.j2-toolkit-grid strong{display:block;color:#33445e;font-size:10px;font-weight:650}
.j2-toolkit-grid p{margin:4px 0 0;color:#7c899d;font-size:9px;line-height:1.6}
@media(max-width:760px){.j2-coverage-grid{grid-template-columns:1fr}.j2-coverage{padding-top:48px}}
@media(max-width:760px){.j2-toolkit-heading{align-items:flex-start;flex-direction:column;gap:4px}.j2-toolkit-grid{grid-template-columns:1fr}}

.j2-anchor{display:block;height:0;scroll-margin-top:95px}.j2-mobile-drawer{z-index:1200!important;position:fixed!important;top:0;right:0;bottom:0;left:auto!important;width:min(350px,88vw)!important;padding:22px!important;background:#fff!important;border-left:1px solid #e5ebf2;box-shadow:-18px 0 55px rgba(15,33,60,.16);transform:translateX(105%);transition:transform .25s ease}.j2-mobile-drawer.open{transform:translateX(0)}.j2-mobile-drawer .mobile-nav-drawer-header{display:flex;justify-content:space-between;align-items:center;padding:0 0 18px!important;border-bottom:1px solid #edf0f5}.j2-mobile-drawer .mobile-nav-drawer-header strong{font:700 15px 'Cinzel',Georgia,serif;color:#1d2d47}.j2-mobile-drawer .mobile-nav-drawer-header strong span{color:#416ae0}.j2-mobile-drawer .mobile-nav-close-btn{border:0;background:#f3f6fb;border-radius:50%;width:34px;height:34px;font-size:22px;color:#4b5f7b}.j2-mobile-drawer .mobile-nav-links{display:grid;gap:0;padding:13px 0}.j2-mobile-drawer .mobile-nav-links a{padding:13px 4px;border-bottom:1px solid #f0f2f6;color:#475a75;font-size:13px;text-decoration:none}.j2-mobile-drawer .mobile-nav-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.j2-mobile-drawer .mobile-nav-actions .btn{justify-content:center;border-radius:999px}.j2-mobile-backdrop{z-index:1199!important;position:fixed!important;inset:0;background:rgba(14,28,49,.42);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.j2-mobile-backdrop.open{opacity:1;visibility:visible}
.landing-header:has(+ .judiq-v2) .landing-nav-links>a[href="#"],.landing-header:has(+ .judiq-v2) .landing-nav-links>a[href="one-pager.html"],.landing-header:has(+ .judiq-v2) .landing-nav-links>a[href="client-portal.html"],.landing-header:has(+ .judiq-v2) .lang-toggle-btn,.landing-header:has(+ .judiq-v2) .notification-center-wrapper{display:none}
.landing-header:has(+ .judiq-v2){height:58px;padding:0 max(calc((100vw - 1024px)/2),24px);box-shadow:none}.landing-header:has(+ .judiq-v2) .header-brand-icon{width:32px;height:32px;border-radius:10px}.landing-header:has(+ .judiq-v2) .landing-nav-links{gap:clamp(10px,1.45vw,20px);margin-right:20px}.landing-header:has(+ .judiq-v2) .landing-nav-links a{font-size:11px}.landing-header:has(+ .judiq-v2) #navLoginBtn{padding:8px 14px}.landing-header:has(+ .judiq-v2) #navRegisterBtn{padding:9px 15px}.j2-ribbon{min-height:38px;width:100%;display:flex;justify-content:center;align-items:center;gap:11px;padding:6px 18px;background:#f1f5fb;border-bottom:1px solid #e7edf5;color:#65758e;font-size:10px}.j2-ribbon>span:first-child{color:#33445f;font-weight:650}.j2-ribbon>span:first-child i{color:#5578dc;margin-right:5px}.j2-ribbon>a{color:#365fd4;font-weight:650;text-decoration:none}.j2-ribbon>a i{font-size:8px;margin-left:3px;transition:transform .2s}.j2-ribbon>a:hover{text-decoration:underline}.j2-ribbon>a:hover i{transform:translateX(2px)}.j2-ribbon .j2-ribbon-portal{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid #dce5f3;border-radius:999px;background:#fff;color:#243b64;box-shadow:0 3px 10px rgba(31,52,82,.05);transition:background .18s,border-color .18s,transform .18s}.j2-ribbon .j2-ribbon-portal i{color:#4268dc}.j2-ribbon .j2-ribbon-portal:hover{background:#f4f7ff;border-color:#bdccef;text-decoration:none;transform:translateY(-1px)}
.j2-hero{width:min(1024px,calc(100% - 48px));min-height:0;padding:67px 0 51px;grid-template-columns:1fr;gap:27px}.j2-hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0}.j2-hero h1{font-size:clamp(46px,5.2vw,62px);line-height:1.08;margin:19px 0 15px}.j2-lede{max-width:640px;font-size:15px;line-height:1.7;margin-bottom:19px}.j2-actions{justify-content:center;gap:17px}.j2-assurances{justify-content:center;margin-top:17px}.j2-corporate{justify-content:center;margin-top:19px;padding-top:14px}.j2-product-wrap{min-height:455px;width:100%}.j2-product-card{width:min(100%,690px)}.j2-float-note{right:calc(50% - 370px);bottom:20px}.j2-product-wrap .j2-orbit-one{width:610px;height:610px}.j2-product-wrap .j2-orbit-two{width:520px;height:520px}.j2-section,.j2-persona-section,.j2-enterprise,.j2-final-cta{scroll-margin-top:80px}.j2-feature-section{width:min(1024px,calc(100% - 48px))}.j2-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.j2-feature-card{min-height:220px;padding:27px 28px}.j2-feature-card h3{font-size:17px}.j2-feature-card p{font-size:11px;max-width:380px}.j2-feature-icon{width:42px;height:42px;font-size:16px}.j2-feature-no{font-size:15px}.j2-final-cta{width:min(1024px,calc(100% - 48px))}.j2-footer{width:min(1024px,calc(100% - 48px))}.j2-trust-row{width:min(1024px,calc(100% - 48px))}.j2-section{width:min(1024px,calc(100% - 48px))}.j2-persona-section{width:min(1024px,calc(100% - 48px))}.j2-enterprise{width:min(1024px,calc(100% - 48px))}.j2-feature-card:nth-child(2),.j2-feature-card:nth-child(5){background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(241,246,255,.9))}.j2-feature-card:nth-child(3),.j2-feature-card:nth-child(6){background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(241,249,250,.9))}.judiq-v2 .j2-button:focus-visible,.landing-header:has(+ .judiq-v2) a:focus-visible,.landing-header:has(+ .judiq-v2) button:focus-visible{outline:3px solid rgba(49,93,233,.35);outline-offset:3px}.judiq-v2 main{padding-bottom:20px}.judiq-v2 .contact-section{width:min(1024px,calc(100% - 48px));margin:0 auto 66px;padding:0}.judiq-v2 .contact-info h2{font:700 34px/1.2 'Cinzel',Georgia,serif;color:#1e304d}.judiq-v2 .contact-card{background:rgba(255,255,255,.86);border-color:#e5eaf2}.judiq-v2 .contact-card a{color:#456bd5;font-weight:600;text-decoration:none}
@media(max-width:1050px){.j2-hero{width:calc(100% - 44px);padding-top:54px}.j2-float-note{right:max(5px,calc(50% - 350px))}.j2-product-wrap .j2-orbit-one{width:540px;height:540px}.j2-product-wrap .j2-orbit-two{width:460px;height:460px}}
@media(max-width:760px){.landing-header:has(+ .judiq-v2){height:58px}.j2-ribbon{gap:7px;font-size:8px;flex-wrap:wrap;min-height:36px}.j2-ribbon>span:nth-child(2){text-align:center}.j2-hero{width:calc(100% - 36px);padding:48px 0 38px;gap:16px}.j2-hero h1{font-size:clamp(40px,9vw,52px)}.j2-lede{font-size:13px}.j2-assurances{font-size:9px}.j2-product-wrap{min-height:385px}.j2-product-card{max-width:510px}.j2-float-note{right:1%;bottom:13px}.j2-product-wrap .j2-orbit-one{width:430px;height:430px}.j2-product-wrap .j2-orbit-two{width:365px;height:365px}.j2-feature-grid{grid-template-columns:1fr;gap:11px}.j2-feature-card{min-height:180px;padding:22px 21px}.j2-feature-card h3{font-size:15px}.j2-feature-card p{font-size:10px}.judiq-v2 .contact-section{width:calc(100% - 40px)}}
@media(max-width:420px){.j2-ribbon>span:nth-child(2){width:100%;order:3}.j2-ribbon>a{font-size:8px}.j2-hero h1{font-size:40px}.j2-feature-card{min-height:166px}}
body:has(#landingScreen:not(.hidden)) #coCounselToggleBtn{display:none!important}
body:has(#landingScreen:not(.hidden)) #voiceAssistantFab:not(.is-listening):not(.is-open){display:none!important}
#landingScreen:has(.judiq-v2) .corporate-head-bar{padding:4px 16px;min-height:30px;font-size:9px;box-shadow:none}#landingScreen:has(.judiq-v2) .corporate-head-container{max-width:1024px;justify-content:center}#landingScreen:has(.judiq-v2) .corp-head-left{justify-content:center;gap:0}#landingScreen:has(.judiq-v2) .corp-directors-label,#landingScreen:has(.judiq-v2) .corp-head-center,#landingScreen:has(.judiq-v2) .corp-head-right,#landingScreen:has(.judiq-v2) .corp-head-sep{display:none!important}#landingScreen:has(.judiq-v2) .corp-badge{padding:2px 9px;font-size:8px}
.landing-header:has(+ .judiq-v2) .landing-nav-links{display:none}.landing-header:has(+ .judiq-v2) #navRegisterBtn{display:none}.landing-header:has(+ .judiq-v2) .mobile-nav-toggle{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid #e1e8f1;border-radius:50%;background:rgba(255,255,255,.85);color:#31445f}.landing-header:has(+ .judiq-v2) .landing-nav{gap:12px}.landing-header:has(+ .judiq-v2) #navLoginBtn{border:0;background:transparent;color:#3a4b64;padding:8px 10px}.j2-hero{width:min(1360px,calc(100% - 96px));min-height:min(650px,calc(100vh - 124px));padding:38px 0 30px;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;align-items:stretch}.j2-hero-copy{align-items:flex-start;text-align:left;justify-content:center;max-width:550px}.j2-hero h1{font-size:clamp(40px,4.1vw,55px);max-width:540px;margin:20px 0 16px;line-height:1.09}.j2-lede{max-width:480px;font-size:15px;line-height:1.75}.j2-actions{justify-content:flex-start;gap:13px}.j2-assurances{justify-content:flex-start;gap:12px 17px}.j2-corporate{justify-content:flex-start;margin-top:24px}.j2-product-wrap{min-height:0;align-self:center}.j2-product-card{width:min(100%,680px);padding:25px 27px 17px}.j2-float-note{right:-3px;bottom:20px}.j2-product-wrap .j2-orbit-one{width:650px;height:650px}.j2-product-wrap .j2-orbit-two{width:555px;height:555px}.j2-trust-row,.j2-section,.j2-persona-section,.j2-enterprise,.j2-final-cta,.j2-footer{width:min(1344px,calc(100% - 96px))}.j2-feature-section{width:min(1344px,calc(100% - 96px))}.j2-feature-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.j2-feature-card{min-height:220px;padding:24px 22px}.j2-feature-card:nth-child(5),.j2-feature-card:nth-child(6){grid-column:span 2}.j2-feature-card h3{font-size:15px}.j2-feature-card p{font-size:10px}.j2-workflow-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:27px}.j2-workflow-heading .j2-section-head{text-align:left;margin:0;max-width:660px}.j2-workflow-heading .j2-section-head h2{margin-bottom:0}.j2-track-controls{display:flex;gap:8px;padding-bottom:4px}.j2-track-controls button{width:38px;height:38px;display:grid;place-items:center;border:1px solid #dfe6ef;border-radius:50%;background:#fff;color:#496995;cursor:pointer;transition:all .2s}.j2-track-controls button:hover{border-color:#aebfe9;background:#f5f8ff;color:#315de9;transform:translateY(-1px)}.j2-workflow-grid{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#cbd7e7 transparent;padding:3px 2px 14px}.j2-workflow-grid article{flex:0 0 calc(25% - 12px);min-width:220px;scroll-snap-align:start;border:1px solid #e3e9f1;border-radius:14px;background:rgba(255,255,255,.86);padding:23px 20px;min-height:172px;box-shadow:0 9px 24px rgba(31,52,82,.035)}.j2-footer{max-width:none;width:100%;padding:44px max(calc((100vw - 1344px)/2),48px) 24px;background:#101c31;color:#a9b7cb}.j2-footer-brand-row{max-width:1344px;margin:0 auto 27px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:22px;border-bottom:1px solid rgba(222,233,248,.15)}.j2-footer-brand-row>div>p{font-size:10px;color:#a1aec1;margin:8px 0 0}.j2-footer-brand{color:#f4f7fc}.j2-brand-icon{background:rgba(93,126,221,.2);color:#a9c0ff}.j2-footer-company{text-align:right;color:#9cacc2;font-size:9px;line-height:1.7}.j2-footer-grid{max-width:1344px;margin:0 auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px}.j2-footer-grid details{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.j2-footer-grid summary{list-style:none;color:#edf2fa;font-size:10px;font-weight:650;margin-bottom:4px;cursor:pointer}.j2-footer-grid summary::-webkit-details-marker{display:none}.j2-footer-grid summary:after{content:""}.j2-footer-grid a{color:#9cabc0;font-size:9px;line-height:1.55;text-decoration:none;transition:color .18s}.j2-footer-grid a:hover{color:#fff;text-decoration:underline}.j2-footer-bottom{max-width:1344px;margin:28px auto 0;padding-top:15px;border-top:1px solid rgba(222,233,248,.15);display:flex;justify-content:space-between;gap:20px;color:#8697af;font-size:8px}.j2-cookie{width:min(340px,calc(100vw - 24px));display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:13px 14px;border-radius:13px}.j2-cookie-copy{display:flex;align-items:flex-start;gap:9px}.j2-cookie-copy>i{margin-top:3px}.j2-cookie-copy strong,.j2-cookie-copy span{display:block}.j2-cookie-copy strong{font-size:9px;color:#3b4a60;margin-bottom:3px}.j2-cookie-copy span{font-size:8px;line-height:1.5;color:#6c7b90}.j2-cookie-copy a{color:#3c64d0;text-decoration:underline}.j2-cookie-actions{display:flex;align-items:center;gap:8px}.j2-cookie-actions button{font:600 8px 'Outfit',sans-serif;cursor:pointer}.j2-cookie-actions button:first-child{border:0;background:transparent;color:#8995a6;padding:3px}.j2-cookie-actions button:last-child{border:0;border-radius:999px;padding:7px 12px;color:white;background:#315de9}.j2-support{bottom:22px;right:22px;width:48px;height:48px}
@media(max-width:1050px){.j2-hero{width:calc(100% - 56px);grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:18px;padding-top:40px}.j2-hero h1{font-size:clamp(40px,5.2vw,52px)}.j2-product-wrap{min-height:485px}.j2-product-card{padding:20px}.j2-float-note{right:-2px}.j2-feature-section,.j2-trust-row,.j2-section,.j2-persona-section,.j2-enterprise,.j2-final-cta{width:calc(100% - 56px)}.j2-footer{padding-left:28px;padding-right:28px}.j2-footer-grid{gap:14px}.j2-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.j2-hero{width:calc(100% - 40px);min-height:0;grid-template-columns:1fr;gap:12px;padding:42px 0 35px}.j2-hero-copy{align-items:center;text-align:center;max-width:none}.j2-hero h1{font-size:clamp(40px,8.6vw,52px)}.j2-lede{font-size:13px}.j2-actions,.j2-assurances,.j2-corporate{justify-content:center}.j2-product-wrap{min-height:390px}.j2-product-card{max-width:510px}.j2-float-note{right:1%;bottom:11px}.j2-product-wrap .j2-orbit-one{width:430px;height:430px}.j2-product-wrap .j2-orbit-two{width:365px;height:365px}.j2-trust-row,.j2-feature-section,.j2-section,.j2-persona-section,.j2-enterprise,.j2-final-cta{width:calc(100% - 40px)}.j2-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.j2-feature-card{grid-column:span 1!important;min-height:194px;padding:19px 16px}.j2-feature-card h3{font-size:13px}.j2-feature-card p{font-size:9px}.j2-workflow-heading{align-items:flex-end}.j2-workflow-heading .j2-section-head{text-align:left}.j2-track-controls button{width:34px;height:34px}.j2-workflow-grid article{flex:0 0 78%;min-width:245px}.j2-footer{padding:35px 20px 20px}.j2-footer-brand-row{align-items:flex-start}.j2-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 20px}.j2-footer-grid details{padding:11px 0;border-bottom:1px solid rgba(222,233,248,.11)}.j2-footer-grid summary{display:flex;justify-content:space-between;align-items:center;width:100%;font-size:10px;margin:0}.j2-footer-grid summary:after{content:"+";color:#91a4bf;font-size:15px;font-weight:400}.j2-footer-grid details[open] summary:after{content:"−"}.j2-footer-grid details[open]>a{margin-top:7px}.j2-footer-bottom{flex-direction:column;gap:7px;margin-top:20px}.j2-cookie{left:12px;bottom:12px;width:min(320px,calc(100vw - 78px));padding:10px}.j2-support{right:12px;bottom:12px;width:44px;height:44px}}
@media(max-width:520px){.j2-ribbon{font-size:7px}.j2-ribbon>span:nth-child(2){width:auto;order:initial}.j2-hero{padding-top:35px}.j2-hero h1{font-size:39px}.j2-product-wrap{min-height:350px}.j2-product-card{padding:14px}.j2-product-top{gap:6px}.j2-live{font-size:6px}.j2-case-title{font-size:13px}.j2-case-meta{gap:9px;font-size:7px}.j2-product-tabs{gap:14px;font-size:8px}.j2-float-note{transform:scale(.88);transform-origin:right bottom}.j2-trust-row,.j2-feature-section,.j2-section,.j2-persona-section,.j2-enterprise,.j2-final-cta{width:calc(100% - 32px)}.j2-feature-grid{grid-template-columns:1fr}.j2-feature-card{min-height:165px;padding:20px}.j2-workflow-heading{align-items:center;gap:8px}.j2-workflow-heading .j2-section-head h2{font-size:27px}.j2-track-controls{gap:5px}.j2-track-controls button{width:30px;height:30px}.j2-workflow-grid article{flex-basis:88%;min-width:240px}.j2-footer-brand-row{display:block}.j2-footer-company{text-align:left;display:block;margin-top:13px}.j2-footer-grid{grid-template-columns:1fr}.j2-footer-bottom{font-size:7px}}

/* Final responsive polish for the JudiQ landing page. */
.landing-header:has(+ .judiq-v2) .landing-nav-links { display: none; }
.landing-header:has(+ .judiq-v2) #navRegisterBtn { display: none; }
.landing-header:has(+ .judiq-v2) .mobile-nav-toggle { display: flex; }
.j2-hero h1 { font-size: clamp(39px, 3.6vw, 52px); }
.j2-hero h1 span { white-space: nowrap; }

@media (min-width: 1101px) {
    .landing-header:has(+ .judiq-v2) .landing-nav-links { display: flex; align-items: center; gap: clamp(12px, 1.35vw, 20px); margin-left: auto; margin-right: clamp(15px, 2vw, 28px); }
    .landing-header:has(+ .judiq-v2) .landing-nav-links a { color: #53627a; font-size: 11px; font-weight: 550; white-space: nowrap; text-decoration: none; }
    .landing-header:has(+ .judiq-v2) .landing-nav-links a:hover { color: #315de9; }
    .landing-header:has(+ .judiq-v2) #navRegisterBtn { display: inline-flex; align-items: center; gap: 8px; }
    .landing-header:has(+ .judiq-v2) .mobile-nav-toggle { display: none; }
}
@media (max-width: 1100px) {
    .j2-hero { width: min(1024px, calc(100% - 48px)); min-height: 0; padding: 54px 0 42px; grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .j2-hero-copy { align-items: center; text-align: center; max-width: 100%; }
    .j2-hero h1 { font-size: clamp(42px, 5vw, 58px); }
    .j2-hero h1 span { white-space: normal; }
    .j2-lede { max-width: 640px; }
    .j2-actions, .j2-assurances, .j2-corporate { justify-content: center; }
    .j2-product-wrap { min-height: 0; padding: 8px 0 22px; }
    .j2-product-card { width: min(100%, 680px); }
    .j2-float-note { right: max(8px, calc(50% - 360px)); bottom: 17px; }
}
@media (max-width: 760px) {
    .j2-hero { width: calc(100% - 36px); padding: 42px 0 34px; gap: 18px; }
    .j2-hero h1 { font-size: clamp(38px, 8.8vw, 50px); }
    .j2-lede { font-size: 13px; }
    .j2-product-wrap { padding: 4px 0 16px; }
    .j2-product-card { width: min(100%, 560px); }
    .j2-product-wrap .j2-orbit-one { width: min(430px, 112vw); height: min(430px, 112vw); }
    .j2-product-wrap .j2-orbit-two { width: min(365px, 95vw); height: min(365px, 95vw); }
    .j2-float-note { right: 0; bottom: 8px; }
}
@media (max-width: 520px) {
    .j2-hero h1 { font-size: clamp(36px, 10vw, 42px); }
    .j2-hero h1 span { white-space: normal; }
    .j2-actions { width: 100%; gap: 12px; }
    .j2-actions .j2-button-primary { min-width: 170px; }
    .j2-actions .j2-button-quiet { font-size: 11px; }
    .j2-product-card { width: 100%; }
    .j2-float-note { transform: scale(.82); transform-origin: right bottom; }
}

/* Readability and disclosure layout refinements. */
.j2-section-head > p,
.j2-persona-intro > p,
.j2-enterprise-copy > p,
.j2-faq-heading > p {
    font-size: 14px;
    line-height: 1.75;
}
.j2-compare-card li,
.j2-persona-panel li,
.j2-plan li {
    font-size: 12px;
    line-height: 1.7;
}
.j2-feature-card h3 { font-size: 17px; }
.j2-feature-card p { font-size: 13px; line-height: 1.7; }
.j2-feature-card > a { font-size: 11px; }
.j2-workflow-grid article h3 { font-size: 15px; }
.j2-workflow-grid article p { font-size: 12px; line-height: 1.7; }
.j2-security-cards article strong { font-size: 12px; }
.j2-security-cards article p { font-size: 11px; line-height: 1.6; }
.j2-plan > p { font-size: 12px; line-height: 1.65; }
.j2-plan-valid { font-size: 11px; }
.j2-plan ul { width: 100%; }
.j2-plan li { font-size: 11px; }
.j2-plan .j2-button { font-size: 12px; }
.j2-plan-note { font-size: 10px; line-height: 1.6; }
.j2-custom-plan p { font-size: 12px; }
.j2-faq-list summary { font-size: 13px; }
.j2-faq-list details > p { font-size: 12px; line-height: 1.7; }
.j2-footer-brand-row > div > p { font-size: 12px; }
.j2-footer-company { font-size: 11px; }
.j2-footer-grid details { display: block; }
.j2-footer-grid details > a { display: block; margin-top: 8px; font-size: 11px; line-height: 1.6; }
.j2-footer-grid summary { display: block; font-size: 12px; }
.j2-footer-bottom { font-size: 10px; line-height: 1.6; }
.j2-trust-row div { font-size: 12px; }

@media (max-width: 760px) {
    .j2-section-head > p,
    .j2-persona-intro > p,
    .j2-enterprise-copy > p,
    .j2-faq-heading > p { font-size: 13px; }
    .j2-feature-card h3 { font-size: 15px; }
    .j2-feature-card p { font-size: 12px; }
    .j2-workflow-grid article p { font-size: 12px; }
    .j2-footer-grid details > a { margin-top: 7px; }
    .j2-footer-grid summary { display: flex; }
}

/* Persistent navigation, readable footer links, and accessible contact action. */
.landing-header:has(+ .judiq-v2) { position: sticky; top: 0; z-index: 1100; }
.j2-plan ul li { font-size: 11px; line-height: 1.65; }
.judiq-v2 #contactUsForm button[type="submit"] { color: #fff; background: linear-gradient(110deg, #3769f2, #3257dc); border: 0; }
/* Keep sticky navigation working while clipping horizontal decoration overflow. */
body, #app, .app-container, .landing-screen { overflow-x: clip !important; }
.judiq-v2 #contactUsForm button[type="submit"],
.judiq-v2 #contactUsForm button[type="submit"] .btn-text { color: #fff !important; }
.j2-footer-brand-row, .j2-footer-grid, .j2-footer-bottom { width: 100%; }

/* Make workflow navigation meaningful on desktop and tablet widths. */
.j2-workflow-grid { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.j2-workflow-grid::-webkit-scrollbar { display: none; }
.j2-workflow-grid article { flex: 0 0 calc(33.333% - 11px); min-width: 260px; }
@media (max-width: 1100px) and (min-width: 761px) {
    .j2-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .j2-feature-card:nth-child(5), .j2-feature-card:nth-child(6) { grid-column: span 1; }
    .j2-workflow-grid article { flex-basis: calc(50% - 8px); }
}
@media (max-width: 1240px) and (min-width: 1101px) {
    .j2-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
    .j2-hero h1 { font-size: clamp(38px, 3.5vw, 44px); }
}
@media (max-width: 760px) {
    .j2-workflow-grid article { flex-basis: 84%; min-width: 250px; }
}
@media (max-width: 520px) {
    .j2-workflow-grid article { flex-basis: 88%; min-width: 240px; }
}
.j2-footer-bottom { padding-right: 68px; }
@media (max-width: 760px) { .j2-footer-bottom { padding-right: 52px; } }

/* Larger type scale for comfortable reading across the landing page. */
.judiq-v2 { font-size: 17px; }
.landing-header:has(+ .judiq-v2) .landing-nav-links a { font-size: 14px; }
.landing-header:has(+ .judiq-v2) #navLoginBtn,
.landing-header:has(+ .judiq-v2) #navRegisterBtn { font-size: 14px; }
.j2-ribbon { font-size: 13px; }
.j2-eyebrow { font-size: 11px; }
.j2-kicker { font-size: 12px; }
.j2-lede { font-size: 19px; line-height: 1.72; max-width: 540px; }
.j2-assurances { font-size: 14px; line-height: 1.5; }
.j2-corporate,
.j2-corporate strong { font-size: 14px; }
.j2-trust-row div { font-size: 14px; }
.j2-button,
.landing-header:has(+ .judiq-v2) .j2-button { font-size: 15px; }
.j2-button-quiet { font-size: 15px; }
.j2-section-head > p,
.j2-persona-intro > p,
.j2-enterprise-copy > p,
.j2-faq-heading > p { font-size: 18px; line-height: 1.72; }
.j2-card-label { font-size: 12px; }
.j2-compare-card li,
.j2-persona-panel li { font-size: 15px; line-height: 1.65; }
.j2-feature-card h3 { font-size: 20px; }
.j2-feature-card p { font-size: 16px; line-height: 1.65; }
.j2-feature-card > a,
.j2-persona-link { font-size: 14px; }
.j2-persona-tabs button { font-size: 14px; }
.j2-persona-panel .j2-kicker { font-size: 11px; }
.j2-persona-panel > p { font-size: 15px; line-height: 1.7; }
.j2-workflow-grid article h3 { font-size: 18px; }
.j2-workflow-grid article p { font-size: 16px; line-height: 1.65; }
.j2-security-cards article strong { font-size: 15px; }
.j2-security-cards article p { font-size: 14px; line-height: 1.55; }
.j2-plan-tag { font-size: 11px; }
.j2-most-popular { font-size: 10px; }
.j2-plan > p { font-size: 15px; line-height: 1.6; }
.j2-plan-valid { font-size: 13px; }
.j2-plan li { font-size: 14px; line-height: 1.6; }
.j2-plan ul li { font-size: 14px; }
.j2-plan .j2-button { font-size: 14px; }
.j2-plan-note { font-size: 13px; line-height: 1.6; }
.j2-custom-plan strong,
.j2-custom-plan > a { font-size: 14px; }
.j2-custom-plan p { font-size: 14px; line-height: 1.55; }
.j2-faq-list summary { font-size: 17px; }
.j2-faq-list details > p { font-size: 16px; line-height: 1.7; }
.j2-footer-brand-row > div > p { font-size: 14px; }
.j2-footer-company { font-size: 13px; }
.j2-footer-grid summary { font-size: 14px; }
.j2-footer-grid details > a { font-size: 14px; line-height: 1.65; }
.j2-footer-bottom { font-size: 12px; line-height: 1.6; }
.j2-cookie-copy strong { font-size: 13px; }
.j2-cookie-copy span { font-size: 11px; line-height: 1.5; }
.j2-cookie-actions button { font-size: 12px; }

/* The product preview stays compact while its labels remain legible. */
.j2-product-label,
.j2-muted { font-size: 12px; }
.j2-case-title { font-size: 20px; }
.j2-live { font-size: 10px; }
.j2-case-meta,
.j2-product-tabs { font-size: 12px; }
.j2-readiness-copy strong { font-size: 14px; }
.j2-meter-notes { font-size: 11px; }
.j2-issue strong { font-size: 12px; }
.j2-issue small { font-size: 11px; }
.j2-timeline-heading { font-size: 11px; }
.j2-time-item { font-size: 12px; }
.j2-time-item time { font-size: 12px; }
.j2-product-foot { font-size: 12px; }
.j2-float-note div strong { font-size: 12px; }
.j2-float-note div small { font-size: 11px; }
.j2-lede,
.j2-section-head > p,
.j2-persona-intro > p,
.j2-enterprise-copy > p,
.j2-faq-heading > p,
.j2-feature-card p,
.j2-workflow-grid article p,
.j2-compare-card li,
.j2-plan > p,
.j2-plan li,
.j2-faq-list details > p { color: #53627a; }
.j2-card-label,
.j2-product-label,
.j2-muted,
.j2-timeline-heading,
.j2-meter-notes,
.j2-issue small,
.j2-time-item time,
.j2-product-foot,
.j2-float-note div small,
.j2-plan-valid,
.j2-plan-note { color: #64758c; }
.j2-pricing { padding-bottom: 32px; }
#plans .j2-plan-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;align-items:stretch}
#plans .j2-plan-grid>.j2-plan{grid-column:span 2}
#plans .j2-plan-grid>.j2-plan:nth-child(4){grid-column:2 / span 2}
#plans .j2-plan-grid>.j2-plan:nth-child(5){grid-column:4 / span 2}
#plans .j2-plan{padding:27px 25px 23px;min-height:0}
#plans .j2-plan-tag{font-size:11px}
#plans .j2-plan h3{font-size:23px}
#plans .j2-plan>p{font-size:14px;line-height:1.6;min-height:66px;margin-bottom:14px}
#plans .j2-plan-price{font-size:32px}
#plans .j2-plan-price small{font-size:13px}
#plans .j2-plan-valid{font-size:13px;min-height:42px}
#plans .j2-plan li{font-size:13px;line-height:1.5}
#plans .j2-plan li i{font-size:12px}
#plans .j2-plan .j2-button{font-size:13px;min-height:46px}
#plans .j2-most-popular{font-size:10px}
#plans .j2-plan-note{font-size:12px;line-height:1.6}
#plans .j2-custom-plan strong{font-size:15px}
#plans .j2-custom-plan p{font-size:13px;line-height:1.5}
#plans .j2-custom-plan>a{font-size:13px}
.j2-toolkit-heading{margin-top:44px;margin-bottom:16px}
.j2-toolkit-heading>.j2-kicker{font-size:14px;letter-spacing:.12em}
.j2-toolkit-heading>p{font-size:11px}
.j2-toolkit-grid{gap:12px}
.j2-toolkit-grid article{grid-template-columns:40px 1fr;gap:12px;padding:16px;border-radius:13px;min-height:84px}
.j2-toolkit-grid article>span{width:38px;height:38px;font-size:14px}
.j2-toolkit-grid strong{font-size:13px}
.j2-toolkit-grid p{font-size:11px;line-height:1.6}
@media(max-width:1050px){#plans .j2-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#plans .j2-plan-grid>.j2-plan,#plans .j2-plan-grid>.j2-plan:nth-child(4),#plans .j2-plan-grid>.j2-plan:nth-child(5){grid-column:auto}}
@media(max-width:760px){#plans .j2-plan-grid{grid-template-columns:1fr}#plans .j2-plan-grid>.j2-plan,#plans .j2-plan-grid>.j2-plan:nth-child(4),#plans .j2-plan-grid>.j2-plan:nth-child(5){grid-column:auto}}
@media(max-width:420px){#plans .j2-plan-grid{grid-template-columns:1fr}}
.j2-faq { padding-top: 32px; }
@media (min-width: 1101px) {
    /* Keep the source-linked callout above the preview instead of covering its last status. */
    .j2-float-note { left: 10px; right: auto; top: -34px; bottom: auto; gap: 8px; padding: 8px 10px; }
    .j2-float-note > span { width: 28px; height: 28px; }
}

@media (max-width: 1100px) and (min-width: 761px) {
    .landing-header:has(+ .judiq-v2) .landing-nav-links a { font-size: 11px; }
    .j2-hero { min-height: 0; padding-top: 58px; padding-bottom: 58px; }
    .j2-lede { font-size: 18px; }
    .j2-plan li,
    .j2-plan ul li { font-size: 15px; }
}
@media (max-width: 760px) {
    .j2-pricing { padding-bottom: 24px; }
    .j2-faq { padding-top: 28px; }
    .j2-ribbon { font-size: 11px; line-height: 1.45; }
    .j2-eyebrow { font-size: 10px; }
    .j2-kicker { font-size: 11px; }
    .j2-lede { font-size: 17px; }
    .j2-assurances { font-size: 12px; }
    .j2-corporate,
    .j2-corporate strong { font-size: 12px; }
    .j2-trust-row div { font-size: 13px; }
    .j2-section-head > p,
    .j2-persona-intro > p,
    .j2-enterprise-copy > p,
    .j2-faq-heading > p { font-size: 16px; }
    .j2-compare-card li,
    .j2-persona-panel li { font-size: 14px; }
    .j2-feature-card h3 { font-size: 18px; }
    .j2-feature-card p { font-size: 15px; }
    .j2-workflow-grid article h3 { font-size: 17px; }
    .j2-workflow-grid article p { font-size: 15px; }
    .j2-plan > p { font-size: 14px; }
    .j2-plan li,
    .j2-plan ul li { font-size: 14px; }
    .j2-footer-grid summary { font-size: 15px; }
    .j2-footer-grid details > a { font-size: 14px; }
    .j2-footer-bottom { font-size: 11px; }
    .j2-product-card { padding: 20px; }
    .j2-persona-visual { font-size: 12px; }
}
@media (max-width: 520px) {
    .j2-lede { font-size: 16px; }
    .j2-product-card { padding: 15px; }
    .j2-case-title { font-size: 15px; }
    .j2-case-meta { font-size: 11px; }
    .j2-product-tabs { font-size: 11px; }
    .j2-trust-row div { font-size: 12px; }
    .j2-cookie-copy span { font-size: 10px; }
}

/* A calmer, more balanced contact section with a shorter, easier-to-scan form. */
.judiq-v2 .contact-section {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: none;
    margin: 0 0 66px;
    scroll-margin-top: 72px;
    padding: clamp(54px, 6vw, 88px) 24px;
    overflow: hidden;
    border-top: 1px solid #e4ebf4;
    border-bottom: 1px solid #e4ebf4;
    background:
        radial-gradient(ellipse at 14% 14%, rgba(93, 137, 242, .11), transparent 36%),
        radial-gradient(ellipse at 88% 84%, rgba(83, 195, 200, .09), transparent 32%),
        linear-gradient(135deg, #f7f9fd 0%, #f1f5fb 52%, #f7fafc 100%);
}
.judiq-v2 .contact-grid {
    width: min(1180px, 100%);
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    align-items: start;
    gap: clamp(34px, 5vw, 72px);
}
.judiq-v2 .contact-info {
    justify-content: flex-start;
    padding-top: 20px;
}
.judiq-v2 .contact-info > .j2-kicker {
    margin-bottom: 8px;
}
.judiq-v2 .contact-info h2 {
    max-width: 520px;
    margin: 8px 0 14px;
    font: 700 clamp(31px, 2.7vw, 38px)/1.16 'Cinzel', Georgia, serif;
    letter-spacing: -.035em;
    color: #1e304d;
}
.judiq-v2 .contact-info p.contact-subtitle {
    max-width: 46ch;
    margin: 0 0 27px;
    color: #53647d;
    font-size: 17px;
    line-height: 1.75;
}
.judiq-v2 .contact-details {
    gap: 13px;
    margin: 0;
}
.judiq-v2 .contact-card {
    min-height: 78px;
    padding: 15px 17px;
    gap: 14px;
    border-radius: 15px;
    border-color: rgba(220, 229, 241, .92);
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 8px 22px rgba(35, 57, 91, .045);
    backdrop-filter: blur(12px);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.judiq-v2 .contact-card:hover {
    transform: translateY(-2px);
    border-color: #cbd8f1;
    box-shadow: 0 13px 28px rgba(35, 57, 91, .08);
}
.judiq-v2 .contact-card i {
    width: 44px;
    height: 44px;
    border-radius: 13px;
}
.judiq-v2 .contact-card div h4 {
    margin-bottom: 4px;
    color: #263852;
    font-size: 15px;
}
.judiq-v2 .contact-card div p {
    color: #5e6f87;
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.judiq-v2 .contact-card a {
    color: #3d63cf;
    text-decoration: none;
}
.judiq-v2 .contact-card a:hover { text-decoration: underline; }
.judiq-v2 .contact-form-container {
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid rgba(220, 229, 241, .96);
    border-radius: 22px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 24px 64px rgba(32, 54, 87, .09), 0 3px 12px rgba(32, 54, 87, .035);
    backdrop-filter: blur(18px);
}
.judiq-v2 .contact-form-heading { margin-bottom: 22px; }
.judiq-v2 .contact-form-eyebrow {
    color: #607695;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
}
.judiq-v2 .contact-form-heading h3 {
    margin: 8px 0 5px;
    color: #223550;
    font: 700 24px/1.25 'Cinzel', Georgia, serif;
    letter-spacing: -.025em;
}
.judiq-v2 .contact-form-heading p {
    margin: 0;
    color: #687991;
    font-size: 14px;
    line-height: 1.6;
}
.judiq-v2 #contactUsForm.contact-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px 15px;
}
.judiq-v2 #contactUsForm .form-group:nth-child(n + 3),
.judiq-v2 #contactUsForm > button,
.judiq-v2 #contactUsForm > .contact-form-assurance {
    grid-column: 1 / -1;
}
.judiq-v2 #contactUsForm .form-group { gap: 7px; }
.judiq-v2 #contactUsForm label {
    color: #334762;
    font-size: 13px;
    font-weight: 650;
}
.judiq-v2 #contactUsForm input,
.judiq-v2 #contactUsForm textarea {
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid #dce5f0;
    border-radius: 11px;
    background: #fbfcfe;
    color: #263852;
    font: 15px/1.5 'Outfit', Arial, sans-serif;
    box-shadow: inset 0 1px 2px rgba(32, 54, 87, .025);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.judiq-v2 #contactUsForm input::placeholder,
.judiq-v2 #contactUsForm textarea::placeholder { color: #9aa7b8; }
.judiq-v2 #contactUsForm input:focus,
.judiq-v2 #contactUsForm textarea:focus {
    border-color: #7897ed;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(70, 108, 222, .11);
}
.judiq-v2 #contactUsForm textarea {
    min-height: 116px;
    resize: vertical;
}
.judiq-v2 #contactUsForm button[type="submit"] {
    min-height: 54px;
    margin-top: 1px;
    border-radius: 13px;
    box-shadow: 0 10px 22px rgba(50, 88, 221, .2);
}
.judiq-v2 #contactUsForm button[type="submit"] i {
    margin-left: 9px;
    transition: transform .18s ease;
}
.judiq-v2 #contactUsForm button[type="submit"]:hover i { transform: translateX(4px); }
.judiq-v2 .contact-form-assurance {
    margin: -5px 0 0;
    color: #718198;
    font-size: 12px;
    line-height: 1.55;
    text-align: center;
}
.judiq-v2 .contact-form-assurance i { margin-right: 5px; color: #4b9e85; }

@media (max-width: 900px) {
    .judiq-v2 .contact-grid { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: 28px; }
    .judiq-v2 .contact-info h2 { font-size: clamp(30px, 4vw, 36px); }
    .judiq-v2 .contact-info p.contact-subtitle { font-size: 15px; }
}
@media (max-width: 760px) {
    .judiq-v2 .contact-section { padding: 48px 20px; }
    .judiq-v2 .contact-grid { width: min(560px, 100%); grid-template-columns: 1fr; gap: 28px; }
    .judiq-v2 .contact-info { padding-top: 0; }
    .judiq-v2 .contact-info h2 { max-width: 100%; font-size: clamp(31px, 7vw, 38px); }
    .judiq-v2 .contact-info p.contact-subtitle { max-width: 54ch; font-size: 16px; }
    .judiq-v2 .contact-form-container { padding: 24px; }
}
@media (max-width: 520px) {
    .judiq-v2 .contact-section { padding: 40px 16px; }
    .judiq-v2 .contact-form-container { padding: 21px 17px; border-radius: 18px; }
    .judiq-v2 #contactUsForm.contact-form { grid-template-columns: 1fr; gap: 15px; }
    .judiq-v2 #contactUsForm .form-group,
    .judiq-v2 #contactUsForm .form-group:nth-child(n + 3),
    .judiq-v2 #contactUsForm > button,
    .judiq-v2 #contactUsForm > .contact-form-assurance { grid-column: 1; }
}

/* Present the company details as a light, organized strip above the main nav. */
#landingScreen:has(.judiq-v2) .corporate-head-bar {
    padding: 10px clamp(18px, 4vw, 56px);
    color: #53647d;
    background: linear-gradient(105deg, #f5f8fe 0%, #edf3fb 55%, #f7f9fc 100%);
    border-bottom: 1px solid #dfe7f2;
    box-shadow: 0 2px 8px rgba(35, 57, 91, .035);
}
#landingScreen:has(.judiq-v2) .corporate-head-container {
    max-width: 1440px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "identity address" "contact contact";
    align-items: center;
    gap: 8px 24px;
}
#landingScreen:has(.judiq-v2) .corp-head-left {
    grid-area: identity;
    justify-content: flex-start;
    gap: 12px;
}
#landingScreen:has(.judiq-v2) .corp-head-center {
    grid-area: address;
    display: flex !important;
    justify-content: flex-end;
}
#landingScreen:has(.judiq-v2) .corp-head-right {
    grid-area: contact;
    display: flex !important;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding-left: 2px;
}
#landingScreen:has(.judiq-v2) .corp-badge {
    padding: 5px 11px;
    color: #304464;
    background: rgba(255, 255, 255, .82);
    border: 1px solid #dbe5f2;
    box-shadow: 0 2px 7px rgba(37, 60, 96, .045);
    font-size: 11px;
}
#landingScreen:has(.judiq-v2) .corp-badge i { color: #4b6fe2; }
#landingScreen:has(.judiq-v2) .corp-name-text { color: #304464; }
#landingScreen:has(.judiq-v2) .corp-directors-label {
    display: inline-flex !important;
    gap: 7px;
    color: #64758d;
    font-size: 12px;
}
#landingScreen:has(.judiq-v2) .corp-directors-label i,
#landingScreen:has(.judiq-v2) .corp-reg-address i { color: #4b6fe2; }
#landingScreen:has(.judiq-v2) .corp-directors-label strong { color: #334a6a; }
#landingScreen:has(.judiq-v2) .corp-head-sep {
    display: inline-flex !important;
    color: #c6d1e0;
}
#landingScreen:has(.judiq-v2) .corp-reg-address {
    color: #64758d;
    font-size: 12px;
}
#landingScreen:has(.judiq-v2) .corp-reg-address:hover { color: #3f5678; }
#landingScreen:has(.judiq-v2) .corp-contact-group { gap: 8px; }
#landingScreen:has(.judiq-v2) .corp-phone-pill {
    padding: 5px 10px;
    color: #247a67;
    background: #e8f6f1;
    border: 1px solid #cce9df;
    border-radius: 999px;
    font-size: 11px;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
#landingScreen:has(.judiq-v2) .corp-phone-pill i { color: #32977f; }
#landingScreen:has(.judiq-v2) .corp-phone-pill:hover {
    color: #17634f;
    background: #dcf2ea;
    border-color: #b4dfd1;
    box-shadow: 0 4px 10px rgba(37, 125, 102, .1);
}
#landingScreen:has(.judiq-v2) .corp-phone-sep { color: #b5c1d2; }
#landingScreen:has(.judiq-v2) .corp-email-link,
#landingScreen:has(.judiq-v2) .corp-email-link.hide-on-mobile {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    color: #4666c6;
    font-size: 12px;
}
#landingScreen:has(.judiq-v2) .corp-email-link i { color: #607be0; }
#landingScreen:has(.judiq-v2) .corp-email-link:hover { color: #2e50b0; }

@media (max-width: 980px) {
    #landingScreen:has(.judiq-v2) .corporate-head-container {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "identity" "address" "contact";
        gap: 8px;
    }
    #landingScreen:has(.judiq-v2) .corp-head-center { justify-content: flex-start; }
}
@media (max-width: 620px) {
    #landingScreen:has(.judiq-v2) .corporate-head-bar { padding: 10px 16px; }
    #landingScreen:has(.judiq-v2) .corp-head-left {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 7px 10px;
    }
    #landingScreen:has(.judiq-v2) .corp-badge { font-size: 10px; }
    #landingScreen:has(.judiq-v2) .corp-directors-label,
    #landingScreen:has(.judiq-v2) .corp-reg-address { font-size: 11px; }
    #landingScreen:has(.judiq-v2) .corp-head-right {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 7px 10px;
    }
    #landingScreen:has(.judiq-v2) .corp-contact-group { gap: 5px; }
    #landingScreen:has(.judiq-v2) .corp-phone-pill { padding: 5px 8px; font-size: 10px; }
    #landingScreen:has(.judiq-v2) .corp-email-link,
    #landingScreen:has(.judiq-v2) .corp-email-link.hide-on-mobile { font-size: 11px; }
}

/* ═════════════════════════════════════════════════════════════════════ */
/* ADVOCATE COURT CORRIDOR SUITE & PRACTITIONER TOOLS STYLING            */
/* ═════════════════════════════════════════════════════════════════════ */

.corridor-modal {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e293b;
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.corridor-btn-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-corridor-mode {
    border-color: #f59e0b !important;
    color: #d97706 !important;
    font-weight: 600;
}
.btn-corridor-mode:hover {
    background: rgba(245, 158, 11, 0.1) !important;
}

.btn-calculators {
    border-color: #06b6d4 !important;
    color: #0891b2 !important;
    font-weight: 600;
}
.btn-calculators:hover {
    background: rgba(6, 182, 212, 0.1) !important;
}

.btn-practice-roles {
    border-color: #a855f7 !important;
    color: #9333ea !important;
    font-weight: 600;
}
.btn-practice-roles:hover {
    background: rgba(168, 85, 247, 0.1) !important;
}

.cause-list-item-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.cause-list-item-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

.whatsapp-dispatch-btn {
    background-color: #25D366;
    color: #ffffff !important;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 0.85rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.85rem;
    transition: background 0.15s ease, transform 0.1s ease;
}

.whatsapp-dispatch-btn:hover {
    background-color: #1ebe5d;
    transform: translateY(-1px);
}

.corridor-touch-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    touch-action: manipulation;
}

/* Corridor Mobile Viewport Optimizations (max-width: 768px) */
@media (max-width: 768px) {
    .corridor-modal {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        padding: 1rem !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
    }

    .engine-status-actions {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }

    .engine-status-actions button {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    .cause-list-item-card {
        padding: 0.85rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PRACTICE SECTOR SWITCHER & OCR REQUIREMENTS AUDIT UI
   ═══════════════════════════════════════════════════════════════ */

.wizard-sector-switcher-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.95));
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    flex-wrap: wrap;
}

.sector-bar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sector-bar-label {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.wizard-sector-pills {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wizard-sector-pill {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    padding: 0.45rem 0.95rem;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.wizard-sector-pill:hover {
    border-color: #6366f1;
    color: #4f46e5;
    background: rgba(99, 102, 241, 0.04);
    transform: translateY(-1px);
}

.wizard-sector-pill.active {
    background: linear-gradient(135deg, #4f46e5, #4338ca);
    border-color: #4338ca;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(79, 70, 229, 0.35);
}

.wizard-sector-pill.active i {
    color: #ffffff;
}

/* OCR Case Identification & Requirements Audit Banner */
.di-case-identification-banner {
    background: linear-gradient(135deg, rgba(238, 242, 255, 0.85), rgba(245, 243, 255, 0.85));
    border: 1.5px solid rgba(99, 102, 241, 0.28);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.06);
}

.di-cib-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px dashed rgba(99, 102, 241, 0.2);
}

.di-cib-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.di-cib-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 3px 8px rgba(79, 70, 229, 0.3);
    flex-shrink: 0;
}

.di-cib-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6366f1;
    margin-bottom: 2px;
}

.di-cib-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #1e1b4b;
}

.di-cib-badges {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.di-sector-manual-override {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.di-override-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
}

.di-sector-select {
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    font-size: 0.8rem;
    font-weight: 600;
    background: #ffffff;
    color: #1e293b;
    outline: none;
    cursor: pointer;
}

.di-sector-select:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.di-cib-rationale {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-left: 3px solid #6366f1;
}

.di-cib-rationale-text {
    font-size: 0.85rem;
    color: #334155;
    line-height: 1.45;
}

.di-cib-keywords {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.di-keyword-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
}

.di-keyword-pill {
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
    padding: 1px 7px;
    border-radius: 4px;
}

.di-cib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.di-cib-col {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.di-cib-col-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #f1f5f9;
}

.di-cib-pct {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.di-check-group {
    margin-bottom: 0.75rem;
}

.di-check-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.di-check-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.di-tag--present {
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.1);
    color: #065f46;
    padding: 2px 7px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    text-transform: capitalize;
}

.di-missing-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.di-missing-card {
    background: rgba(254, 243, 199, 0.5);
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    padding: 0.45rem 0.65rem;
}

.di-missing-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: #92400e;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    gap: 4px;
}

.di-missing-reason {
    font-size: 0.72rem;
    color: #78350f;
    margin-top: 2px;
    line-height: 1.35;
}

.di-audit-all-clear {
    font-size: 0.8rem;
    color: #065f46;
    background: rgba(16, 185, 129, 0.08);
    padding: 0.6rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.di-cib-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(99, 102, 241, 0.2);
}

.di-cib-note {
    font-size: 0.8rem;
    color: #475569;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DRAFT STUDIO & DRAFT GENERATOR — 46 STATUTORY FORMATS & FILTER SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */
.draft-filter-toolbar {
    margin: 1.25rem 0 1.75rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.draft-search-wrapper {
    position: relative;
    width: 100%;
}

.draft-search-icon {
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.95rem;
    pointer-events: none;
}

.draft-search-input {
    width: 100%;
    padding: 0.85rem 2.8rem 0.85rem 2.75rem;
    border-radius: 12px;
    border: 1px solid rgba(203, 213, 225, 0.8);
    background: rgba(255, 255, 255, 0.85);
    font-size: 0.92rem;
    color: #1e293b;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: all 0.25s ease;
}

.draft-search-input:focus {
    outline: none;
    border-color: #6366f1;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.draft-search-clear-btn {
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.draft-search-clear-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.draft-category-pill-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding-bottom: 0.25rem;
}

.draft-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(203, 213, 225, 0.8);
    background: rgba(255, 255, 255, 0.7);
    color: #475569;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    user-select: none;
}

.draft-cat-pill:hover {
    border-color: #94a3b8;
    background: #ffffff;
    color: #1e293b;
    transform: translateY(-1px);
}

.draft-cat-pill.active {
    background: #1e293b;
    color: #ffffff;
    border-color: #1e293b;
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.15);
}

.draft-cat-pill.active i {
    color: #38bdf8 !important;
}

.draft-cat-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(148, 163, 184, 0.18);
    color: inherit;
}

.draft-cat-pill.active .draft-cat-count {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.draft-cat-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.draft-cat-universal {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.draft-cat-civil {
    background: rgba(2, 132, 199, 0.12);
    color: #0284c7;
}

.draft-cat-criminal {
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
}

.draft-cat-sarfaesi {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
}

.draft-cat-ni_act {
    background: rgba(14, 165, 233, 0.12);
    color: #0284c7;
}

.draft-cat-composite {
    background: rgba(124, 58, 237, 0.12);
    color: #7c3aed;
}

.draft-statutory-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(100, 116, 139, 0.08);
    color: #475569;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.draft-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1.5rem;
    background: rgba(248, 250, 252, 0.8);
    border: 2px dashed rgba(203, 213, 225, 0.8);
    border-radius: 16px;
}

.draft-empty-state i {
    font-size: 2.5rem;
    color: #94a3b8;
    margin-bottom: 0.75rem;
}

.draft-empty-state h3 {
    font-size: 1.15rem;
    color: #1e293b;
    margin-bottom: 0.35rem;
}

.draft-empty-state p {
    font-size: 0.88rem;
    color: #64748b;
    margin-bottom: 1.25rem;
}

/* Admin portal: match the main JudiQ workspace with calm glass surfaces. */
#adminPortalScreen {
    --admin-ink: #1d2d49;
    --admin-muted: #74829a;
    --admin-line: rgba(211, 221, 237, .82);
    min-height: 100vh;
    color: var(--admin-ink);
    background:
        radial-gradient(ellipse at 8% 0%, rgba(95, 126, 235, .10), transparent 34rem),
        radial-gradient(ellipse at 94% 12%, rgba(74, 184, 212, .09), transparent 32rem),
        #f4f7fc;
    font-family: 'Outfit', sans-serif;
}
#adminPortalScreen .admin-top-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 68px;
    padding: 10px clamp(18px, 4vw, 54px);
    background: rgba(255,255,255,.78) !important;
    border: 0;
    border-bottom: 1px solid rgba(214,223,238,.8);
    box-shadow: 0 8px 28px rgba(40,60,100,.07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
#adminPortalScreen .admin-top-nav .brand-title { color: #243654; }
#adminPortalScreen .admin-master-badge {
    color: #526bd2;
    background: rgba(91,113,221,.09);
    border-color: rgba(91,113,221,.18);
}
#adminPortalScreen .admin-top-nav .nav-actions { display:flex; align-items:center; gap:10px; }
#adminPortalScreen .admin-top-nav .nav-actions > div {
    color:#596983; font-size:12px; font-weight:600;
}
#adminPortalScreen .admin-nav-btn,
#adminPortalScreen .admin-nav-home-btn,
#adminPortalScreen .theme-toggle-btn {
    min-height:36px; border:1px solid #e1e7f1; border-radius:10px;
    color:#50617e; background:rgba(255,255,255,.82); box-shadow:0 3px 10px rgba(35,54,90,.04);
}
#adminPortalScreen .admin-nav-btn:hover,
#adminPortalScreen .admin-nav-home-btn:hover,
#adminPortalScreen .theme-toggle-btn:hover { color:#405ed0; border-color:#cbd6f5; background:#fff; }
#adminPortalScreen .admin-portal-container { max-width:1480px; margin:0 auto; padding:28px clamp(18px,4vw,54px) 56px; }
#adminPortalScreen .admin-header-card {
    position:relative; overflow:hidden; padding:30px 32px; margin:0 0 22px;
    border:1px solid rgba(255,255,255,.88); border-radius:22px;
    color:#243653;
    background:linear-gradient(120deg,rgba(255,255,255,.88),rgba(239,244,255,.76));
    box-shadow:0 16px 42px rgba(47,69,116,.09), inset 0 1px 0 #fff;
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
#adminPortalScreen .admin-header-card::after {
    content:""; position:absolute; width:310px; height:310px; right:-90px; top:-175px;
    border-radius:50%; background:radial-gradient(circle,rgba(108,130,239,.16),transparent 70%); pointer-events:none;
}
#adminPortalScreen .admin-header-card > div { position:relative; z-index:1; }
#adminPortalScreen .admin-badge-gov {
    color:#536bca; background:rgba(93,116,224,.09); border:1px solid rgba(93,116,224,.16);
    font-size:10px; letter-spacing:.09em;
}
#adminPortalScreen .admin-header-card h1 { margin:8px 0 6px; color:#1d2e4b; font-size:clamp(25px,3vw,34px); letter-spacing:-.035em; }
#adminPortalScreen .admin-header-card p { max-width:660px; margin:0; color:#71809a; font-size:13px; line-height:1.6; }
#adminPortalScreen .admin-header-card-actions { gap:9px; }
#adminPortalScreen .admin-header-card-actions .btn { min-height:38px; border-radius:10px; font-size:11px; box-shadow:0 5px 13px rgba(48,69,117,.08); }
#adminPortalScreen .admin-assign-btn { background:linear-gradient(135deg,#586fdf,#405ac8); box-shadow:0 6px 16px rgba(75,99,205,.23); }
#adminPortalScreen .admin-tab-nav {
    position:sticky; top:68px; z-index:80; gap:7px; margin:0 0 20px; padding:9px;
    border:1px solid rgba(218,226,240,.86); border-radius:15px;
    background:rgba(255,255,255,.76); box-shadow:0 8px 24px rgba(40,60,100,.055);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
#adminPortalScreen .admin-tab-btn {
    min-height:39px; padding:9px 14px; border:1px solid transparent; border-radius:10px;
    color:#64728b; background:transparent; font:600 11px 'Outfit',sans-serif;
}
#adminPortalScreen .admin-tab-btn:hover { color:#405fc8; background:#f1f4ff; border-color:#e6eaff; transform:none; }
#adminPortalScreen .admin-tab-btn.active {
    color:#fff !important; background:linear-gradient(135deg,#5a71dc,#4964ce) !important;
    border-color:transparent !important; box-shadow:0 5px 13px rgba(75,99,205,.22) !important;
}
#adminPortalScreen .admin-stats-grid { gap:14px; margin-bottom:18px; }
#adminPortalScreen .admin-stat-card,
#adminPortalScreen .admin-users-panel {
    border:1px solid rgba(255,255,255,.9); border-radius:17px;
    background:rgba(255,255,255,.78) !important;
    box-shadow:0 9px 28px rgba(40,60,100,.065), inset 0 1px 0 rgba(255,255,255,.95) !important;
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
#adminPortalScreen .admin-stat-card { padding:19px 20px; }
#adminPortalScreen .admin-stat-card::before { height:2px; opacity:.65; }
#adminPortalScreen .admin-stat-card:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(40,60,100,.10) !important; }
#adminPortalScreen .admin-users-panel { padding:22px; margin-bottom:16px; }
#adminPortalScreen .admin-data-table { border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid #e8edf5; border-radius:12px; }
#adminPortalScreen .admin-data-table thead th { color:#6b7890; background:#f5f7fc; font-size:10px; letter-spacing:.045em; }
#adminPortalScreen .admin-data-table tbody td { color:#43536e; border-top:1px solid #edf0f6; }
#adminPortalScreen .admin-data-table tbody tr:hover { background:rgba(239,243,255,.75) !important; }
#adminPortalScreen input:not([type=checkbox]),
#adminPortalScreen select,
#adminPortalScreen textarea {
    border-color:#e0e6f0; border-radius:9px; background:rgba(255,255,255,.88); color:#33445f;
}
#adminPortalScreen input:focus,
#adminPortalScreen select:focus,
#adminPortalScreen textarea:focus { outline:none; border-color:#9caceb; box-shadow:0 0 0 3px rgba(91,113,221,.12); }
#adminPortalScreen .admin-filter-pills-strip { gap:8px; }
#adminPortalScreen .admin-filter-pill { border-radius:999px; }

@media (max-width:760px) {
    #adminPortalScreen .admin-top-nav { position:relative; top:auto; flex-wrap:wrap; gap:10px; padding:10px 14px; }
    #adminPortalScreen .admin-top-nav .nav-brand { flex-wrap:wrap; gap:7px; }
    #adminPortalScreen .admin-top-nav .nav-actions { flex-wrap:wrap; justify-content:flex-end; }
    #adminPortalScreen .admin-portal-container { padding:18px 14px 36px; }
    #adminPortalScreen .admin-header-card { padding:21px; align-items:flex-start; }
    #adminPortalScreen .admin-tab-nav { position:relative; top:auto; }
    #adminPortalScreen .admin-users-panel { padding:15px; }
}
#adminPortalScreen .admin-tab-nav{display:flex;align-items:center;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#c5d0e6 transparent;-webkit-overflow-scrolling:touch}
#adminPortalScreen .admin-tab-btn{flex:0 0 auto;white-space:nowrap}
#adminPortalScreen .admin-header-card{display:flex;align-items:center;justify-content:space-between;gap:24px}
#adminPortalScreen .admin-header-card>div:first-child{min-width:0}
#adminPortalScreen .admin-header-card-actions{flex:0 0 auto;justify-content:flex-end}
#adminPortalScreen .admin-stat-card{min-width:0;position:relative;overflow:hidden}
#adminPortalScreen .admin-stat-card>div:nth-child(2){margin:12px 0 5px;color:#233653;font-size:clamp(26px,3vw,34px);font-weight:750;line-height:1.05;letter-spacing:-.04em}
#adminPortalScreen .admin-stat-card>div:last-child{color:#75839a;font-size:11px;line-height:1.5}
#adminPortalScreen .u-is-150{align-items:flex-start;gap:18px}
#adminPortalScreen .u-is-154{max-width:100%;justify-content:flex-end}
#adminPortalScreen .u-is-155{flex:0 1 270px;min-width:190px}
#adminPortalScreen .u-is-155 input{width:100%}
#adminPortalScreen .u-is-165{max-width:100%;overflow-x:auto;border:1px solid #e7ecf4;border-radius:12px;background:rgba(255,255,255,.65);overscroll-behavior-x:contain;scrollbar-width:thin}
#adminPortalScreen .admin-data-table{min-width:1080px;margin:0}
#adminPortalScreen .admin-data-table th{position:sticky;top:0;z-index:1;padding:12px 13px;text-align:left}
#adminPortalScreen .admin-data-table td{padding:12px 13px;vertical-align:middle;line-height:1.45}
#adminPortalScreen .admin-filter-pills-strip{min-width:0;overflow-x:auto;flex-wrap:nowrap;padding:12px 0 8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
#adminPortalScreen .admin-filter-pills-strip>*{flex:0 0 auto}
#adminPortalScreen .admin-plans-catalog-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))!important}
@media(max-width:900px){
 #adminPortalScreen .admin-portal-container{padding:22px 20px 40px}
 #adminPortalScreen .admin-header-card{align-items:flex-start;flex-direction:column;gap:16px;padding:24px}
 #adminPortalScreen .admin-header-card-actions{width:100%;justify-content:flex-start}
 #adminPortalScreen .admin-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 #adminPortalScreen .admin-top-nav{align-items:flex-start}
 #adminPortalScreen .admin-top-nav .nav-brand{width:100%;justify-content:space-between}
 #adminPortalScreen .admin-top-nav .nav-actions{width:100%;justify-content:flex-start}
 #adminPortalScreen .admin-header-card{padding:20px}
 #adminPortalScreen .admin-header-card-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
 #adminPortalScreen .admin-tab-nav{top:0;margin-bottom:14px}
 #adminPortalScreen .admin-tab-btn{padding:8px 11px}
 #adminPortalScreen .u-is-150{flex-direction:column}
 #adminPortalScreen .u-is-154{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
 #adminPortalScreen .u-is-155{grid-column:1/-1;min-width:0}
 #adminPortalScreen .u-is-154 button,#adminPortalScreen .u-is-154 select{width:100%;min-width:0;min-height:40px}
 #adminPortalScreen .admin-filter-pills-strip{margin-right:-15px;padding-right:15px}
 #adminPortalScreen .admin-users-panel{overflow:hidden}
}
@media(max-width:440px){
 #adminPortalScreen .admin-portal-container{padding:14px 10px 28px}
 #adminPortalScreen .admin-header-card{padding:17px;border-radius:16px}
 #adminPortalScreen .admin-header-card-actions{grid-template-columns:1fr}
 #adminPortalScreen .admin-header-card-actions .btn{width:100%;justify-content:center}
 #adminPortalScreen .admin-stats-grid{grid-template-columns:1fr;gap:10px}
 #adminPortalScreen .admin-users-panel{padding:12px}
 #adminPortalScreen .u-is-154{grid-template-columns:1fr}
 #adminPortalScreen .u-is-155{grid-column:auto}
}
@media (prefers-reduced-motion: reduce) {
    #adminPortalScreen *, #adminPortalScreen *::before, #adminPortalScreen *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
}
/* Per-matter Case Factbook */
.factbook-page{max-width:1320px}
.case-history-home-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.factbook-count{align-self:center;color:#64748b;font-size:13px;font-weight:650}
.factbook-case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.factbook-case-card,.factbook-overview-card{min-width:0;padding:22px;border:1px solid #e2e8f0;border-radius:16px;background:linear-gradient(145deg,#fff,#f9fbff);box-shadow:0 8px 24px rgba(31,52,82,.055)}
.factbook-case-head,.factbook-overview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.factbook-domain,.factbook-eyebrow{display:inline-flex;align-items:center;gap:7px;color:#4b65bb;font-size:10px;font-weight:750;letter-spacing:.1em;text-transform:uppercase}
.factbook-case-head h2,.factbook-overview-head h3{margin:8px 0 4px;color:#20324e;font-size:19px;line-height:1.3}
.factbook-case-head p,.factbook-overview-head p{margin:0;color:#78869b;font-size:12px;line-height:1.55}
.factbook-case-count{flex:0 0 auto;padding:6px 10px;border-radius:99px;background:#edf2ff;color:#4261be;font-size:11px;font-weight:700}
.factbook-facts-grid,.factbook-overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.factbook-fact,.factbook-overview-grid article{min-width:0;padding:11px 12px;border:1px solid #e9edf4;border-radius:11px;background:#fff}
.factbook-fact span,.factbook-overview-grid article span{display:block;margin-bottom:5px;color:#8995a8;font-size:10px;font-weight:650;letter-spacing:.04em;text-transform:uppercase}
.factbook-fact strong,.factbook-overview-grid article strong{display:block;overflow-wrap:anywhere;color:#2c3d58;font-size:13px;font-weight:600;line-height:1.45}
.factbook-fact small,.factbook-overview-grid article small{display:block;margin-top:6px;color:#91a0b3;font-size:10px}
.factbook-more-facts{margin-top:12px;border-top:1px solid #edf0f5;padding-top:10px}.factbook-more-facts summary{color:#4b65bb;font-size:12px;font-weight:650;cursor:pointer}.factbook-more-facts .factbook-facts-grid{margin-top:10px}
.factbook-case-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:13px;border-top:1px solid #edf0f5}
.factbook-case-actions>span{color:#76849a;font-size:11px}.factbook-case-actions>span i{margin-right:5px;color:#568a78}
.factbook-empty-hint{display:flex;align-items:flex-start;gap:9px;margin-top:15px;padding:13px;border-radius:10px;background:#f2f6fc;color:#718098;font-size:12px;line-height:1.55}.factbook-empty-hint i{margin-top:2px;color:#5370cb}
.factbook-overview-card{margin:0 0 18px;padding:20px}.factbook-overview-head{align-items:center}.factbook-overview-head h3{font-size:18px}.factbook-overview-head .btn{flex:0 0 auto}.factbook-overview-grid{margin-top:14px}
@media(max-width:850px){.factbook-case-grid{grid-template-columns:1fr}.factbook-page{width:calc(100% - 36px)}}
@media(max-width:560px){.factbook-case-card,.factbook-overview-card{padding:16px}.factbook-facts-grid,.factbook-overview-grid{grid-template-columns:1fr}.factbook-case-head h2{font-size:17px}.factbook-overview-head{align-items:flex-start;flex-direction:column}.factbook-case-actions{align-items:flex-start;flex-direction:column}}
@media(max-width:640px){.case-history-home-actions{justify-content:flex-end;gap:6px}.case-history-home-actions .btn{font-size:10px;padding:7px 9px}}

/* Shared screen polish: consistent content widths, readable controls and safe overflow. */
#caseWizardScreen,#resultsScreen,#draftScreen,#draftGeneratorScreen,#reportScreen{min-width:0;overflow-x:clip}
#caseWizardScreen>.top-nav,#resultsScreen>.top-nav,#draftScreen>.top-nav,#draftGeneratorScreen>.top-nav,#reportScreen>.top-nav{min-height:62px;padding:10px clamp(14px,3vw,30px)}
#caseWizardScreen .wizard-container{max-width:1060px;width:min(1060px,calc(100% - 40px));margin:26px auto 40px}
#caseWizardScreen .wizard-content{padding:clamp(20px,3vw,36px)}
#caseWizardScreen .wizard-demo-bar{align-items:flex-start!important;background:linear-gradient(135deg,#f7f9ff,#f4f8ff)!important;border-color:#dce5f7!important;padding:14px 16px!important}
#caseWizardScreen .wizard-demo-bar>div:first-child{color:#3c527b!important;font-size:12px!important}
#caseWizardScreen .wizard-demo-bar>div:last-child{gap:7px!important}
#caseWizardScreen .wizard-demo-bar .btn{min-height:35px;border-radius:9px;box-shadow:0 2px 6px rgba(42,67,114,.05)}
#caseWizardScreen .wizard-navigation{gap:9px;padding:12px clamp(16px,3vw,30px)}
#resultsScreen .top-nav{align-items:center}
#resultsScreen .nav-brand{min-width:0}
#resultsScreen .nav-actions{flex-wrap:nowrap;min-width:0;max-width:min(76vw,1040px);overflow-x:auto;padding:3px 2px 6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
#resultsScreen .nav-actions>*{flex:0 0 auto}
#resultsScreen .results-container{max-width:1380px;padding:18px clamp(14px,2.5vw,34px) 48px;overflow-x:clip}
#resultsScreen .results-tabs{top:70px;max-width:100%;margin-bottom:14px}
#resultsScreen .tab-button{min-height:42px;font-size:12px;padding:9px 13px}
#draftScreen .draft-container,#draftGeneratorScreen .draft-gen-container{width:min(1200px,calc(100% - 40px));margin:26px auto 48px;padding:0}
#draftScreen .draft-toolbar,#draftScreen .draft-editor,#draftScreen .draft-info{min-width:0}
#draftScreen .draft-editor{overflow:hidden;border-radius:14px}
#draftScreen .draft-textarea{box-sizing:border-box;width:100%;min-height:min(68vh,760px);line-height:1.75}
/* draftStudioScreen now uses full dashboard workspace layout */
#reportScreen .report-container,#reportScreen .report-content{max-width:1200px;width:calc(100% - 40px);margin-right:auto;margin-left:auto;box-sizing:border-box}
#sharedReportScreen{overflow-x:clip}
#sharedReportScreen>.top-nav{gap:12px;padding:12px clamp(14px,3vw,28px)!important}
#sharedReportScreen>.top-nav .nav-brand{min-width:0}
#sharedReportScreen>.top-nav .nav-brand>span:nth-child(2){line-height:1.4}
#sharedReportScreen>.top-nav .nav-actions{flex:0 0 auto}
#sharedReportScreen>div[style*="max-width:980px"]{width:calc(100% - 40px);box-sizing:border-box}
#sharedReportScreen .formal-report-paper{overflow-wrap:anywhere}
@media(max-width:760px){
 #caseWizardScreen .wizard-container,#draftScreen .draft-container,#draftGeneratorScreen .draft-gen-container,#reportScreen .report-container,#reportScreen .report-content{width:calc(100% - 24px);margin-top:14px;margin-bottom:28px}
 #caseWizardScreen .wizard-content{padding:20px 16px}
 #caseWizardScreen .wizard-demo-bar{flex-direction:column;gap:10px!important}
 #caseWizardScreen .wizard-demo-bar>div:last-child{width:100%}
 #caseWizardScreen .wizard-demo-bar .btn{flex:1 1 auto}
 #caseWizardScreen .wizard-navigation{position:sticky;bottom:0;display:flex;flex-wrap:wrap;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);box-shadow:0 -5px 18px rgba(31,52,82,.06)}
 #caseWizardScreen .wizard-navigation>.btn{flex:1 1 calc(50% - 8px);min-width:120px;min-height:44px;font-size:12px}
 #caseWizardScreen .wizard-step-indicator{flex:1 0 100%}
 #resultsScreen .top-nav{align-items:flex-start}
 #resultsScreen .nav-actions{width:100%;max-width:100%;order:2;margin:0 -2px}
 #resultsScreen .results-container{padding:10px 12px 32px;gap:14px}
 #resultsScreen .results-tabs{top:8px;border-radius:11px;padding:6px}
 #resultsScreen .tab-button{min-height:39px;padding:8px 11px;font-size:11px}
 #draftScreen .draft-textarea{min-height:58vh;padding:16px;font-size:14px}
 #sharedReportScreen>.top-nav .nav-brand>span:nth-child(2){max-width:230px;font-size:9px!important;line-height:1.4}
 #sharedReportScreen>.top-nav .nav-actions{width:100%;justify-content:flex-start}
 #sharedReportScreen>div[style*="max-width:980px"]{width:calc(100% - 20px);margin-top:14px!important;padding:0!important}
 #sharedReportScreen .formal-report-paper{padding:20px 16px!important;border-radius:12px!important}
}
@media(max-width:420px){#caseWizardScreen .wizard-navigation>.btn{min-width:0;font-size:11px}#draftScreen .draft-header h2,#draftGeneratorScreen .draft-gen-header h2{font-size:24px}}

/* Keep the newer workspace surfaces legible when the user selects dark theme. */
[data-theme="dark"] #caseFactbookScreen .factbook-case-card,
[data-theme="dark"] #caseFactbookScreen .factbook-overview-card{border-color:#303b50;background:linear-gradient(145deg,#1c293e,#182235);box-shadow:0 8px 24px rgba(0,0,0,.18)}
[data-theme="dark"] #caseFactbookScreen .factbook-case-head h2,
[data-theme="dark"] #caseFactbookScreen .factbook-overview-head h3,
[data-theme="dark"] #caseFactbookScreen .factbook-fact strong,
[data-theme="dark"] #caseFactbookScreen .factbook-overview-grid article strong{color:#e5ebf6}
[data-theme="dark"] #caseFactbookScreen .factbook-case-head p,
[data-theme="dark"] #caseFactbookScreen .factbook-overview-head p,
[data-theme="dark"] #caseFactbookScreen .factbook-case-actions>span{color:#a5b1c4}
[data-theme="dark"] #caseFactbookScreen .factbook-fact,
[data-theme="dark"] #caseFactbookScreen .factbook-overview-grid article{border-color:#303b50;background:#202d42}
[data-theme="dark"] #caseFactbookScreen .factbook-empty-hint{background:#202d42;color:#c5cede}
[data-theme="dark"] #caseFactbookScreen .factbook-more-facts{border-color:#303b50}
[data-theme="dark"] #caseFactbookScreen .factbook-count{color:#a5b1c4}
[data-theme="dark"] #adminPortalScreen{--admin-ink:#e5ebf6;--admin-muted:#a5b1c4;--admin-line:#303b50;background:radial-gradient(ellipse at 8% 0%,rgba(95,126,235,.12),transparent 34rem),#111a2a}
[data-theme="dark"] #adminPortalScreen .admin-top-nav{background:rgba(22,33,52,.88)!important;border-bottom-color:#303b50}
[data-theme="dark"] #adminPortalScreen .admin-top-nav .brand-title,
[data-theme="dark"] #adminPortalScreen .admin-header-card h1{color:#e5ebf6}
[data-theme="dark"] #adminPortalScreen .admin-top-nav .nav-actions>div,
[data-theme="dark"] #adminPortalScreen .admin-header-card p{color:#a5b1c4}
[data-theme="dark"] #adminPortalScreen .admin-header-card{border-color:#303b50;background:linear-gradient(120deg,rgba(28,41,62,.96),rgba(24,34,53,.92));box-shadow:0 16px 42px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04)}
[data-theme="dark"] #adminPortalScreen .admin-tab-nav{border-color:#303b50;background:rgba(24,34,53,.88)}
[data-theme="dark"] #adminPortalScreen .admin-tab-btn{color:#b4c0d3}
[data-theme="dark"] #adminPortalScreen .admin-tab-btn:hover{color:#dce5f5;background:#263550;border-color:#394b68}
[data-theme="dark"] #adminPortalScreen .admin-stat-card,
[data-theme="dark"] #adminPortalScreen .admin-users-panel{border-color:#303b50;background:rgba(24,34,53,.9)!important;box-shadow:0 9px 28px rgba(0,0,0,.2)!important}
[data-theme="dark"] #adminPortalScreen .admin-stat-card>div:nth-child(2){color:#edf2fb}
[data-theme="dark"] #adminPortalScreen .admin-stat-card>div:last-child{color:#a5b1c4}
[data-theme="dark"] #adminPortalScreen .u-is-165{border-color:#303b50;background:rgba(18,27,43,.72)}
[data-theme="dark"] #adminPortalScreen .admin-data-table{border-color:#303b50}
[data-theme="dark"] #adminPortalScreen .admin-data-table thead th{color:#a5b1c4;background:#202d42}
[data-theme="dark"] #adminPortalScreen .admin-data-table tbody td{color:#c5cede;border-color:#303b50}
[data-theme="dark"] #adminPortalScreen input:not([type=checkbox]),
[data-theme="dark"] #adminPortalScreen select,
[data-theme="dark"] #adminPortalScreen textarea{border-color:#3a4860;background:#182235;color:#e5ebf6}

/* Keep landing plan cards aligned across rows and screen sizes. */
#plans .j2-plan-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:20px}
#plans .j2-plan-grid>.j2-plan,
#plans .j2-plan-grid>.j2-plan:nth-child(4),
#plans .j2-plan-grid>.j2-plan:nth-child(5){grid-column:auto}
#plans .j2-plan{height:100%;min-width:0;transform:none;display:flex;flex-direction:column}
#plans .j2-plan-popular{transform:none}
#plans .j2-plan>p{min-height:66px}
#plans .j2-plan-valid{min-height:42px}
#plans .j2-plan ul{flex:1 1 auto}
@media(max-width:1050px){#plans .j2-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){#plans .j2-plan-grid{grid-template-columns:minmax(0,1fr);gap:16px}#plans .j2-plan-grid>.j2-plan,#plans .j2-plan-grid>.j2-plan:nth-child(4),#plans .j2-plan-grid>.j2-plan:nth-child(5){grid-column:auto;width:100%}#plans .j2-plan>p{min-height:0}}

/* Landing page audit refinements: clearer hierarchy and honest previews. */
#landingScreen:has(.judiq-v2) .corporate-head-bar { display:none !important; }
#landingScreen .j2-ribbon { display:none; }
#landingScreen .j2-hero { min-height:560px; }
#landingScreen .j2-hero h1 { max-width:620px; }
#landingScreen .j2-assurances { display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:22px; }
#landingScreen .j2-product-wrap { min-height:430px; }
#landingScreen .j2-product-card { width:min(100%,470px); }
#landingScreen .j2-product-tabs { gap:9px; border:0; pointer-events:none; }
#landingScreen .j2-product-tabs span,
#landingScreen .j2-product-tabs .active { padding:5px 9px; border:1px solid #e8edf5; border-radius:999px; color:#78869b; background:#f8faff; font-size:10px; font-weight:550; }
#landingScreen .j2-product-tabs .active { color:#4967cf; border-color:#dfe6fb; background:#eef2ff; }
#landingScreen .j2-case-meta { flex-wrap:wrap; row-gap:4px; }
#landingScreen #plans .j2-plan-note { max-width:900px; margin:18px auto 0; text-align:center; color:#66758d; }
#landingScreen #plans .j2-plan-note:first-of-type { margin-top:22px; }
@media(max-width:760px) {
    #landingScreen .j2-hero { min-height:0; }
    #landingScreen .j2-product-wrap { min-height:0; }
}


/* =============================================================== */
/* DRAFT STUDIO: DASHBOARD-GRADE WORKSPACE STYLING                 */
/* =============================================================== */

#draftStudioScreen {
    --dash-ink: #172746;
    --dash-blue: #4568e8;
    --dash-muted: #71809a;
    --dash-line: #e5eaf2;
    min-height: 100vh;
    background: #f6f8fc;
    color: var(--dash-ink);
    font-family: 'Outfit', sans-serif;
    position: relative;
    overflow-x: hidden;
}

#draftStudioScreen .top-nav {
    position: fixed;
    inset: 0 0 auto 252px;
    width: auto;
    height: 62px;
    min-height: 0;
    padding: 8px 28px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    overflow: visible;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
    border: 0;
    border-bottom: 1px solid #e5eaf2;
    border-radius: 0;
    box-shadow: 0 3px 15px rgba(31, 52, 82, .04);
    z-index: 120;
}

#draftStudioScreen .top-nav > .dashboard-nav-brand {
    display: none;
}

#draftStudioScreen .nav-user {
    width: auto;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

#draftStudioScreen .nav-user > .lang-toggle-btn,
#draftStudioScreen .nav-user > .theme-toggle-btn {
    display: inline-flex;
    width: auto;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid #e4e9f1;
    border-radius: 9px;
    color: #4c5c76;
    background: #fff;
    font: 600 11px 'Outfit', sans-serif;
    box-shadow: none;
    cursor: pointer;
}

#draftStudioScreen .nav-user > .user-role-badge,
#draftStudioScreen .nav-user > .user-quota-pill,
#draftStudioScreen .nav-user > .subscription-validity-pill {
    width: auto;
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid #e5eaf2;
    border-radius: 9px;
    color: #42536d;
    background: #f8faff;
    font-size: 10px;
}

#draftStudioScreen .nav-user > .subscription-validity-pill .validity-pill-text-wrapper {
    display: none;
}

#draftStudioScreen .nav-user > .user-menu {
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: 0;
}

#draftStudioScreen .user-email-text,
#draftStudioScreen .user-menu span#studioUserEmail {
    max-width: 175px;
    color: #52627b;
    font-size: 10px;
}

#draftStudioScreen .nav-user > .user-menu .btn {
    width: auto;
    color: #52627b;
    font: 600 11px 'Outfit', sans-serif;
    padding: 8px;
    border-radius: 8px;
}

/* Sidebar for Draft Studio */
#draftStudioScreen .dashboard-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 121;
    width: 252px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 20px 13px 16px;
    background: linear-gradient(180deg, #1b2d59 0%, #172649 100%);
    box-shadow: 8px 0 28px rgba(20, 39, 75, .08);
    color: #edf2ff;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(206, 219, 255, .3) transparent;
}

#draftStudioScreen .dashboard-sidebar-brand {
    height: 45px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px 15px;
    margin-bottom: 9px;
    border-bottom: 1px solid rgba(255, 255, 255, .13);
    color: white;
    font-size: 18px;
    font-weight: 750;
    letter-spacing: .04em;
}

#draftStudioScreen .dashboard-sidebar-brand b {
    color: #aabaff;
}

#draftStudioScreen .dashboard-sidebar .dashboard-brand-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #3954a0;
    color: white;
    font-size: 14px;
}

#draftStudioScreen .dashboard-sidebar-label {
    padding: 12px 11px 7px;
    color: #93a3c6;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
}

#draftStudioScreen .dashboard-domain-label {
    padding-top: 15px;
}

#draftStudioScreen .dashboard-side-link {
    position: relative;
    width: 100%;
    min-height: 41px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border: 0;
    border-radius: 9px;
    color: #dbe4f7;
    background: transparent;
    text-align: left;
    text-decoration: none;
    font: 550 12px 'Outfit', sans-serif;
    cursor: pointer;
    transition: background .18s, color .18s;
}

#draftStudioScreen .dashboard-side-link > i:first-child {
    width: 17px;
    text-align: center;
    color: #b8c9f6;
    font-size: 13px;
}

#draftStudioScreen .dashboard-side-link:hover {
    color: white;
    background: rgba(255, 255, 255, .09);
}

#draftStudioScreen .dashboard-side-link.active {
    color: white;
    background: linear-gradient(110deg, rgba(99, 130, 234, .36), rgba(74, 99, 188, .25));
    box-shadow: inset 0 0 0 1px rgba(151, 174, 255, .4);
}

#draftStudioScreen .dashboard-side-link.active > i:first-child {
    color: white;
}

#draftStudioScreen .dashboard-domain-switcher {
    display: grid;
    gap: 4px;
}

#draftStudioScreen .dashboard-domain-link {
    width: 100%;
    min-height: 36px;
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #dbe4f7;
    background: transparent;
    text-align: left;
    font: 500 11px 'Outfit', sans-serif;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

#draftStudioScreen .dashboard-domain-link > i {
    color: #aebfe8;
    font-size: 12px;
    text-align: center;
}

#draftStudioScreen .dashboard-domain-link > span {
    min-width: 0;
}

#draftStudioScreen .dashboard-domain-link > small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #94a7ce;
    font-size: 8px;
    font-weight: 650;
    white-space: nowrap;
}

#draftStudioScreen .dashboard-domain-link:hover,
#draftStudioScreen .dashboard-domain-link:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .09);
    outline: none;
}

#draftStudioScreen .dashboard-domain-link.is-active {
    color: #fff;
    border-color: rgba(151, 174, 255, .38);
    background: rgba(99, 130, 234, .28);
}

#draftStudioScreen .dashboard-domain-link.is-active > i,
#draftStudioScreen .dashboard-domain-link.is-active > small {
    color: #c8d5ff;
}

#draftStudioScreen .dashboard-sidebar-spacer {
    flex: 1;
    min-height: 20px;
}

#draftStudioScreen .dashboard-side-link .side-external {
    margin-left: auto;
    color: #9aadd6;
    font-size: 9px;
}

#draftStudioScreen .dashboard-sidebar-footer {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 11px 5px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: #aebbd4;
    font-size: 10px;
}

#draftStudioScreen .dashboard-sidebar-footer i {
    color: #4bd09f;
}

/* Content Area */
#draftStudioScreen .draft-studio-content {
    width: min(1320px, calc(100% - 304px));
    max-width: none;
    margin: 0 28px 0 276px;
    padding: 78px 0 50px;
    box-sizing: border-box;
}

#draftStudioScreen .dashboard-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    margin-bottom: 22px;
    color: #8a97aa;
    font-size: 11px;
}

#draftStudioScreen .dashboard-topbar-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

#draftStudioScreen .dashboard-topbar-title i {
    font-size: 9px;
    color: #aeb8c7;
}

#draftStudioScreen .dashboard-topbar-title strong {
    color: #3c4c65;
    font-weight: 600;
}

#draftStudioScreen .draft-studio-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 22px;
    padding: 2px 0 18px;
    border-bottom: 1px solid var(--dash-line);
}

#draftStudioScreen .draft-studio-header h1 {
    font-size: clamp(24px, 2.3vw, 32px);
    font-weight: 700;
    color: #1b2c4c;
    letter-spacing: -.035em;
    margin: 4px 0 6px;
}

#draftStudioScreen .draft-studio-header .dashboard-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #4a68dc;
    text-transform: uppercase;
}

#draftStudioScreen .draft-studio-header .dashboard-subtitle {
    color: var(--dash-muted);
    font-size: 13px;
    margin: 0;
    max-width: 680px;
}

/* 4-Stat Metric Row */
.studio-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.studio-stat-card {
    min-height: 88px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid #e4e9f1;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(31, 52, 82, .035);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.studio-stat-card:hover {
    transform: translateY(-2px);
    border-color: #c7d5f4;
    box-shadow: 0 8px 22px rgba(40, 65, 111, .07);
}

.studio-stat-card .ssc-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 18px;
    flex-shrink: 0;
}

.ssc-icon-formats { background: #eef2ff; color: #4361ee; }
.ssc-icon-lang { background: #f0fdf4; color: #16a34a; }
.ssc-icon-audit { background: #fff7ed; color: #ea580c; }
.ssc-icon-ready { background: #faf5ff; color: #9333ea; }

.studio-stat-card .ssc-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.studio-stat-card .ssc-value {
    color: #1d2c4b;
    font-size: 22px;
    font-weight: 750;
    line-height: 1.1;
}

.studio-stat-card .ssc-label {
    margin-top: 3px;
    color: #4b5a75;
    font-size: 12px;
    font-weight: 650;
}

.studio-stat-card .ssc-hint {
    margin-top: 2px;
    color: #8c9bb2;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Engine toolbar in studio */
.studio-engine-toolbar {
    margin-bottom: 22px;
    padding: 12px 18px;
    border: 1px solid #e5eaf2;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(31, 52, 82, .025);
}

.studio-engine-toolbar .engine-status-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 11px;
}

.studio-engine-toolbar .engine-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1e3a8a;
    font-weight: 650;
}

.studio-engine-toolbar .engine-status-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 99px;
    background: #ecfdf5;
    color: #059669;
    font-weight: 600;
}

.studio-engine-toolbar .engine-statutory-clock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    margin-left: auto;
}

/* Filter Toolbar */
.draft-filter-toolbar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
    padding: 16px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 5px 20px rgba(30, 41, 59, .03);
}

.draft-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.draft-search-icon {
    position: absolute;
    left: 16px;
    color: #94a3b8;
    font-size: 15px;
    pointer-events: none;
}

.draft-search-input {
    width: 100%;
    height: 48px;
    padding: 0 130px 0 46px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    color: #1e293b;
    font: 500 13px 'Outfit', sans-serif;
    outline: none;
    transition: all .2s ease;
}

.draft-search-input:focus {
    border-color: #6366f1;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .1);
}

.draft-search-clear-btn {
    position: absolute;
    right: 90px;
    background: transparent;
    border: 0;
    color: #94a3b8;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    display: none;
}

.draft-search-clear-btn:hover {
    color: #334155;
    background: #f1f5f9;
}

.draft-search-badge {
    position: absolute;
    right: 14px;
    padding: 5px 10px;
    border-radius: 8px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .02em;
}

.draft-category-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.draft-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 99px;
    background: #ffffff;
    color: #475569;
    font: 550 12px 'Outfit', sans-serif;
    cursor: pointer;
    transition: all .18s ease;
}

.draft-cat-pill:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #1e293b;
    transform: translateY(-1px);
}

.draft-cat-pill.active {
    border-color: #4338ca;
    background: #1e293b;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(30, 41, 59, .15);
}

.draft-cat-pill.active i {
    color: #a5b4fc !important;
}

.draft-cat-pill .draft-cat-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 99px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
}

.draft-cat-pill.active .draft-cat-count {
    background: rgba(255, 255, 255, .2);
    color: #ffffff;
}

/* 2-Column Responsive Card Grid */
.draft-type-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.draft-type-card {
    display: flex;
    flex-direction: column;
    padding: 20px 22px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 3px 12px rgba(15, 23, 42, .03);
    cursor: pointer;
    transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.draft-type-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #e2e8f0;
    transition: background .2s ease;
}

.draft-type-card:hover {
    transform: translateY(-3px);
    border-color: #c7d2fe;
    box-shadow: 0 12px 28px rgba(30, 41, 59, .08);
}

.draft-type-card:hover::before {
    background: #4f46e5;
}

.draft-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.draft-card-meta-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.draft-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.draft-cat-badge-universal { background: #ecfdf5; color: #047857; }
.draft-cat-badge-civil { background: #f0f9ff; color: #0369a1; }
.draft-cat-badge-criminal { background: #fef2f2; color: #b91c1c; }
.draft-cat-badge-sarfaesi { background: #fffbeb; color: #b45309; }
.draft-cat-badge-ni_act { background: #f0fdfa; color: #0f766e; }
.draft-cat-badge-composite { background: #faf5ff; color: #7e22ce; }

.draft-statutory-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 600;
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.draft-statutory-pill i {
    color: #64748b;
    font-size: 9px;
}

.draft-type-num-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 24px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 750;
    font-family: monospace;
    flex-shrink: 0;
}

.draft-card-body {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
    flex: 1;
}

.draft-card-icon-box {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    font-size: 17px;
    flex-shrink: 0;
    transition: transform .2s ease;
}

.draft-type-card:hover .draft-card-icon-box {
    transform: scale(1.08);
}

.draft-card-text {
    flex: 1;
    min-width: 0;
}

.draft-card-title {
    color: #0f172a;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 3px;
    letter-spacing: -.01em;
}

.draft-card-statute-hint {
    color: #6366f1;
    font-size: 11px;
    font-weight: 600;
    margin: 0 0 6px;
}

.draft-card-desc {
    color: #475569;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.draft-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.draft-card-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.draft-chip-lang,
.draft-chip-court {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 550;
}

.draft-chip-lang {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
}

.draft-chip-court {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.draft-card-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #c7d2fe;
    background: #eef2ff;
    color: #4338ca;
    font: 600 11px 'Outfit', sans-serif;
    transition: all .18s ease;
    flex-shrink: 0;
}

.draft-type-card:hover .draft-card-action-btn {
    background: #4338ca;
    color: #ffffff;
    border-color: #4338ca;
    box-shadow: 0 3px 10px rgba(67, 56, 202, .25);
}

/* Form Container & Output Container */
.draft-form-container,
.draft-output-container {
    max-width: 980px;
    margin: 0 auto;
    padding: 28px 32px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 6px 24px rgba(15, 23, 42, .04);
}

.draft-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6366f1;
    font: 600 12px 'Outfit', sans-serif;
    cursor: pointer;
    margin-bottom: 14px;
}

.draft-back-link:hover {
    text-decoration: underline;
}

.draft-selected-badge,
.draft-output-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 99px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 8px;
}

.draft-form-header-bar h2,
.draft-output-header-left h2 {
    font-size: 24px;
    font-weight: 750;
    color: #0f172a;
    margin: 0 0 6px;
}

.studio-form-sub,
.studio-output-sub {
    color: #64748b;
    font-size: 13px;
    margin: 0 0 24px;
}

.draft-form-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 28px;
}

.draft-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}

.draft-output-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f1f5f9;
}

.draft-output-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.draft-lang-picker-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #334155;
    font-weight: 600;
}

.draft-lang-picker-wrap select {
    padding: 6px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    font: 550 12px 'Outfit', sans-serif;
    color: #0f172a;
}

.draft-toolbar-btn-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.draft-paper-wrapper {
    position: relative;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: inset 0 2px 6px rgba(15, 23, 42, .03);
    margin-bottom: 16px;
}

.draft-output-textarea {
    width: 100%;
    min-height: 520px;
    padding: 24px 28px;
    border: 0;
    background: transparent;
    color: #0f172a;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    line-height: 1.8;
    resize: vertical;
    box-sizing: border-box;
    outline: none;
}

.draft-legal-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #fffbeb;
    border: 1px solid #fef3c7;
    color: #92400e;
    font-size: 11px;
    line-height: 1.5;
}

.draft-legal-note i {
    font-size: 14px;
    margin-top: 2px;
    color: #d97706;
}

/* Responsive Media Queries */
@media (max-width: 1100px) {
    .studio-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Draft Studio mobile responsive rules are unified with Workspace Navigation */

/* Dark Theme Overrides */
[data-theme="dark"] #draftStudioScreen {
    background: #0b1120;
    color: #e2e8f0;
}

[data-theme="dark"] #draftStudioScreen .top-nav {
    background: rgba(15, 23, 42, .95);
    border-bottom-color: #1e293b;
    box-shadow: 0 3px 15px rgba(0, 0, 0, .3);
}

[data-theme="dark"] #draftStudioScreen .draft-studio-header h1 {
    color: #f1f5f9;
}

[data-theme="dark"] #draftStudioScreen .draft-studio-header {
    border-bottom-color: #1e293b;
}

[data-theme="dark"] #draftStudioScreen .dashboard-topbar-title strong {
    color: #cbd5e1;
}

[data-theme="dark"] #draftStudioScreen .nav-user > .lang-toggle-btn,
[data-theme="dark"] #draftStudioScreen .nav-user > .theme-toggle-btn {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] #draftStudioScreen .nav-user > .user-role-badge,
[data-theme="dark"] #draftStudioScreen .nav-user > .user-quota-pill,
[data-theme="dark"] #draftStudioScreen .nav-user > .subscription-validity-pill {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] #draftStudioScreen .studio-stat-card {
    background: #0f172a;
    border-color: #1e293b;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}

[data-theme="dark"] #draftStudioScreen .studio-stat-card .ssc-value {
    color: #f8fafc;
}

[data-theme="dark"] #draftStudioScreen .studio-stat-card .ssc-label {
    color: #94a3b8;
}

[data-theme="dark"] #draftStudioScreen .studio-engine-toolbar {
    background: #0f172a;
    border-color: #1e293b;
}

[data-theme="dark"] #draftStudioScreen .draft-filter-toolbar {
    background: #0f172a;
    border-color: #1e293b;
}

[data-theme="dark"] #draftStudioScreen .draft-search-input {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

[data-theme="dark"] #draftStudioScreen .draft-cat-pill {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

[data-theme="dark"] #draftStudioScreen .draft-cat-pill:hover {
    background: #334155;
    color: #f8fafc;
}

[data-theme="dark"] #draftStudioScreen .draft-cat-pill.active {
    background: #4338ca;
    border-color: #6366f1;
    color: #ffffff;
}

[data-theme="dark"] #draftStudioScreen .draft-type-card {
    background: #0f172a;
    border-color: #1e293b;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .2);
}

[data-theme="dark"] #draftStudioScreen .draft-type-card:hover {
    border-color: #4338ca;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .4);
}

[data-theme="dark"] #draftStudioScreen .draft-card-title {
    color: #f8fafc;
}

[data-theme="dark"] #draftStudioScreen .draft-card-desc {
    color: #94a3b8;
}

[data-theme="dark"] #draftStudioScreen .draft-card-footer {
    border-top-color: #1e293b;
}

[data-theme="dark"] #draftStudioScreen .draft-type-num-badge {
    background: #1e293b;
    color: #94a3b8;
}

[data-theme="dark"] #draftStudioScreen .draft-statutory-pill {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] #draftStudioScreen .draft-form-container,
[data-theme="dark"] #draftStudioScreen .draft-output-container {
    background: #0f172a;
    border-color: #1e293b;
}

[data-theme="dark"] #draftStudioScreen .draft-form-header-bar h2,
[data-theme="dark"] #draftStudioScreen .draft-output-header-left h2 {
    color: #f8fafc;
}

[data-theme="dark"] #draftStudioScreen .draft-output-toolbar {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] #draftStudioScreen .draft-lang-picker-wrap select {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

[data-theme="dark"] #draftStudioScreen .draft-paper-wrapper {
    background: #020617;
    border-color: #334155;
}

[data-theme="dark"] #draftStudioScreen .draft-output-textarea {
    color: #e2e8f0;
}

.j2-vidhi-section {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr);
    align-items: center;
    gap: clamp(36px, 6vw, 82px);
    border-top: 1px solid #e8edf4;
}

.j2-vidhi-copy,
.j2-vidhi-preview {
    min-width: 0;
}

.j2-vidhi-copy > .j2-kicker { color: #5369c7; }
.j2-vidhi-copy h2 {
    max-width: 100%;
    margin: 15px 0 14px;
    color: #152542;
    font: 700 clamp(32px, 4vw, 46px)/1.2 'Cinzel', Georgia, serif;
    letter-spacing: -.045em;
}
.j2-vidhi-copy h2 span {
    color: transparent;
    background: linear-gradient(110deg, #315de9 4%, #3485ea 60%, #37bcd0);
    background-clip: text;
    -webkit-background-clip: text;
    white-space: normal;
}

#landingScreen:has(.judiq-v2:not(.hidden)) .j2-support { display: none; }
.j2-vidhi-lede {
    max-width: 600px;
    margin: 0 0 20px;
    color: #697991;
    font-size: 13px;
    line-height: 1.85;
}
.j2-vidhi-points {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.j2-vidhi-points li {
    display: grid;
    grid-template-columns: 19px 1fr;
    gap: 9px;
    align-items: start;
    color: #697991;
    font-size: 11px;
    line-height: 1.7;
}
.j2-vidhi-points li > i {
    margin-top: 3px;
    color: #32a486;
    font-size: 12px;
}
.j2-vidhi-points strong { color: #2d3e5a; }
.j2-vidhi-languages {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 19px;
    color: #465e9e;
    font-size: 11px;
    font-weight: 700;
}
.j2-vidhi-languages i { color: #526ddd; }
.j2-vidhi-actions { margin-top: 21px; }
.j2-vidhi-privacy {
    max-width: 620px;
    margin: 14px 0 0;
    color: #8995a8;
    font-size: 9px;
    line-height: 1.7;
}
.j2-vidhi-preview {
    overflow: hidden;
    padding: 23px;
    border: 1px solid #e1e8f3;
    border-radius: 20px;
    background: linear-gradient(145deg, #fff 0%, #f7f9ff 100%);
    box-shadow: 0 22px 58px rgba(28, 49, 79, .09);
}
.j2-vidhi-preview-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 17px;
    border-bottom: 1px solid #e9edf5;
}
.j2-vidhi-icon {
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border: 1px solid #dfe5ff;
    border-radius: 14px;
    color: #5263df;
    background: #f0f2ff;
    font-size: 17px;
}
.j2-vidhi-preview-head > div { display: grid; gap: 3px; }
.j2-vidhi-preview-head > div span {
    color: #6475c6;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .1em;
}
.j2-vidhi-preview-head > div strong {
    color: #263753;
    font: 700 18px 'Cinzel', Georgia, serif;
}
.j2-vidhi-demo-label {
    margin-left: auto;
    padding: 6px 9px;
    border-radius: 999px;
    color: #64738b;
    background: #eef2f8;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
}
.j2-vidhi-conversation { display: grid; gap: 12px; padding: 18px 0; }
.j2-vidhi-message {
    width: fit-content;
    max-width: 91%;
    padding: 11px 13px;
    border: 1px solid #e3e9f3;
    border-radius: 13px;
    background: #fff;
}
.j2-vidhi-message span {
    color: #7c8aa0;
    font-size: 9px;
    font-weight: 700;
}
.j2-vidhi-message p {
    margin: 4px 0 0;
    color: #32445f;
    font-size: 12px;
    line-height: 1.6;
}
.j2-vidhi-user {
    justify-self: end;
    border-color: #dce2ff;
    background: #f2f4ff;
}
.j2-vidhi-reply { justify-self: start; }
.j2-vidhi-confirmation {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid #dcefe8;
    border-radius: 12px;
    color: #62768a;
    background: #f4fbf8;
    font-size: 10px;
    line-height: 1.55;
}
.j2-vidhi-confirmation > i { margin-top: 2px; color: #329b7d; }
.j2-vidhi-confirmation strong { color: #287c67; }
.j2-vidhi-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid #e9edf5;
    color: #5d6c82;
    font-size: 9px;
    font-weight: 700;
}
.j2-vidhi-flow span { display: flex; align-items: center; gap: 6px; }
.j2-vidhi-flow b { color: #536ddd; font-size: 9px; }
.j2-vidhi-flow > i { color: #b4bed0; font-size: 9px; }
.j2-vidhi-caption {
    display: block;
    margin-top: 11px;
    color: #909bad;
    font-size: 8px;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .j2-vidhi-section { grid-template-columns: 1fr; gap: 31px; }
    .j2-vidhi-preview { width: min(100%, 620px); justify-self: center; }
}

@media (max-width: 520px) {
    .j2-vidhi-section { padding-top: 58px; }
    .j2-vidhi-copy h2 { font-size: 31px; }
    .j2-vidhi-preview { padding: 17px; border-radius: 16px; }
    .j2-vidhi-flow { gap: 5px; font-size: 8px; }
    .j2-vidhi-flow span { gap: 4px; }
}