:root{--bg-main:#F5F2E9;--bg-secondary:#181818;--bg-sidebar:#181818;--glass-bg:#FFFFFF;--gold:#16804A;--green:#16804A;--green-light:#2FA866;--red:#C93632;--text:#111111;--text-muted:#6f6a5f;--border:rgba(17,17,17,.10);--sidebar-width:270px;}

/* Paginа: admin/alunos.html — CSS extraido automaticamente */
:root {
      --bg-main: #f5f2e9;
      --bg-sidebar: #111111;
      --bg-card: #ffffff;
      --text: #111111;
      --text-soft: #292929;
      --text-muted: #66635d;
      --border: rgba(17,17,17,.11);
      --green: #237a3b;
      --green-dark: #185b2b;
      --red: #a52a2a;
      --yellow: #d5a900;
      --shadow: 0 8px 30px rgba(0,0,0,.045);
      --radius: 16px;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      padding: 0;
      min-height: 100%;
      font-family: Arial, Helvetica, sans-serif;
      background: var(--bg-main);
      color: var(--text);
    }

    body {
      min-height: 100vh;
    }

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

.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-width);height:100vh;background:var(--bg-secondary);border-right:1px solid var(--border);z-index:1050;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;transition:transform .25s ease;}
.sidebar-brand{display:flex;align-items:center;gap:11px;padding:20px 18px 18px;border-bottom:1px solid var(--border);text-decoration:none;flex-shrink:0;}
.sidebar-brand img{width:38px;height:38px;object-fit:contain;flex-shrink:0;}
.sidebar-brand h5{margin:0;color:var(--gold);font-size:15px;font-weight:800;line-height:1.1;letter-spacing:.8px;}
.sidebar-brand small{display:block;margin-top:2px;color:var(--text-muted);font-size:9px;font-weight:600;letter-spacing:1px;}
.sidebar-menu{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:2px;}
.sidebar-section{padding:14px 10px 5px;color:var(--text-muted);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;}
.sidebar-menu a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;color:var(--text-muted);text-decoration:none;font-size:12px;font-weight:600;transition:.15s ease;}
.sidebar-menu a i{width:20px;text-align:center;font-size:16px;flex-shrink:0;}
.sidebar-menu a:hover{background:rgba(255,255,255,.055);color:#fff;}
.sidebar-menu a.active{background:rgba(255,215,0,.10);color:var(--gold);}
.sidebar-divider{height:1px;margin:9px 10px;background:rgba(255,255,255,.045);flex-shrink:0;}
.sidebar-footer{padding:14px 18px;border-top:1px solid var(--border);color:var(--text-muted);font-size:9px;text-align:center;flex-shrink:0;}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1040;}
.sidebar-overlay.show{display:block;}
.main-content{margin-left:var(--sidebar-width);min-height:100vh;}


    .main {
      margin-left: var(--sidebar-width);
      width: calc(100% - var(--sidebar-width));
      min-height: 100vh;
      padding: 32px;
    }


    .topbar {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 25px;
    }

    .page-title {
      margin: 0;
      font-size: 28px;
    }

    .page-description {
      margin: 7px 0 0;
      color: var(--text-muted);
      font-size: 14px;
    }

    .primary-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 44px;
      padding: 0 16px;
      border-radius: 10px;
      border: 0;
      background: var(--green);
      color: #fff;
      text-decoration: none;
      cursor: pointer;
      font-weight: 700;
      font-size: 13px;
    }

    .primary-button:hover {
      background: var(--green-dark);
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px;
      margin-bottom: 20px;
    }

    .stat-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: var(--shadow);
      padding: 18px;
    }

    .stat-label {
      color: var(--text-muted);
      font-size: 12px;
      margin-bottom: 8px;
    }

    .stat-value {
      font-size: 26px;
      font-weight: 700;
    }

    .card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .filters {
      padding: 18px;
      display: grid;
      grid-template-columns: minmax(200px, 1.7fr) repeat(3, minmax(150px, 1fr));
      gap: 12px;
      border-bottom: 1px solid var(--border);
    }

    .filter {
      min-height: 42px;
      border: 1px solid rgba(17,17,17,.14);
      border-radius: 9px;
      background: #fff;
      color: #111;
      padding: 0 12px;
      font-size: 13px;
      outline: none;
    }

    .table-wrapper {
      width: 100%;
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 850px;
    }

    th {
      text-align: left;
      padding: 13px 16px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--text-muted);
      background: #faf9f5;
      border-bottom: 1px solid var(--border);
    }

    td {
      padding: 14px 16px;
      border-bottom: 1px solid rgba(17,17,17,.07);
      font-size: 13px;
      vertical-align: middle;
    }

    tr:last-child td {
      border-bottom: 0;
    }

    .student-name {
      font-weight: 700;
      color: #111;
    }

    .student-email {
      margin-top: 3px;
      color: var(--text-muted);
      font-size: 11px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      padding: 5px 8px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
      white-space: nowrap;
    }

    .badge-active {
      background: #eaf6ed;
      color: #246b32;
    }

    .badge-inactive {
      background: #f8eeee;
      color: #8e3030;
    }

    .badge-auth {
      background: #edf3fa;
      color: #285579;
    }

    .badge-offline {
      background: #f0eee9;
      color: #625d53;
    }

    .empty {
      padding: 55px 25px;
      text-align: center;
      color: var(--text-muted);
    }

    .empty-icon {
      font-size: 34px;
      margin-bottom: 12px;
    }

    .empty-title {
      color: #111;
      font-weight: 700;
      font-size: 16px;
      margin-bottom: 6px;
    }

    .empty-description {
      font-size: 13px;
      margin-bottom: 18px;
    }

    .actions {
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .icon-button {
      width: 34px;
      height: 34px;
      border: 1px solid var(--border);
      background: #fff;
      color: #111;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
    }

    .icon-button:hover {
      background: #f5f4ef;
    }

    .icon-button.delete:hover {
      color: var(--red);
      border-color: #e5bcbc;
      background: #fff6f6;
    }

    .loading {
      padding: 45px;
      text-align: center;
      color: var(--text-muted);
      font-size: 13px;
    }

    .message {
      display: none;
      margin-bottom: 16px;
      padding: 13px 15px;
      border-radius: 10px;
      font-size: 13px;
    }

    .message.show {
      display: block;
    }

    .message.error {
      background: #fff0f0;
      border: 1px solid #efcaca;
      color: #8c2020;
    }

    .toast {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 3000;
      max-width: 360px;
      background: #111;
      color: #fff;
      padding: 13px 16px;
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0,0,0,.18);
      display: none;
      font-size: 13px;
    }

    .toast.show {
      display: block;
    }

    @media (max-width: 1000px) {
      .stats {
        grid-template-columns: repeat(2, 1fr);
      }

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

    @media (max-width: 991px) {
      .sidebar {
        transform: translateX(-100%);
        transition: transform .2s ease;
      }

      .sidebar.show {
        transform: translateX(0);
      }

      .main {
        margin-left: 0;
        width: 100%;
        padding: 20px;
      }



      .topbar {
        flex-direction: column;
      }
    }

    @media (max-width: 600px) {
      .stats {
        grid-template-columns: 1fr 1fr;
      }

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

      .topbar .primary-button {
        width: 100%;
      }
    }