:root {
    --robotics-navy: #12243a;
    --robotics-blue: #1b668f;
    --robotics-cyan: #42b7c5;
    --robotics-gold: #f4b63f;
    --page-bg: #f3f6f8;
}

body {
    background: var(--page-bg);
    color: #1f2c38;
    min-height: 100vh;
}

.form-hero {
    color: #fff;
    background:
        linear-gradient(120deg, rgba(66, 183, 197, .12), transparent 45%),
        var(--robotics-navy);
    border-bottom: 5px solid var(--robotics-gold);
}

.robot-mark {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 3px solid var(--robotics-cyan);
    border-radius: 14px;
    color: var(--robotics-gold);
    font-size: 1.7rem;
    font-weight: 800;
    transform: rotate(-4deg);
}

.eyebrow {
    color: var(--robotics-cyan);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.form-shell {
    max-width: 960px;
}

.form-card {
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 .35rem 1.2rem rgba(18, 36, 58, .08);
}

.form-card > .card-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border-bottom: 1px solid #e5eaee;
    border-radius: 1rem 1rem 0 0;
}

.form-card > .card-header h2 {
    margin: 0;
    color: var(--robotics-navy);
    font-size: 1.12rem;
    font-weight: 750;
}

.section-number {
    display: inline-grid;
    place-items: center;
    min-width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--robotics-blue);
    color: #fff;
    font-weight: 800;
}

.required,
.field-error {
    color: #b42318;
}

.field-error {
    margin-top: .5rem;
    font-size: .875rem;
}

.legend-note {
    color: #667482;
    font-size: .875rem;
    font-weight: 400;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
}

.choice-grid.three-col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.choice-card {
    margin: 0;
    padding: .75rem .9rem .75rem 2.25rem;
    border: 1px solid #d8e0e5;
    border-radius: .65rem;
    background: #fff;
}

.choice-card:has(.form-check-input:checked) {
    border-color: var(--robotics-blue);
    background: #eef8fb;
}

.choice-grid.compact {
    row-gap: .5rem;
    font-size: .94rem;
}

.form-check-input:checked {
    border-color: var(--robotics-blue);
    background-color: var(--robotics-blue);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--robotics-cyan);
    box-shadow: 0 0 0 .25rem rgba(66, 183, 197, .2);
}

.skill-table-wrap {
    border: 1px solid #dfe5e9;
    border-radius: .7rem;
}

.skill-table th {
    min-width: 120px;
    font-size: .88rem;
}

.skill-table thead th {
    color: #4c5a67;
    background: #f6f8f9;
}

.parent-help-panel {
    padding: 1rem;
    background: #f7fafb;
    border: 1px solid #dfe7ea;
    border-left: 4px solid var(--robotics-cyan);
    border-radius: .75rem;
}

.btn-primary {
    --bs-btn-bg: var(--robotics-blue);
    --bs-btn-border-color: var(--robotics-blue);
    --bs-btn-hover-bg: #155473;
    --bs-btn-hover-border-color: #155473;
}

.success-card {
    max-width: 640px;
}

.success-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    color: #fff;
    background: #27834f;
    border-radius: 50%;
    font-size: 2rem;
    font-weight: 700;
}

.admin-login {
    max-width: 520px;
}

.submission-detail dt {
    color: #53606b;
}

.submission-detail dd {
    white-space: normal;
}

@media (max-width: 767.98px) {
    .choice-grid,
    .choice-grid.three-col {
        grid-template-columns: 1fr;
    }

    .form-card .card-body {
        padding: 1.1rem !important;
    }

    .skill-table {
        min-width: 700px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}