:root{--bg:#0e0f14;--surface:#16181f;--surface2:#1e2029;--border:#2a2d3a;--accent:#4f8ef7;--accent2:#7c5cfc;--green:#3ecf8e;--red:#f75f5f;--yellow:#f7c948;--text:#e8eaf0;--muted:#7b7f96;--radius:14px;}
  *{box-sizing:border-box;margin:0;padding:0;}
  body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;}
  .hidden{display:none!important;}

  /* LOGIN */
  #loginPage{display:flex;align-items:center;justify-content:center;min-height:100vh;background:radial-gradient(ellipse at 30% 20%,#1a1f3a 0%,var(--bg) 60%),radial-gradient(ellipse at 80% 80%,#1a102a 0%,transparent 50%);padding:24px;}
  .login-card{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:48px 40px;width:100%;max-width:420px;box-shadow:0 40px 80px rgba(0,0,0,0.5);}
  .logo{font-family:'Syne',sans-serif;font-size:28px;font-weight:800;letter-spacing:-1px;margin-bottom:4px;}.logo span{color:var(--accent);}
  .login-sub{color:var(--muted);font-size:14px;margin-bottom:36px;}
  .field{margin-bottom:18px;}.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:8px;font-weight:500;}
  .field input{width:100%;padding:13px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:15px;outline:none;transition:border-color 0.2s;}
  .field input:focus{border-color:var(--accent);}
  .btn-primary{width:100%;padding:14px;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;border-radius:10px;color:white;font-family:'Syne',sans-serif;font-size:15px;font-weight:700;cursor:pointer;transition:opacity 0.2s,transform 0.15s;margin-top:8px;}
  .btn-primary:hover{opacity:0.9;transform:translateY(-1px);}
  .login-link{background:none;border:none;color:var(--muted);font-size:12px;cursor:pointer;text-decoration:underline;padding:0;font-family:inherit;margin-top:12px;display:block;text-align:center;}
  .login-link:hover{color:var(--accent);}
  .err-msg{color:var(--red);font-size:13px;margin-top:10px;text-align:center;}
  .login-hint{font-size:12px;color:var(--muted);margin-top:12px;text-align:center;line-height:1.7;}

  /* SHARED SHELL */
  .shell{display:flex;flex-direction:column;min-height:100vh;}
  .topbar{display:flex;align-items:center;justify-content:space-between;padding:0 28px;height:64px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;}
  .topbar-logo{font-family:'Syne',sans-serif;font-size:20px;font-weight:800;letter-spacing:-0.5px;}.topbar-logo span{color:var(--accent);}
  .topbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .user-chip{background:var(--surface2);border:1px solid var(--border);border-radius:50px;padding:6px 14px 6px 8px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);}
  .avatar{width:28px;height:28px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:white;}
  .admin-badge{background:rgba(247,201,72,0.15);border:1px solid rgba(247,201,72,0.3);color:var(--yellow);font-size:11px;font-weight:700;padding:3px 10px;border-radius:50px;letter-spacing:0.5px;}
  .sync-chip{display:flex;align-items:center;gap:5px;font-size:12px;padding:5px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:50px;}
  .btn-sm{padding:7px 14px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--muted);font-size:13px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.15s;}
  .btn-sm:hover{border-color:var(--accent);color:var(--accent);}

  /* TEACHER NAV */
  .nav-tabs{display:flex;gap:2px;padding:0 28px;background:var(--surface);border-bottom:1px solid var(--border);overflow-x:auto;}
  .nav-tab{padding:14px 20px;font-size:14px;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all 0.2s;white-space:nowrap;}
  .nav-tab.active{color:var(--accent);border-bottom-color:var(--accent);}.nav-tab:hover:not(.active){color:var(--text);}

  /* ADMIN NAV */
  .admin-tabs{display:flex;gap:2px;padding:0 28px;background:var(--surface);border-bottom:1px solid var(--border);overflow-x:auto;}
  .admin-tab{padding:14px 20px;font-size:14px;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all 0.2s;white-space:nowrap;}
  .admin-tab.active{color:var(--yellow);border-bottom-color:var(--yellow);}.admin-tab:hover:not(.active){color:var(--text);}
  .admin-panel{display:none;}.admin-panel.active{display:block;}

  .content{padding:32px 28px;flex:1;max-width:1100px;margin:0 auto;width:100%;}
  .tab-panel{display:none;}.tab-panel.active{display:block;}

  /* DASHBOARD */
  .section-title{font-family:'Syne',sans-serif;font-size:22px;font-weight:700;margin-bottom:6px;}
  .section-sub{color:var(--muted);font-size:14px;margin-bottom:28px;}
  .stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:36px;}
  .stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;}
  .stat-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:10px;}
  .stat-val{font-family:'Syne',sans-serif;font-size:32px;font-weight:800;}
  .stat-val.green{color:var(--green);}.stat-val.red{color:var(--red);}.stat-val.blue{color:var(--accent);}
  .class-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
  .class-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;cursor:pointer;transition:all 0.2s;position:relative;overflow:hidden;}
  .class-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));opacity:0;transition:opacity 0.2s;}
  .class-card:hover{border-color:var(--accent);transform:translateY(-2px);}.class-card:hover::before{opacity:1;}
  .class-name{font-family:'Syne',sans-serif;font-size:17px;font-weight:700;margin-bottom:6px;}
  .class-meta{font-size:13px;color:var(--muted);margin-bottom:16px;}
  .class-footer{display:flex;justify-content:space-between;align-items:center;}
  .pill{padding:4px 12px;border-radius:50px;font-size:12px;font-weight:500;}.pill-blue{background:rgba(79,142,247,0.15);color:var(--accent);}
  .empty-state{text-align:center;padding:60px 20px;color:var(--muted);}.empty-icon{font-size:48px;margin-bottom:16px;opacity:0.5;}

  /* ATTENDANCE */
  .select-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px;align-items:flex-end;}
  .select-wrap{display:flex;flex-direction:column;gap:6px;flex:1;min-width:180px;}
  .select-wrap label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;}
  .styled-select{padding:11px 14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;outline:none;cursor:pointer;transition:border-color 0.2s;}
  .styled-select:focus{border-color:var(--accent);}
  .student-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;}
  .student-tile{background:var(--surface);border:2px solid var(--border);border-radius:12px;padding:16px;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;gap:12px;user-select:none;}
  .student-tile:hover{border-color:var(--muted);}
  .student-tile.present{border-color:var(--green);background:rgba(62,207,142,0.07);}
  .student-tile.absent{border-color:var(--red);background:rgba(247,95,95,0.07);}
  .student-tile.excused{border-color:var(--yellow);background:rgba(247,201,72,0.07);}
  .s-check{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;transition:all 0.15s;}
  .present .s-check{background:var(--green);border-color:var(--green);}.absent .s-check{background:var(--red);border-color:var(--red);}.excused .s-check{background:var(--yellow);border-color:var(--yellow);}
  .s-name{font-size:13px;font-weight:500;line-height:1.3;}.s-num{font-size:11px;color:var(--muted);}
  .att-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;align-items:center;}
  .btn-outline{padding:9px 18px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s;}
  .btn-outline:hover{border-color:var(--accent);color:var(--accent);}.btn-outline.green{border-color:var(--green);color:var(--green);}.btn-outline.red{border-color:var(--red);color:var(--red);}
  .btn-save{padding:10px 24px;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;border-radius:8px;color:white;font-family:'Syne',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:opacity 0.2s,transform 0.15s;margin-left:auto;}
  .btn-save:hover{opacity:0.9;transform:translateY(-1px);}
  .att-summary{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap;}
  .att-pill{padding:6px 16px;border-radius:50px;font-size:13px;font-weight:500;}

  /* REPORTS */
  .report-controls{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px;align-items:flex-end;}
  .report-table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border);}
  .report-table{width:100%;border-collapse:collapse;font-size:13px;}
  .report-table th{background:var(--surface2);padding:12px 16px;text-align:left;color:var(--muted);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap;}
  .report-table td{padding:12px 16px;border-top:1px solid var(--border);vertical-align:middle;}
  .report-table tr:hover td{background:rgba(255,255,255,0.02);}
  .badge{display:inline-block;padding:3px 10px;border-radius:50px;font-size:11px;font-weight:600;}
  .badge-p{background:rgba(62,207,142,0.15);color:var(--green);}.badge-a{background:rgba(247,95,95,0.15);color:var(--red);}.badge-e{background:rgba(247,201,72,0.15);color:var(--yellow);}
  .export-row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}
  .week-label{font-family:'Syne',sans-serif;font-size:14px;font-weight:600;color:var(--accent);padding:4px 12px;background:rgba(79,142,247,0.1);border-radius:6px;display:inline-block;margin-bottom:20px;}
  .divider{height:1px;background:var(--border);margin:28px 0;}

  /* ADMIN PANELS */
  .admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  @media(max-width:800px){.admin-grid{grid-template-columns:1fr;}}
  .admin-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;}
  .admin-card-title{font-family:'Syne',sans-serif;font-size:16px;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:10px;}
  .input-field{width:100%;padding:11px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;outline:none;transition:border-color 0.2s;margin-bottom:10px;}
  .input-field:focus{border-color:var(--accent);}
  .btn-add{padding:11px 20px;background:var(--accent);border:none;border-radius:10px;color:white;font-family:'Syne',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:opacity 0.2s;width:100%;}
  .btn-add:hover{opacity:0.85;}
  .btn-add.yellow{background:var(--yellow);color:#111;}
  .list-item{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;margin-bottom:8px;font-size:14px;}
  .list-item-name{flex:1;}.list-item-sub{font-size:12px;color:var(--muted);}
  .btn-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:4px 6px;border-radius:6px;transition:color 0.15s;}.btn-del:hover{color:var(--red);}
  .import-zone{border:2px dashed var(--border);border-radius:12px;padding:20px;text-align:center;cursor:pointer;transition:border-color 0.2s;margin-bottom:12px;}
  .import-zone:hover{border-color:var(--accent);}
  .file-input{display:none;}

  /* TOAST */
  .toast{position:fixed;bottom:28px;right:28px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:14px 20px;font-size:14px;box-shadow:0 20px 40px rgba(0,0,0,0.4);z-index:300;transform:translateY(20px);opacity:0;transition:all 0.3s;max-width:340px;}
  .toast.show{transform:translateY(0);opacity:1;}.toast.success{border-color:var(--green);}.toast.error{border-color:var(--red);}

  @media(max-width:600px){
    .content{padding:16px 12px;}
    .login-card{padding:36px 24px;}
    .nav-tabs,.admin-tabs{padding:0 4px;}

    /* Topbar: stack logo on top, controls below */
    .topbar{
      height:auto;
      flex-direction:column;
      align-items:flex-start;
      padding:12px 16px;
      gap:8px;
    }
    .topbar-right{
      width:100%;
      justify-content:flex-start;
      flex-wrap:wrap;
      gap:6px;
    }
    /* Hide sync chip and user name on mobile to save space */
    .sync-chip{display:none;}
    .user-chip span:last-child{display:none;}
    /* Make sign out button smaller */
    .btn-sm{padding:5px 10px;font-size:12px;}
    /* Shrink admin badge */
    .admin-badge{font-size:10px;padding:2px 8px;}
    /* Nav tabs scrollable and smaller */
    .nav-tab,.admin-tab{padding:10px 14px;font-size:13px;}
    /* Student grid single column on small screens */
    .student-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
    /* Stats row 2 columns */
    .stats-row{grid-template-columns:1fr 1fr;}
    .stat-val{font-size:24px;}
    /* Class grid single column */
    .class-grid{grid-template-columns:1fr;}
    /* Att toolbar wrap nicely */
    .btn-save{margin-left:0;width:100%;}
    .att-toolbar{flex-direction:column;align-items:stretch;}
    .att-toolbar .btn-outline{text-align:center;}
  }