.page-teacher-application{
    background:var(--bg-soft);
    font-family:"Plus Jakarta Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.teacher-form-section{
    align-items:center;
    display:flex;
    min-height:calc(100vh - 84px);
    padding:80px 0;
}

.teacher-form-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:0 20px 40px -10px rgba(0,0,0,.12);
    margin:0 auto;
    max-width:650px;
    overflow:hidden;
    position:relative;
}

[data-theme="light"] .teacher-form-card{
    background:#ffffff;
}

.teacher-form-progress{
    background:rgba(148,163,184,.18);
    height:4px;
}

.teacher-form-progress__bar{
    background:var(--cyan);
    height:100%;
    transition:width .25s ease;
    width:33%;
}

.teacher-form-header,
.teacher-form-step,
.teacher-form-success,
.teacher-form-alert{
    padding:40px;
}

.teacher-form-header{
    border-bottom:1px solid var(--line);
    padding-bottom:20px;
    text-align:center;
}

.teacher-form-header h1,
.teacher-form-success h2{
    color:var(--text);
    font-size:1.8rem;
    font-weight:800;
    letter-spacing:0;
    line-height:1.2;
    margin:0;
}

.teacher-form-header p,
.teacher-form-success p{
    color:var(--muted);
    font-size:.95rem;
    line-height:1.6;
    margin:8px 0 0;
}

.teacher-form-alert--error{
    background:#fff4f1;
    border-bottom:1px solid #ffd2c6;
    color:#9f2414;
}

.teacher-form-alert ul{
    margin:10px 0 0;
    padding-left:18px;
}

.teacher-form-step,
.teacher-form-success{
    display:none;
}

.teacher-form-step.is-active,
.teacher-form-success.is-active{
    display:block;
}

.teacher-form-step__title{
    align-items:center;
    border-bottom:1px solid var(--line);
    color:var(--text);
    display:flex;
    font-size:1.1rem;
    font-weight:700;
    gap:10px;
    margin-bottom:24px;
    padding-bottom:12px;
}

.teacher-form-step__title i{
    color:var(--cyan);
}

