@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&display=swap');

        :root {
            --navy: #26256A;
            --navy2: #302F80;
            --navy3: #1A194D;
            --orange: #EF6836;
            --orange2: #FF7235;
            --orange3: #D85422;
            --bg: #F4F5F8;
            --bg2: #ECEDF2;
            --white: #FFFFFF;
            --text: #1A1A2E;
            --text2: #555870;
            --text3: #8A8CA8;
            --border: rgba(27, 43, 94, 0.12);
            --border2: rgba(27, 43, 94, 0.22);
            --radius: 8px;
            --radius-lg: 14px;
            --shadow: 0 2px 12px rgba(27, 43, 94, 0.08);
            --shadow-lg: 0 8px 32px rgba(27, 43, 94, 0.13);
        }

        body {
            font-family: 'Outfit', sans-serif;
            background: var(--bg);
            color: var(--text);
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 2rem
        }

        .admin-card {
            background: var(--white);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            width: 100%;
            max-width: 600px;
            padding: 2rem;
            border: 1px solid var(--border);
        }

        .logo {
            height: 40px;
            margin-bottom: 1.5rem;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        h1 {
            font-size: 20px;
            color: var(--navy);
            text-align: center;
            margin-bottom: 0.5rem;
        }

        p.subtitle {
            font-size: 13px;
            color: var(--text2);
            text-align: center;
            margin-bottom: 2rem;
        }

        .form-group {
            margin-bottom: 1.25rem;
        }

        label {
            display: block;
            font-size: 12px;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: 0.5rem;
        }

        input[type=password],
        input[type=text],
        input[type=number],
        textarea {
            width: 100%;
            padding: 12px;
            border-radius: var(--radius);
            border: 1.5px solid var(--border2);
            background: var(--bg2);
            font-size: 14px;
            outline: none;
            transition: 0.2s;
            box-sizing: border-box;
            font-family: inherit;
        }

        input:focus,
        textarea:focus {
            border-color: var(--navy);
            background: #fff;
        }

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

        .btn {
            width: 100%;
            padding: 12px;
            border-radius: var(--radius);
            border: none;
            font-weight: 700;
            cursor: pointer;
            transition: 0.2s;
            font-size: 14px;
        }

        .btn-primary {
            background: var(--navy);
            color: #fff;
        }

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

        .btn-orange {
            background: var(--orange);
            color: #fff;
            margin-top: 0.5rem;
        }

        .btn-orange:hover {
            background: var(--orange3);
        }

        .alert {
            padding: 10px;
            border-radius: var(--radius);
            font-size: 13px;
            margin-bottom: 1rem;
        }

        .alert-error {
            background: #FDEBEB;
            color: #7A1A1A;
            border: 1px solid rgba(122, 26, 26, 0.1);
        }

        .alert-success {
            background: #E2F5E9;
            color: #1A5C30;
            border: 1px solid rgba(26, 92, 48, 0.1);
        }

        .db-list {
            margin: 2rem 0;
            border-top: 1px solid var(--border);
            padding-top: 1.5rem;
        }

        .db-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background: var(--bg);
            margin-bottom: 8px;
            border-radius: var(--radius);
            border: 1px solid var(--border);
            transition: 0.2s;
        }

        .db-item:hover {
            border-color: var(--navy);
            box-shadow: var(--shadow);
        }

        .modal-overlay {
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            background: rgba(26, 25, 77, 0.42);
            backdrop-filter: blur(4px);
            z-index: 1000;
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal-card {
            width: 100%;
            max-width: 480px;
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            padding: 1.5rem;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            align-items: flex-start;
            margin-bottom: 1rem;
        }

        .modal-title {
            color: var(--navy);
            font-size: 18px;
            font-weight: 700;
            margin: 0 0 4px;
        }

        .modal-subtitle {
            color: var(--text2);
            font-size: 13px;
            margin: 0;
        }

        .modal-close {
            border: none;
            background: var(--bg2);
            color: var(--text2);
            border-radius: 50%;
            width: 32px;
            height: 32px;
            cursor: pointer;
            font-size: 18px;
            line-height: 1;
        }

        .modal-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 1.25rem;
        }

        .db-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--navy);
        }

        .db-link {
            font-size: 11px;
            color: var(--orange);
            text-decoration: none;
            font-weight: 700;
        }

        .section-title {
            font-size: 14px;
            font-weight: 700;
            color: var(--orange);
            text-transform: uppercase;
            margin: 2rem 0 1rem;
            border-bottom: 1px solid var(--border);
            padding-bottom: 5px;
        }

        .footer-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 1.5rem;
            border-top: 1px solid var(--border);
            padding-top: 1rem;
        }

        .btn-logout {
            background: none;
            border: none;
            color: var(--text3);
            font-size: 12px;
            cursor: pointer;
            text-decoration: underline;
        }

        .btn-back {
            color: var(--navy);
            font-size: 12px;
            text-decoration: none;
            font-weight: 600;
        }

        .prompt-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        @media(max-width:500px) {
            .prompt-grid {
                grid-template-columns: 1fr;
            }

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