/* ==================== TEMAS ==================== */

html[data-theme="dark"] {
    --bg-global:      #0d1b2a;
    --panel-left-bg:  #1b2d45;
    --panel-right-bg: #0d1b2a;
    --accent:         #2563eb;
    --accent-hover:   #3b82f6;
    --text-main:      #f8fafc;
    --text-muted:     #94afc7;
    --input-bg:       #162233;
    --input-border:   #2a3f58;
    --border-focus:   #2563eb;
    --feat-icon-bg:   rgba(37, 99, 235, 0.15);
    --feat-icon-border: rgba(37, 99, 235, 0.3);
    --feat-icon-color: #3b82f6;
    --footer-border:  #2a3f58;
    --error-bg:       rgba(239, 68, 68, 0.1);
    --error-text:     #f87171;
    --warning-bg:     rgba(245, 158, 11, 0.1);
    --warning-text:   #fbbf24;
    --circle1:        rgba(37, 99, 235, 0.12);
    --circle2:        rgba(37, 99, 235, 0.07);
}

html[data-theme="light"] {
    --bg-global:      #e8f0fe;
    --panel-left-bg:  #dce7fc;
    --panel-right-bg: #f0f5ff;
    --accent:         #1a365d;
    --accent-hover:   #2a4a7f;
    --text-main:      #0d1b2a;
    --text-muted:     #3a5580;
    --input-bg:       #e2ecfb;
    --input-border:   #b8cef5;
    --border-focus:   #2563eb;
    --feat-icon-bg:   rgba(26, 54, 93, 0.1);
    --feat-icon-border: rgba(26, 54, 93, 0.25);
    --feat-icon-color: #1a365d;
    --footer-border:  #b8cef5;
    --error-bg:       #fff5f5;
    --error-text:     #e53e3e;
    --warning-bg:     #fffaf0;
    --warning-text:   #dd6b20;
    --circle1:        rgba(26, 54, 93, 0.08);
    --circle2:        rgba(26, 54, 93, 0.05);
}

/* ==================== RESET ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-global);
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    transition: background-color 0.3s ease;
}

/* ==================== LAYOUT PRINCIPAL ==================== */
.page-wrap {
    display: flex;
    width: 100%;
    max-width: 860px;
    min-height: 520px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
}

/* ==================== PAINEL ESQUERDO ==================== */
.panel-left {
    width: 42%;
    background-color: var(--panel-left-bg);
    padding: 44px 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

.panel-left::before {
    content: '';
    position: absolute;
    top: -70px;
    left: -70px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: var(--circle1);
    pointer-events: none;
}

.panel-left::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: var(--circle2);
    pointer-events: none;
}

.panel-brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.brand-logo img {
    max-width: 160px;
    height: auto;
}

.brand-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.5px;
    line-height: 1;
}

.brand-title span {
    color: var(--accent-hover);
}

html[data-theme="light"] .brand-title span {
    color: var(--accent);
}

.brand-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.5;
    max-width: 200px;
}

/* Features */
.panel-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}

.feat-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.feat-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    flex-shrink: 0;
    background: var(--feat-icon-bg);
    border: 1px solid var(--feat-icon-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--feat-icon-color);
    font-size: 16px;
}

.feat-img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: none;
}

html[data-theme="dark"] .feat-img {
    filter: brightness(0) invert(1) opacity(0.7);
}

.feat-text {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.feat-text strong {
    display: block;
    font-size: 13px;
    color: var(--text-main);
    font-weight: 600;
    margin-bottom: 2px;
}

.campus-tag {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    opacity: 0.6;
    position: relative;
}

html[data-theme="dark"]  .logo-dark-theme  { display: block; }
html[data-theme="dark"]  .logo-light-theme { display: none; }
html[data-theme="light"] .logo-dark-theme  { display: none; }
html[data-theme="light"] .logo-light-theme { display: block; }

/* ==================== PAINEL DIREITO ==================== */
.panel-right {
    flex: 1;
    background-color: var(--panel-right-bg);
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    transition: background-color 0.3s ease;
}

.theme-toggle-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.theme-toggle-btn:hover {
    border-color: var(--accent);
}

.theme-icon-img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}

