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

      body {
        font-family: "Maven Pro", sans-serif;
        background: #f4f5f8;
        min-height: 100vh;
        color: #1f2937;
        overflow-x: hidden;
      }

      input,
      textarea,
      select,
      button {
        font-family: inherit;
      }

      .container {
        width: 100%;
        margin: 0;
      }

      .app-shell {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
      }

      /* ── Top Navigation Bar ── */
      .topnav {
        background: #0d1b26;
        color: #ffffff;
        display: flex;
        align-items: center;
        gap: 0;
        padding: 0 24px;
        height: 60px;
        position: sticky;
        top: 0;
        z-index: 200;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
        flex-shrink: 0;
      }

      .topnav-brand {
        display: flex;
        align-items: center;
        margin-right: 24px;
        flex-shrink: 0;
      }

      .topnav-brand img {
        width: 120px;
        height: auto;
        display: block;
      }

      /* tagline removida — manter classe para não quebrar nada */
      .topnav-brand-tagline { display: none; }

      .topnav-tabs {
        display: flex;
        align-items: stretch;
        gap: 0;
        flex: 1;
        height: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
      }

      .topnav-tabs::-webkit-scrollbar { display: none; }

      .topnav-tab {
        position: relative;
        display: inline-flex;
        align-items: center;
        padding: 0 16px;
        background: transparent;
        border: none;
        border-radius: 0;
        color: rgba(255, 255, 255, 0.65);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        transition: color 0.2s ease, background 0.2s ease;
        height: 100%;
        font-family: inherit;
      }

      .topnav-tab::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 8px;
        right: 8px;
        height: 3px;
        border-radius: 3px 3px 0 0;
        background: #73d537;
        opacity: 0;
        transform: scaleX(0.5);
        transform-origin: center;
        transition: opacity 0.2s ease, transform 0.2s ease;
      }

      .topnav-tab.active {
        color: #024d3a;
        background: rgba(115, 213, 55, 0.9);
        border-radius: 8px;
        margin: 10px 4px;
        height: auto;
        padding: 7px 16px;
        align-self: center;
      }

      .topnav-tab.active::after { display: none; }

      .topnav-tab:hover:not(.active) {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.07);
      }

      .topnav-tab:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.6);
        outline-offset: -2px;
      }

      .topnav-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-left: 12px;
        flex-shrink: 0;
      }

      /* ── WhatsApp status — texto legível (mesma cor da borda) ── */
      .whatsapp-status-indicator {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        border: 1.5px solid;
        transition: all 0.3s;
        white-space: nowrap;
      }

      .whatsapp-status-indicator.connected {
        background: rgba(115, 213, 55, 0.12);
        color: #73d537;
        border-color: #73d537;
      }

      .whatsapp-status-indicator.disconnected {
        background: rgba(239, 68, 68, 0.12);
        color: #ef4444;
        border-color: #ef4444;
      }

      .whatsapp-status-indicator.checking {
        background: rgba(245, 158, 11, 0.12);
        color: #f59e0b;
        border-color: #f59e0b;
      }

      .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
        flex-shrink: 0;
      }

      .status-dot.connected {
        background: #73d537;
        box-shadow: 0 0 6px #73d537;
      }

      .status-dot.disconnected {
        background: #ef4444;
        animation: pulse 2s infinite;
      }

      .status-dot.checking { background: #f59e0b; }

      /* ── Dropdown de perfil ── */
      .topnav-profile-wrap {
        position: relative;
      }

      .topnav-profile-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 10px;
        padding: 5px 10px 5px 5px;
        cursor: pointer;
        color: rgba(255, 255, 255, 0.85);
        transition: background 0.15s ease, border-color 0.15s ease;
        font-family: inherit;
      }

      .topnav-profile-btn:hover,
      .topnav-profile-btn[aria-expanded="true"] {
        background: rgba(255, 255, 255, 0.16);
        border-color: rgba(255, 255, 255, 0.3);
        color: #ffffff;
      }

      .topnav-profile-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #024d3a;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 800;
        color: #ffffff;
        flex-shrink: 0;
        text-transform: uppercase;
      }

      .topnav-profile-chevron {
        transition: transform 0.2s ease;
        color: rgba(255, 255, 255, 0.6);
      }

      .topnav-profile-btn[aria-expanded="true"] .topnav-profile-chevron {
        transform: rotate(180deg);
      }

      .topnav-profile-dropdown {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        background: #ffffff;
        border: 1px solid #ebedf2;
        border-radius: 14px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
        min-width: 200px;
        padding: 6px;
        z-index: 300;
        /* fechado por padrão */
        display: none;
        flex-direction: column;
        gap: 2px;
        animation: dropdownIn 0.15s ease both;
      }

      .topnav-profile-dropdown.open {
        display: flex;
      }

      @keyframes dropdownIn {
        from { opacity: 0; transform: translateY(-6px) scale(0.97); }
        to   { opacity: 1; transform: translateY(0)   scale(1); }
      }

      .topnav-profile-header {
        padding: 8px 12px 6px;
      }

      .topnav-profile-name {
        font-size: 13px;
        font-weight: 700;
        color: #0d1b26;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 180px;
      }

      .topnav-profile-divider {
        height: 1px;
        background: #f1f5f9;
        margin: 4px 0;
      }

      .topnav-profile-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border: none;
        background: transparent;
        border-radius: 8px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        color: #374151;
        text-align: left;
        width: 100%;
        transition: background 0.12s ease, color 0.12s ease;
        font-family: inherit;
      }

      .topnav-profile-item:hover {
        background: #f4f5f8;
        color: #0d1b26;
      }

      .topnav-profile-item-danger { color: #dc2626; }
      .topnav-profile-item-danger:hover {
        background: #fff1f2;
        color: #b91c1c;
      }

      /* Legados mantidos para não quebrar setAdminModeUI */
      .topnav-icon-btn {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: rgba(255, 255, 255, 0.85);
        width: 34px;
        height: 34px;
        border-radius: 8px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s ease;
        font-family: inherit;
      }

      .topnav-icon-btn:hover {
        background: rgba(255, 255, 255, 0.18);
        color: #ffffff;
      }

      .topnav-username { display: none; }
      .topnav-logout-btn { display: none; }

      /* ── Hamburger button (oculto em desktop) ── */
      .topnav-hamburger {
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
      }

      .topnav-hamburger:hover {
        background: rgba(255, 255, 255, 0.16);
      }

      .topnav-hamburger-bar {
        display: block;
        width: 18px;
        height: 2px;
        background: rgba(255, 255, 255, 0.85);
        border-radius: 2px;
        transition: all 0.25s ease;
      }

      .topnav-hamburger[aria-expanded="true"] .topnav-hamburger-bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }
      .topnav-hamburger[aria-expanded="true"] .topnav-hamburger-bar:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
      }
      .topnav-hamburger[aria-expanded="true"] .topnav-hamburger-bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }

      /* ── Mobile menu overlay ── */
      .mobile-menu-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 190;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
      }

      .mobile-menu-overlay.open {
        display: block;
        animation: fadeIn 0.2s ease both;
      }

      @keyframes fadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
      }

      /* ── Mobile menu drawer ── */
      .mobile-menu-drawer {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(280px, 85vw);
        background: #0d1b26;
        z-index: 195;
        display: flex;
        flex-direction: column;
        padding: 0;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        overscroll-behavior: contain;
      }

      .mobile-menu-drawer.open {
        transform: translateX(0);
      }

      .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 16px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        flex-shrink: 0;
        min-height: 56px;
      }

      .mobile-menu-title {
        font-size: 14px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.9);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 180px;
      }

      .mobile-menu-close {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.7);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: background 0.15s ease;
      }

      .mobile-menu-close:hover {
        background: rgba(255, 255, 255, 0.16);
        color: #ffffff;
      }

      .mobile-menu-status {
        padding: 12px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        flex-shrink: 0;
      }

      .mobile-menu-nav {
        display: flex;
        flex-direction: column;
        padding: 8px;
        gap: 2px;
      }

      .mobile-menu-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 12px;
        background: transparent;
        border: none;
        border-radius: 10px;
        color: rgba(255, 255, 255, 0.75);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        text-align: left;
        width: 100%;
        transition: background 0.15s ease, color 0.15s ease;
        font-family: inherit;
      }

      .mobile-menu-item:hover,
      .mobile-menu-item-active {
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff;
      }

      .mobile-menu-item-active {
        background: rgba(115, 213, 55, 0.15) !important;
        color: #73d537 !important;
      }

      .mobile-menu-item-danger {
        color: rgba(239, 68, 68, 0.8) !important;
      }

      .mobile-menu-item-danger:hover {
        background: rgba(239, 68, 68, 0.1) !important;
        color: #ef4444 !important;
      }

      .mobile-menu-divider {
        height: 1px;
        background: rgba(255, 255, 255, 0.08);
        margin: 4px 16px;
      }

      .login-brand {
        text-align: center;
        margin-bottom: 24px;
      }

      .login-brand img {
        width: 190px;
        max-width: 100%;
      }

      /* Legacy sidebar-user kept for admin fallback (hidden in new layout) */
      .sidebar-user { display: none; }
      .sidebar-user-top { display: none; }
      .btn-icon-ghost { display: none; }

      .content-area {
        padding: 28px 32px;
        overflow-x: hidden;
        min-width: 0;
        flex: 1;
      }

      /* Legacy header hidden — now using page-header per-page */
      .header { display: none; }

      .btn {
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        transition: all 0.3s;
      }

      .btn-primary {
        background: linear-gradient(135deg, #73d537 0%, #024d3a 100%);
        color: white;
      }

      .btn-primary:hover {
        filter: brightness(1.04);
        transform: translateY(-2px);
      }

      .btn-secondary {
        background: #f3f4f6;
        color: #374151;
      }

      .btn-secondary:hover {
        background: #e5e7eb;
      }

      .btn-danger {
        background: #ef4444;
        color: white;
      }

      .card {
        background: #ffffff;
        padding: 25px;
        border-radius: 14px;
        margin-bottom: 20px;
        border: 1px solid #ebedf2;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
      }

      .card h2 {
        margin-bottom: 20px;
        color: #1f2937;
        font-size: 20px;
      }

      .form-group {
        margin-bottom: 15px;
      }

      .form-group label {
        display: block;
        margin-bottom: 5px;
        color: #374151;
        font-weight: 500;
      }

      .form-group input,
      .form-group textarea,
      .form-group select {
        width: 100%;
        padding: 10px;
        border: 1px solid #d1d5db;
        border-radius: 5px;
        font-size: 14px;
        background: #ffffff;
        color: #1f2937;
      }

      .form-group input:focus,
      .form-group textarea:focus {
        outline: none;
        border-color: #73d537;
      }

      .login-container {
        width: 100%;
      }

      #loginScreen {
        min-height: 100vh;
        display: flex;
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
        background: #0d1b26;
      }

      .login-shell {
        width: 100%;
        min-height: 100vh;
        display: grid;
        grid-template-columns: 420px minmax(0, 1fr);
        gap: 0;
        align-items: stretch;
      }

      .login-form-column {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 36px 48px;
        background: #0d1b26;
      }

      .login-container .card {
        width: 100%;
        max-width: 380px;
        margin-bottom: 0;
      }

      .login-visual {
        position: relative;
        border-radius: 0;
        overflow: hidden;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #0d1b26;
        border: none;
        box-shadow: none;
      }

      .login-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left center;
        display: block;
      }

      .login-visual::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          120deg,
          rgba(13, 27, 38, 0.45) 0%,
          rgba(13, 27, 38, 0.12) 60%
        );
        pointer-events: none;
      }

      /* Legacy sidebar tab styles — superseded by .topnav-tab */
      .tabs { display: none; }
      .tab { display: none; }
      .tab-icon { display: none; }
      .tab-label { display: none; }

      .tab-content {
        display: none;
      }

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

      /* ── Alunos Page Layout ── */

      .page-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
        margin-bottom: 24px;
        flex-wrap: wrap;
      }

      .page-header-left {
        flex: 1;
      }

      .page-title {
        font-size: 28px;
        font-weight: 800;
        color: #0d1b26;
        line-height: 1.1;
        margin-bottom: 6px;
      }

      .page-subtitle {
        font-size: 13px;
        color: #6b7280;
        font-weight: 400;
      }

      .page-header-stats {
        display: flex;
        gap: 32px;
        align-items: flex-start;
        flex-shrink: 0;
      }

      .page-stat {
        text-align: left;
      }

      .page-stat-number {
        display: block;
        font-size: 26px;
        font-weight: 800;
        color: #0d1b26;
        line-height: 1;
      }

      .page-stat-label {
        display: block;
        font-size: 11px;
        color: #6b7280;
        margin-top: 3px;
        font-weight: 500;
      }

      .page-stat-alert .page-stat-number {
        color: #dc2626;
      }

      .ghost-emoji {
        font-size: 12px;
      }

      .card-section-title {
        font-size: 16px;
        font-weight: 700;
        color: #0d1b26;
        margin-bottom: 20px;
        display: block;
      }

      /* Aluno add form grid */
      .aluno-add-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr auto;
        gap: 16px;
        align-items: end;
      }

      /* Remove margem inferior dos form-groups dentro do grid de cadastro
         para que align-items: end funcione corretamente */
      .aluno-add-grid .form-group {
        margin-bottom: 0;
      }

      .aluno-add-btn-wrap {
        display: flex;
        align-items: flex-end;
      }

      .btn-add-aluno {
        white-space: nowrap;
        padding: 0 24px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 700;
        height: 42px;
        display: inline-flex;
        align-items: center;
      }

      .form-label-upper {
        display: block;
        font-size: 11px;
        font-weight: 700;
        color: #9ca3af;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin-bottom: 6px;
      }

      /* Aluno add form — override global form-group styles for the add row */
      .aluno-add-grid .form-group input {
        height: 42px;
        padding: 0 12px;
        border: 1.5px solid #e5e7eb;
        border-radius: 8px;
        font-size: 14px;
        background: #ffffff;
        color: #1f2937;
        width: 100%;
        transition: border-color 0.15s ease;
      }

      .aluno-add-grid .form-group input:focus {
        outline: none;
        border-color: #73d537;
      }

      /* Alunos list header */
      .alunos-list-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 20px;
        flex-wrap: wrap;
      }

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

      .alunos-search-icon {
        position: absolute;
        left: 10px;
        color: #9ca3af;
        pointer-events: none;
      }

      .alunos-search-input {
        padding: 8px 12px 8px 34px !important;
        height: 36px !important;
        border: 1.5px solid #e5e7eb !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        width: 220px;
        background: #ffffff !important;
        color: #1f2937 !important;
      }

      .alunos-search-input:focus {
        outline: none;
        border-color: #73d537 !important;
      }

      .alunos-filter-tabs {
        display: flex;
        gap: 6px;
        margin-left: auto;
      }

      .alunos-filter-btn {
        padding: 7px 16px;
        border-radius: 20px;
        border: 1.5px solid #e5e7eb;
        background: #ffffff;
        color: #374151;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s ease;
        white-space: nowrap;
      }

      .alunos-filter-btn:hover {
        border-color: #024d3a;
        color: #024d3a;
      }

      .alunos-filter-btn.active {
        background: #024d3a;
        border-color: #024d3a;
        color: #ffffff;
      }

      /* Alunos table */
      .alunos-table-wrap {
        overflow-x: auto;
      }

      .alunos-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 700px;
      }

      .alunos-table thead tr {
        border-bottom: 1px solid #f1f5f9;
      }

      .alunos-table th {
        font-size: 11px;
        font-weight: 700;
        color: #9ca3af;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 0 16px 12px;
        background: transparent;
        text-align: left;
        border-bottom: 1px solid #e5e7eb;
      }

      .alunos-table td {
        padding: 0 16px;
        height: 68px;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
        font-size: 14px;
        color: #1f2937;
      }

      .alunos-table tbody tr:last-child td {
        border-bottom: none;
      }

      .alunos-table tbody tr:hover td {
        background: #f9fafb;
      }

      /* Student avatar */
      .student-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 800;
        color: #ffffff;
        flex-shrink: 0;
        background: #024d3a;
      }

      .student-avatar-wrap {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .student-name-wrap {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .student-name {
        font-weight: 700;
        color: #0d1b26;
        font-size: 14px;
      }

      .student-checkin-label {
        font-size: 12px;
        color: #9ca3af;
      }

      .student-ghost .student-checkin-label {
        color: #dc2626;
      }

      /* WhatsApp link in table */
      .student-whatsapp-link {
        color: #024d3a;
        font-weight: 500;
        text-decoration: none;
        font-size: 14px;
      }

      .student-whatsapp-link:hover {
        text-decoration: underline;
      }

      /* Payment day cell */
      .student-due-day {
        color: #374151;
        font-weight: 500;
      }

      /* Payment status badges */
      .badge-pago {
        display: inline-flex;
        align-items: center;
        padding: 4px 14px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 700;
        background: rgba(34, 197, 94, 0.12);
        color: #15803d;
        border: 1px solid rgba(34, 197, 94, 0.25);
      }

      .badge-pendente {
        display: inline-flex;
        align-items: center;
        padding: 4px 14px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 700;
        background: rgba(251, 191, 36, 0.12);
        color: #92400e;
        border: 1px solid rgba(251, 191, 36, 0.3);
      }

      .badge-atrasado {
        display: inline-flex;
        align-items: center;
        padding: 4px 14px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 700;
        background: rgba(239, 68, 68, 0.1);
        color: #b91c1c;
        border: 1px solid rgba(239, 68, 68, 0.2);
      }

      /* Quick actions column */
      .student-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        justify-content: flex-end;
      }

      .student-action-btn {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        background: #ffffff;
        color: #6b7280;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        transition: all 0.15s ease;
      }

      .student-action-btn:hover {
        border-color: #024d3a;
        color: #024d3a;
        background: rgba(2, 77, 58, 0.05);
      }

      .student-action-btn.danger:hover {
        border-color: #dc2626;
        color: #dc2626;
        background: rgba(220, 38, 38, 0.05);
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      table th,
      table td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #e5e7eb;
      }

      table th {
        background: #f9fafb;
        font-weight: 600;
        color: #374151;
      }

      table tr:hover {
        background: #f9fafb;
      }

      .actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }

      .hidden {
        display: none !important;
      }

      .alert {
        padding: 12px 20px;
        border-radius: 5px;
        margin-bottom: 15px;
      }

      .alert-success {
        background: rgba(115, 213, 55, 0.2);
        color: #024d3a;
      }

      .alert-error {
        background: #fee2e2;
        color: #991b1b;
      }

      .qr-container {
        text-align: center;
        padding: 20px;
      }

      .qr-container img {
        max-width: 300px;
        margin: 20px auto;
        display: block;
      }

      .autocomplete-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #ffffff;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        max-height: 300px;
        overflow-y: auto;
        z-index: 1000;
        margin-top: 4px;
      }

      .autocomplete-item {
        padding: 10px;
        cursor: pointer;
        border-bottom: 1px solid #e5e7eb;
        transition: background 0.2s;
        color: #1f2937;
      }

      .tag-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: #e0f2fe;
        color: #0369a1;
        border: 1px solid #bae6fd;
        border-radius: 99px;
        padding: 2px 10px 2px 10px;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
      }
      .tag-chip .tag-remove {
        cursor: pointer;
        font-size: 14px;
        line-height: 1;
        color: #0369a1;
        background: none;
        border: none;
        padding: 0;
      }
      .tag-chip .tag-remove:hover { color: #ef4444; }
      .tag-container {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        min-height: 24px;
        margin-bottom: 4px;
      }

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

      .autocomplete-item:hover {
        background: #f3f4f6;
      }

      .status-badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
      }

      .status-connected {
        background: rgba(115, 213, 55, 0.2);
        color: #024d3a;
      }

      .status-disconnected {
        background: #fee2e2;
        color: #991b1b;
      }

      .drawer-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(17, 24, 39, 0.6);
        z-index: 2000;
        display: none;
        align-items: stretch;
        justify-content: flex-end;
      }

      .modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(17, 24, 39, 0.5);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 2100;
        padding: 16px;
      }

      .modal-backdrop.open {
        display: flex;
      }

      .modal-panel {
        width: min(560px, 100%);
        background: #ffffff;
        border-radius: 14px;
        border: 1px solid #ebedf2;
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
        padding: 20px;
      }

      .drawer-backdrop.open {
        display: flex;
      }

      .drawer-panel {
        width: min(980px, 100%);
        height: 100%;
        overflow-y: auto;
        background: #ffffff;
        padding: 24px;
      }

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

      .workout-add-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 8px;
      }

      .workout-optional-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 8px;
      }

      .workout-optional-grid .form-group {
        margin-bottom: 0;
      }

      .workout-add-grid .full,
      .workout-optional-grid .full,
      .workout-metrics-grid.full {
        grid-column: 1 / -1;
      }

      .workout-metrics-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .editor-grid .form-group.full {
        grid-column: 1 / -1;
      }

      .workout-card {
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 14px;
      }

      .session-card {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 10px;
      }

      .exercise-row {
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 12px;
        margin-top: 8px;
        background: #ffffff;
      }

      .exercise-title {
        font-weight: 700;
        color: #111827;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .exercise-fields-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
      }

      .exercise-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .exercise-field label {
        font-size: 12px;
        font-weight: 600;
        color: #475569;
      }

      .exercise-field input {
        width: 100%;
        padding: 10px;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        font-size: 14px;
        background: #ffffff;
        color: #1f2937;
      }

      .exercise-actions {
        margin-top: 10px;
        display: flex;
        justify-content: flex-end;
        gap: 8px;
      }

      .exercise-actions .btn {
        min-width: 92px;
      }

      /* Drag & drop reorder */
      .exercise-row[draggable] {
        cursor: grab;
      }
      .exercise-row.drag-over {
        border: 2px dashed #6366f1;
        background: #eef2ff;
      }
      .exercise-row.dragging {
        opacity: 0.4;
        cursor: grabbing;
      }
      .drag-handle {
        display: inline-flex;
        align-items: center;
        color: #94a3b8;
        margin-right: 6px;
        cursor: grab;
        font-size: 16px;
        line-height: 1;
        user-select: none;
      }

      /* ── Exercícios: layout 2 colunas ── */
      .exercicios-layout {
        display: grid;
        grid-template-columns: 380px minmax(0, 1fr);
        gap: 20px;
        align-items: start;
      }

      /* Painel esquerdo: formulário */
      .exercicio-form-panel {
        background: #ffffff;
        border: 1px solid #ebedf2;
        border-radius: 16px;
        padding: 24px;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
        position: sticky;
        top: 84px; /* abaixo do topnav */
      }

      .exercicio-form-title {
        font-size: 17px;
        font-weight: 800;
        color: #0d1b26;
        margin-bottom: 18px;
      }

      .exercicio-form-grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }

      .exercicio-select {
        width: 100%;
        padding: 9px 10px;
        border: 1.5px solid #e5e7eb;
        border-radius: 8px;
        font-size: 13px;
        color: #374151;
        background: #ffffff;
        font-family: inherit;
        transition: border-color 0.15s ease;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        padding-right: 28px;
      }

      .exercicio-select:focus {
        outline: none;
        border-color: #73d537;
      }

      .exercicio-salvar-btn {
        width: 100%;
        height: 44px;
        font-size: 15px;
        font-weight: 700;
        border-radius: 10px;
        margin-top: 4px;
      }

      /* Painel direito: biblioteca */
      .exercicio-biblioteca-panel {
        background: #ffffff;
        border: 1px solid #ebedf2;
        border-radius: 16px;
        padding: 20px 24px 24px;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
      }

      .exercicio-biblioteca-header {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 20px;
        flex-wrap: wrap;
      }

      .exercicio-biblioteca-title {
        font-size: 16px;
        font-weight: 800;
        color: #0d1b26;
        flex-shrink: 0;
      }

      .exercicio-search-wrap {
        position: relative;
        flex: 1;
        min-width: 180px;
      }

      .exercicio-search-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
        pointer-events: none;
      }

      .exercicio-search-input {
        width: 100%;
        padding: 9px 12px 9px 34px !important;
        border: 1.5px solid #e5e7eb !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        background: #ffffff !important;
        color: #1f2937 !important;
        font-family: inherit;
      }

      .exercicio-search-input:focus {
        outline: none;
        border-color: #73d537 !important;
      }

      /* Pills de grupo muscular */
      .exercicio-grupo-pills {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        width: 100%;
      }

      .exercicio-grupo-pill {
        padding: 6px 16px;
        border-radius: 20px;
        border: 1.5px solid #e5e7eb;
        background: #ffffff;
        color: #374151;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.15s ease;
        font-family: inherit;
      }

      .exercicio-grupo-pill:hover {
        border-color: #024d3a;
        color: #024d3a;
      }

      .exercicio-grupo-pill.active {
        background: #024d3a;
        border-color: #024d3a;
        color: #ffffff;
      }

      /* Grid de cards da biblioteca */
      .exercicio-cards-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }

      .exercicio-card {
        border: 1px solid #ebedf2;
        border-radius: 12px;
        padding: 14px 16px;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        gap: 8px;
        cursor: pointer;
        transition: box-shadow 0.15s ease, border-color 0.15s ease;
        position: relative;
      }

      .exercicio-card:hover {
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1);
        border-color: #d1d5db;
      }

      .exercicio-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
      }

      .exercicio-card-name {
        font-size: 14px;
        font-weight: 700;
        color: #0d1b26;
        line-height: 1.3;
        flex: 1;
      }

      .exercicio-card-arrow {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        background: #f3f4f6;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #9ca3af;
        font-size: 10px;
        margin-top: 1px;
      }

      .exercicio-card-tags {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
      }

      .exercicio-card-tag {
        display: inline-flex;
        align-items: center;
        padding: 2px 10px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 700;
      }

      .exercicio-card-tag-group {
        background: rgba(34, 197, 94, 0.12);
        color: #15803d;
      }

      .exercicio-card-tag-equip {
        background: #f3f4f6;
        color: #374151;
      }

      .exercicio-card-meta {
        font-size: 12px;
        color: #9ca3af;
        line-height: 1.3;
      }

      .exercicio-card-actions {
        display: none;
        gap: 6px;
        margin-top: 6px;
        border-top: 1px solid #f1f5f9;
        padding-top: 8px;
      }

      .exercicio-card:hover .exercicio-card-actions {
        display: flex;
      }

      /* ── Modal: Gerenciar catálogo ── */
      .catalog-modal-tabs {
        display: flex;
        gap: 0;
        border-bottom: 1px solid #e5e7eb;
        margin-bottom: 20px;
        flex-wrap: wrap;
      }

      .catalog-modal-tab {
        padding: 9px 16px;
        border: none;
        border-bottom: 2px solid transparent;
        background: transparent;
        color: #6b7280;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: color 0.15s ease;
        font-family: inherit;
        white-space: nowrap;
        margin-bottom: -1px;
      }

      .catalog-modal-tab.active {
        color: #024d3a;
        border-bottom-color: #73d537;
      }

      .catalog-modal-panel {
        display: none;
      }

      .catalog-modal-panel.active {
        display: block;
      }

      .catalog-modal-form {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
      }

      .catalog-modal-input {
        flex: 1;
        padding: 9px 12px;
        border: 1.5px solid #e5e7eb;
        border-radius: 8px;
        font-size: 14px;
        font-family: inherit;
        color: #1f2937;
        background: #ffffff;
      }

      .catalog-modal-input:focus {
        outline: none;
        border-color: #73d537;
      }

      .catalog-modal-search {
        width: 100%;
        padding: 8px 12px;
        border: 1.5px solid #e5e7eb;
        border-radius: 8px;
        font-size: 13px;
        font-family: inherit;
        margin-bottom: 10px;
        color: #1f2937;
        background: #ffffff;
      }

      .catalog-modal-search:focus {
        outline: none;
        border-color: #73d537;
      }

      .catalog-modal-list {
        max-height: 340px;
        overflow-y: auto;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #ffffff;
      }

      /* Legados — mantidos para não quebrar referências */
      .catalog-manager-grid { display: none; }
      .catalog-panel { display: none; }
      .catalog-panel h3 { display: none; }

      .catalog-list-wrap {
        margin-top: 10px;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        background: #ffffff;
        max-height: 360px;
        overflow: auto;
      }

      .catalog-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-bottom: 1px solid #f1f5f9;
      }

      .catalog-row:last-child {
        border-bottom: none;
      }

      .catalog-row-title {
        font-weight: 600;
        color: #0f172a;
      }

      .catalog-row-sub {
        color: #64748b;
        font-size: 12px;
      }


      .workout-section-title {
        color: #1f2937;
        margin-bottom: 8px;
        font-size: 16px;
      }

      .workout-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
        flex-wrap: wrap;
      }

      .workout-meta span {
        font-size: 12px;
        color: #64748b;
        background: rgba(115, 213, 55, 0.15);
        border: 1px solid rgba(2, 77, 58, 0.22);
        border-radius: 999px;
        padding: 4px 10px;
      }

      .workout-accordion {
        margin-bottom: 14px;
      }

      .workout-accordion > summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .workout-accordion > summary::-webkit-details-marker {
        display: none;
      }

      .workout-summary-title {
        font-weight: 700;
        color: #1f2937;
      }

      .accordion-summary-right {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .accordion-chevron {
        width: 10px;
        height: 10px;
        border-right: 2px solid #64748b;
        border-bottom: 2px solid #64748b;
        transform: rotate(45deg);
        transition: transform 0.2s ease;
        margin-right: 2px;
      }

      .workout-accordion[open] > summary .accordion-chevron,
      .session-accordion[open] > summary .accordion-chevron {
        transform: rotate(-135deg);
      }

      .workout-summary-validity {
        font-size: 12px;
        color: #64748b;
        background: rgba(115, 213, 55, 0.15);
        border: 1px solid rgba(2, 77, 58, 0.22);
        border-radius: 999px;
        padding: 4px 10px;
        white-space: nowrap;
      }

      .workout-accordion-body {
        margin-top: 12px;
      }

      .session-accordion {
        margin-bottom: 10px;
      }

      .session-accordion > summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .session-accordion > summary::-webkit-details-marker {
        display: none;
      }

      .session-accordion-body {
        margin-top: 10px;
      }

      .workout-search-shell {
        position: relative;
      }

      .workout-search-results {
        margin-top: 8px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: #ffffff;
        max-height: 260px;
        overflow-y: auto;
      }

      .workout-search-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 10px;
        border-bottom: 1px solid #e5e7eb;
      }

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

      .workout-search-meta {
        color: #6b7280;
        font-size: 12px;
        margin-top: 3px;
      }

      .selected-workout-box {
        margin-top: 10px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 12px;
      }

      .student-insights-tabs {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
        flex-wrap: wrap;
      }

      .student-insights-tab {
        border: 1px solid #cbd5e1;
        background: #f8fafc;
        color: #334155;
        padding: 8px 12px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
      }

      .student-insights-tab.active {
        border-color: #024d3a;
        background: rgba(115, 213, 55, 0.18);
        color: #024d3a;
      }

      .student-insights-panel {
        display: none;
      }

      .student-insights-panel.active {
        display: block;
      }

      .sessions-pagination {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
        flex-wrap: wrap;
      }

      .student-report-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 12px;
      }

      .student-report-box {
        border: 1px solid #dbe2ea;
        border-radius: 10px;
        background: #f8fafc;
        padding: 12px;
      }

      .student-report-box h4 {
        margin-bottom: 8px;
        color: #1f2937;
      }

      .student-calendar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
        gap: 8px;
      }

      .student-calendar-grid {
        width: 100%;
        border-collapse: collapse;
      }

      .student-calendar-grid th,
      .student-calendar-grid td {
        text-align: center;
        padding: 6px 2px;
        font-size: 12px;
      }

      .student-calendar-grid th {
        color: #64748b;
        font-weight: 700;
      }

      .student-calendar-day {
        display: inline-flex;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        align-items: center;
        justify-content: center;
        color: #334155;
        border: 1px solid #e2e8f0;
        background: #ffffff;
      }

      .student-calendar-day.trained {
        background: rgba(115, 213, 55, 0.24);
        border-color: rgba(2, 77, 58, 0.35);
        color: #024d3a;
        font-weight: 700;
      }

      .student-report-list {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .student-report-list li {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 0;
        border-bottom: 1px dashed #d1d5db;
        font-size: 13px;
      }

      .student-report-list li:last-child {
        border-bottom: none;
      }

      .student-report-metrics {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }

      /* ── Financeiro: KPI Cards ── */
      .finance-kpi-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        margin-bottom: 20px;
      }

      .finance-kpi-card {
        background: #ffffff;
        border: 1px solid #ebedf2;
        border-radius: 16px;
        padding: 24px 28px 20px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
      }

      .finance-kpi-label {
        font-size: 11px;
        font-weight: 700;
        color: #9ca3af;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .finance-kpi-value {
        font-size: 32px;
        font-weight: 800;
        color: #0d1b26;
        line-height: 1.1;
        margin: 4px 0;
      }

      .finance-kpi-tag {
        display: inline-flex;
        align-items: center;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 700;
        width: fit-content;
      }

      .finance-kpi-tag-green {
        background: rgba(34, 197, 94, 0.12);
        color: #15803d;
        border: 1px solid rgba(34, 197, 94, 0.22);
      }

      .finance-kpi-tag-yellow {
        background: rgba(251, 191, 36, 0.14);
        color: #92400e;
        border: 1px solid rgba(251, 191, 36, 0.28);
      }

      .finance-kpi-tag-red {
        background: rgba(239, 68, 68, 0.1);
        color: #b91c1c;
        border: 1px solid rgba(239, 68, 68, 0.2);
      }

      /* ── Financeiro: Tabela de Cobranças ── */
      .finance-table-card {
        padding: 0 !important;
        overflow: hidden;
      }

      .finance-table-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 20px 24px 16px;
        flex-wrap: wrap;
        border-bottom: 1px solid #f1f5f9;
      }

      .finance-table-filters {
        display: flex;
        gap: 10px;
        align-items: center;
      }

      .finance-filter-select {
        padding: 8px 32px 8px 12px;
        border: 1.5px solid #e5e7eb;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        color: #374151;
        background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
        transition: border-color 0.15s ease;
        font-family: inherit;
      }

      .finance-filter-select:focus {
        outline: none;
        border-color: #024d3a;
      }

      .finance-table-wrap {
        overflow-x: auto;
      }

      .finance-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 600px;
      }

      .finance-table th {
        font-size: 11px;
        font-weight: 700;
        color: #9ca3af;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 12px 24px;
        background: transparent;
        text-align: left;
        border-bottom: 1px solid #e5e7eb;
      }

      .finance-table td {
        padding: 0 24px;
        height: 64px;
        border-bottom: 1px solid #f8fafc;
        vertical-align: middle;
        font-size: 14px;
        color: #1f2937;
      }

      .finance-table tbody tr:last-child td {
        border-bottom: none;
      }

      .finance-table tbody tr:hover td {
        background: #fafafa;
      }

      .finance-student-name-cell {
        font-weight: 700;
        color: #0d1b26;
        font-size: 14px;
      }

      .finance-amount-cell {
        font-weight: 600;
        color: #1f2937;
      }

      .finance-due-cell {
        color: #374151;
        font-size: 13px;
      }

      /* Botão de ação contextual na tabela */
      .finance-action-btn {
        padding: 6px 16px;
        border-radius: 8px;
        border: 1.5px solid #e5e7eb;
        background: #ffffff;
        color: #374151;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.15s ease;
        font-family: inherit;
      }

      .finance-action-btn:hover {
        border-color: #024d3a;
        color: #024d3a;
        background: rgba(2, 77, 58, 0.04);
      }

      .finance-action-btn.btn-pix:hover {
        border-color: #2563eb;
        color: #2563eb;
        background: rgba(37, 99, 235, 0.04);
      }

      .finance-action-btn.btn-cobrar:hover {
        border-color: #dc2626;
        color: #dc2626;
        background: rgba(220, 38, 38, 0.04);
      }

      .finance-table-footer {
        padding: 14px 24px;
        border-top: 1px solid #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
      }

      .finance-table-footer-note {
        font-size: 13px;
        color: #6b7280;
      }

      /* Legados — mantidos para não quebrar other code */
      .finance-metrics { display: none; }
      .finance-metric-card { display: none; }
      .finance-metric-label { display: none; }
      .finance-list-grid { display: none; }
      .finance-student-list {
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        background: #ffffff;
        overflow: hidden;
      }
      .finance-student-item {
        padding: 10px 12px;
        border-bottom: 1px solid #f1f5f9;
        display: grid;
        gap: 4px;
      }
      .finance-student-item:last-child { border-bottom: none; }
      .finance-student-name { font-weight: 700; color: #1f2937; }
      .finance-student-meta { color: #475569; font-size: 13px; }

      .student-payment-history {
        border-top: 1px solid #e5e7eb;
        padding-top: 14px;
      }

      /* ── Student Editor Header & Nav ─────────────────────────────────────── */

      .student-editor-header {
        background: #ffffff;
        border: 1px solid #ebedf2;
        border-radius: 14px;
        padding: 20px 24px 0;
        margin-bottom: 20px;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
      }

      .student-editor-header-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 16px;
        flex-wrap: wrap;
      }

      .student-editor-title-wrap {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .student-editor-back-btn {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        border: 1.5px solid #e5e7eb;
        background: #ffffff;
        color: #374151;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.15s ease;
      }

      .student-editor-back-btn:hover {
        border-color: #024d3a;
        color: #024d3a;
        background: rgba(2, 77, 58, 0.04);
      }

      .student-editor-name {
        font-size: 20px;
        font-weight: 800;
        color: #0d1b26;
        margin: 0 0 2px;
        line-height: 1.2;
      }

      .student-editor-subtitle {
        font-size: 12px;
        color: #9ca3af;
        margin: 0;
      }

      .student-editor-nav {
        display: flex;
        gap: 0;
        border-top: 1px solid #f1f5f9;
        margin: 0 -24px;
        padding: 0 24px;
      }

      .student-editor-nav-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 12px 18px;
        background: transparent;
        border: none;
        border-bottom: 3px solid transparent;
        color: #6b7280;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: color 0.15s ease, border-color 0.15s ease;
        white-space: nowrap;
        margin-bottom: -1px;
      }

      .student-editor-nav-btn:hover {
        color: #374151;
      }

      .student-editor-nav-btn.active {
        color: #024d3a;
        border-bottom-color: #73d537;
      }

      .student-section-heading {
        font-size: 16px;
        font-weight: 700;
        color: #0d1b26;
        margin-bottom: 16px;
      }

      /* ── Avaliações Físicas ── */
      .avaliacao-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 20px;
        flex-wrap: wrap;
      }

      .avaliacao-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 40px 20px;
        color: #9ca3af;
        text-align: center;
      }

      .avaliacao-empty p {
        font-size: 14px;
        font-weight: 600;
        color: #6b7280;
        margin: 0;
      }

      .avaliacao-empty span {
        font-size: 12px;
        color: #9ca3af;
      }

      .avaliacao-card {
        border: 1px solid #ebedf2;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        background: #ffffff;
        transition: box-shadow 0.15s ease;
      }

      .avaliacao-card:hover {
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
      }

      .avaliacao-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 12px;
      }

      .avaliacao-card-date {
        font-size: 13px;
        font-weight: 700;
        color: #374151;
      }

      .avaliacao-card-metrics {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        margin-bottom: 8px;
      }

      .avaliacao-metric {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 60px;
      }

      .avaliacao-metric span {
        font-size: 11px;
        color: #9ca3af;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .avaliacao-metric strong {
        font-size: 15px;
        font-weight: 700;
        color: #0d1b26;
      }

      .avaliacao-card-obs {
        font-size: 12px;
        color: #6b7280;
        margin: 0;
        padding-top: 8px;
        border-top: 1px solid #f1f5f9;
        line-height: 1.4;
      }

      .student-editor-view {
        /* Sempre display block quando visível */
      }

      .student-editor-view.hidden {
        display: none;
      }

      .student-editor-two-columns {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 14px;
      }

      .student-editor-column-card {
        border: 1px solid #dbe2ea;
        border-radius: 10px;
        background: #f8fafc;
        padding: 12px;
      }

      .payment-history-list {
        border: 1px solid #dbe2ea;
        border-radius: 10px;
        overflow: hidden;
      }

      .payment-history-row {
        display: grid;
        grid-template-columns: 1.1fr 0.8fr 0.8fr;
        gap: 10px;
        align-items: center;
        padding: 10px 12px;
        border-bottom: 1px solid #edf2f7;
        background: #ffffff;
      }

      .payment-history-row:last-child {
        border-bottom: none;
      }

      .payment-history-row strong {
        color: #1f2937;
      }

      .payment-history-row small {
        color: #64748b;
      }

      .payment-history-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        color: #334155;
      }

      @media (max-width: 1024px) {
        .content-area {
          padding: 16px 20px;
        }

        .aluno-add-grid {
          grid-template-columns: 1fr 1fr;
        }

        .aluno-add-btn-wrap {
          grid-column: span 2;
        }

        .editor-grid {
          grid-template-columns: 1fr;
        }

        .workout-add-grid,
        .workout-metrics-grid {
          grid-template-columns: 1fr;
        }

        .workout-optional-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .student-report-grid,
        .student-report-metrics,
        .student-editor-two-columns {
          grid-template-columns: 1fr;
        }

        .finance-kpi-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .exercicios-layout {
          grid-template-columns: 1fr;
        }

        .exercicio-form-panel {
          position: static;
        }

        .exercicio-cards-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .exercise-fields-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .modal-panel {
          max-height: calc(100vh - 32px);
          overflow-y: auto;
        }

        .drawer-panel {
          width: 100%;
          padding: 16px;
        }

        .card {
          padding: 18px;
          overflow-x: auto;
        }
      }

      @media (max-width: 768px) {
        .login-container {
          max-width: 100%;
        }

        #loginScreen {
          padding: 16px 12px;
        }

        .login-shell {
          width: min(420px, 100%);
          grid-template-columns: 1fr;
          gap: 0;
          min-height: auto;
          margin: 0 auto;
        }

        .login-form-column {
          padding: 0;
        }

        .login-visual {
          display: none;
        }

        /* ── Topnav mobile ── */
        .topnav {
          padding: 0 16px;
          height: 56px;
        }

        .topnav-brand {
          margin-right: 0;
          flex: 1;
        }

        .topnav-brand img {
          width: 100px;
        }

        /* Ocultar abas de navegação em mobile */
        .topnav-tabs {
          display: none;
        }

        /* Ocultar status e dropdown de perfil em mobile */
        .topnav-actions > .whatsapp-status-indicator,
        .topnav-actions > #topnavProfileWrap {
          display: none;
        }

        .topnav-actions {
          gap: 8px;
          margin-left: 0;
        }

        /* Mostrar hamburger apenas em mobile */
        .topnav-hamburger {
          display: flex;
        }

        /* Remover padding do content-area para não empurrar o drawer */
        .content-area {
          padding: 16px 12px;
        }

        .exercise-fields-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .exercicio-cards-grid {
          grid-template-columns: 1fr;
        }

        .exercicio-form-grid-2 {
          grid-template-columns: 1fr;
        }

        .workout-optional-grid {
          grid-template-columns: 1fr;
        }

        .finance-kpi-grid {
          grid-template-columns: 1fr;
        }

        .payment-history-row {
          grid-template-columns: 1fr;
        }

        .aluno-add-grid {
          grid-template-columns: 1fr;
        }

        .aluno-add-btn-wrap {
          grid-column: 1;
        }

        .page-header {
          flex-direction: column;
          gap: 16px;
        }

        .page-header-stats {
          gap: 24px;
        }

        .alunos-list-header {
          flex-direction: column;
          align-items: flex-start;
          gap: 12px;
        }

        .alunos-filter-tabs {
          margin-left: 0;
          flex-wrap: wrap;
        }

        .alunos-search-input {
          width: 100% !important;
        }
      }

      @media (max-width: 560px) {
        .content-area {
          padding: 12px;
        }

        .card {
          padding: 14px;
        }

        .exercise-fields-grid {
          grid-template-columns: 1fr;
        }

        .workout-search-item {
          flex-direction: column;
          align-items: flex-start;
        }

        .workout-summary-validity {
          white-space: normal;
        }

        .exercise-actions {
          justify-content: stretch;
          flex-wrap: wrap;
        }

        .exercise-actions .btn {
          width: 100%;
          min-width: 0;
        }
      }

      /* ── Modal de edição de exercício ── */
      .exercicio-edit-panel {
        background: #ffffff;
        border-radius: 20px;
        width: min(520px, 100%);
        max-height: 90vh;
        overflow-y: auto;
        box-shadow:
          0 24px 64px rgba(0, 0, 0, 0.18),
          0 4px 12px rgba(0, 0, 0, 0.08);
        animation: confirmPanelIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      }

      .exercicio-edit-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 24px 24px 0;
      }

      .exercicio-edit-label {
        font-size: 11px;
        font-weight: 700;
        color: #9ca3af;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin: 0 0 4px;
      }

      .exercicio-edit-nome {
        font-size: 20px;
        font-weight: 800;
        color: #0d1b26;
        margin: 0;
        line-height: 1.2;
      }

      .exercicio-edit-close {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        border: 1.5px solid #e5e7eb;
        background: #ffffff;
        color: #6b7280;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.15s ease;
      }

      .exercicio-edit-close:hover {
        border-color: #374151;
        color: #374151;
      }

      .exercicio-edit-subtitle {
        font-size: 13px;
        color: #9ca3af;
        margin: 8px 24px 0;
        line-height: 1.4;
      }

      .exercicio-edit-fields {
        padding: 20px 24px 0;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }

      .exercicio-edit-footer {
        display: flex;
        gap: 10px;
        padding: 20px 24px 24px;
        justify-content: flex-end;
      }

      .exercicio-edit-save-btn {
        padding: 10px 24px;
        font-size: 14px;
        font-weight: 700;
        border-radius: 10px;
      }

      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.5;
        }
      }

      /* ═══════════════════════════════════════════════════════════════════════
         SISTEMA DE NOTIFICAÇÕES CENTRALIZADO
         Toast (sucesso / erro / info / warn) + Modal de confirmação
         ═══════════════════════════════════════════════════════════════════════ */

      /* ── Toast container ── */
      #toastContainer {
        position: fixed;
        top: 80px;           /* abaixo do topnav */
        left: 50%;
        transform: translateX(-50%);
        z-index: 9000;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        pointer-events: none;
        width: max-content;
        max-width: calc(100vw - 32px);
      }

      /* ── Toast item ── */
      .toast {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 20px;
        border-radius: 12px;
        box-shadow:
          0 4px 24px rgba(0, 0, 0, 0.14),
          0 1px 4px rgba(0, 0, 0, 0.08);
        font-size: 14px;
        font-weight: 600;
        min-width: 280px;
        max-width: 480px;
        pointer-events: auto;
        cursor: default;
        animation: toastIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        position: relative;
        overflow: hidden;
      }

      .toast::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        width: 100%;
        background: currentColor;
        opacity: 0.25;
        animation: toastProgress var(--toast-duration, 4s) linear forwards;
        transform-origin: left;
      }

      .toast.toast-out {
        animation: toastOut 0.22s ease forwards;
      }

      .toast-icon {
        flex-shrink: 0;
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .toast-text {
        flex: 1;
        line-height: 1.4;
        font-weight: 500;
      }

      .toast-close {
        flex-shrink: 0;
        background: none;
        border: none;
        cursor: pointer;
        color: currentColor;
        opacity: 0.5;
        padding: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: opacity 0.15s ease;
        line-height: 1;
      }
      .toast-close:hover { opacity: 0.9; }

      /* ── Toast variants ── */
      .toast-success {
        background: #f0fdf4;
        color: #14532d;
        border: 1px solid #bbf7d0;
      }
      .toast-success .toast-icon { color: #16a34a; }

      .toast-error {
        background: #fff1f2;
        color: #881337;
        border: 1px solid #fecdd3;
      }
      .toast-error .toast-icon { color: #e11d48; }

      .toast-info {
        background: #eff6ff;
        color: #1e3a5f;
        border: 1px solid #bfdbfe;
      }
      .toast-info .toast-icon { color: #2563eb; }

      .toast-warn {
        background: #fffbeb;
        color: #78350f;
        border: 1px solid #fde68a;
      }
      .toast-warn .toast-icon { color: #d97706; }

      /* ── Toast animations ── */
      @keyframes toastIn {
        from {
          opacity: 0;
          transform: translateY(-12px) scale(0.95);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      @keyframes toastOut {
        from {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
        to {
          opacity: 0;
          transform: translateY(-8px) scale(0.95);
        }
      }

      @keyframes toastProgress {
        from { transform: scaleX(1); }
        to   { transform: scaleX(0); }
      }

      /* ── Modal de confirmação ── */
      .confirm-modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.55);
        backdrop-filter: blur(3px);
        z-index: 9100;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 16px;
      }

      .confirm-modal-backdrop.open {
        display: flex;
        animation: confirmBackdropIn 0.18s ease both;
      }

      .confirm-modal-panel {
        background: #ffffff;
        border-radius: 18px;
        padding: 32px 28px 24px;
        width: min(420px, 100%);
        box-shadow:
          0 20px 60px rgba(0, 0, 0, 0.2),
          0 4px 12px rgba(0, 0, 0, 0.08);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        animation: confirmPanelIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      }

      .confirm-modal-icon-wrap {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        flex-shrink: 0;
      }

      .confirm-modal-icon-danger {
        background: #fff1f2;
        color: #e11d48;
      }

      .confirm-modal-icon-warn {
        background: #fffbeb;
        color: #d97706;
      }

      .confirm-modal-title {
        font-size: 18px;
        font-weight: 800;
        color: #0d1b26;
        margin: 0 0 8px;
        line-height: 1.2;
      }

      .confirm-modal-message {
        font-size: 14px;
        color: #4b5563;
        margin: 0 0 24px;
        line-height: 1.5;
        font-weight: 400;
      }

      .confirm-modal-actions {
        display: flex;
        gap: 10px;
        width: 100%;
      }

      .confirm-modal-btn {
        flex: 1;
        padding: 11px 20px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        border: 1.5px solid transparent;
        transition: all 0.15s ease;
      }

      .confirm-modal-btn-cancel {
        background: #f3f4f6;
        color: #374151;
        border-color: #e5e7eb;
      }
      .confirm-modal-btn-cancel:hover {
        background: #e5e7eb;
      }

      .confirm-modal-btn-confirm {
        background: #dc2626;
        color: #ffffff;
        border-color: #dc2626;
      }
      .confirm-modal-btn-confirm:hover {
        background: #b91c1c;
        border-color: #b91c1c;
      }

      /* Variante não-destrutiva (sem cor vermelha) */
      .confirm-modal-btn-confirm.safe {
        background: #024d3a;
        border-color: #024d3a;
      }
      .confirm-modal-btn-confirm.safe:hover {
        background: #013d2e;
      }

      @keyframes confirmBackdropIn {
        from { opacity: 0; }
        to   { opacity: 1; }
      }

      @keyframes confirmPanelIn {
        from {
          opacity: 0;
          transform: scale(0.9) translateY(10px);
        }
        to {
          opacity: 1;
          transform: scale(1) translateY(0);
        }
      }

      /* Em telas pequenas: fullwidth toast */
      @media (max-width: 560px) {
        #toastContainer {
          top: 70px;
          left: 16px;
          right: 16px;
          transform: none;
          width: auto;
        }
        .toast {
          min-width: 0;
          width: 100%;
        }
      }