.dashboard-role-task-row {
              display: grid;
              grid-template-columns: minmax(130px, 1.2fr) repeat(4, minmax(75px, 1fr));
              gap: 8px;
              align-items: center;
              border: 1px solid rgba(15, 23, 42, .08);
              border-radius: 10px;
              padding: 10px;
              font-size: 12px;
            }

            .dashboard-role-task-row span {
              color: var(--text-secondary);
              line-height: 1.35;
            }

            .dashboard-role-task-row span strong {
              color: var(--text-primary);
              font-size: 18px;
            }

            @media (max-width: 560px) {
              .dashboard-role-task-row {
                grid-template-columns: 1fr 1fr;
              }

              .dashboard-role-task-row > strong {
                grid-column: 1 / -1;
                padding-bottom: 4px;
                border-bottom: 1px solid rgba(15, 23, 42, .08);
              }
            }
      .popup-jadwal-login-ortu {
        width: min(92vw, 460px) !important;
        padding: 28px 26px 24px !important;
        border: 2px solid #d8b4fe !important;
        border-radius: 18px !important;
        background: #fffaf5 !important;
        box-shadow: 0 18px 48px rgba(74, 35, 98, 0.24) !important;
        font-family: 'ITC Lubalin Graph', Georgia, serif !important;
      }

      .popup-jadwal-login-ortu-title {
        margin: 0 0 18px !important;
        color: #54206f !important;
        font-family: 'ITC Lubalin Graph', Georgia, serif !important;
        font-size: clamp(21px, 5vw, 28px) !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
      }

      .popup-jadwal-login-ortu-content {
        margin: 0 !important;
        color: #382642 !important;
        font-family: 'ITC Lubalin Graph', Georgia, serif !important;
        font-size: 16px !important;
        line-height: 1.55 !important;
        text-align: left !important;
      }

      .popup-jadwal-login-ortu-message {
        padding: 14px 16px;
        border-left: 5px solid #9b59b6;
        border-radius: 9px;
        background: #f3e8ff;
        color: #48205d;
        overflow-wrap: anywhere;
      }

      .popup-jadwal-login-ortu-schedule {
        margin-top: 14px;
        padding: 11px 14px;
        border: 1px solid #f1c27d;
        border-radius: 9px;
        background: #fff0d6;
        color: #7a4215;
        font-size: 14px;
        line-height: 1.45;
        overflow-wrap: anywhere;
      }

      .popup-jadwal-login-ortu .swal2-confirm {
        min-width: 110px;
        border-radius: 9px !important;
        background: #54206f !important;
        color: #fffaf5 !important;
        font-family: 'ITC Lubalin Graph', Georgia, serif !important;
        font-size: 15px !important;
      }

      @media (max-width: 480px) {
        .popup-jadwal-login-ortu {
          padding: 23px 18px 20px !important;
        }

        .popup-jadwal-login-ortu-content {
          font-size: 15px !important;
        }
      }

      :root {
        --primary: #7c3aed;
        --primary-dark: #5b21b6;
        --primary-light: #f5f3ff;
        --accent: #8b5cf6;
        --success: #10b981;
        --danger: #ef4444;
        --warning: #f59e0b;
        --bg-main: #f3f4f6;
        --card-bg: #ffffff;
        --text-main: #1f2937;
        --text-secondary: #6b7280;
        --border-color: #e5e7eb;
      }

      * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; -webkit-tap-highlight-color: transparent; }
      body { background-color: var(--bg-main); color: var(--text-main); min-height: 100vh; display: flex; flex-direction: column; align-items: center; }

      .app-wrapper { width: 100%; max-width: 100%; min-height: 100vh; background: var(--bg-main); display: flex; flex-direction: column; position: relative; box-shadow: 0 0 25px rgba(0,0,0,0.08); overflow-x: hidden; }

      .login-wrapper { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: clamp(16px, 3.5vw, 40px); background: linear-gradient(135deg, rgba(88, 28, 135, 0.98) 0%, rgba(168, 85, 247, 0.96) 32%, rgba(244, 114, 182, 0.94) 70%, rgba(253, 230, 138, 0.92) 100%); width: 100%; max-width: 100%; }
      .login-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(300px, 1.05fr) minmax(320px, 0.95fr); width: min(100%, 980px); padding: 0; border-radius: 32px; box-shadow: 0 35px 90px rgba(2, 6, 23, 0.45); border: 1px solid rgba(255,255,255,0.24); background: rgba(255,255,255,0.18); backdrop-filter: blur(28px) saturate(190%); -webkit-backdrop-filter: blur(28px) saturate(190%); }
      .login-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(130deg, rgba(255,255,255,0.34), rgba(255,255,255,0.10) 30%, rgba(255,255,255,0.18) 62%, transparent 100%); pointer-events: none; mix-blend-mode: screen; }
      .login-card::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,0.28); border-radius: 24px; pointer-events: none; }
      .login-glow { position: absolute; width: 320px; height: 320px; border-radius: 50%; filter: blur(18px); opacity: 0.18; pointer-events: none; }
      .login-glow-left { left: -120px; top: -140px; background: rgba(244, 114, 182, 0.34); }
      .login-glow-right { right: -120px; bottom: -140px; background: rgba(251, 191, 36, 0.28); }
      .login-hero { position: relative; z-index: 1; padding: 32px 30px 24px; background: linear-gradient(135deg, rgba(88, 28, 135, 0.8), rgba(244, 114, 182, 0.72)); color: white; display: flex; flex-direction: column; justify-content: center; }
      .login-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(255,255,255,0.3), transparent 44%); pointer-events: none; }
      .login-hero-badge { display: inline-flex; align-self: flex-start; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,0.2); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.16); }
      .login-hero-logo { width: 124px; height: 124px; border-radius: 34px; padding: 10px; background: rgba(255,255,255,0.9); box-shadow: 0 24px 50px rgba(15, 23, 42, 0.24); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; border: 1px solid rgba(255,255,255,0.7); }
      .login-hero-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; }
      .login-hero h2 { font-size: 1.52rem; font-weight: 800; line-height: 1.2; margin-bottom: 8px; text-shadow: 0 2px 10px rgba(0,0,0,0.18); }
      .login-hero p { font-size: 0.95rem; line-height: 1.65; color: rgba(255,255,255,0.9); margin-bottom: 18px; }
      .login-hero-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
      .login-hero-features div { padding: 10px 8px; border-radius: 14px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.16); text-align: center; font-size: 0.72rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14); }
      .login-hero-features span { display: block; font-size: 0.95rem; margin-bottom: 3px; }
      .login-panel { position: relative; z-index: 1; padding: 28px 30px 32px; background: rgba(255,255,255,0.2); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); display: flex; flex-direction: column; justify-content: center; }
      .login-panel-head { text-align: left; margin-bottom: 16px; }
      .login-pill { display: inline-block; padding: 6px 10px; border-radius: 999px; background: linear-gradient(135deg, rgba(244, 114, 182, 0.35), rgba(251, 191, 36, 0.28)); color: #fef3c7; font-size: 10px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 0 6px 16px rgba(244, 114, 182, 0.18); border: 1px solid rgba(252, 211, 77, 0.34); }
      .login-panel-head h3 {
        margin-top: 9px;
        color: #6d28d9;
        font-size: 1.16rem;
        font-weight: 900;
        letter-spacing: 0.01em;
        background: #ffffff;
        display: inline-block;
        padding: 4px 10px;
        border-radius: 999px;
        box-shadow: 0 2px 8px rgba(109, 40, 217, 0.16);
        text-shadow: none;
      }
      .login-panel-head p {
        margin-top: 10px;
        font-size: 0.9rem;
        color: #ffffff;
        font-weight: 800;
        line-height: 1.5;
        background: rgba(255, 255, 255, 0.16);
        display: inline-block;
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.24);
        text-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
      }
      .form-group { margin-bottom: 14px; }
      .form-group label { font-size: 0.8rem; color: #f8fafc; font-weight: 700; margin-bottom: 7px; }
      .form-control { border: 1px solid rgba(255,255,255,0.24); border-radius: 16px; padding: 13px 14px; box-shadow: inset 0 1px 2px rgba(15,23,42,0.06); background: rgba(255,255,255,0.18); color: #f8fafc; }
      .form-control::placeholder { color: rgba(248,250,252,0.72); }
      .form-control:focus { border-color: rgba(255,255,255,0.5); box-shadow: 0 0 0 4px rgba(255,255,255,0.16); }
      .login-btn { margin-top: 8px; border-radius: 18px; background: linear-gradient(135deg, rgba(244, 114, 182, 0.8), rgba(168, 85, 247, 0.8)); color: #ffffff; box-shadow: 0 18px 34px rgba(168, 85, 247, 0.24); font-size: 0.96rem; font-weight: 800; letter-spacing: 0.01em; border: 1px solid rgba(255,255,255,0.25); }
      .login-btn:hover { transform: translateY(-1px); box-shadow: 0 24px 38px rgba(168, 85, 247, 0.28); }
      .login-footnote { margin-top: 12px; font-size: 0.8rem; color: rgba(248,250,252,0.78); line-height: 1.5; }
       
      .app-header { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, #db2777 0%, #7c3aed 100%); color: white; padding: 24px 20px 45px 20px; border-bottom-left-radius: 28px; border-bottom-right-radius: 28px; box-shadow: 0 4px 15px rgba(190,24,93,0.24); }
      
      .app-container { width: 100%; padding: 0 16px 28px 16px; margin-top: -30px; flex: 1; z-index: 2; }

      /* ✨ RESPONSIF: Menyesuaikan layar HP secara presisi & Desktop lebih lebar ✨ */
      /* Tablet kecil / HP besar (lebar <= 640px) */
      @media (max-width: 768px) {
        .app-wrapper { max-width: 100%; }
        .login-wrapper { max-width: 100%; padding: 16px; }
        .login-card { width: min(100%, 520px); grid-template-columns: 1fr; }
        .login-hero { padding: 24px 20px 20px; }
        .login-panel { padding: 22px 20px 24px; }
        .login-hero-features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
        .app-header { padding: 18px 16px 40px 16px; }
        .app-container { padding: 0 12px 24px 12px; }
        .menu-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .menu-card { min-height: 96px; padding: 14px 10px; border-radius: 18px; }
        .menu-card::before { border-radius: 18px; }
        .menu-card::after { border-radius: 18px 18px 0 0; }
        .menu-icon { font-size: 26px; margin-bottom: 7px; width: 44px; height: 44px; border-radius: 13px; }
        .menu-card h3 { font-size: 12px; }
        .jpgrid { grid-template-columns: repeat(4, 1fr); }
        .table { font-size: 11px; }
        .table th, .table td { padding: 8px 8px; }
        .task-action-buttons { flex-direction: column; gap: 8px !important; min-width: 92px; }
        .task-action-buttons .btn { width: 100%; min-height: 42px; padding: 10px 12px !important; font-size: 13px !important; }
        .task-back-button { width: 100% !important; min-height: 44px; margin-bottom: 14px !important; font-size: 14px !important; }
        .review-save-button { min-width: 112px; min-height: 48px; padding: 12px 16px !important; font-size: 13px !important; }
        .revision-column { display: none; }
        .ortu-task-attachment { width: 100%; min-height: 48px; padding: 12px 14px; font-size: 14px !important; }
        .keaktifan-filter-row { flex-direction: column; align-items: stretch !important; gap: 6px !important; }
        .keaktifan-date-input, .keaktifan-user-select { width: 100% !important; min-width: 0 !important; min-height: 48px; font-size: 16px !important; }
        .keaktifan-user-label { margin-top: 6px; }
      }
      /* Layar HP sangat kecil (<= 360px) */
      @media (max-width: 360px) {
        .menu-grid { gap: 9px; }
        .menu-card { min-height: 84px; padding: 10px 8px; border-radius: 15px; }
        .menu-card::before { border-radius: 15px; }
        .menu-card::after { border-radius: 15px 15px 0 0; }
        .menu-icon { font-size: 22px; margin-bottom: 5px; width: 38px; height: 38px; border-radius: 11px; }
        .menu-card h3 { font-size: 11px; }
      }

      /* Desktop / Layar Lebih Besar (> 1024px): terlihat sebagai aplikasi yang lebih luas */
      @media (min-width: 1024px) {
        body { background: #e8e4ef; }
        .app-wrapper {
          max-width: 1200px;
          min-height: 100vh;
          border-radius: 24px;
          margin: 20px auto;
          box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }
        .login-wrapper { max-width: 100%; border-radius: 24px; margin: 0 auto; box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
        .login-card { width: min(100%, 980px); }
        .menu-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
        .menu-card { min-height: 130px; }
        .table { font-size: 13px; }
        .table th, .table td { padding: 12px 14px; }
        .panel-content { padding: 26px; }
        .form-group label { font-size: 14px; }
        .form-control { font-size: 15px; padding: 13px 16px; }
        .jp-container { grid-template-columns: repeat(8, 1fr); }
        .app-header { padding: 28px 36px 56px; }
        .app-container { padding: 0 32px 40px; margin-top: -38px; }
        .menu-grid { gap: 18px; margin-bottom: 30px; }
        .menu-card { min-height: 142px; padding: 22px 18px; }
        .panel-content { padding: 30px; border-radius: 16px; margin-bottom: 28px; }
        .panel-header { margin-bottom: 22px; padding-bottom: 12px; }
        .panel-header h3 { font-size: 18px; }
        .form-group { margin-bottom: 18px; }
        .form-control { min-height: 46px; }
        .table-responsive { margin-top: 18px; border-radius: 10px; }
        .table { font-size: 13px; }
        .table th, .table td { padding: 13px 15px; }
        .btn { min-height: 44px; }
        .tab-container { gap: 10px; margin-bottom: 16px; }
        .tab-btn { padding: 8px 16px; font-size: 13px; }
        .materi-pembelajaran-panel { padding: 30px 34px; }
        .materi-pembelajaran-panel .form-group { max-width: 100%; }
        .materi-pembelajaran-panel #tabel-materi-pembelajaran { margin-top: 18px; }
        .materi-pembelajaran-panel #tabel-materi-pembelajaran .data-table { min-width: 0 !important; }
        .materi-pembelajaran-panel #tabel-materi-pembelajaran .data-table th,
        .materi-pembelajaran-panel #tabel-materi-pembelajaran .data-table td { padding: 13px 14px; }
        .materi-pembelajaran-panel #tabel-materi-pembelajaran .btn { width: 100%; }
        .materi-pembelajaran-panel #btn-kirim-materi-terpilih { width: auto; min-width: 300px; white-space: nowrap; }
      }

      /* Tablet / Layar Sedang (641px - 1023px) */
      @media (min-width: 641px) and (max-width: 1023px) {
        .app-wrapper { max-width: 100%; }
        .menu-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
        .table { font-size: 12.5px; }
      }
      
      .user-badge { background: var(--card-bg); padding: 18px 20px; border-radius: 20px; box-shadow: 0 8px 20px rgba(0,0,0,0.05); margin-bottom: 20px; border: 1px solid rgba(5, 86, 249, 0.8); display: flex; justify-content: space-between; align-items: center; }

      .form-group { margin-bottom: 16px; text-align: left; }
      .form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-main); }
      .form-control { width: 100%; padding: 12px 16px; font-size: 14px; border: 1px solid var(--border-color); border-radius: 12px; outline: none; transition: all 0.2s; background: #fff; color: var(--text-main); }
      .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }

      .btn { width: 100%; padding: 12px 16px; border: none; font-size: 14px; font-weight: 600; border-radius: 12px; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
      .btn:active { transform: scale(0.98); }
      .btn-primary { background: var(--primary); color: white; box-shadow: 0 4px 12px rgba(124,58,237,0.3); }
      .btn-success { background: var(--success); color: white; box-shadow: 0 4px 12px rgba(16,185,129,0.3); }
      .btn-warning { background: var(--warning); color: #fff; box-shadow: 0 4px 12px rgba(245,158,11,0.3); }
      .btn-danger { background: var(--danger); color: white; box-shadow: 0 4px 12px rgba(239,68,68,0.3); }
      .btn-secondary { background: #7bef07; color: var(--text-main); }
      .btn-logout { background: #fee2e2; color: var(--danger); width: auto; padding: 6px 12px; font-size: 12px; border-radius: 8px; }
      .revision-column { display: none; }
      .task-action-buttons { min-width: 155px; }
      .review-save-button { min-width: 86px; }
      .ortu-task-attachment { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px; border-radius: 8px; background: #eff6ff; }
      .keaktifan-date-label, .keaktifan-user-label { white-space: nowrap; }

.menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 25px; }
      /* 🎨 KARTU MENU 3D TIMBUL WARNA-WARNI */
      .menu-card {
        padding: 20px 16px;
        border-radius: 20px;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 125px;
        position: relative;
        overflow: hidden;
        border: none;
        background: var(--card-bg); /* fallback bila gradasi tidak tampil */
        color: #fff;
        /* Efek timbul 3D: highlight atas + bayangan bawah & sisi */
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.55),
          inset 0 -5px 10px rgba(0,0,0,0.18),
          0 6px 0 rgba(0,0,0,0.30),
          0 12px 20px rgba(0,0,0,0.22);
      }
      /* Lapisan warna gradasi (menggantikan background apa pun, tetap warna-warni) */
      .menu-card::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: 20px;
        background: linear-gradient(145deg, #fb923c, #ea580c);
      }
      /* Kilau atas (efek timbul/cermin) */
      .menu-card::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 45%;
        z-index: 1;
        border-radius: 20px 20px 0 0;
        background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0));
        pointer-events: none;
      }
      /* Warna-warni bergantian (6 palet pelangi) */
      .menu-card:nth-child(6n+1)::before { background: linear-gradient(145deg, #fb923c, #ea580c); }
      .menu-card:nth-child(6n+2)::before { background: linear-gradient(145deg, #34d399, #059669); }
      .menu-card:nth-child(6n+3)::before { background: linear-gradient(145deg, #60a5fa, #2563eb); }
      .menu-card:nth-child(6n+4)::before { background: linear-gradient(145deg, #a78bfa, #7c3aed); }
      .menu-card:nth-child(6n+5)::before { background: linear-gradient(145deg, #f472b6, #db2777); }
      .menu-card:nth-child(6n+6)::before { background: linear-gradient(145deg, #22d3ee, #0891b2); }
      .menu-card:hover {
        transform: translateY(-2px);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.55),
          inset 0 -5px 10px rgba(0,0,0,0.18),
          0 8px 0 rgba(0,0,0,0.30),
          0 16px 26px rgba(0,0,0,0.25);
      }
      .menu-card:active {
        transform: translateY(4px);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.55),
          inset 0 -3px 6px rgba(0,0,0,0.18),
          0 2px 0 rgba(0,0,0,0.30),
          0 4px 8px rgba(0,0,0,0.20);
      }
      .menu-icon {
        position: relative;
        z-index: 2;
        font-size: 32px;
        margin-bottom: 10px;
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background: rgba(255,255,255,0.28);
        border: 1px solid rgba(255,255,255,0.5);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255,0.5);
      }
      .menu-card h3 {
        position: relative;
        z-index: 2;
        font-size: 13px;
        color: #fff;
        font-weight: 700;
        line-height: 1.4;
        text-shadow: 0 1px 3px rgba(0,0,0,0.35);
      }

      .panel-content { background: var(--card-bg); padding: 22px; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); border: 1px solid rgba(229,231,235,0.8); margin-bottom: 25px; }
      .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid var(--bg-main); }
      .panel-header h3 { font-size: 16px; color: var(--primary); font-weight: 700; }

      .table-responsive { width: 100%; overflow-x: auto; margin-top: 15px; border-radius: 12px; border: 1px solid var(--border-color); }
      .table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
      .table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--border-color); }
      .table th { background: var(--primary-light); color: var(--primary); font-weight: 600; }
      .table tr:last-child td { border-bottom: none; }

      .jp-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 15px; }
      .jp-box { background: var(--bg-main); border: 1px solid var(--border-color); padding: 8px; border-radius: 8px; text-align: center; font-size: 11px; font-weight: 500; cursor: pointer; }
      .jp-box input { margin-right: 4px; accent-color: var(--primary); }

      /* Styling Tab & Kartu Catatan Perilaku Orang Tua */
      .tab-container { display: flex; gap: 8px; margin-bottom: 12px; border-bottom: 2px solid var(--border-color); padding-bottom: 8px; flex-wrap: wrap; }
      .tab-btn { background: #f3f4f6; border: 1px solid var(--border-color); color: var(--text-main); padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
      .tab-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
      .catatan-card { background: #ffffff; border: 1px solid var(--border-color); border-radius: 12px; padding: 14px; margin-bottom: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.03); transition: all 0.2s; }
      .catatan-card:hover { border-color: var(--primary); }
      .catatan-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 6px; }
      .badge-walikelas { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; padding: 3px 10px; border-radius: 20px; font-weight: 700; font-size: 11px; display: inline-block; }
      .badge-gurumapel { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; padding: 3px 10px; border-radius: 20px; font-weight: 700; font-size: 11px; display: inline-block; }
      .catatan-body { font-size: 13px; color: var(--text-main); line-height: 1.5; white-space: pre-line; }

      .hidden { display: none !important; }
      .helpdesk-ai-hint { color: var(--text-secondary); font-size: 12px; margin-bottom: 16px; }
      .helpdesk-ai-messages { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; margin-bottom: 16px; padding: 12px; border: 1px solid var(--border-color); border-radius: 12px; background: #f8fafc; }
      .helpdesk-ai-message { white-space: pre-wrap; max-width: 88%; padding: 10px 12px; border-radius: 12px; line-height: 1.5; }
      .helpdesk-ai-message.user { align-self: flex-end; background: #dbeafe; color: #1e3a8a; }
      .helpdesk-ai-message.model { align-self: flex-start; background: #fff; color: var(--text-main); border: 1px solid var(--border-color); }
      .jitsi-meet-hint { color: var(--text-secondary); font-size: 12px; margin-bottom: 16px; }
      .jitsi-meet-panel iframe { background: #0f172a; }
      .jitsi-meeting-card { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; margin:8px 0; border:1px solid var(--border-color); border-radius:10px; background:#f8fafc; }
      .jitsi-meeting-card small { display:block; margin-top:4px; color:var(--text-secondary); font-size:11px; }
      .jitsi-meeting-card .btn { width:auto; flex-shrink:0; padding:8px 12px; font-size:12px; }
      @media (max-width: 560px) {
        .jitsi-meet-panel > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
        .jitsi-meet-panel iframe { min-height: 420px !important; }
        .jitsi-meeting-card { align-items:flex-start; flex-direction:column; }
      }

      /* Toast Notification CSS */
      #toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; max-width: 300px; }
      .toast { padding: 12px 16px; border-radius: 10px; color: white; font-size: 13px; font-weight: 600; box-shadow: 0 10px 25px rgba(0,0,0,0.2); animation: slideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, fadeOut 0.4s ease 3s forwards; }
      .toast.success { background: var(--success); }
      .toast.error { background: var(--danger); }
      .toast.info { background: var(--primary); }
      .toast.warning { background: var(--warning); }
      @keyframes slideIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
      @keyframes fadeOut { to { opacity: 0; visibility: hidden; } }

      /* ✨ STYLING EFEK TRANSPARAN & KACA (GLASSMORPHISM) ✨ */
      .swal2-popup {
        background: rgba(255, 255, 255, 0.85) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border-radius: 24px !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25) !important;
        padding-top: 25px !important;
        padding-bottom: 25px !important;
      }

      /* 📊 KONTROL UKURAN CHART (Cegah Flicker & Layout Thrashing) */
      .chart-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* dua kolom agar dashboard tidak memanjang */
        gap: 10px;
        margin-bottom: 14px;
        width: 100%;
      }

      .chart-box {
        background: var(--bg-main, #f9fafb);
        border: 1px solid var(--border-color, #e5e7eb);
        border-radius: 12px;
        padding: 8px 10px;
        width: 100%;
        height: 190px; /* tinggi tetap agar chart tidak kedip/grow tak terkendali */
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      .chart-box h4 {
        font-size: 11px;
        font-weight: 700;
        color: var(--text-main, #1f2937);
        margin: 0 0 4px 0;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .chart-canvas-wrap {
        flex: 1;
        width: 100%;
        min-height: 0; /* penting untuk flexbox agar canvas tidak meluber */
        height: 150px; /* tinggi tetap area canvas */
        position: relative;
        overflow: hidden;
      }

      .chart-canvas-wrap canvas {
        width: 100% !important;
        height: 100% !important;
        display: block;
      }

      /* Responsif: chart tetap dua kolom namun sedikit lebih padat di layar kecil */
      @media (max-width: 640px) {
        .chart-box { height: 190px; padding: 8px 10px; }
        .chart-canvas-wrap { height: 150px; }
      }