html[data-theme="dark"] #sun-icon  { display: block; }
html[data-theme="dark"] #moon-icon { display: none; }
html[data-theme="light"] #sun-icon  { display: none; }
html[data-theme="light"] #moon-icon { display: block; }

/* ==================== PASSOS ==================== */
.right-step {
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.4s ease;
}

.step-eyebrow {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--accent-hover);
    margin-bottom: 8px;
}

.step-eyebrow-warning {
    color: var(--warning-text) !important;
}

html[data-theme="light"] .step-eyebrow {
    color: var(--accent);
}

.step-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.3;
    letter-spacing: -0.3px;
    margin-bottom: 10px;
}

.step-sub {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 28px;
    max-width: 300px;
}

.btn-start {
    padding: 13px 28px;
    background-color: var(--accent);
    color: #ffffff;
    border: none;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
}

.btn-start:hover {
    background-color: var(--accent-hover);
    transform: translateY(-1px);
}

.btn-start:active {
    transform: translateY(0);
}

/* ==================== FORMULÁRIO E INPUTS ==================== */
.login-form {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.input-group {
    margin-bottom: 18px;
}

.input-group label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 7px;
}

.input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 13px;
    width: 16px;
    height: 16px;
    object-fit: contain;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.input-wrap input {
    width: 100%;
    padding: 12px 14px 12px 38px;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-main);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-wrap input::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
    font-size: 13px;
}

.input-wrap input:focus ~ .input-icon {
    opacity: 0.9;
}

