:root {
            --bg: #f4f7fb;
            --surface: #ffffff;
            --surface-soft: #eef3ff;
            --text: #1d2738;
            --muted: #5d6b85;
            --accent: #2f6df6;
            --accent-strong: #1f56cc;
            --danger: #dc3545;
            --success: #188754;
            --shadow: 0 16px 40px rgba(20, 40, 80, 0.12);
            --radius: 8px;
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --bg: #0f1420;
                --surface: #182133;
                --surface-soft: #1f2b42;
                --text: #edf2ff;
                --muted: #a6b2cc;
                --accent: #5c8eff;
                --accent-strong: #7aa3ff;
                --danger: #ff6b7b;
                --success: #39c98a;
                --shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
            }
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
            color: var(--text);
            background: black;
            min-height: 100vh;
            display: flex;
            max-width: 840px;
            margin: 0 auto;
            flex-direction: column;
            justify-content: center;
            padding: 16px;
        }

        .app, .login-card {
            width: min(960px, 100%);
            display: flex;
            flex-direction: column;
            margin: 0 auto;
            gap: 20px;
        }
        .app.hidden, .login-card.hidden{
            display: none;
        }
        .login-card {
            background: var(--surface);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 20px;
            max-width: 400px;
            margin: 40px auto;
        }
        header {

        }

        header h1 {

        }

        .card {

            border: 1px solid grey;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 12px;
        }

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

        form {
            display:flex;
            flex-direction: column;
            gap: 12px;
        }

        .field {
            display:flex;
            flex-direction: column;
            gap: 6px;
        }

        label {
            font-weight: 600;
            font-size: 0.95rem;
        }

        input,
        textarea,
        button {
            font: inherit;
            border-radius: 6px;
            border: 1px solid transparent;
            padding: 5px 6px;
        }

        input,
        textarea {
            background: white;
            color: var(--text);
            border-color: rgba(120, 140, 180, 0.28);
        }

        textarea {
            min-height: 120px;
            resize: vertical;
        }

        button {
            cursor: pointer;
            background: var(--accent);
            color: #fff;
            font-weight: 500;
            transition: background-color 0.2s ease;
        }

        button:hover {
            background: var(--accent-strong);
        }
        select {
            font: inherit;
            border-radius: 6px;
            border: 1px solid rgba(120, 140, 180, 0.28);
            background: white;
            color: var(--text);
            padding: 5px 6px;
        }
        .row {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
        }

        .row form {
            display: inline-block;
        }

        .muted {
            color: var(--muted);
            margin: 0;
        }

        .error {
            color: var(--danger);
            font-weight: 600;
            margin: 0;
        }

        .success {
            color: var(--success);
            font-weight: 600;
            margin: 0;
        }

        .dashboard-grid {
            display:flex;
            gap: 10px;
        }

        .panel {
            background: var(--surface-soft);
            border-radius: 8px;
            padding: 8px;
        }

        #aiResult {
            white-space: pre-wrap;
            margin: 0;
        }



        .top-nav {
            background: var(--surface);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 12px 16px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
        }

        .top-nav a {
            text-decoration: none;
            color: var(--text);

            border-radius: 10px;
            padding: 8px 12px;
            font-size: 0.92rem;
            font-weight: 600;
        }

        .top-nav a:hover {
            color: var(--accent);
        }

#response-container {
        font-family: system-ui, -apple-system, sans-serif;
        line-height: 1.6;
        color: #333;
        max-width: 800px;
        margin: 20px auto;
    }

    /* The Code Block Look */
    pre {
        background: #f4f4f4;
        padding: 15px;
        border-radius: 8px;
        overflow-x: auto;
        border: 1px solid #ddd;
    }

    code {
        font-family: 'Courier New', Courier, monospace;
        background: #f4f4f4;
        padding: 2px 4px;
        border-radius: 4px;
    }

    /* Clean up headers */
    h1, h2, h3 { color: #1a1a1a; margin-top: 24px; }
    
    /* Give lists some padding */
    ul { padding-left: 20px; }
.content-section {
        background: #ffffff;
        border-left: 4px solid #007bff; /* A nice blue accent */
        margin-bottom: 20px;
        padding: 15px 25px;
        border-radius: 0 8px 8px 0;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        transition: transform 0.2s ease;
    }

    .content-section:hover {
        transform: translateX(5px); /* Subtle interactive feel */
    }

    /* Target the header specifically inside the section */
    .content-section h1, .content-section h2 {
        margin-top: 0; 
        color: #007bff;
    }
    
table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        font-size: 0.9em;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    }

    th, td {
        padding: 12px 15px;
        border: 1px solid #ddd;
        text-align: left;
    }

    thead {
        background-color: #007bff;
        color: #ffffff;
    }

    tr:nth-child(even) {
        background-color: #f8f9fa;
    }