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

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

        body {
            font-family: 'DM Sans', sans-serif;
            background-color: var(--cream);
            background-image:
                radial-gradient(ellipse at 15% 0%, rgba(201,168,76,0.13) 0%, transparent 50%),
                radial-gradient(ellipse at 85% 100%, rgba(26,58,107,0.11) 0%, transparent 50%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 36px 16px 56px;
        }

        /* ── Card ── */
        .card {
            max-width: 560px;
            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(30px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* ── Header ── */
        .card-header {
            background: linear-gradient(135deg, var(--navy) 0%, var(--royal) 100%);
            padding: 30px 32px 24px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .card-header::before {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                45deg,
                transparent,
                transparent 36px,
                rgba(201,168,76,0.04) 36px,
                rgba(201,168,76,0.04) 72px
            );
        }

        .card-header::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--gold), transparent);
        }

        .logo-wrap {
            position: relative;
            display: inline-block;
            margin-bottom: 14px;
        }

        .logo-wrap img {
            width: 70px;
            height: 70px;
            object-fit: contain;
            border-radius: 50%;
            border: 2.5px solid var(--gold);
            background: rgba(255,255,255,0.08);
            padding: 5px;
            display: block;
            filter: drop-shadow(0 4px 10px rgba(201,168,76,0.3));
        }

        .card-header h2 {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(1.1rem, 3.5vw, 1.45rem);
            font-weight: 700;
            color: var(--white);
            line-height: 1.25;
            position: relative;
            letter-spacing: 0.01em;
            margin-bottom: 5px;
        }

        .card-header .faculty {
            font-size: 0.72rem;
            font-weight: 500;
            color: rgba(255,255,255,0.72);
            letter-spacing: 0.12em;
            text-transform: uppercase;
            position: relative;
            margin-bottom: 10px;
        }

        .date-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(201,168,76,0.18);
            border: 1px solid rgba(201,168,76,0.4);
            border-radius: 20px;
            padding: 4px 14px;
            position: relative;
        }

        .date-badge svg {
            width: 12px;
            height: 12px;
            flex-shrink: 0;
        }

        .date-badge span {
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--gold-light);
            letter-spacing: 0.05em;
        }

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

        .form-section-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--royal);
            letter-spacing: 0.14em;
            text-transform: uppercase;
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .form-section-title::before {
            content: '';
            display: inline-block;
            width: 3px;
            height: 14px;
            background: var(--gold);
            border-radius: 2px;
            flex-shrink: 0;
        }

        /* ── Form Group ── */
        .form-group {
            margin-bottom: 16px;
            animation: fadeUp 0.4s ease both;
        }

        .form-group:nth-child(1)  { animation-delay: 0.05s; }
        .form-group:nth-child(2)  { animation-delay: 0.08s; }
        .form-group:nth-child(3)  { animation-delay: 0.11s; }
        .form-group:nth-child(4)  { animation-delay: 0.14s; }
        .form-group:nth-child(5)  { animation-delay: 0.17s; }
        .form-group:nth-child(6)  { animation-delay: 0.20s; }
        .form-group:nth-child(7)  { animation-delay: 0.23s; }
        .form-group:nth-child(8)  { animation-delay: 0.26s; }
        .form-group:nth-child(9)  { animation-delay: 0.29s; }
        .form-group:nth-child(10) { animation-delay: 0.32s; }

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

        .form-group label {
            display: block;
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--royal);
            margin-bottom: 5px;
            letter-spacing: 0.02em;
        }

        /* Django renders inputs as .form-control or bare inputs/selects/textareas */
        .form-group input,
        .form-group select,
        .form-group textarea,
        .form-group .form-control {
            width: 100%;
            padding: 9px 13px;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.82rem;
            color: var(--text-dark);
            background: var(--input-bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
            appearance: none;
            -webkit-appearance: none;
        }

        .form-group select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a3a6b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            padding-right: 34px;
        }

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

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus,
        .form-group .form-control:focus {
            border-color: var(--border-focus);
            background: var(--white);
            box-shadow: 0 0 0 3px rgba(26,58,107,0.1);
        }

        /* ── Error ── */
        .error-message {
            font-size: 0.7rem;
            color: var(--error);
            margin-top: 4px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .error-message::before {
            content: '⚠';
            font-size: 0.65rem;
        }

        .form-group input.error,
        .form-group select.error,
        .form-group textarea.error {
            border-color: var(--error);
            background: var(--error-bg);
        }

        /* ── Django messages ── */
        .messages {
            margin-bottom: 18px;
        }

        .alert {
            padding: 9px 14px;
            border-radius: 8px;
            font-size: 0.78rem;
            font-weight: 500;
            border: 1px solid transparent;
        }

        .alert-success {
            background: rgba(30,110,58,0.08);
            border-color: rgba(30,110,58,0.25);
            color: var(--success);
        }

        .alert-danger, .alert-error {
            background: rgba(192,57,43,0.07);
            border-color: rgba(192,57,43,0.25);
            color: var(--error);
        }

        /* ── Submit Button ── */
        .btn-submit {
            width: 100%;
            margin-top: 6px;
            padding: 13px 24px;
            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.85rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s, background 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.35s ease both;
        }

        .btn-submit svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }

        .btn-submit:hover {
            background: linear-gradient(135deg, #162e55 0%, #234e8f 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(13,31,60,0.38);
        }

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

        /* ── Note ── */
        .form-note {
            text-align: center;
            margin-top: 14px;
            font-size: 0.65rem;
            color: var(--text-light);
            animation: fadeUp 0.4s 0.4s ease both;
        }

        /* ── Responsive ── */
        @media (max-width: 480px) {
            body { padding: 20px 10px 44px; }

            .card-header { padding: 22px 20px 18px; }
            .card-body   { padding: 20px 18px 24px; }

            .card-header h2 { font-size: 1.05rem; }
            .logo-wrap img  { width: 58px; height: 58px; }

            .form-group label        { font-size: 0.7rem; }
            .form-group input,
            .form-group select,
            .form-group textarea,
            .form-group .form-control { font-size: 0.8rem; padding: 8px 11px; }

            .btn-submit { font-size: 0.8rem; padding: 12px 18px; }
        }