.input-wrap input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.input-wrap input.is-invalid {
    border-color: var(--error-text);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

/* Olho do input */
.eye-btn {
    position: absolute;
    right: 13px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.eye-btn:hover {
    opacity: 0.9;
}

.eye-btn img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    pointer-events: none;
}

/* Botões */
.btn-submit {
    width: 100%;
    padding: 13px;
    background-color: var(--accent);
    color: #ffffff;
    border: none;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.15s;
    margin-top: 4px;
}

.btn-submit:hover {
    background-color: var(--accent-hover);
    transform: translateY(-1px);
}

/* Botão específico do Primeiro Acesso adicionado à tela de login */
.btn-first-access {
    background: none;
    border: none;
    color: var(--warning-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    margin-top: 14px;
    text-align: center;
    width: 100%;
}

.btn-first-access:hover {
    opacity: 0.8;
}

/* Rodapé */
.form-footer {
    border-top: 1px solid var(--footer-border);
    margin-top: 24px;
    padding-top: 18px;
}

.btn-back {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: color 0.2s;
    padding: 0;
}

.btn-back:hover {
    color: var(--text-main);
}

/* Erros customizados */
#password-match-error {
    color: var(--error-text);
    font-size: 11px;
    font-weight: 600;
    margin-top: 6px;
    display: none;
    animation: fadeIn 0.2s ease;
}

/* ==================== ALERTAS ==================== */
.alert-error {
    background-color: var(--error-bg);
    color: var(--error-text);
    padding: 11px 14px;
    border-left: 3px solid #ef4444;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 18px;
    font-weight: 500;
    display: none;
}

.alert-warning {
    background-color: var(--warning-bg);
    color: var(--warning-text);
    padding: 11px 14px;
    border-left: 3px solid #f59e0b;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 18px;
    font-weight: 500;
    display: none;
}

/* ==================== ANIMAÇÃO ==================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==================== RESPONSIVO ==================== */
@media (max-width: 640px) {
    .page-wrap {
        flex-direction: column;
        border-radius: 14px;
        max-width: 420px;
    }

    .panel-left {
        width: 100%;
        padding: 32px 28px;
        min-height: auto;
    }

    .panel-features {
        display: none;
    }

    .panel-right {
        padding: 32px 28px;
    }
}/* ==================== TEMAS ==================== */

 html[data-theme="dark"] {
     --bg-global:      #0d1b2a;
     --panel-left-bg:  #1b2d45;
     --panel-right-bg: #0d1b2a;
     --accent:         #2563eb;
     --accent-hover:   #3b82f6;
     --text-main:      #f8fafc;
     --text-muted:     #94afc7;
     --input-bg:       #162233;
     --input-border:   #2a3f58;
     --border-focus:   #2563eb;
     --feat-icon-bg:   rgba(37, 99, 235, 0.15);
     --feat-icon-border: rgba(37, 99, 235, 0.3);
     --feat-icon-color: #3b82f6;
     --footer-border:  #2a3f58;
     --error-bg:       rgba(239, 68, 68, 0.1);
     --error-text:     #f87171;
     --warning-bg:     rgba(245, 158, 11, 0.1);
     --warning-text:   #fbbf24;
     --circle1:        rgba(37, 99, 235, 0.12);
     --circle2:        rgba(37, 99, 235, 0.07);
 }

 html[data-theme="light"] {
     --bg-global:      #e8f0fe;
     --panel-left-bg:  #dce7fc;
     --panel-right-bg: #f0f5ff;
     --accent:         #1a365d;
     --accent-hover:   #2a4a7f;
     --text-main:      #0d1b2a;
     --text-muted:     #3a5580;
     --input-bg:       #e2ecfb;
     --input-border:   #b8cef5;
     --border-focus:   #2563eb;
     --feat-icon-bg:   rgba(26, 54, 93, 0.1);
     --feat-icon-border: rgba(26, 54, 93, 0.25);
     --feat-icon-color: #1a365d;
     --footer-border:  #b8cef5;
     --error-bg:       #fff5f5;
     --error-text:     #e53e3e;
     --warning-bg:     #fffaf0;
     --warning-text:   #dd6b20;
     --circle1:        rgba(26, 54, 93, 0.08);
     --circle2:        rgba(26, 54, 93, 0.05);
 }

 /* ==================== RESET ==================== */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     background-color: var(--bg-global);
     color: var(--text-main);
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 24px;
     transition: background-color 0.3s ease;
 }

 /* ==================== LAYOUT PRINCIPAL ==================== */
 .page-wrap {
     display: flex;
     width: 100%;
     max-width: 860px;
     min-height: 520px;
     border-radius: 18px;
     overflow: hidden;
     box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
 }

 /* ==================== PAINEL ESQUERDO ==================== */
 .panel-left {
     width: 42%;
     background-color: var(--panel-left-bg);
     padding: 44px 36px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     position: relative;
     overflow: hidden;
     transition: background-color 0.3s ease;
 }

 .panel-left::before {
     content: '';
     position: absolute;
     top: -70px;
     left: -70px;
     width: 240px;
     height: 240px;
     border-radius: 50%;
     background: var(--circle1);
     pointer-events: none;
 }

 .panel-left::after {
     content: '';
     position: absolute;
     bottom: -50px;
     right: -50px;
     width: 180px;
     height: 180px;
     border-radius: 50%;
     background: var(--circle2);
     pointer-events: none;
 }

 .panel-brand {
     display: flex;
     flex-direction: column;
     gap: 20px;
     position: relative;
 }

 .brand-logo img {
     max-width: 160px;
     height: auto;
 }

 .brand-title {
     font-size: 30px;
     font-weight: 700;
     color: var(--text-main);
     letter-spacing: -0.5px;
     line-height: 1;
 }

 .brand-title span {
     color: var(--accent-hover);
 }

 html[data-theme="light"] .brand-title span {
     color: var(--accent);
 }

 .brand-sub {
     font-size: 12px;
     color: var(--text-muted);
     margin-top: 6px;
     line-height: 1.5;
     max-width: 200px;
 }

 /* Features */
 .panel-features {
     display: flex;
     flex-direction: column;
     gap: 16px;
     position: relative;
 }

 .feat-item {
     display: flex;
     align-items: center;
     gap: 14px;
 }

 .feat-icon {
     width: 36px;
     height: 36px;
     border-radius: 9px;
     flex-shrink: 0;
     background: var(--feat-icon-bg);
     border: 1px solid var(--feat-icon-border);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--feat-icon-color);
     font-size: 16px;
 }

 .feat-img {
     width: 18px;
     height: 18px;
     object-fit: contain;
     filter: none;
 }

 html[data-theme="dark"] .feat-img {
     filter: brightness(0) invert(1) opacity(0.7);
 }

 .feat-text {
     font-size: 12px;
     color: var(--text-muted);
     line-height: 1.4;
 }

 .feat-text strong {
     display: block;
     font-size: 13px;
     color: var(--text-main);
     font-weight: 600;
     margin-bottom: 2px;
 }

 .campus-tag {
     font-size: 10px;
     letter-spacing: 1.5px;
     color: var(--text-muted);
     text-transform: uppercase;
     opacity: 0.6;
     position: relative;
 }

 html[data-theme="dark"]  .logo-dark-theme  { display: block; }
 html[data-theme="dark"]  .logo-light-theme { display: none; }
 html[data-theme="light"] .logo-dark-theme  { display: none; }
 html[data-theme="light"] .logo-light-theme { display: block; }

 /* ==================== PAINEL DIREITO ==================== */
 .panel-right {
     flex: 1;
     background-color: var(--panel-right-bg);
     padding: 44px 40px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     position: relative;
     transition: background-color 0.3s ease;
 }

 .theme-toggle-btn {
     position: absolute;
     top: 18px;
     right: 18px;
     background: var(--input-bg);
     border: 1px solid var(--input-border);
     border-radius: 50%;
     width: 36px;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.2s;
 }

 .theme-toggle-btn:hover {
     border-color: var(--accent);
 }

 .theme-icon-img {
     width: 18px;
     height: 18px;
     object-fit: contain;
     display: block;
 }

 html[data-theme="dark"] #sun-icon  { display: block; }
 html[data-theme="dark"] #moon-icon { display: none; }
 html[data-theme="light"] #sun-icon  { display: none; }
 html[data-theme="light"] #moon-icon { display: block; }

 /* ==================== PASSOS ==================== */
 .right-step {
     display: flex;
     flex-direction: column;
     animation: fadeIn 0.4s ease;
 }

 .step-eyebrow {
     font-size: 11px;
     letter-spacing: 2px;
     text-transform: uppercase;
     font-weight: 600;
     color: var(--accent-hover);
     margin-bottom: 8px;
 }

 .step-eyebrow-warning {
     color: var(--warning-text) !important;
 }

 html[data-theme="light"] .step-eyebrow {
     color: var(--accent);
 }

 .step-title {
     font-size: 22px;
     font-weight: 700;
     color: var(--text-main);
     line-height: 1.3;
     letter-spacing: -0.3px;
     margin-bottom: 10px;
 }

 .step-sub {
     font-size: 13px;
     color: var(--text-muted);
     line-height: 1.65;
     margin-bottom: 28px;
     max-width: 300px;
 }

 .btn-start {
     padding: 13px 28px;
     background-color: var(--accent);
     color: #ffffff;
     border: none;
     border-radius: 9px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: background-color 0.2s, transform 0.15s;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     align-self: flex-start;
 }

 .btn-start:hover {
     background-color: var(--accent-hover);
     transform: translateY(-1px);
 }

 .btn-start:active {
     transform: translateY(0);
 }

 /* ==================== FORMULÁRIO E INPUTS ==================== */
 .login-form {
     display: flex;
     flex-direction: column;
     width: 100%;
 }

 .input-group {
     margin-bottom: 18px;
 }

 .input-group label {
     display: block;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     color: var(--text-muted);
     margin-bottom: 7px;
 }

 .input-wrap {
     position: relative;
     display: flex;
     align-items: center;
 }

 .input-icon {
     position: absolute;
     left: 13px;
     width: 16px;
     height: 16px;
     object-fit: contain;
     pointer-events: none;
     opacity: 0.5;
     transition: opacity 0.2s ease;
 }

 .input-wrap input {
     width: 100%;
     padding: 12px 14px 12px 38px;
     background-color: var(--input-bg);
     border: 1px solid var(--input-border);
     border-radius: 8px;
     font-size: 14px;
     color: var(--text-main);
     outline: none;
     transition: border-color 0.2s, box-shadow 0.2s;
 }

 .input-wrap input::placeholder {
     color: var(--text-muted);
     opacity: 0.5;
     font-size: 13px;
 }

 .input-wrap input:focus ~ .input-icon {
     opacity: 0.9;
 }

 .input-wrap input:focus {
     border-color: var(--border-focus);
     box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
 }

 .input-wrap input.is-invalid {
     border-color: var(--error-text);
     box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
 }

 /* Olho do input */
 .eye-btn {
     position: absolute;
     right: 13px;
     background: none;
     border: none;
     cursor: pointer;
     padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0.5;
     transition: opacity 0.2s;
 }

 .eye-btn:hover {
     opacity: 0.9;
 }

 .eye-btn img {
     width: 16px;
     height: 16px;
     object-fit: contain;
     pointer-events: none;
 }

 /* Botões */
 .btn-submit {
     width: 100%;
     padding: 13px;
     background-color: var(--accent);
     color: #ffffff;
     border: none;
     border-radius: 9px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: background-color 0.2s, transform 0.15s;
     margin-top: 4px;
 }

 .btn-submit:hover {
     background-color: var(--accent-hover);
     transform: translateY(-1px);
 }

 /* Botão específico do Primeiro Acesso adicionado à tela de login */
 .btn-first-access {
     background: none;
     border: none;
     color: var(--warning-text);
     font-size: 12px;
     font-weight: 600;
     cursor: pointer;
     transition: opacity 0.2s;
     margin-top: 14px;
     text-align: center;
     width: 100%;
 }

 .btn-first-access:hover {
     opacity: 0.8;
 }

 /* Rodapé */
 .form-footer {
     border-top: 1px solid var(--footer-border);
     margin-top: 24px;
     padding-top: 18px;
 }

 .btn-back {
     background: none;
     border: none;
     color: var(--text-muted);
     font-size: 12px;
     cursor: pointer;
     transition: color 0.2s;
     padding: 0;
 }

 .btn-back:hover {
     color: var(--text-main);
 }

 /* Erros customizados */
 #password-match-error {
     color: var(--error-text);
     font-size: 11px;
     font-weight: 600;
     margin-top: 6px;
     display: none;
     animation: fadeIn 0.2s ease;
 }

 /* ==================== ALERTAS ==================== */
 .alert-error {
     background-color: var(--error-bg);
     color: var(--error-text);
     padding: 11px 14px;
     border-left: 3px solid #ef4444;
     border-radius: 6px;
     font-size: 13px;
     margin-bottom: 18px;
     font-weight: 500;
     display: none;
 }

 .alert-warning {
     background-color: var(--warning-bg);
     color: var(--warning-text);
     padding: 11px 14px;
     border-left: 3px solid #f59e0b;
     border-radius: 6px;
     font-size: 13px;
     margin-bottom: 18px;
     font-weight: 500;
     display: none;
 }

 /* ==================== ANIMAÇÃO ==================== */
 @keyframes fadeIn {
     from { opacity: 0; transform: translateY(10px); }
     to   { opacity: 1; transform: translateY(0); }
 }

 /* ==================== RESPONSIVO ==================== */
 @media (max-width: 640px) {
     .page-wrap {
         flex-direction: column;
         border-radius: 14px;
         max-width: 420px;
     }

     .panel-left {
         width: 100%;
         padding: 32px 28px;
         min-height: auto;
     }

     .panel-features {
         display: none;
     }

     .panel-right {
         padding: 32px 28px;
     }
 }
 /* ==================== ESTILIZAÇÃO DO PRIMEIRO ACESSO ==================== */
 .first-access-checkbox-wrap {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 22px;
     margin-top: 4px;
     padding: 2px 0;
 }

 /* Customização da caixinha de seleção */
 .first-access-checkbox-wrap input[type="checkbox"] {
     width: 16px;
     height: 16px;
     cursor: pointer;
     accent-color: var(--accent); /* Preenche com a cor do tema ativo */
     border-radius: 4px;
     border: 1px solid var(--input-border);
     background-color: var(--input-bg);
     transition: transform 0.15s ease, accent-color 0.2s ease;
 }

 /* Efeito sutil ao passar o mouse na caixinha */
 .first-access-checkbox-wrap input[type="checkbox"]:hover {
     transform: scale(1.05);
 }

 /* Estilo do texto informativo */
 .first-access-checkbox-wrap label {
     font-size: 13px;
     font-weight: 500;
     color: var(--text-muted);
     cursor: pointer;
     user-select: none; /* Evita que o texto seja selecionado acidentalmente ao clicar */
     transition: color 0.2s ease;
 }

 /* Mudança visual quando a caixinha estiver ativada */
 .first-access-checkbox-wrap input[type="checkbox"]:checked + label {
     color: var(--warning-text); /* Altera para a cor de aviso amarela/laranja do seu tema */
     font-weight: 600;
 }