* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Inter", Arial, Helvetica, sans-serif;
 }

 body {
     background: linear-gradient(135deg, #0F67CF 0%, #0B43D6 50%, #0D3DB4 100%);
     min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: flex-start;
     padding: 30px 20px;
     position: relative;
 }

 body::-webkit-scrollbar {
     width: 12px;
 }

 body::-webkit-scrollbar-track {
     background: #0B43D6;
 }

 body::-webkit-scrollbar-thumb {
     background: #250dad;
     border-radius: 20px;
 }

 body::-webkit-scrollbar-thumb:hover {
     background: #ffffff;
 }

 /* efeito de fundo */
 body::before {
     content: "";
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: radial-gradient(circle at 20% 40%, rgba(6, 208, 253, 0.15) 0%, transparent 70%);
     pointer-events: none;
 }

 /* container principal */
 .app-container {
     max-width: 850px;
     width: 100%;
     background: white;
     border-radius: 48px;
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
     overflow: hidden;
     transition: all 0.3s;
     position: relative;
     z-index: 2;
 }

 /* etapas */
 .step {
     padding: 36px 38px;
 }

 .step.hidden {
     display: none;
 }

 /* termo compromisso */
 .termo-box {
     background: linear-gradient(145deg, #f0f7ff 0%, #e8f0fe 100%);
     border-radius: 28px;
     padding: 28px;
     border: 1px solid #06D0FD40;
     margin: 25px 0;
     max-height: 400px;
     overflow-y: auto;
     box-shadow: inset 0 1px 3px #0001, 0 5px 15px #0F67CF20;
 }

 .termo-box h3 {
     color: #0B43D6;
     margin-bottom: 18px;
     font-size: 1.5rem;
     border-left: 6px solid #06D0FD;
     padding-left: 18px;
 }

 .regras-texto {
     color: #1a2c4a;
     line-height: 1.6;
     white-space: pre-wrap;
     font-size: 0.96rem;
 }

 .btn-aceitar {
     background: linear-gradient(95deg, #0F67CF, #0E63DB);
     border: none;
     width: 100%;
     padding: 18px;
     font-size: 1.2rem;
     font-weight: bold;
     color: white;
     border-radius: 60px;
     cursor: pointer;
     transition: 0.2s;
     box-shadow: 0 8px 20px #0F67CF60;
     letter-spacing: 1px;
 }

 .btn-aceitar:hover {
     background: linear-gradient(95deg, #0B43D6, #1350C4);
     transform: translateY(-2px);
     box-shadow: 0 12px 25px #0B43D680;
 }

 .new-feedback {
     background: linear-gradient(95deg, #0F67CF, #0E63DB);
     border: none;
     width: 20%;
     padding: 10px;
     font-size: 12px;
     font-weight: bold;
     color: white;
     border-radius: 60px;
     cursor: pointer;
     transition: 0.2s;
     box-shadow: 0 8px 20px #0F67CF60;
     letter-spacing: 1px;
 }

 .new-feedback:hover {
     background: linear-gradient(95deg, #0B43D6, #1350C4);
     transform: translateY(-2px);
     box-shadow: 0 12px 25px #0B43D680;
 }

 /* avaliação profissional */
 .logo-area {
     text-align: center;
     margin: 15px 0 25px;
 }

 .logo-academia {
     display: inline-block;
     padding: 0;
     background: transparent;
     border: none;
     box-shadow: none;
     border-radius: 0;
 }

 .logo-academia img {
     display: block;
     max-width: min(100%, 260px);
     width: 100%;
     height: auto;
     margin: 0 auto;
 }

 .form-row {
     display: flex;
     gap: 20px;
     flex-wrap: wrap;
     margin: 25px 0 20px;
 }

 .nav-bar {
     width: 100%;
     box-shadow: 0 6px 14px rgba(4, 35, 112, 0.554);
     border: 1px solid #06D0FD40;
     border-radius: 10px;
     display: flex;
     overflow: hidden;
     margin-bottom: 10px;
     padding: 0;
 }

 .nav-item {
     flex: 1;
     border: none;
     background: transparent;
     text-decoration: none;
     text-align: center;
     padding: 14px 10px;
     color: #0B43D6;
     font-weight: 700;
     cursor: pointer;
     transition: 0.2s;
 }

 .nav-item:hover,
 .nav-item.active {
     background-color: #0B43D6;
     color: #ffffff;
 }

 .tab-content {
     display: none;
     animation: fadeTab 0.2s ease;
 }

 .tab-content.active {
     display: block;
 }

 .input-group {
     flex: 1;
 }

 .input-group label {
     font-weight: 700;
     color: #0B43D6;
     display: block;
     margin-bottom: 8px;
     font-size: 0.9rem;
 }

 .input-group input {
     width: 100%;
     padding: 12px 18px;
     border-radius: 40px;
     border: 2px solid #cde0ff;
     font-size: 1rem;
     background: #ffffff;
     transition: 0.2s;
 }

 .input-group input:focus {
     outline: none;
     border-color: #06D0FD;
     box-shadow: 0 0 0 3px #06D0FD30;
 }

 .sugestao-box textarea {
     width: 100%;
     padding: 14px 18px;
     border-radius: 28px;
     border: 2px solid #cde0ff;
     font-size: 0.9rem;
     resize: vertical;
     transition: 0.2s;
 }

 .sugestao-box textarea:focus {
     outline: none;
     border-color: #06D0FD;
     box-shadow: 0 0 0 3px #06D0FD30;
 }

 .caracteres {
     text-align: right;
     font-size: 0.75rem;
     color: #0F67CF;
     margin-top: 6px;
     font-weight: 500;
 }

 /* profissionais grid */
 .profissionais-grid {
     display: flex;
     flex-direction: column;
     gap: 20px;
     margin: 28px 0;
 }

 .card-prof {
     background: linear-gradient(115deg, #ffffff 0%, #f5faff 100%);
     border-radius: 32px;
     padding: 18px 22px;
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 18px;
     box-shadow: 0 6px 14px rgba(11, 67, 214, 0.12);
     border: 1px solid #06D0FD40;
     transition: transform 0.2s;
 }

 .card-prof:hover {
     transform: scale(1.01);
     border-color: #06D0FD;
 }

 .prof-img {
     width: 75px;
     height: 75px;
     background: linear-gradient(145deg, #0E63DB, #0B43D6);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2.5rem;
     font-weight: bold;
     color: white;
     box-shadow: 0 5px 12px #0F67CF60;
     border: 2px solid #06D0FD;
 }

 .prof-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 50%;
     display: block;
 }

 .admin-prof-thumb {
     width: 28px;
     height: 28px;
     object-fit: cover;
     border-radius: 50%;
     border: 1px solid #06D0FD;
     display: inline-block;
 }

 .prof-info {
     flex: 2;
     min-width: 140px;
 }

 .prof-nome {
     font-size: 1.2rem;
     font-weight: 800;
     color: #0B43D6;
 }

 .avaliacao-smiles {
     display: flex;
     gap: 18px;
     align-items: center;
     background: white;
     padding: 8px 20px;
     border-radius: 60px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
     border: 1px solid #06D0FD;
 }

 .smile-option {
     font-size: 2rem;
     cursor: pointer;
     transition: 0.1s;
     filter: grayscale(0.4);
     opacity: 0.7;
 }

 .smile-option.selected {
     filter: grayscale(0);
     opacity: 1;
     transform: scale(1.25);
     text-shadow: 0 0 12px #06D0FD;
 }

 .smile-option:hover {
     transform: scale(1.2);
     filter: grayscale(0);
 }

 .btn-enviar {
     background: linear-gradient(95deg, #1350C4, #0D3DB4);
     color: white;
     border: none;
     padding: 16px;
     width: 100%;
     font-size: 1.2rem;
     border-radius: 60px;
     font-weight: bold;
     margin-top: 15px;
     cursor: pointer;
     transition: 0.2s;
     box-shadow: 0 6px 14px #0F67CF80;
 }

 .btn-enviar:hover {
     background: linear-gradient(95deg, #0B43D6, #0D3DB4);
     transform: translateY(-2px);
 }

 /* admin panel (hidden by default) */
 .admin-panel {
     background: linear-gradient(145deg, #0D3DB4, #0B43D6);
     color: #eee;
     padding: 24px;
     border-top: 3px solid #06D0FD;
     display: none;
 }

 .admin-panel.show {
     display: block;
 }

 #listaProfissionaisAdmin {
     margin-bottom: 20px;
     border: 2px solid #06133b;
     border-radius: 20px;
     padding: 10px;
     box-shadow: inset 0 1px 2px #06D0FD20, 0 5px 12px #0002;
 }

 .admin-profissional-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;

     width: 100%;
     padding: 10px;
     margin-bottom: 10px;

     background: rgba(255, 255, 255, 0.06);
     border-radius: 16px;
 }

 .admin-profissional-item:last-child {
     margin-bottom: 0;
 }

 .admin-prof-thumb {
     width: 42px;
     height: 42px;
     min-width: 42px;
     border-radius: 50%;
     object-fit: cover;
 }

 .admin-profissional-item strong {
     flex: 1;
     min-width: 0;

     font-size: 0.95rem;
     overflow-wrap: anywhere;
 }

 .admin-profissional-item button {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;

     white-space: nowrap;
 }

 .admin-section {
     margin-bottom: 30px;
     background: #0F2A7A;
     padding: 20px;
     border-radius: 28px;
     box-shadow: inset 0 1px 2px #06D0FD20, 0 5px 12px #0002;
 }

 .admin-section h4 {
     margin-bottom: 15px;
     color: #ffffff;
     font-size: 1.2rem;
 }

 .input-foto-hidden {
     display: none;
 }

.preview-foto-btn {
    width: 96px;
    height: 96px;
    padding: 0;
    border-radius: 50%;
    border: 2px dashed #06D0FD;
    background: #f0f5ff;
    color: #0B43D6;
    cursor: pointer;
    overflow: hidden;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;

    transition: 0.2s;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.preview-foto-btn:hover {
    transform: scale(0.96);
    background: #ffffff;
}

.preview-foto-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.preview-foto-btn.has-image .preview-foto-img {
    display: block;
}

.preview-foto-btn.has-image .preview-foto-texto {
    display: none;
}

.preview-foto-texto {
    position: relative;
    z-index: 2;
    padding: 10px;
    line-height: 1.15;
}

 .admin-section textarea,
 .admin-section input {
     width: 100%;
     padding: 12px;
     border-radius: 30px;
     border: none;
     margin-bottom: 12px;
     background: #f0f5ff;
     font-weight: 500;
 }

 textarea::-webkit-scrollbar {
     width: 12px;
 }

 textarea::-webkit-scrollbar-track {
     background: transparent;
 }

 textarea::-webkit-scrollbar-thumb {
     background: #0B43D6;
     border-radius: 20px;
 }

 textarea::-webkit-scrollbar-thumb:hover {
     background: #ffffff;
 }

 .new-trainer-container {
     width: 100%;
     margin-bottom: 22px;
     padding: 18px;
     border: 1px solid #06133b;
     border-radius: 24px;
     box-shadow: inset 0 1px 2px #06D0FD20, 0 10px 24px rgba(0, 0, 0, 0.14);
 }

 .new-trainer-header {
     margin-bottom: 16px;
 }

 .new-trainer-header h5 {
     color: #ffffff;
     font-size: 1rem;
     font-weight: 800;
     margin-bottom: 4px;
 }

 .new-trainer-header p {
     color: #b8dcff;
     font-size: 0.82rem;
     line-height: 1.4;
 }

 .new-trainer-form {
     display: grid;
     grid-template-columns: 96px 1fr;
     gap: 16px;
     align-items: center;
 }

 .new-trainer-fields {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .novo-prof-nome {
     width: 100%;
     padding: 13px 16px;
     border-radius: 999px;
     border: 2px solid transparent;
     background: #f0f5ff;
     color: #0A2370;
     font-size: 0.95rem;
     font-weight: 600;
     outline: none;
     transition: 0.2s;
 }

 .novo-prof-nome::placeholder {
     color: #6076a8;
 }

 .novo-prof-nome:focus {
     border-color: #06D0FD;
     box-shadow: 0 0 0 3px rgba(6, 208, 253, 0.22);
     background: #ffffff;
 }

 .new-trainer-btn {
    display: flex;
    justify-content: end;
 }

 .add-prof-btn {
     width: fit-content;
     min-width: 150px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;

     padding: 12px 18px;
     border-radius: 999px;
     border: none;
     background: linear-gradient(95deg, #06D0FD, #0F67CF);
     color: #ffffff;
     font-weight: 800;
     cursor: pointer;
     transition: 0.2s;
 }

 .add-prof-btn:hover {
     transform: translateY(-2px);
 }

 .add-prof-btn:active {
     transform: scale(0.97);
 }

 .admin-section button {
     background: #0e36ac;
     border: 2px solid #06133b;
     border: none;
     padding: 10px 22px;
     border-radius: 40px;
     color: #ffffff;
     font-weight: bold;
     cursor: pointer;
     transition: 0.2s;
 }

 .admin-section button:hover {
     background: white;
     color: #0A2370;
     transform: scale(0.97);
 }

 .ranking-list {
     background: #0A2370;
     padding: 16px;
     border-radius: 24px;
     color: white;
 }

 .logout-btn {
     background: #ff5e6e;
     border: 0px;
     padding: 10px;
     border-radius: 20px;
     cursor: pointer;
     width: auto;
     display: inline-block;
     color: white !important;
     transition: all .2s;
 }

 .logout-btn:hover {
     background-color: #9d0e1c;
 }

 .admin-msg {
     font-size: 0.8rem;
     margin-top: 8px;
     color: #b8dcff;
 }

 footer {
     font-size: 0.7rem;
     text-align: center;
     padding: 15px;
     background: #f0f7ff;
     color: #0F67CF;
     font-weight: 500;
     border-top: 1px solid #06D0FD40;
 }

 .modal-overlay {
     position: fixed;
     inset: 0;
     background: rgba(3, 10, 35, 0.72);
     backdrop-filter: blur(8px);
     z-index: 999;

     display: flex;
     align-items: center;
     justify-content: center;

     padding: 20px;
 }

 .modal-overlay.hidden {
     display: none;
 }

 .modal-card {
     width: min(100%, 420px);
     background: #ffffff;
     border-radius: 28px;
     padding: 28px;
     box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
     border: 1px solid #06D0FD40;
     animation: modalEntrada 0.25s ease;
 }

 .modal-card h2 {
     color: #0B43D6;
     font-size: 1.6rem;
     margin-bottom: 8px;
 }

 .modal-card p {
     color: #34415f;
     font-size: 0.95rem;
     margin-bottom: 20px;
 }

 .modal-card label {
     display: block;
     color: #0B43D6;
     font-weight: 700;
     font-size: 0.9rem;
     margin-bottom: 8px;
 }

 .modal-card input {
     width: 100%;
     padding: 14px 18px;
     border-radius: 40px;
     border: 2px solid #cde0ff;
     font-size: 1rem;
     outline: none;
     transition: 0.2s;
 }

 .modal-card input:focus {
     border-color: #06D0FD;
     box-shadow: 0 0 0 3px #06D0FD30;
 }

 .modal-erro {
     display: block;
     min-height: 18px;
     margin-top: 8px;
     color: #ff3b5c;
     font-size: 0.8rem;
     font-weight: 700;
 }

 .modal-btn {
     width: 100%;
     margin-top: 14px;
     border: none;
     border-radius: 60px;
     padding: 15px;
     background: linear-gradient(95deg, #0F67CF, #0E63DB);
     color: #ffffff;
     font-size: 1rem;
     font-weight: 800;
     cursor: pointer;
     transition: 0.2s;
 }

 .modal-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 20px #0F67CF50;
 }

 .feedback-container {
     margin-top: 24px;
 }

 .feedback-header {
     display: flex;
     justify-content: flex-end;
     margin-bottom: 18px;
 }

 .new-feedback {
     width: auto;
     min-width: 150px;
 }

 .feedback-list {
     display: flex;
     flex-direction: column;
     gap: 16px;
 }

 .feedback-card {
     display: grid;
     grid-template-columns: 1fr 70px;
     gap: 14px;
     background: linear-gradient(115deg, #ffffff 0%, #f5faff 100%);
     border: 1px solid #06D0FD40;
     border-radius: 24px;
     padding: 16px;
     box-shadow: 0 6px 14px rgba(11, 67, 214, 0.12);
 }

 .feedback-votes {
     display: flex;
     flex-direction: row;
     align-items: center;
     height: 50%;
     justify-content: center;
     gap: 6px;
     background: #eef6ff;
     border-radius: 18px;
     padding: 8px 4px;
 }

 .vote-btn {
     border: none;
     background: transparent;
     color: #0B43D6;
     font-size: 1.25rem;
     font-weight: 900;
     cursor: pointer;
     transition: 0.2s;
 }

 .vote-btn:hover {
     transform: scale(1.18);
     color: #06D0FD;
 }

 .vote-score {
     font-size: 1rem;
     font-weight: 900;
     color: #0B43D6;
 }

 .feedback-content h3 {
     color: #0B43D6;
     font-size: 1.05rem;
     margin-bottom: 6px;
 }

 .feedback-content p {
     color: #34415f;
     font-size: 0.92rem;
     line-height: 1.5;
     margin-bottom: 10px;
 }

 .feedback-meta {
     font-size: 0.75rem;
     color: #0F67CF;
     font-weight: 700;
 }

 .feedback-empty {
     text-align: center;
     padding: 24px;
     border-radius: 22px;
     background: #f0f7ff;
     color: #0B43D6;
     font-weight: 700;
     border: 1px dashed #06D0FD;
 }

 .sugestao-modal-card textarea {
     width: 100%;
     padding: 14px 18px;
     border-radius: 24px;
     border: 2px solid #cde0ff;
     font-size: 0.95rem;
     resize: vertical;
     outline: none;
     margin-bottom: 8px;
     font-family: inherit;
 }

 .sugestao-modal-card textarea:focus {
     border-color: #06D0FD;
     box-shadow: 0 0 0 3px #06D0FD30;
 }

 .sugestao-modal-actions {
     display: flex;
     gap: 10px;
     margin-top: 12px;
 }

 .btn-cancelar-sugestao {
     width: 100%;
     margin-top: 14px;
     border: none;
     border-radius: 60px;
     padding: 15px;
     background: #e8f0fe;
     color: #0B43D6;
     font-size: 1rem;
     font-weight: 800;
     cursor: pointer;
     transition: 0.2s;
 }

 .btn-cancelar-sugestao:hover {
     background: #d8e7ff;
 }

 @media (max-width: 650px) {
     .feedback-card {
         grid-template-columns: 48px 1fr;
         padding: 14px;
     }

     .new-feedback {
         width: 100%;
     }

     .feedback-header {
         justify-content: stretch;
     }

     .sugestao-modal-actions {
         flex-direction: column;
     }
 }

 #modalAvaliacaoEnviada .modal-card {
     text-align: center;
 }

 #modalAvaliacaoEnviada h2 {
     font-size: 1.7rem;
     margin-bottom: 12px;
 }

 #modalAvaliacaoEnviada p {
     line-height: 1.5;
 }

 @keyframes fadeTab {
     from {
         opacity: 0;
         transform: translateY(6px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes modalEntrada {
     from {
         opacity: 0;
         transform: translateY(12px) scale(0.96);
     }

     to {
         opacity: 1;
         transform: translateY(0) scale(1);
     }
 }

 @media (max-width: 650px) {
     .step {
         padding: 24px;
     }

     .card-prof {
         display: grid;
         grid-template-columns: 64px 1fr;
         align-items: center;
         gap: 14px;
         padding: 18px;
     }

     .prof-img {
         width: 64px;
         height: 64px;
         font-size: 2rem;
     }

     .prof-info {
         min-width: 0;
     }

     .prof-nome {
         font-size: 1.1rem;
     }

     .avaliacao-smiles {
         grid-column: 1 / -1;
         width: 100%;
         justify-content: space-between;
         padding: 10px 14px;
         gap: 8px;
     }

     .smile-option {
         font-size: 1.8rem;
     }
 }

 @media (max-width: 900px) {
     body {
         padding: 24px 16px;
     }

     .app-container {
         max-width: 100%;
         border-radius: 36px;
     }

     .step {
         padding: 30px 28px;
     }

     .headline {
         font-size: 1.75rem;
     }

     .nav-bar {
         border-radius: 18px;
     }

     .nav-item {
         padding: 13px 8px;
         font-size: 0.92rem;
     }

     .feedback-container {
         margin-top: 20px;
     }

     .feedback-card {
         grid-template-columns: 54px 1fr;
         gap: 12px;
         padding: 15px;
     }

     .feedback-content h3 {
         font-size: 1rem;
     }

     .feedback-content p {
         font-size: 0.9rem;
     }
 }

 /* Celulares */
 @media (max-width: 650px) {
     body {
         padding: 16px 10px;
     }

     .app-container {
         border-radius: 28px;
     }

     .step {
         padding: 22px 18px;
     }

     .logo-area {
         margin: 10px 0 20px;
     }

     .logo-academia img {
         max-width: 210px;
     }

     .headline {
         font-size: 1.45rem;
         line-height: 1.2;
         margin-bottom: 18px;
     }

     /* nav responsiva */
     .nav-bar {
         flex-direction: row;
         border-radius: 20px;
         overflow: hidden;
     }

     .nav-item {
         width: 100%;
         padding: 14px 12px;
         font-size: 0.95rem;
         border-bottom: 1px solid #06D0FD30;
     }

     .nav-item:last-child {
         border-bottom: none;
     }

     .feedback-list {
         display: flex;
         flex-direction: column;
         gap: 16px;
         width: 100%;
     }

     .feedback-card {
         width: 100%;
         display: flex;
         align-items: stretch;
         gap: 14px;

         background: linear-gradient(115deg, #ffffff 0%, #f5faff 100%);
         border: 1px solid #06D0FD40;
         border-radius: 24px;
         padding: 16px;

         box-shadow: 0 6px 14px rgba(11, 67, 214, 0.12);
         overflow: hidden;
     }

     .feedback-votes {
         flex: 0 0 54px;
         min-width: 54px;

         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         gap: 6px;

         background: #eef6ff;
         border-radius: 18px;
         padding: 8px 4px;
     }

     .feedback-content {
         flex: 1;
         min-width: 0;
     }

     .feedback-content h3 {
         color: #0B43D6;
         font-size: 1.05rem;
         line-height: 1.25;
         margin-bottom: 6px;

         overflow-wrap: anywhere;
         word-break: break-word;
     }

     .feedback-content p {
         color: #34415f;
         font-size: 0.92rem;
         line-height: 1.5;
         margin-bottom: 10px;

         overflow-wrap: anywhere;
         word-break: break-word;
     }

     .feedback-meta {
         display: block;
         font-size: 0.75rem;
         color: #0F67CF;
         font-weight: 700;

         overflow-wrap: anywhere;
     }

     .vote-btn {
         border: none;
         background: transparent;
         color: #0B43D6;
         font-size: 1.25rem;
         font-weight: 900;
         cursor: pointer;
         transition: 0.2s;
         line-height: 1;
     }

     .vote-score {
         font-size: 1rem;
         font-weight: 900;
         color: #0B43D6;
     }

     /* modal */
     .modal-overlay {
         padding: 14px;
         align-items: flex-end;
     }

     .modal-card {
         width: 100%;
         max-height: 92vh;
         overflow-y: auto;
         border-radius: 26px 26px 18px 18px;
         padding: 24px 20px;
     }

     .modal-card h2 {
         font-size: 1.35rem;
     }

     .modal-card p {
         font-size: 0.9rem;
     }

     .modal-card input,
     .sugestao-modal-card textarea {
         font-size: 0.95rem;
         padding: 13px 16px;
     }

     .sugestao-modal-actions {
         flex-direction: column-reverse;
         gap: 0;
     }

     .modal-btn,
     .btn-cancelar-sugestao {
         padding: 14px;
         font-size: 0.95rem;
     }
 }

 /* Celulares bem pequenos */
 @media (max-width: 420px) {
     body {
         padding: 10px 6px;
     }

     .app-container {
         border-radius: 22px;
     }

     .step {
         padding: 18px 14px;
     }

     .headline {
         font-size: 1.28rem;
     }

     .logo-academia img {
         max-width: 180px;
     }

     .nav-item {
         padding: 13px 10px;
         font-size: 0.88rem;
     }

     .feedback-card {
         grid-template-columns: 42px 1fr;
         padding: 12px;
         gap: 9px;
     }

     .feedback-votes {
         gap: 4px;
     }

     .vote-btn {
         font-size: 1rem;
     }

     .vote-score {
         font-size: 0.85rem;
     }

     .feedback-content h3 {
         font-size: 0.9rem;
     }

     .feedback-content p {
         font-size: 0.82rem;
     }

     .modal-card {
         padding: 22px 16px;
         border-radius: 24px 24px 16px 16px;
     }
 }

 /* Telas grandes */
 @media (min-width: 1100px) {
     .app-container {
         max-width: 920px;
     }

     .step {
         padding: 42px 46px;
     }

     .feedback-card {
         padding: 18px 20px;
     }
 }

 .headline {
     font-size: 2rem;
     text-align: center;
     color: #0B43D6;
     font-weight: 800;
     letter-spacing: -0.5px;
     text-shadow: 0 2px 5px #06D0FD30;
 }

 @media (max-width: 520px) {
     .admin-profissional-item {
         display: grid;
         grid-template-columns: 44px 1fr;
         gap: 10px;
     }

     .admin-profissional-item button {
         grid-column: 1 / -1;
         width: 100%;
         margin-top: 4px;
         padding: 11px 14px;
     }

     .admin-profissional-item strong {
         font-size: 0.9rem;
     }
 }

 @media (max-width: 600px) {
     .new-trainer-container {
         padding: 16px;
         border-radius: 22px;
     }

     .new-trainer-form {
         grid-template-columns: 1fr;
         justify-items: center;
         gap: 14px;
     }

     .new-trainer-fields {
         width: 100%;
     }

     .add-prof-btn {
         width: 100%;
     }
 }