:root {
            --primary-color: #3498db;
            --secondary-color: #2c3e50;
            --success-color: #27ae60;
            --warning-color: #f39c12;
            --danger-color: #e74c3c;
            --info-color: #17a2b8;
            --light-bg: #f8f9fa;
        }

        body {
            background-color: var(--light-bg);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
        }

        .crawl-id-container {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .crawl-id-input {
            border: 2px solid #e9ecef;
            border-radius: 8px;
            padding: 12px;
            transition: border-color 0.3s ease;
            font-family: 'Courier New', monospace;
        }

        .crawl-id-input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
        }

        .dashboard-tabs {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .nav-tabs {
            border-bottom: 2px solid #e9ecef;
            background: #f8f9fa;
            padding: 0;
        }

        .nav-tabs .nav-link {
            border: none;
            border-radius: 0;
            font-weight: 600;
            color: var(--secondary-color);
            padding: 15px 20px;
            transition: all 0.3s ease;
            position: relative;
        }

        .nav-tabs .nav-link:hover {
            background-color: #e9ecef;
            border-color: transparent;
        }

        .nav-tabs .nav-link.active {
            color: var(--primary-color);
            background-color: white;
            border-color: transparent;
        }

        .nav-tabs .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--primary-color);
        }

        .tab-content {
            padding: 0;
        }

        .tab-pane {
            min-height: 600px;
        }

        .dashboard-frame {
            width: 100%;
            height: 80vh;
            border: none;
            border-radius: 0 0 10px 10px;
        }

        .dashboard-info {
            padding: 30px;
            text-align: center;
            color: var(--secondary-color);
        }

        .dashboard-info h4 {
            color: var(--primary-color);
            margin-bottom: 15px;
        }

        .btn-load-dashboard {
            background: linear-gradient(135deg, var(--primary-color), var(--info-color));
            border: none;
            color: white;
            padding: 12px 25px;
            border-radius: 8px;
            font-weight: 600;
            transition: all 0.3s ease;
            margin-top: 15px;
        }

        .btn-load-dashboard:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
        }

        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: white;
            border-radius: 10px;
            padding: 25px;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 10px;
        }

        .stat-label {
            color: var(--secondary-color);
            font-weight: 600;
        }

        .feature-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-2px);
        }

        .feature-icon {
            font-size: 2rem;
            color: var(--primary-color);
            margin-bottom: 15px;
        }

        .overview-content {
            padding: 30px;
        }

        /* External Link Card Styles */
        .external-link-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            border: 2px solid transparent;
            height: 100%;
        }

        .external-link-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
            border-color: var(--primary-color);
        }

        .link-icon {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 15px;
        }

        .external-link-card h6 {
            color: var(--secondary-color);
            font-weight: 700;
            margin-bottom: 10px;
        }

        .btn-external-link {
            background: linear-gradient(135deg, var(--primary-color), var(--info-color));
            border: none;
            color: white;
            padding: 8px 20px;
            border-radius: 6px;
            font-weight: 600;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

        .btn-external-link:hover {
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
        }

        /* Regional Link Card Styles */
        .regional-link-card {
            background: white;
            border-radius: 10px;
            padding: 18px;
            text-align: center;
            box-shadow: 0 3px 12px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            border-left: 4px solid var(--primary-color);
            height: 100%;
        }

        .regional-link-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.12);
        }

        .region-icon {
            font-size: 1.8rem;
            color: var(--primary-color);
            margin-bottom: 10px;
        }

        .regional-link-card h6 {
            color: var(--secondary-color);
            font-weight: 600;
            margin-bottom: 15px;
            font-size: 0.95rem;
        }

        .btn-region-link {
            background: var(--primary-color);
            border: none;
            color: white;
            padding: 6px 16px;
            border-radius: 5px;
            font-weight: 500;
            font-size: 0.85rem;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

        .btn-region-link:hover {
            color: white;
            background: var(--info-color);
            transform: translateY(-1px);
        }

        /* Regional Color Variations */
        .regional-link-card.eu {
            border-left-color: var(--success-color);
        }
        .regional-link-card.eu .region-icon {
            color: var(--success-color);
        }
        .regional-link-card.eu .btn-region-link {
            background: var(--success-color);
        }
        .regional-link-card.eu .btn-region-link:hover {
            background: #219a52;
        }

        .regional-link-card.us {
            border-left-color: var(--info-color);
        }
        .regional-link-card.us .region-icon {
            color: var(--info-color);
        }
        .regional-link-card.us .btn-region-link {
            background: var(--info-color);
        }
        .regional-link-card.us .btn-region-link:hover {
            background: #138496;
        }

        .regional-link-card.in {
            border-left-color: var(--warning-color);
        }
        .regional-link-card.in .region-icon {
            color: var(--warning-color);
        }
        .regional-link-card.in .btn-region-link {
            background: var(--warning-color);
        }
        .regional-link-card.in .btn-region-link:hover {
            background: #e67e22;
        }

        @media (max-width: 768px) {
            .nav-tabs .nav-link {
                padding: 10px 15px;
                font-size: 0.9rem;
            }
            
            .dashboard-frame {
                height: 70vh;
            }
        }
        /* --- Visual Polish: subtle background, sticky tabs, refined cards/buttons, dark mode --- */
        :root {
            --card-radius: 12px;
            --shadow-sm: 0 1px 6px rgba(16, 24, 40, 0.06);
            --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
        }

        body {
            background:
                radial-gradient(1000px 600px at 10% -10%, rgba(52, 152, 219, 0.06), transparent 45%),
                radial-gradient(1000px 600px at 90% 0%, rgba(23, 162, 184, 0.06), transparent 50%),
                var(--light-bg);
        }

        .navbar {
            backdrop-filter: saturate(140%) blur(6px);
        }

        .dashboard-tabs {
            border: 1px solid #e9ecef;
            border-radius: var(--card-radius);
        }

        .nav-tabs {
            position: sticky;
            top: 64px; /* keep tabs visible below navbar */
            z-index: 1010;
            box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.04);
        }

        .nav-tabs .nav-link {
            gap: 8px;
            letter-spacing: 0.2px;
        }
        .nav-tabs .nav-link i {
            transition: transform 0.2s ease;
        }
        .nav-tabs .nav-link:hover i {
            transform: translateY(-1px);
        }

        .dashboard-frame {
            background: #f9fafb;
            border-top: 1px solid #edf2f7;
            border-bottom-left-radius: var(--card-radius);
            border-bottom-right-radius: var(--card-radius);
        }

        .overview-content h2 {
            font-weight: 700;
            letter-spacing: 0.2px;
        }
        .overview-content h4,
        .overview-content h5 {
            font-weight: 700;
        }

        .external-link-card,
        .regional-link-card,
        .feature-card,
        .stat-card {
            border: 1px solid #eef2f7;
            border-radius: var(--card-radius);
            box-shadow: var(--shadow-sm);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .external-link-card:hover,
        .regional-link-card:hover,
        .feature-card:hover,
        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .btn-load-dashboard {
            border-radius: 10px;
            letter-spacing: 0.2px;
        }
        .btn-load-dashboard:active {
            transform: translateY(0);
        }

        .form-control::placeholder {
            color: #9aa4b2;
        }

        /* Scrollbar polish (non-intrusive) */
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }
        ::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.15);
            border-radius: 10px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }

        /* Optional dark mode support based on system preference */
        @media (prefers-color-scheme: dark) {
            :root {
                --light-bg: #0b1220;
                --secondary-color: #d1d5db;
            }
            body {
                color: #e5e7eb;
                background:
                    radial-gradient(900px 500px at 10% -10%, rgba(52, 152, 219, 0.08), transparent 45%),
                    radial-gradient(900px 500px at 90% 0%, rgba(23, 162, 184, 0.08), transparent 50%),
                    var(--light-bg);
            }
            .crawl-id-container,
            .dashboard-tabs,
            .stat-card,
            .feature-card,
            .external-link-card,
            .regional-link-card {
                background: #0f172a;
                border-color: #1f2937;
                box-shadow: none;
            }
            .nav-tabs {
                background: #0b1220;
                border-color: #1f2937;
                box-shadow: inset 0 -1px 0 #1f2937;
            }
            .nav-tabs .nav-link.active {
                background: #0f172a;
                color: var(--primary-color);
            }
            .dashboard-info {
                color: #cbd5e1;
            }
            .dashboard-frame {
                background: #0b1220;
                border-top-color: #1f2937;
            }
            .form-control {
                background: #0b1220;
                color: #e5e7eb;
                border-color: #1f2937;
            }
            .form-control::placeholder {
                color: #6b7280;
            }
        }
        /* --- Dark Theme (Default, high readability) --- */
        :root {
            /* Accent palette */
            --primary-color: #6366f1; /* indigo-500 */
            --info-color: #06b6d4;    /* cyan-500 */
            /* Surfaces and text */
            --light-bg: #0b1220;      /* page background */
            --secondary-color: #94a3b8; /* legacy text var used across components (muted) */
            --text-color: #e5e7eb;    /* slate-200 */
            --muted-text: #94a3b8;    /* slate-400 */
            --surface-0: #0b1220;     /* base */
            --surface-1: #0f172a;     /* card */
            --surface-2: #111827;     /* hover */
            --border-color: #1f2937;  /* subtle borders */
        }

        body {
            color: var(--text-color);
            background:
                radial-gradient(900px 500px at 10% -10%, rgba(99, 102, 241, 0.08), transparent 45%),
                radial-gradient(900px 500px at 90% 0%, rgba(6, 182, 212, 0.08), transparent 50%),
                var(--light-bg);
        }

        /* Override inline navbar style safely */
        .navbar {
            background: linear-gradient(135deg, #0b1220, #111827) !important;
            border-bottom: 1px solid var(--border-color);
        }
        .navbar .navbar-brand,
        .navbar .navbar-text,
        .navbar .nav-link {
            color: var(--text-color) !important;
        }

        /* Containers and cards */
        .crawl-id-container,
        .dashboard-tabs,
        .stat-card,
        .feature-card,
        .external-link-card,
        .regional-link-card {
            background: var(--surface-1);
            border-color: var(--border-color);
            box-shadow: none;
            color: var(--text-color);
        }

        /* Tabs */
        .nav-tabs {
            background: var(--surface-0);
            border-bottom: 1px solid var(--border-color);
            box-shadow: inset 0 -1px 0 #1f2937;
        }
        .nav-tabs .nav-link {
            color: var(--muted-text);
        }
        .nav-tabs .nav-link:hover {
            background-color: var(--surface-2);
        }
        .nav-tabs .nav-link.active {
            color: var(--primary-color);
            background-color: var(--surface-1);
        }

        /* Info text and headings */
        .dashboard-info { color: var(--muted-text); }
        .external-link-card h6,
        .regional-link-card h6,
        .stat-label { color: var(--muted-text); }
        .stat-number { color: var(--primary-color); }
        .link-icon, .feature-icon { color: var(--primary-color); }

        /* Frame area */
        .dashboard-frame {
            background: var(--surface-0);
            border-top: 1px solid var(--border-color);
        }

        /* Inputs */
        .form-control {
            background: var(--surface-0);
            color: var(--text-color);
            border-color: var(--border-color);
        }
        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
        }
        .form-control::placeholder { color: #6b7280; }
        
        /* --- Monochrome Grey Theme Overrides (Neutral, high readability) --- */
        :root {
            --primary-color: #d1d5db;   /* light grey highlight */
            --info-color: #9ca3af;      /* neutral info */
            --light-bg: #121416;        /* page background */
            --secondary-color: #a0a4ab; /* legacy muted text var */
            --text-color: #e5e7eb;      /* primary text */
            --muted-text: #9aa0a6;      /* secondary text */
            --surface-0: #121416;       /* base */
            --surface-1: #1a1d21;       /* card */
            --surface-2: #22252a;       /* hover */
            --border-color: #2a2e34;    /* borders */
        }

        /* Flat dark grey background, no color tint */
        body {
            background: var(--light-bg);
            color: var(--text-color);
        }

        /* Navbar: solid neutral */
        .navbar {
            background: #1a1d21 !important;
            border-bottom: 1px solid var(--border-color);
        }
        .navbar .navbar-brand,
        .navbar .navbar-text,
        .navbar .nav-link { color: var(--text-color) !important; }

        /* Containers/cards neutralization */
        .crawl-id-container,
        .dashboard-tabs,
        .stat-card,
        .feature-card,
        .external-link-card,
        .regional-link-card {
            background: var(--surface-1);
            border-color: var(--border-color);
            box-shadow: none;
            color: var(--text-color);
        }

        /* Tabs in greyscale */
        .nav-tabs {
            background: var(--surface-0);
            border-bottom: 1px solid var(--border-color);
            box-shadow: inset 0 -1px 0 var(--border-color);
        }
        .nav-tabs .nav-link { color: var(--muted-text); }
        .nav-tabs .nav-link:hover { background-color: var(--surface-2); }
        .nav-tabs .nav-link.active {
            color: var(--text-color);
            background-color: var(--surface-1);
        }
        .nav-tabs .nav-link.active::after { background: #3a3c40; }

        /* Info text and icons */
        .dashboard-info { color: var(--muted-text); }
        .external-link-card h6,
        .regional-link-card h6,
        .stat-label { color: var(--muted-text); }
        .stat-number { color: var(--text-color); }
        .link-icon, .feature-icon { color: var(--text-color); }

        /* Frame area */
        .dashboard-frame { background: var(--surface-0); border-top: 1px solid var(--border-color); }

        /* Inputs */
        .form-control { background: var(--surface-0); color: var(--text-color); border-color: var(--border-color); }
        .form-control:focus { border-color: #b8bcc4; box-shadow: 0 0 0 0.2rem rgba(209, 213, 219, 0.15); }
        .form-control::placeholder { color: #8a8f98; }

        /* Buttons to neutral greys */
        .btn-load-dashboard,
        .btn-external-link,
        .btn-region-link {
            background: linear-gradient(135deg, #2b2d31, #3a3c40) !important;
            border: 1px solid #3a3c40 !important;
            color: #f3f4f6 !important;
        }
        .btn-load-dashboard:hover,
        .btn-external-link:hover,
        .btn-region-link:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.25);
        }

        /* External link card hover border (remove color accent) */
        .external-link-card:hover { border-color: #3a3c40; }

        /* Neutralize regional color accents */
        .regional-link-card.eu,
        .regional-link-card.us,
        .regional-link-card.in { border-left-color: #3a3c40; }
        .regional-link-card.eu .region-icon,
        .regional-link-card.us .region-icon,
        .regional-link-card.in .region-icon { color: #c9cdd3; }
        .regional-link-card.eu .btn-region-link,
        .regional-link-card.us .btn-region-link,
        .regional-link-card.in .btn-region-link { background: #3a3c40 !important; }
        .regional-link-card.eu .btn-region-link:hover,
        .regional-link-card.us .btn-region-link:hover,
        .regional-link-card.in .btn-region-link:hover { background: #474a51 !important; }

        /* Sticky tabs clipping and offset fix */
        .dashboard-tabs { overflow: visible; }
        .dashboard-tabs .nav-tabs { top: 56px; }

        /* Ensure helper text under Crawl ID is visible and spaced */
        .crawl-id-container .form-label { color: var(--text-color); }
        .crawl-id-container small,
        .crawl-id-container .form-text { 
            color: var(--muted-text) !important; 
            display: block; 
            margin-top: 6px; 
        }

/* Extracted inline styles */
.dashboard-inline-1 { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.dashboard-inline-2 { display: none; }