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

        :root {
            --navy:       #0d1f3c;
            --royal:      #1a3a6b;
            --gold:       #c9a84c;
            --gold-light: #e8c97a;
            --cream:      #faf8f4;
            --white:      #ffffff;
            --text-dark:  #1a1a2e;
            --text-mid:   #4a5568;
            --border:     #ddd9d0;
            --error:      #c0392b;
            --error-bg:   #fff5f5;
            --shadow-lg:  0 20px 60px rgba(13,31,60,0.22);
        }

        body {
            font-family: 'DM Sans', sans-serif;
            background: linear-gradient(135deg, var(--navy) 0%, var(--royal) 100%);
            background-attachment: fixed;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 32px 16px;
        }

        /* subtle diagonal texture over the gradient */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background: repeating-linear-gradient(
                45deg,
                transparent,
                transparent 60px,
                rgba(201,168,76,0.04) 60px,
                rgba(201,168,76,0.04) 120px
            );
            pointer-events: none;
        }

        /* ── Card ── */
        .card {
            position: relative;
            max-width: 460px;
            width: 100%;
            background: var(--white);
            border-radius: 20px;
            box-shadow: var(--shadow-lg);
            overflow: hidden;
            animation: riseIn 0.55s cubic-bezier(0.22,1,0.36,1) both;
        }

        @keyframes riseIn {
            from { opacity: 0; transform: translateY(28px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* gold top accent line */
        .card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--gold), transparent);
        }

        /* ── Header ── */
        .card-header {
            padding: 32px 28px 20px;
            text-align: center;
            border-bottom: 1px solid var(--border);
        }

        .logo-wrap {
            display: inline-block;
            margin-bottom: 14px;
            padding: 8px 18px;
            /* border: 2px solid var(--gold); */
            border-radius: 14px; /* rectangle with soft corners */
        }

        .logo-wrap img {
            width: 90px;
            height: 60px;
            object-fit: contain;
            border-radius: 0; /* remove circle */
            border: none;
            background: transparent;
            padding: 0;
            display: block;
            filter: drop-shadow(0 3px 8px rgba(201,168,76,0.25));
        }


        @media (max-width: 480px) {
            body { padding: 24px 12px; }
            .card-header { padding: 24px 20px 16px; }
            .card-body   { padding: 18px 20px 22px; }

            .logo-wrap img {
                width: 75px;
                height: 50px;
            }
        }        

        .card-header h2 {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(1.1rem, 3.5vw, 1.4rem);
            font-weight: 700;
            color: var(--navy);
            line-height: 1.25;
            margin-bottom: 4px;
        }

        .card-header p {
            font-size: 0.68rem;
            color: var(--text-mid);
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        /* ── Body ── */
        .card-body {
            padding: 24px 28px 28px;
        }

        /* ── Error ── */
        .error-box {
            background: var(--error-bg);
            border: 1px solid rgba(192,57,43,0.22);
            border-radius: 8px;
            padding: 10px 14px;
            margin-bottom: 18px;
            display: flex;
            align-items: center;
            gap: 8px;
            animation: fadeUp 0.3s ease both;
        }

        .error-box svg {
            width: 15px;
            height: 15px;
            flex-shrink: 0;
            color: var(--error);
        }

        .error-box span {
            font-size: 0.75rem;
            color: var(--error);
            font-weight: 500;
        }

        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(6px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* ── Input Group ── */
        .input-group {
            margin-bottom: 14px;
            animation: fadeUp 0.4s ease both;
        }

        .input-group:nth-child(1) { animation-delay: 0.05s; }
        .input-group:nth-child(3) { animation-delay: 0.12s; }

        .input-group label {
            display: block;
            font-size: 0.68rem;
            font-weight: 600;
            color: var(--royal);
            letter-spacing: 0.06em;
            text-transform: uppercase;
            margin-bottom: 5px;
        }

        .input-wrap {
            position: relative;
        }

        .input-wrap svg {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 15px;
            height: 15px;
            color: var(--text-mid);
            pointer-events: none;
        }

        .input-wrap input {
            width: 100%;
            padding: 10px 13px 10px 36px;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.82rem;
            color: var(--text-dark);
            background: #f8f7f5;
            border: 1px solid var(--border);
            border-radius: 9px;
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
        }

        .input-wrap input::placeholder {
            color: #aaa;
            font-size: 0.78rem;
        }

        .input-wrap input:focus {
            border-color: var(--royal);
            background: var(--white);
            box-shadow: 0 0 0 3px rgba(26,58,107,0.1);
        }

        /* ── Divider ── */
        .divider {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 16px 0;
            animation: fadeUp 0.4s 0.08s ease both;
        }

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

        .divider span {
            font-size: 0.65rem;
            font-weight: 600;
            color: var(--text-mid);
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        /* ── Submit Button ── */
        .btn-search {
            width: 100%;
            margin-top: 6px;
            padding: 12px 20px;
            border: none;
            border-radius: 10px;
            background: linear-gradient(135deg, var(--navy) 0%, var(--royal) 100%);
            color: var(--white);
            font-family: 'DM Sans', sans-serif;
            font-size: 0.82rem;
            font-weight: 600;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 4px 16px rgba(13,31,60,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            animation: fadeUp 0.4s 0.18s ease both;
        }

        .btn-search svg {
            width: 15px;
            height: 15px;
            flex-shrink: 0;
        }

        .btn-search:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(13,31,60,0.38);
        }

        .btn-search:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(13,31,60,0.25);
        }

        /* ── Helper note ── */
        .helper-note {
            text-align: center;
            margin-top: 14px;
            font-size: 0.62rem;
            color: var(--text-mid);
            animation: fadeUp 0.4s 0.22s ease both;
        }

        /* ── Responsive ── */
        @media (max-width: 480px) {
            body { padding: 24px 12px; }
            .card-header { padding: 24px 20px 16px; }
            .card-body   { padding: 18px 20px 22px; }
            .logo-wrap img { width: 60px; height: 60px; }
        }