.teacher-form-grid{
    display:grid;
    gap:18px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.teacher-form-field{
    display:grid;
    gap:8px;
    margin-bottom:18px;
}

.teacher-form-field[hidden]{
    display:none !important;
}

.teacher-form-field--full{
    grid-column:1 / -1;
}

.teacher-form-field span,
.teacher-form-check span{
    color:var(--text);
    font-size:.85rem;
    font-weight:600;
}

.teacher-form-field input,
.teacher-form-field select,
.teacher-form-field textarea{
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:6px;
    color:var(--text);
    font:inherit;
    font-size:.95rem;
    min-height:46px;
    outline:none;
    padding:12px 14px;
    width:100%;
}

[data-theme="light"] .teacher-form-field input,
[data-theme="light"] .teacher-form-field textarea,
[data-theme="light"] .teacher-form-select-trigger{
    background:#f8fafc;
    border-color:#e2e8f0;
    color:#111827;
}

.teacher-form-field textarea{
    min-height:110px;
    resize:vertical;
}

.teacher-form-field input:focus,
.teacher-form-field textarea:focus{
    border-color:var(--cyan);
    box-shadow:0 0 0 3px rgba(0,209,224,.12);
}

.teacher-form-field select[data-teacher-native-select]{
    height:1px;
    left:0;
    opacity:0;
    pointer-events:none;
    position:absolute;
    top:0;
    width:1px;
}

.teacher-form-select-trigger{
    align-items:center;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:6px;
    color:var(--text);
    cursor:pointer;
    display:flex;
    font:inherit;
    font-size:.95rem;
    justify-content:space-between;
    min-height:46px;
    outline:none;
    padding:12px 14px;
    text-align:left;
    width:100%;
}

.teacher-form-select-trigger i{
    color:var(--muted);
    font-size:.78rem;
}

.teacher-form-select-trigger:focus,
.teacher-form-select-trigger.is-open{
    border-color:var(--cyan);
    box-shadow:0 0 0 3px rgba(0,209,224,.12);
}

.teacher-form-select-trigger.is-invalid{
    border-color:#ef4444;
    box-shadow:0 0 0 3px rgba(239,68,68,.12);
}

.teacher-form-select-portal{
    background:#121720;
    border:1px solid rgba(0,209,224,.55);
    border-radius:10px;
    box-shadow:0 18px 34px rgba(0,0,0,.32);
    display:none;
    max-height:320px;
    overflow-y:auto;
    padding:6px;
    position:fixed;
    scrollbar-color:rgba(0,209,224,.45) transparent;
    scrollbar-width:thin;
    z-index:100000;
}

[data-theme="light"] .teacher-form-select-portal{
    background:#ffffff;
    border-color:rgba(11,141,151,.38);
    box-shadow:0 18px 34px rgba(15,23,42,.16);
}

.teacher-form-select-portal.is-open{
    display:grid;
    gap:4px;
}

.teacher-form-select-portal::-webkit-scrollbar{
    width:5px;
}

.teacher-form-select-portal::-webkit-scrollbar-thumb{
    background:rgba(0,209,224,.55);
    border-radius:999px;
}

.teacher-form-select-portal button{
    background:transparent;
    border:0;
    border-radius:7px;
    color:#f8fafc;
    cursor:pointer;
    font:inherit;
    padding:9px 12px;
    text-align:left;
}

[data-theme="light"] .teacher-form-select-portal button{
    color:#111827;
}

.teacher-form-select-portal button:hover,
.teacher-form-select-portal button.is-selected{
    background:rgba(0,209,224,.16);
    color:var(--cyan);
}

[data-theme="light"] .teacher-form-select-portal button:hover,
[data-theme="light"] .teacher-form-select-portal button.is-selected{
    background:rgba(11,141,151,.12);
    color:#0b8d97;
}

.teacher-form-options{
    display:grid;
    gap:12px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.teacher-form-options--two{
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.teacher-form-options label,
.teacher-form-check{
    align-items:center;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:8px;
    color:var(--text);
    cursor:pointer;
    display:flex;
    gap:10px;
    min-height:48px;
    padding:12px 14px;
}

[data-theme="light"] .teacher-form-options label,
[data-theme="light"] .teacher-form-check{
    background:#f8fafc;
    border-color:#e2e8f0;
}

.teacher-form-options label:hover,
.teacher-form-check:hover{
    border-color:rgba(0,209,224,.45);
}

.teacher-form-options input,
.teacher-form-check input{
    -webkit-appearance:none;
    appearance:none;
    background:transparent;
    border:2px solid rgba(148,163,184,.65);
    box-shadow:none;
    display:grid;
    flex:0 0 auto;
    height:18px;
    margin:0;
    min-height:0;
    outline:none;
    padding:0;
    place-content:center;
    width:18px;
}

.teacher-form-options input[type="radio"]{
    border-radius:50%;
}

.teacher-form-options input[type="checkbox"],
.teacher-form-check input[type="checkbox"]{
    border-radius:4px;
}

.teacher-form-options input::before,
.teacher-form-check input::before{
    background:var(--cyan);
    content:"";
    transform:scale(0);
    transition:transform .15s ease;
}

.teacher-form-options input[type="radio"]::before{
    border-radius:50%;
    height:8px;
    width:8px;
}

.teacher-form-options input[type="checkbox"]::before,
.teacher-form-check input[type="checkbox"]::before{
    clip-path:polygon(14% 44%, 0 65%, 46% 100%, 100% 18%, 80% 0, 40% 62%);
    height:10px;
    width:10px;
}

.teacher-form-options input:checked,
.teacher-form-check input:checked{
    background:rgba(0,209,224,.10);
    border-color:var(--cyan);
}

.teacher-form-options input:checked::before,
.teacher-form-check input:checked::before{
    transform:scale(1);
}

.teacher-form-options input:focus-visible,
.teacher-form-check input:focus-visible{
    box-shadow:0 0 0 3px rgba(0,209,224,.12);
}

.teacher-form-actions{
    align-items:center;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    margin-top:30px;
    padding-top:20px;
}

.teacher-form-actions--end{
    justify-content:flex-end;
}

.teacher-form-btn{
    align-items:center;
    border:0;
    border-radius:6px;
    cursor:pointer;
    display:inline-flex;
    font:inherit;
    font-size:.95rem;
    font-weight:700;
    gap:8px;
    justify-content:center;
    min-height:48px;
    padding:12px 24px;
    transition:transform .2s ease, background-color .2s ease, border-color .2s ease;
}

.teacher-form-btn--primary,
.teacher-form-btn--submit{
    background:var(--cta-green);
    color:#fff;
}

.teacher-form-btn--primary:hover,
.teacher-form-btn--submit:hover{
    background:var(--cta-green-dark);
    transform:translateY(-1px);
}

.teacher-form-btn--soft{
    background:transparent;
    border:1px solid var(--line);
    color:var(--muted);
}

.teacher-form-btn--soft:hover{
    border-color:rgba(0,209,224,.45);
    color:var(--text);
}

.teacher-form-success{
    text-align:center;
}

.teacher-form-success__icon{
    align-items:center;
    background:rgba(22,163,74,.14);
    border-radius:50%;
    color:#22c55e;
    display:flex;
    font-size:2rem;
    height:80px;
    justify-content:center;
    margin:0 auto 20px;
    width:80px;
}

.teacher-form-success .teacher-form-btn{
    margin-top:28px;
}

@media (max-width: 680px){
    .teacher-form-section{
        padding:52px 0;
    }

    .teacher-form-card{
        border-radius:14px;
        max-width:100%;
    }

    .teacher-form-header,
    .teacher-form-step,
    .teacher-form-success,
    .teacher-form-alert{
        padding:28px 22px;
    }

    .teacher-form-grid,
    .teacher-form-options,
    .teacher-form-options--two{
        grid-template-columns:1fr;
    }

    .teacher-form-actions{
        align-items:stretch;
        flex-direction:column-reverse;
        gap:12px;
    }

    .teacher-form-actions--end{
        align-items:stretch;
    }
}