*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --deep:#1a2018; --mid:#2a3525; --brand:#8b997c; --light:#a8b89a; --glow:#c2cfb5; --accent:#6b7f5c;
      --gold:#f59e0b; --white:#ffffff; --glass-bg:rgba(255,255,255,0.07); --glass-border:rgba(255,255,255,0.18);
      --glass-card:rgba(139,153,124,0.13); --text-main:#eef2ea; --text-dim:rgba(210,220,200,0.60);
      --error:#f87171; --success:#4ade80; --input-bg:rgba(255,255,255,0.09); --input-focus:rgba(139,153,124,0.30);
      --shadow-soft:0 32px 64px rgba(0,0,0,0.45),0 8px 24px rgba(0,0,0,0.3);
      --shadow-btn:0 8px 24px rgba(107,127,92,0.55); --radius:20px; --radius-sm:12px;
      --transition:all 0.25s cubic-bezier(0.4,0,0.2,1);
      --app-bg:#f0f4ed; --app-card:#ffffff; --app-muted:#f1f5f9; --app-text:#1e293b; --app-dim:#64748b;
      --app-border:rgba(0,0,0,0.10); --app-accent:#16a34a; --app-blue:#0284c7; --app-warn:#d97706;
      --app-danger:#dc2626; --app-chip:#e2e8f0; --app-ring:0 0 0 3px rgba(2,132,199,0.3);
      --app-thead:#f8fafc; --app-hover:#f1f5f9; --app-sel:#e0f2fe; --app-shadow:0 2px 12px rgba(0,0,0,0.08);
    }
    html, body { height:100%; font-family:'Plus Jakarta Sans',sans-serif; background:var(--deep); color:var(--text-main); -webkit-text-size-adjust:100%; overflow-x:hidden; width:100%; max-width:100%; }
    html.admin-clipboard-enabled,
    html.admin-clipboard-enabled body,
    html.admin-clipboard-enabled * {
      -webkit-user-select:text !important;
      user-select:text !important;
    }

    .bg-scene { position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none; }
    .bg-scene::before { content:'';position:absolute;inset:0;
      background:radial-gradient(ellipse 80% 60% at 20% 10%,rgba(107,127,92,0.55) 0%,transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 80%,rgba(139,153,124,0.35) 0%,transparent 55%),
        radial-gradient(ellipse 50% 40% at 60% 30%,rgba(42,53,37,0.9) 0%,transparent 70%),
        linear-gradient(160deg,#1a2018 0%,#222d1e 50%,#141910 100%); }
    .bg-grid { position:absolute;inset:0;
      background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
      background-size:44px 44px; }
    .orb { position:absolute;border-radius:50%;filter:blur(60px);opacity:0.4;animation:orb-drift 12s ease-in-out infinite alternate; }
    .orb-1 { width:400px;height:400px;background:radial-gradient(circle,#6b7f5c,transparent);top:-100px;left:-100px;animation-delay:0s; }
    .orb-2 { width:300px;height:300px;background:radial-gradient(circle,#8b997c,transparent);bottom:-80px;right:-60px;animation-delay:-4s; }
    .orb-3 { width:200px;height:200px;background:radial-gradient(circle,#a8b89a,transparent);top:50%;left:60%;animation-delay:-8s;opacity:0.25; }
    @keyframes orb-drift { from{transform:translate(0,0) scale(1)} to{transform:translate(30px,20px) scale(1.08)} }

    .overlay { position:fixed;inset:0;z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto; }
    .overlay.hidden { display:none; }
    .overlay-inner { width:100%;max-width:420px;margin:auto;padding:24px 0; }

    .login-card {
      width:100%;
      background:rgba(30,41,28,0.82);
      border:1px solid rgba(168,184,154,0.22);
      border-radius:28px;
      box-shadow:0 0 0 1px rgba(107,127,92,0.12) inset, 0 40px 80px rgba(0,0,0,0.55), 0 0 80px rgba(107,127,92,0.18);
      backdrop-filter:blur(36px) saturate(170%);
      -webkit-backdrop-filter:blur(36px) saturate(170%);
      padding:44px 40px 36px;
      animation:card-in 0.65s cubic-bezier(0.34,1.56,0.64,1) both;
    }
    @media(max-width:480px){.login-card{padding:32px 20px 28px;border-radius:22px;}}
    @keyframes card-in { from{opacity:0;transform:translateY(32px) scale(0.96)} to{opacity:1;transform:translateY(0) scale(1)} }

    /* ── FOTO PENDAMPING LOGIN ── */
    /* Default (tanpa foto) overlay-inner tetap seperti semula (single column, max 420px). */
    /* Saat ada foto: kartu login di kiri, foto di kanan dengan ukuran mengikuti kotak login. */
    .overlay-inner.has-photo {
      max-width:880px;
      display:flex;
      align-items:stretch;
      gap:24px;
    }
    .overlay-inner.has-photo .login-card {
      flex:1 1 0;
      min-width:0;
      border-radius:28px !important; /* samakan dengan lengkungan container foto */
    }
    .login-photo {
      flex:1 1 0;
      min-width:0;
      align-self:stretch;        /* tinggi selalu mengikuti kartu login */
      display:flex;
      align-items:center;
      justify-content:center;
      padding:18px;
      border-radius:28px;
      overflow:hidden;
      position:relative;
      isolation:isolate;
      border:1px solid rgba(168,184,154,0.16);
      box-shadow:0 0 0 1px rgba(107,127,92,0.08) inset, 0 40px 80px rgba(0,0,0,0.45), 0 0 60px rgba(107,127,92,0.10);
      backdrop-filter:blur(40px) saturate(150%);
      -webkit-backdrop-filter:blur(40px) saturate(150%);
      /* Liquid glass — warna senada dengan kartu login (hijau gelap) tapi halus/tidak mencolok */
      background:
        radial-gradient(130% 90% at 28% 18%, rgba(168,184,154,0.08), transparent 58%),
        linear-gradient(160deg, rgba(48,62,44,0.50) 0%, rgba(26,35,23,0.60) 100%);
      animation:card-in 0.65s cubic-bezier(0.34,1.56,0.64,1) both;
    }
    /* Sheen lembut agar terkesan "liquid glass", sangat tipis */
    .login-photo::before {
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 38%);
      z-index:0;
    }
    /* Frame penampung foto — selalu mengisi penuh kontainer */
    .login-photo-frame {
      position:relative;
      z-index:1;
      width:100%;
      height:100%;
      overflow:hidden;
      border-radius:inherit;
      background:rgba(0,0,0,0.10);
    }
    .login-photo-frame img {
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
      object-position:50% 50%;
      transform:scale(1);
      transform-origin:center center;
      will-change:transform;
    }
    /* ── MODE TAMPILAN FOTO ──
       Kontainer foto SELALU selebar kartu login (flex:1 1 0 → bagi rata).
       Tinggi kontainer mengikuti rasio yang dipilih, sehingga ukurannya
       tidak pernah melebihi kotak login. */
    /* FULL: tinggi = tinggi kartu login, foto cover (isi penuh) */
    .login-photo.fit-full {
      flex:1 1 0;
      align-self:stretch;
      padding:0;
      height:auto;
    }
    /* Rasio tetap: lebar = jatah flex (selebar kartu), tinggi dari rasio */
    .login-photo.fit-1x1,
    .login-photo.fit-16x9,
    .login-photo.fit-9x16 {
      flex:1 1 0;
      align-self:center;       /* tinggi bebas (dari rasio), posisinya tetap di tengah kartu */
      width:auto;
      height:auto;
      padding:0;
      max-height:82vh;
    }
    .login-photo.fit-1x1  { aspect-ratio:1/1; }
    .login-photo.fit-16x9 { aspect-ratio:16/9; }
    .login-photo.fit-9x16 { aspect-ratio:9/16; }
    /* Cursor grab saat foto bisa digeser */
    .login-photo[data-draggable="1"] .login-photo-frame { cursor:grab; }
    .login-photo[data-draggable="1"] .login-photo-frame.dragging { cursor:grabbing; }
    /* Pada layar sempit, tumpuk foto di bawah kartu agar tetap terlihat & login tetap nyaman. */
    @media(max-width:760px){
      .overlay-inner.has-photo {
        flex-direction:column;
        max-width:420px;
        gap:18px;
      }
      .overlay-inner.has-photo .login-card { border-radius:22px !important; }
      .login-photo {
        border-radius:22px;
        padding:0;
        width:100%;
        align-self:stretch;
        height:auto;
        min-height:0;
      }
      .login-photo.fit-full { aspect-ratio:1 / 1; }   /* full → persegi di layar kecil */
    }

    /* ── KONTROL MODE FOTO LOGIN (di Pengaturan) ── */
    .foto-mode-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
      gap:8px;
    }
    .foto-mode-btn {
      display:flex;flex-direction:column;align-items:center;gap:2px;
      padding:10px 6px;border-radius:10px;cursor:pointer;
      background:var(--app-muted);border:1.5px solid var(--app-border);
      color:var(--app-text);transition:.15s;text-align:center;
    }
    .foto-mode-btn:hover { border-color:var(--app-blue); }
    .foto-mode-btn.active { border-color:var(--app-blue);background:var(--app-sel);box-shadow:0 0 0 1px var(--app-blue) inset; }
    .foto-mode-ic { font-size:18px;line-height:1;color:var(--app-dim); }
    .foto-mode-btn.active .foto-mode-ic { color:var(--app-blue); }
    .foto-mode-lbl { font-size:12px;font-weight:700; }
    .foto-mode-sub { font-size:9.5px;color:var(--app-dim);line-height:1.2; }
    /* Kotak pratinjau: kontainer IKUT bentuk rasio yang dipilih (seperti di halaman login).
       Tinggi panggung tetap supaya admin enak melihat; box di tengah. */
    #fotoLoginPreviewWrap {
      display:flex;
      align-items:center;
      justify-content:center;
      height:300px;
    }
    #fotoLoginPreview {
      flex:none;
      animation:none;
      width:auto;
      height:auto;
      max-width:100%;
      max-height:100%;
    }
    /* Full → tampil sebagai proporsi kartu login (4:5) */
    #fotoLoginPreview.fit-full { aspect-ratio:4/5;  height:100%;width:auto; }
    #fotoLoginPreview.fit-1x1  { aspect-ratio:1/1;  height:100%;width:auto; }
    #fotoLoginPreview.fit-9x16 { aspect-ratio:9/16; height:100%;width:auto; }
    #fotoLoginPreview.fit-16x9 { aspect-ratio:16/9; height:auto;width:100%;max-height:100%; }
    .foto-zoom-row { display:flex;align-items:center;gap:8px;margin-top:12px; }
    .foto-zoom-row input[type="range"] { flex:1;accent-color:var(--app-blue);cursor:pointer; }
    .foto-zoom-ic { font-size:13px;cursor:pointer;user-select:none;color:var(--app-dim);padding:2px 4px;border-radius:6px; }
    .foto-zoom-ic:hover { color:var(--app-text);background:var(--app-muted); }
    .foto-zoom-val { font-size:11px;font-weight:700;color:var(--app-dim);min-width:40px;text-align:right; }
    .foto-drag-hint { font-size:10.5px;color:var(--app-dim);text-align:center;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:5px; }
    .foto-apply-row { display:flex;gap:10px;align-items:center;margin-top:12px; }
    .foto-apply-btn {
      flex:1;background:var(--app-blue);color:#fff;border:none;border-radius:9px;
      padding:10px 14px;font-size:12.5px;font-weight:800;cursor:pointer;transition:.15s;
    }
    .foto-apply-btn:hover { filter:brightness(1.08); }
    .foto-apply-btn:disabled { opacity:.55;cursor:not-allowed; }
    .foto-reset-btn {
      background:none;border:1.5px solid var(--app-border);color:var(--app-dim);
      border-radius:9px;padding:10px 14px;font-size:12px;font-weight:700;cursor:pointer;transition:.15s;
    }
    .foto-reset-btn:hover { border-color:var(--app-blue);color:var(--app-text); }

    .logo-wrap { display:flex;flex-direction:column;align-items:center;margin-bottom:32px; }
    .logo-icon {
      width:72px;height:72px;border-radius:20px;
      background:linear-gradient(135deg,#4a6741 0%,#7a9470 50%,#9aad8a 100%);
      display:flex;align-items:center;justify-content:center;margin-bottom:18px;
      box-shadow:0 0 0 1px rgba(255,255,255,0.12) inset,0 8px 32px rgba(107,127,92,0.5),0 0 40px rgba(107,127,92,0.35);
      animation:logo-pulse 3s ease-in-out infinite;
    }
    @keyframes logo-pulse {
      0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,0.12) inset,0 8px 32px rgba(107,127,92,0.5),0 0 40px rgba(107,127,92,0.35)}
      50%{box-shadow:0 0 0 1px rgba(255,255,255,0.18) inset,0 8px 40px rgba(139,153,124,0.7),0 0 60px rgba(107,127,92,0.5)}
    }
    .logo-icon svg { width:36px;height:36px; }
    .logo-title { font-size:20px;font-weight:800;letter-spacing:-0.5px;color:#f0f4ea;text-align:center;line-height:1.25;margin-bottom:4px; }
    .logo-org { font-size:13px;font-weight:600;color:rgba(194,207,181,0.8);text-align:center;margin-bottom:3px; }
    .divider-line { height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);margin:20px 0 24px; }

    .form-label { display:block;font-size:10.5px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:rgba(194,207,181,0.65);margin-bottom:7px; }
    .input-wrap { position:relative;display:flex;align-items:center;margin-bottom:4px; }
    .input-icon { position:absolute;left:14px;display:flex;align-items:center;pointer-events:none;color:rgba(194,207,181,0.45);transition:var(--transition);z-index:1; }
    .input-icon svg { width:17px;height:17px; }
    .form-input {
      width:100%;padding:13px 14px 13px 44px;
      background:rgba(255,255,255,0.06);
      border:1px solid rgba(255,255,255,0.13);
      border-radius:12px;
      font-family:inherit;font-size:15px;font-weight:500;color:#eef2ea;
      outline:none;transition:var(--transition);
      -webkit-appearance:none;appearance:none;
    }
    .form-input::placeholder { color:rgba(194,207,181,0.38);font-weight:400; }
    .form-input:focus { background:rgba(139,153,124,0.18);border-color:rgba(168,184,154,0.5);box-shadow:0 0 0 3px rgba(107,127,92,0.2); }
    .input-wrap:focus-within .input-icon { color:rgba(194,207,181,0.8); }
    .toggle-pw { position:absolute;right:12px;background:none;border:none;cursor:pointer;color:rgba(194,207,181,0.45);display:flex;align-items:center;padding:5px;border-radius:7px;transition:var(--transition);z-index:2; }
    .toggle-pw:hover { color:var(--glow);background:rgba(255,255,255,0.07); }
    .toggle-pw svg { width:17px;height:17px; }
    .toggle-pw .eye-off { display:none; }
    .toggle-pw.active .eye-on { display:none; }
    .toggle-pw.active .eye-off { display:block; }
    .has-toggle { padding-right:44px!important; }

    .error-msg { display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--error);margin-top:6px;padding:7px 10px;background:rgba(248,113,113,0.10);border:1px solid rgba(248,113,113,0.22);border-radius:8px;opacity:0;max-height:0;overflow:hidden;transition:opacity 0.2s,max-height 0.25s,padding 0.2s,margin 0.2s; }
    .error-msg.visible { opacity:1;max-height:60px;margin-bottom:2px; }
    .error-msg svg { width:13px;height:13px;flex-shrink:0; }
    .form-input.error { border-color:rgba(248,113,113,0.55);background:rgba(248,113,113,0.07); }

    .remember-row { display:flex;align-items:center;gap:10px;margin:18px 0;cursor:pointer;user-select:none; }
    .custom-checkbox { width:19px;height:19px;border:1.5px solid rgba(255,255,255,0.2);border-radius:6px;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition); }
    .custom-checkbox svg { width:11px;height:11px;opacity:0;transition:opacity 0.15s; }
    .remember-row input:checked~.custom-checkbox { background:#6b7f5c;border-color:#7a9470; }
    .remember-row input:checked~.custom-checkbox svg { opacity:1; }
    .remember-row input[type="checkbox"] { display:none; }
    .remember-label { font-size:13px;font-weight:500;color:rgba(194,207,181,0.65); }

    .forgot-link { font-size:13px;font-weight:500;color:rgba(194,207,181,0.55);text-decoration:none;cursor:pointer;transition:color 0.2s; }
    .forgot-link:hover { color:var(--glow); }

    .btn-login {
      width:100%;padding:14px;margin-top:4px;
      background:linear-gradient(135deg,#5a6e4c 0%,#6b7f5c 50%,#7d9169 100%);
      border:none;border-radius:12px;
      font-family:inherit;font-size:15px;font-weight:700;color:#fff;
      letter-spacing:0.02em;cursor:pointer;
      box-shadow:0 6px 24px rgba(107,127,92,0.5),0 0 0 1px rgba(255,255,255,0.08) inset;
      transition:var(--transition);position:relative;overflow:hidden;
      -webkit-appearance:none;appearance:none;touch-action:manipulation;
    }
    .btn-login::before { content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.18) 0%,transparent 55%);opacity:0;transition:opacity 0.2s; }
    .btn-login:hover { transform:translateY(-2px);box-shadow:0 10px 32px rgba(107,127,92,0.65),0 0 0 1px rgba(255,255,255,0.12) inset; }
    .btn-login:hover::before { opacity:1; }
    .btn-login:active { transform:translateY(0); }
    .btn-login.loading { pointer-events:none;opacity:0.8; }
    .btn-login .btn-text { display:flex;align-items:center;justify-content:center;gap:8px; }
    .btn-login .spinner { display:none;width:17px;height:17px;border:2.5px solid rgba(255,255,255,0.3);border-top-color:white;border-radius:50%;animation:spin 0.7s linear infinite; }
    .btn-login.loading .btn-label { display:none; }
    .btn-login.loading .spinner { display:block; }
    @keyframes spin { to{transform:rotate(360deg)} }

    .global-error { display:flex;align-items:center;gap:8px;background:rgba(248,113,113,0.11);border:1px solid rgba(248,113,113,0.28);border-radius:10px;padding:10px 13px;font-size:12.5px;font-weight:600;color:var(--error);margin-top:14px;opacity:0;max-height:0;overflow:hidden;transition:opacity 0.25s,max-height 0.3s,padding 0.25s,margin 0.25s; }
    .global-error.visible { opacity:1;max-height:80px; }
    .global-error svg { width:15px;height:15px;flex-shrink:0; }

    .card-footer { text-align:center;margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.09); }
    .card-footer p { font-size:10.5px;font-weight:500;letter-spacing:0.04em;color:rgba(194,207,181,0.4); }
    .app-version-badge {
      display:inline-flex;align-items:center;gap:5px;
      margin-top:9px;
      padding:4px 10px;
      border-radius:999px;
      background:rgba(107,127,92,0.12);
      border:1px solid rgba(139,153,124,0.22);
      font-size:9.5px;font-weight:700;
      letter-spacing:0.07em;text-transform:uppercase;
      color:rgba(194,207,181,0.55);
    }
    .app-version-dot {
      width:6px;height:6px;border-radius:50%;
      background:#4ade80;
      box-shadow:0 0 6px #4ade80;
      flex-shrink:0;
      animation:logo-pulse 2.5s ease-in-out infinite;
    }
    .app-version-sep { opacity:0.4; }


    @keyframes shake { 0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)} }
    .shake { animation:shake 0.35s ease; }

    /* ── LOGIN ANIMATION (lightweight for low-end devices) ── */
    .login-anim {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.35s ease, transform 0.35s ease;
    }
    #loginCard.active .login-anim {
      opacity: 1;
      transform: translateY(0);
      transition-delay: calc(0.07s * var(--i));
    }

    /* ── DASHBOARD ── */
    .dashboard { width:100%;max-width:520px;background:rgba(30,41,28,0.82);border:1px solid rgba(168,184,154,0.22);border-radius:24px;box-shadow:0 0 0 1px rgba(107,127,92,0.12) inset,0 40px 80px rgba(0,0,0,0.55),0 0 60px rgba(107,127,92,0.15);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);padding:36px;animation:card-in 0.5s cubic-bezier(0.34,1.56,0.64,1) both; }
    @media(max-width:480px){.dashboard{padding:24px 16px;}}
    .dash-header { display:flex;flex-direction:column;align-items:center;margin-bottom:24px; }
    .dash-logo-row { display:flex;align-items:center;gap:10px;margin-bottom:5px; }
    .dash-dot { width:9px;height:9px;border-radius:50%;background:var(--success);box-shadow:0 0 10px var(--success);animation:logo-pulse 2s infinite; }
    .dash-title { font-size:20px;font-weight:800;color:var(--white);letter-spacing:-0.4px; }
    .dash-subtitle { font-size:10.5px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim); }
    .user-banner { display:flex;align-items:center;gap:12px;background:rgba(107,127,92,0.15);border:1px solid rgba(139,153,124,0.3);border-radius:12px;padding:10px 14px;margin-bottom:14px; }
    .user-avatar { width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#6b7f5c,#a8b89a);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:white;flex-shrink:0;box-shadow:0 2px 10px rgba(107,127,92,0.4); }
    .user-info { flex:1;min-width:0; }
    .user-name { font-size:13px;font-weight:700;color:var(--white); }
    .user-role { font-size:10px;color:var(--text-dim);font-weight:500; }
    .user-password-btn { flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1;border:1px solid rgba(168,184,154,0.32);background:rgba(255,255,255,0.06);color:rgba(238,242,234,0.9);border-radius:999px;padding:7px 10px;font-family:inherit;font-size:10px;font-weight:800;cursor:pointer;transition:.15s;white-space:nowrap; }
    .user-password-btn:hover { background:rgba(168,184,154,0.16);border-color:rgba(168,184,154,0.52);color:#fff; }
    @media(max-width:480px){.user-banner{align-items:center;flex-wrap:nowrap;gap:10px;padding:10px 12px}.user-password-btn{align-self:center;margin-left:auto;margin-top:0;min-height:34px;padding:0 10px}}

    .dash-status-row { display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:10px;margin-bottom:18px; }
    .dash-status-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0;transition:background 0.3s; }
    .dash-status-dot.connecting { background:#f59e0b;animation:dbpulse 1s ease-in-out infinite; }
    .dash-status-dot.ok { background:#22c55e; }
    .dash-status-dot.err { background:#ef4444; }
    @keyframes dbpulse { 0%,100%{opacity:1}50%{opacity:0.3} }
    .dash-status-txt { font-size:11px;font-weight:600;color:rgba(194,207,181,0.8); }

    .menu-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
    .menu-card { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px 14px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:14px;cursor:pointer;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);color:var(--text-main);text-decoration:none;position:relative;overflow:hidden; }
    @media(max-width:480px){.menu-card{padding:16px 10px;gap:7px;}}
    .menu-card::before { content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(107,127,92,0.2) 0%,transparent 60%);opacity:0;transition:opacity 0.2s; }
    .menu-card:hover { transform:translateY(-3px);border-color:rgba(168,184,154,0.45);box-shadow:0 10px 28px rgba(0,0,0,0.3); }
    .menu-card:hover::before { opacity:1; }
    .menu-card.danger:hover { border-color:rgba(248,113,113,0.4);box-shadow:0 10px 28px rgba(220,38,38,0.18); }
    .menu-card.danger:hover::before { background:linear-gradient(135deg,rgba(220,38,38,0.15) 0%,transparent 60%); }
    .menu-card.danger .menu-icon { background:rgba(220,38,38,0.12);border-color:rgba(220,38,38,0.25); }
    .menu-card.danger .menu-label { color:rgba(248,113,113,0.9); }
    .menu-card.disabled-menu { opacity:0.45;cursor:default;pointer-events:none; }

    .month-readonly-panel { margin:10px 0 12px;padding:10px 12px;border:1px solid rgba(2,132,199,0.28);border-radius:10px;background:rgba(2,132,199,0.07);display:flex;align-items:center;justify-content:space-between;gap:10px; }
    .month-readonly-panel.readonly-active { border-color:rgba(217,119,6,0.38);background:rgba(217,119,6,0.08); }
    .month-readonly-title { font-size:11px;font-weight:900;color:#0369a1;text-transform:uppercase;letter-spacing:.04em; }
    .month-readonly-panel.readonly-active .month-readonly-title { color:#92400e; }
    .month-readonly-sub { font-size:11px;color:var(--app-dim);line-height:1.4;margin-top:2px; }
    .month-readonly-btn { flex-shrink:0;border:1px solid rgba(2,132,199,0.42);background:#eff6ff;color:#075985;border-radius:8px;padding:6px 10px;font-family:inherit;font-size:10px;font-weight:900;cursor:pointer;white-space:nowrap; }
    .month-readonly-btn:hover { background:#dbeafe; }
    .month-readonly-panel.readonly-active .month-readonly-btn { border-color:rgba(217,119,6,0.45);background:#fff7ed;color:#92400e; }
    .month-readonly-panel.readonly-active .month-readonly-btn:hover { background:#fed7aa; }
    /* Toggle switch View-Only ↔ Bisa Edit */
    .month-ro-switch { flex-shrink:0;display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;border-radius:999px;padding:2px; }
    .month-ro-switch:focus-visible { outline:2px solid rgba(2,132,199,0.6);outline-offset:2px; }
    .month-ro-switch-track { position:relative;width:40px;height:22px;border-radius:999px;background:#16a34a;border:2px solid #15803d;transition:background .2s,border-color .2s;flex-shrink:0; }
    .month-ro-switch-thumb { position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 4px rgba(0,0,0,0.25); }
    .month-ro-switch[aria-checked="true"] .month-ro-switch-track { background:#d97706;border-color:#b45309; }
    .month-ro-switch[aria-checked="true"] .month-ro-switch-thumb { left:19px; }
    .month-ro-switch-label { font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:#15803d;white-space:nowrap; }
    .month-ro-switch[aria-checked="true"] .month-ro-switch-label { color:#92400e; }
    .month-ro-switch[aria-disabled="true"] { opacity:.6;cursor:wait;pointer-events:none; }
    .month-readonly-mobile { display:none; }
    @media(max-width:1100px) { .month-readonly-mobile { display:flex !important; } }
    .grade-btn.readonly-disabled { opacity:.55;cursor:not-allowed; }

    .menu-icon { width:48px;height:48px;border-radius:12px;background:rgba(107,127,92,0.18);border:1px solid rgba(139,153,124,0.25);display:flex;align-items:center;justify-content:center;font-size:20px;transition:all 0.2s; }
    .menu-icon.tahfizh-logo-icon { background:rgba(107,127,92,0.18);border:1px solid rgba(139,153,124,0.25);padding:8px;box-sizing:border-box; }
    .menu-icon.tahfizh-logo-icon svg { display:block;width:100%;height:100%;object-fit:contain; }
    .menu-icon.analitik-logo-icon { background:rgba(107,127,92,0.18);border:1px solid rgba(139,153,124,0.25);padding:8px;box-sizing:border-box; }
    .menu-icon.analitik-logo-icon svg { display:block;width:100%;height:100%;object-fit:contain; }
    .menu-icon.absensi-logo-icon { background:rgba(107,127,92,0.18);border:1px solid rgba(139,153,124,0.25);padding:8px;box-sizing:border-box; }
    .menu-icon.absensi-logo-icon svg { display:block;width:100%;height:100%;object-fit:contain; }
    .menu-icon.livekelas-logo-icon { background:rgba(107,127,92,0.18);border:1px solid rgba(139,153,124,0.25);padding:8px;box-sizing:border-box; }
    .menu-icon.livekelas-logo-icon svg { display:block;width:100%;height:100%;object-fit:contain; }
    .menu-icon.ujiantahfizh-logo-icon { background:rgba(107,127,92,0.18);border:1px solid rgba(139,153,124,0.25);padding:8px;box-sizing:border-box; }
    .menu-icon.ujiantahfizh-logo-icon svg { display:block;width:100%;height:100%;object-fit:contain; }
    .menu-icon.jadwal-logo-icon { background:rgba(107,127,92,0.18);border:1px solid rgba(139,153,124,0.25);padding:8px;box-sizing:border-box; }
    .menu-icon.jadwal-logo-icon svg { display:block;width:100%;height:100%;object-fit:contain; }
    .menu-icon.literasi-logo-icon { background:rgba(107,127,92,0.18);border:1px solid rgba(139,153,124,0.25);padding:8px;box-sizing:border-box; }
    .menu-icon.literasi-logo-icon svg { display:block;width:100%;height:100%;object-fit:contain; }
    .menu-icon.penilaian-logo-icon { background:rgba(107,127,92,0.18);border:1px solid rgba(139,153,124,0.25);border-radius:12px;padding:8px;box-sizing:border-box;aspect-ratio:1/1;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1; }
    .menu-icon.penilaian-logo-icon svg { display:block;width:100%;height:100%;fill:#e3e3e3; }
    .menu-icon.pengaturan-logo-icon { background:rgba(107,127,92,0.18);border:1px solid rgba(139,153,124,0.25);border-radius:12px;padding:7px;box-sizing:border-box;aspect-ratio:1/1;overflow:hidden; }
    .menu-icon.pengaturan-logo-icon svg { display:block;width:100%;height:100%;fill:#e3e3e3; }
    @media(max-width:480px){.menu-icon{width:38px;height:38px;font-size:16px;border-radius:9px;}}
    .menu-card:hover .menu-icon { transform:scale(1.08);background:rgba(107,127,92,0.28); }
    .menu-card:hover .menu-icon.penilaian-logo-icon { transform:scale(1.08);background:rgba(107,127,92,0.28); }
    .menu-label { font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-main);text-align:center; }
    .dash-analytics-panel {
      --dash-acc-card:rgba(255,255,255,0.055);--dash-acc-muted:rgba(255,255,255,0.035);
      --dash-acc-border:rgba(255,255,255,0.11);--dash-acc-text:rgba(244,247,241,0.94);
      --dash-acc-dim:rgba(194,207,181,0.58);--dash-acc-accent:#c2cfb5;--dash-acc-icon-bg:rgba(107,127,92,0.18);
      animation:card-in .28s ease both;
    }
    .dash-analytics-breadcrumb {
      display:flex;align-items:center;gap:0;margin:-2px 0 12px;padding:9px 12px;border:1px solid var(--dash-acc-border);
      border-radius:10px;background:var(--dash-acc-muted);font-size:10.5px;line-height:1.4;color:var(--dash-acc-dim);
    }
    .dash-analytics-breadcrumb button {
      border:0;background:transparent;color:var(--dash-acc-dim);font:inherit;font-weight:700;cursor:pointer;
      padding:2px 3px;margin:-2px -3px;border-radius:6px;transition:color .16s ease,background .16s ease;
    }
    .dash-analytics-breadcrumb button:hover { color:var(--dash-acc-text);background:rgba(255,255,255,0.07); }
    .dash-analytics-breadcrumb-sep { color:var(--dash-acc-dim);padding:0 7px; }
    .dash-analytics-breadcrumb strong { color:var(--dash-acc-accent);font-weight:700; }
    .dash-analytics-accordion {
      overflow:hidden;border:1px solid var(--dash-acc-border);border-radius:12px;background:var(--dash-acc-card);
      box-shadow:0 10px 26px rgba(0,0,0,0.18);transition:background .2s ease;
    }
    .dash-settings-panel .dash-analytics-accordion + .dash-analytics-accordion { margin-top:8px; }
    .dash-analytics-accordion.expanded {
      background:linear-gradient(180deg,var(--dash-acc-card),var(--dash-acc-muted));
    }
    .dash-analytics-header {
      width:100%;min-height:58px;border:0;background:transparent;color:var(--dash-acc-text);
      display:flex;align-items:center;gap:10px;padding:10px 12px;text-align:left;font-family:inherit;cursor:pointer;
      transition:background .18s ease;
    }
    .dash-analytics-header:hover { background:rgba(255,255,255,0.045); }
    .dash-analytics-icon {
      width:28px;height:28px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;
      color:var(--dash-acc-accent);background:var(--dash-acc-icon-bg);font-size:14px;flex-shrink:0;
      transition:transform .2s ease,box-shadow .2s ease;
    }
    .dash-analytics-accordion.expanded .dash-analytics-icon { transform:scale(1.04);box-shadow:0 4px 12px rgba(0,0,0,0.1); }
    .dash-analytics-title { flex:1;min-width:0;display:flex;flex-direction:column;gap:2px; }
    .dash-analytics-title span { font-size:12px;font-weight:600;letter-spacing:0;color:var(--dash-acc-text); }
    .dash-analytics-title small { font-size:10px;font-weight:500;color:var(--dash-acc-dim);line-height:1.25; }
    .dash-analytics-chevron { color:var(--dash-acc-dim);font-size:16px;transition:transform .22s ease,color .18s ease; }
    .dash-analytics-accordion.expanded .dash-analytics-chevron { transform:rotate(90deg);color:var(--dash-acc-accent); }
    .dash-analytics-items {
      display:flex;flex-direction:column;max-height:0;overflow:hidden;opacity:0;transform:translateY(-4px);
      padding:0 0 0 50px;background:transparent;
      transition:max-height .26s ease,opacity .2s ease,transform .22s ease,padding .22s ease;
    }
    .dash-analytics-accordion.expanded .dash-analytics-items { max-height:560px;opacity:1;transform:translateY(0);padding:0 0 8px 50px; }
    .dash-settings-panel .dash-analytics-accordion.expanded .dash-analytics-items { max-height:560px; }
    .dash-analytics-item {
      width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px 9px 0;
      border:0;border-top:1px solid rgba(255,255,255,0.065);background:transparent;color:var(--dash-acc-text);
      font-family:inherit;font-size:12px;font-weight:600;text-align:left;cursor:pointer;transition:padding-left .18s ease,color .18s ease;
    }
    .dash-analytics-item:hover { padding-left:4px;color:var(--dash-acc-accent); }
    .dash-analytics-item span:first-child { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
    .dash-analytics-item span:last-child { color:var(--dash-acc-dim);font-size:13px;flex-shrink:0; }
    .dash-footer { text-align:center;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.09); }
    .dash-footer p { font-size:10.5px;font-weight:500;letter-spacing:0.04em;color:rgba(194,207,181,0.35); }

    /* ── APP SHELL ── */
    #appShell { display:none;min-height:100vh;width:100%;max-width:100%;background:var(--app-bg);color:var(--app-text);font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;overflow-x:hidden; }
    #appShell[data-theme="dark"] { --app-bg:#0f172a;--app-card:#1e2d45;--app-muted:#1f2937;--app-text:#e2e8f0;--app-dim:#94a3b8;--app-border:rgba(255,255,255,0.12);--app-accent:#22c55e;--app-blue:#38bdf8;--app-warn:#f59e0b;--app-danger:#ef4444;--app-chip:#0f1e35;--app-thead:#162035;--app-hover:#1a2d45;--app-sel:#1a3a55;--app-ring:0 0 0 3px rgba(56,189,248,0.35);--app-shadow:0 4px 20px rgba(0,0,0,0.3); }
    #tahfizView[data-theme="dark"] { --app-bg:#0f172a;--app-card:#1e2d45;--app-muted:#1f2937;--app-text:#e2e8f0;--app-dim:#94a3b8;--app-border:rgba(255,255,255,0.12);--app-accent:#22c55e;--app-blue:#38bdf8;--app-warn:#f59e0b;--app-danger:#ef4444;--app-chip:#0f1e35;--app-thead:#162035;--app-hover:#1a2d45; }
    #jadwalView[data-theme="dark"],
    #liveKelasView[data-theme="dark"] { --app-bg:#0f172a;--app-card:#1e2d45;--app-muted:#1f2937;--app-text:#e2e8f0;--app-dim:#94a3b8;--app-border:rgba(255,255,255,0.12);--app-accent:#22c55e;--app-blue:#38bdf8;--app-warn:#f59e0b;--app-danger:#ef4444;--app-chip:#0f1e35;--app-thead:#162035;--app-hover:#1a2d45;--app-sel:#1a3a55;--app-ring:0 0 0 3px rgba(56,189,248,0.35);--app-shadow:0 4px 20px rgba(0,0,0,0.3); }
    #appShell * { box-sizing:border-box; }
    .live-sd-fixed-emoji {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      min-height:42px;
      font-size:36px;
      line-height:1;
      letter-spacing:0;
      white-space:nowrap;
    }
    .live-sd-fixed-emoji.jelajah {
      font-size:34px;
    }
    .live-sd-fixed-emoji > span {
      display:inline-block;
      line-height:1;
    }
    .live-kelas-link {
      appearance:none;
      border:0;
      background:transparent;
      padding:0;
      margin:0;
      color:var(--app-text);
      font-family:inherit;
      font-size:16px;
      font-weight:900;
      line-height:1.2;
      cursor:pointer;
      text-align:left;
      text-decoration:underline;
      text-decoration-thickness:1.5px;
      text-underline-offset:3px;
      text-decoration-color:rgba(2,132,199,0.45);
    }
    .live-kelas-link:hover,
    .live-kelas-link:focus-visible {
      color:var(--app-blue);
      text-decoration-color:var(--app-blue);
      outline:none;
    }
    .live-kelas-jadwal-popup-overlay {
      position:fixed;
      inset:0;
      z-index:9000;
      display:none;
      align-items:center;
      justify-content:center;
      padding:18px;
      background:rgba(15,23,42,0.46);
      backdrop-filter:blur(2px);
    }
    .live-kelas-jadwal-popup-overlay.show {
      display:flex;
    }
    .live-kelas-jadwal-popup {
      width:min(1040px,100%);
      max-height:88vh;
      display:flex;
      flex-direction:column;
      overflow:hidden;
      background:var(--app-card);
      color:var(--app-text);
      border:1px solid var(--app-border);
      border-radius:16px;
      box-shadow:0 26px 70px rgba(15,23,42,0.28);
      font-family:'Plus Jakarta Sans',sans-serif;
    }
    .live-kelas-jadwal-popup-head {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:16px 20px;
      border-bottom:1px solid var(--app-border);
      flex-shrink:0;
    }
    .live-kelas-jadwal-popup-title {
      font-size:17px;
      font-weight:900;
      color:var(--app-text);
      line-height:1.25;
    }
    .live-kelas-jadwal-popup-sub {
      margin-top:3px;
      font-size:12px;
      font-weight:600;
      color:var(--app-dim);
    }
    .live-kelas-jadwal-popup-close {
      width:36px;
      height:36px;
      border-radius:50%;
      border:1.5px solid var(--app-border);
      background:var(--app-muted);
      color:var(--app-dim);
      font-size:24px;
      line-height:1;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-shrink:0;
    }
    .live-kelas-jadwal-popup-close:hover {
      color:var(--app-text);
      border-color:var(--app-blue);
    }
    .live-kelas-jadwal-popup-body {
      padding:16px 20px 20px;
      overflow:auto;
      min-height:220px;
    }
    .live-kelas-jadwal-loading {
      padding:42px 16px;
      text-align:center;
      color:var(--app-dim);
      font-size:12px;
      font-weight:700;
    }
    .live-kelas-jadwal-loading.error {
      color:var(--app-danger);
    }
    .live-kelas-jadwal-wrap {
      overflow:auto;
      border:1px solid var(--app-border);
      border-radius:10px;
      max-height:64vh;
      -webkit-overflow-scrolling:touch;
    }
    .live-kelas-jadwal-table {
      width:max-content!important;
      min-width:100%!important;
      border-collapse:separate!important;
      border-spacing:0!important;
      table-layout:fixed!important;
      background:var(--app-card);
      font-size:11px;
    }
    .live-kelas-jadwal-table th,
    .live-kelas-jadwal-table td {
      border-right:1px solid var(--app-border);
      border-bottom:1px solid var(--app-border);
      padding:8px 10px;
      text-align:center!important;
      vertical-align:middle;
      min-width:128px;
      width:128px;
      max-width:128px;
      height:54px;
      background:var(--app-card);
    }
    .live-kelas-jadwal-table th {
      position:sticky!important;
      top:0!important;
      left:auto!important;
      z-index:3!important;
      background:var(--app-thead)!important;
      color:var(--app-dim);
      font-size:10px;
      font-weight:900;
      letter-spacing:.06em;
      text-transform:uppercase;
      white-space:nowrap;
    }
    .live-kelas-jadwal-table .lkj-sticky {
      position:sticky!important;
      left:0!important;
      z-index:4!important;
      min-width:78px!important;
      width:78px!important;
      max-width:78px!important;
      background:var(--app-thead)!important;
      font-weight:900;
      color:var(--app-text);
      box-shadow:2px 0 5px rgba(15,23,42,0.08);
    }
    .live-kelas-jadwal-table .lkj-sticky-time {
      position:sticky!important;
      left:78px!important;
      z-index:4!important;
      min-width:108px!important;
      width:108px!important;
      max-width:108px!important;
      background:var(--app-thead)!important;
      color:var(--app-dim);
      font-weight:800;
      box-shadow:2px 0 5px rgba(15,23,42,0.06);
      white-space:nowrap;
    }
    .live-kelas-jadwal-table th.lkj-sticky,
    .live-kelas-jadwal-table th.lkj-sticky-time {
      z-index:6!important;
    }
    .live-kelas-jadwal-table .lkj-no {
      min-width:52px!important;
      width:52px!important;
      max-width:52px!important;
    }
    .live-kelas-jadwal-table.sd .lkj-sticky-time {
      left:52px!important;
    }
    .live-kelas-jadwal-table .lkj-filled {
      background:rgba(22,163,74,0.06);
    }
    .live-kelas-jadwal-table .lkj-empty {
      background:var(--app-muted);
      color:var(--app-dim);
      font-weight:700;
    }
    .live-kelas-jadwal-table .lkj-non-kbm {
      background:var(--app-muted);
      color:var(--app-dim);
      font-weight:900;
    }
    .live-kelas-jadwal-table .lkj-non-kbm .lkj-mapel {
      color:var(--app-dim);
      font-size:10px;
      text-transform:uppercase;
    }
    .live-kelas-jadwal-table .lkj-fixed-cell,
    .live-kelas-jadwal-table .lkj-fixed,
    .live-kelas-jadwal-table .lkj-merged {
      background:rgba(99,102,241,0.07);
      color:var(--app-text);
      font-weight:800;
    }
    .live-kelas-jadwal-table .lkj-mapel {
      font-size:11px;
      line-height:1.25;
      font-weight:900;
      color:var(--app-text);
    }
    .live-kelas-jadwal-table .lkj-guru {
      margin-top:3px;
      font-size:9.5px;
      line-height:1.2;
      font-weight:700;
      color:var(--app-dim);
    }
    @media(max-width:700px) {
      .live-kelas-jadwal-popup-overlay {
        padding:10px;
      }
      .live-kelas-jadwal-popup {
        max-height:92vh;
        border-radius:12px;
      }
      .live-kelas-jadwal-popup-head,
      .live-kelas-jadwal-popup-body {
        padding-left:14px;
        padding-right:14px;
      }
      .live-kelas-jadwal-table th,
      .live-kelas-jadwal-table td {
        min-width:116px;
        width:116px;
        max-width:116px;
      }
    }

    .app-nav {
      background:linear-gradient(135deg,#1a2018 0%,#222d1e 100%);
      border-bottom:1px solid rgba(255,255,255,0.1);
      height:56px; position:fixed;top:0;left:0;right:0;z-index:200;
      box-shadow:0 2px 16px rgba(0,0,0,0.4);
      width:100%;
    }
    #appShell { padding-top:56px; }
    .grade-deadline-warning {
      position:fixed;
      top:calc(var(--device-nav-height, 56px) + var(--device-safe-top, 0px) - 1px);
      left:50%;
      z-index:190;
      width:min(520px, calc(100vw - 24px));
      pointer-events:none;
      opacity:0;
      transform:translate(-50%, -120%);
      transition:opacity .24s ease, transform .34s cubic-bezier(.2,.9,.2,1);
      filter:drop-shadow(0 14px 22px rgba(127,29,29,.34));
    }
    .grade-deadline-warning.show {
      opacity:1;
      transform:translate(-50%, 0);
    }
    .grade-deadline-warning[data-state="success"] {
      filter:drop-shadow(0 14px 22px rgba(22,101,52,.34));
    }
    .grade-deadline-warning[data-state="success"] .grade-deadline-warning-inner {
      background:linear-gradient(180deg, rgba(34,197,94,.96), rgba(21,128,61,.94));
      border-color:rgba(187,247,208,.46);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(22,101,52,.44);
    }
    .grade-deadline-warning[data-state="success"]::before {
      background:
        repeating-linear-gradient(135deg, rgba(22,101,52,.56) 0 5px, rgba(255,255,255,.16) 5px 9px),
        linear-gradient(180deg,#22c55e,#15803d);
      box-shadow:0 0 28px rgba(34,197,94,.36);
    }
    .grade-deadline-warning[data-state="success"] .grade-deadline-warning-icon svg path:not(:first-child) {
      stroke:#15803d;
    }
    .grade-deadline-warning[data-state="success"] .grade-deadline-warning-icon svg path:first-child {
      fill:#fff;
    }
    .grade-deadline-warning::before {
      content:"";
      position:absolute;
      left:50%;
      top:-20px;
      width:40px;
      height:22px;
      transform:translateX(-50%);
      background:
        repeating-linear-gradient(135deg, rgba(127,29,29,.56) 0 5px, rgba(255,255,255,.16) 5px 9px),
        linear-gradient(180deg,#ef4444,#b91c1c);
      border-radius:0 0 4px 4px;
      box-shadow:0 0 28px rgba(239,68,68,.36);
    }
    .grade-deadline-warning-inner {
      position:relative;
      display:flex;
      flex-direction:row;
      align-items:center;
      justify-content:center;
      gap:7px;
      min-height:34px;
      padding:6px 28px;
      color:#fff;
      text-align:center;
      text-transform:uppercase;
      background:linear-gradient(180deg, rgba(239,68,68,.96), rgba(153,27,27,.94));
      border:1px solid rgba(254,202,202,.46);
      border-top:0;
      clip-path:polygon(0 0, 100% 0, calc(100% - 20px) 100%, 20px 100%);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(127,29,29,.44);
    }
    .grade-deadline-warning-icon {
      width:15px;
      height:15px;
      flex-shrink:0;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));
    }
    .grade-deadline-warning-icon svg {
      width:100%;
      height:100%;
      display:block;
    }
    .grade-deadline-warning-icon svg path:first-child {
      fill:#fff;
      stroke:none;
    }
    .grade-deadline-warning-icon svg path:not(:first-child) {
      fill:none;
      stroke:#b91c1c;
      stroke-width:2.4;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .grade-deadline-warning-text {
      display:block;
      max-width:100%;
      color:#fff;
      font-size:clamp(11px, 2.2vw, 14px);
      font-weight:700;
      line-height:1.1;
      letter-spacing:.16em;
      text-shadow:0 2px 8px rgba(0,0,0,.28);
      overflow-wrap:anywhere;
    }
    /* Dorong isi #penilaianView turun sebesar tinggi banner saat banner tampil,
       supaya banner tidak menabrak/menutupi konten (sbUser, dll). Nilai margin-top
       diisi via JS (syncPenilaianWarningOffset) berdasarkan tinggi asli banner. */
    #penilaianView {
      transition: margin-top .34s cubic-bezier(.2,.9,.2,1);
    }
    @media(max-width:430px) {
      .grade-deadline-warning {
        width:calc(100vw - 16px);
      }
      .grade-deadline-warning-inner {
        min-height:30px;
        padding:5px 20px;
        clip-path:polygon(0 0, 100% 0, calc(100% - 14px) 100%, 14px 100%);
      }
      .grade-deadline-warning-text {
        font-size:11px;
        letter-spacing:.10em;
        line-height:1.18;
      }
    }
    .app-nav-inner {
      width:100%;max-width:100%;margin:0;
      padding:0 clamp(8px,3vw,20px);
      height:100%;display:flex;align-items:center;
      justify-content:space-between;gap:clamp(4px,1.5vw,10px);
      box-sizing:border-box;
    }
    .app-nav-left { display:flex;align-items:center;gap:clamp(4px,1.5vw,10px);min-width:0;flex:1;overflow:hidden; }
    .app-nav-brand { display:flex;align-items:center;gap:clamp(5px,1.5vw,10px);min-width:0;overflow:hidden; }
    .app-nav-dot {
      width:clamp(7px,2vw,9px);height:clamp(7px,2vw,9px);
      border-radius:50%;background:var(--success);
      box-shadow:0 0 8px var(--success);flex-shrink:0;
      animation:logo-pulse 2.5s ease-in-out infinite;
    }
    .app-nav-dot.tahfizh-nav-logo {
      width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,0.94);
      box-shadow:none;border:1px solid rgba(194,207,181,0.45);padding:3px;
      box-sizing:border-box;animation:none;overflow:hidden;
    }
    .app-nav-dot.tahfizh-nav-logo svg { display:block;width:100%;height:100%;fill:#6b7f5c; }
    .app-nav-dot.jadwal-nav-logo {
      width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,0.94);
      box-shadow:none;border:1px solid rgba(194,207,181,0.45);padding:4px;
      box-sizing:border-box;animation:none;overflow:hidden;display:flex;
      align-items:center;justify-content:center;
    }
    .app-nav-dot.jadwal-nav-logo svg { display:block;width:100%;height:100%;fill:#6b7f5c; }
    .app-nav-dot.penilaian-nav-logo {
      width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,0.94);
      box-shadow:none;border:1px solid rgba(194,207,181,0.45);padding:4px;
      box-sizing:border-box;animation:none;overflow:hidden;
      display:flex;align-items:center;justify-content:center;
    }
    .app-nav-dot.penilaian-nav-logo svg { display:block;width:100%;height:100%;fill:#6b7f5c; }
    .app-nav-dot.absensi-nav-logo {
      width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,0.94);
      box-shadow:none;border:1px solid rgba(194,207,181,0.45);padding:3px;
      box-sizing:border-box;animation:none;overflow:hidden;
      display:flex;align-items:center;justify-content:center;
    }
    .app-nav-dot.absensi-nav-logo svg { display:block;width:100%;height:100%;fill:#6b7f5c; }
    .app-nav-dot.analitik-nav-logo {
      width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,0.94);
      box-shadow:none;border:1px solid rgba(194,207,181,0.45);padding:4px;
      box-sizing:border-box;animation:none;overflow:hidden;
      display:flex;align-items:center;justify-content:center;
    }
    .app-nav-dot.analitik-nav-logo svg { display:block;width:100%;height:100%;fill:#6b7f5c; }
    .app-nav-dot.strukturkelas-nav-logo {
      width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,0.94);
      box-shadow:none;border:1px solid rgba(194,207,181,0.45);padding:4px;
      box-sizing:border-box;animation:none;overflow:hidden;
      display:flex;align-items:center;justify-content:center;
    }
    .app-nav-dot.strukturkelas-nav-logo svg { display:block;width:100%;height:100%;fill:#6b7f5c; }
    .app-nav-dot.literasi-nav-logo {
      width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,0.94);
      box-shadow:none;border:1px solid rgba(194,207,181,0.45);padding:4px;
      box-sizing:border-box;animation:none;overflow:hidden;
      display:flex;align-items:center;justify-content:center;
    }
    .app-nav-dot.literasi-nav-logo svg { display:block;width:100%;height:100%;fill:#6b7f5c; }
    .app-nav-dot.livekelas-nav-logo {
      width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,0.94);
      box-shadow:none;border:1px solid rgba(194,207,181,0.45);padding:4px;
      box-sizing:border-box;animation:none;overflow:hidden;
      display:flex;align-items:center;justify-content:center;
    }
    .app-nav-dot.livekelas-nav-logo svg { display:block;width:100%;height:100%;fill:#6b7f5c; }
    .app-nav-title {
      font-size:clamp(11px,3.5vw,15px);font-weight:800;
      color:#eef2ea;letter-spacing:-0.3px;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
      max-width:clamp(80px,30vw,340px);
    }
    .app-nav-badge {
      font-size:clamp(8px,2vw,10px);font-weight:800;
      letter-spacing:0.08em;text-transform:uppercase;
      padding:clamp(2px,0.5vw,4px) clamp(5px,1.5vw,10px);
      border-radius:999px;
      background:rgba(107,127,92,0.3);
      border:1px solid rgba(139,153,124,0.4);
      color:#c2cfb5;flex-shrink:0;
    }
    @media(max-width:400px){.app-nav-badge{display:none;}}
    #jadwalNav { position:fixed;top:0;left:0;right:0;z-index:500; }
    .app-nav-right { display:flex;align-items:center;gap:clamp(3px,1vw,7px);flex-shrink:0; }
    .nav-btn {
      display:flex;align-items:center;gap:clamp(3px,1vw,6px);
      background:rgba(255,255,255,0.07);
      border:1px solid rgba(255,255,255,0.13);
      border-radius:clamp(7px,2vw,10px);
      padding:0 clamp(6px,1.8vw,13px);
      font-family:inherit;
      font-size:clamp(10px,2.5vw,12px);
      font-weight:600;color:#c2cfb5;
      cursor:pointer;transition:all 0.2s;
      white-space:nowrap;touch-action:manipulation;
      height:clamp(32px,7.5vw,40px);min-width:clamp(32px,7.5vw,40px);
      flex-shrink:0;
    }
    .nav-btn:hover { background:rgba(107,127,92,0.22);border-color:rgba(139,153,124,0.45);color:#eef2ea; }
    .nav-btn:active { transform:scale(0.93); }
    .nav-btn.danger { color:#f87171; }
    .nav-btn.danger:hover { background:rgba(220,38,38,0.13);border-color:rgba(220,38,38,0.38); }
    .nav-btn svg { width:clamp(13px,3.8vw,16px);height:clamp(13px,3.8vw,16px);flex-shrink:0; }
    .nav-btn svg { transition:transform 0.6s ease; }
    .nav-btn.spinning svg { animation:spin 0.6s ease; }

    /* Notif, Pesan, Refresh, Menu, Keluar: tampil icon-only (tanpa teks), ukuran nyaman */
    #navNotif .nav-label,
    #navPesan .nav-label,
    #navRefresh .nav-label,
    #navMenu .nav-label,
    #navLogout .nav-label {
      display:none !important;
    }
    #navNotif, #navPesan, #navRefresh, #navMenu, #navLogout {
      justify-content:center !important;
      padding:0 !important;
      width:clamp(38px,9vw,44px) !important;
      min-width:clamp(38px,9vw,44px) !important;
      height:clamp(38px,9vw,44px) !important;
    }
    #navNotif svg, #navPesan svg, #navRefresh svg, #navMenu svg, #navLogout svg {
      width:19px !important;
      height:19px !important;
    }

    /* Jadwal navbar: icon-only (tanpa teks) */
    #jadwalNavNotif .nav-label,
    #jadwalNavPesan .nav-label,
    #jadwalNavRefresh .nav-label,
    #jadwalNavMenuBtn .nav-label,
    #jadwalNavLogout .nav-label {
      display:none !important;
    }
    #jadwalNavNotif, #jadwalNavPesan, #jadwalNavRefresh, #jadwalNavMenuBtn, #jadwalNavLogout {
      justify-content:center !important;
      padding:0 !important;
      width:clamp(38px,9vw,44px) !important;
      min-width:clamp(38px,9vw,44px) !important;
      height:clamp(38px,9vw,44px) !important;
    }
    #jadwalNavNotif svg, #jadwalNavPesan svg, #jadwalNavRefresh svg, #jadwalNavMenuBtn svg, #jadwalNavLogout svg {
      width:19px !important;
      height:19px !important;
    }

    /* Tahfizh navbar: icon-only (tanpa teks) */
    #tahfizNavNotif .nav-label,
    #tahfizNavPesan .nav-label,
    #tahfizNavRefresh .nav-label,
    #tahfizNavMenuBtn .nav-label,
    #tahfizNavLogout .nav-label {
      display:none !important;
    }
    #tahfizNavNotif .nav-label,
    #tahfizNavPesan .nav-label,
    #tahfizNavRefresh .nav-label,
    #tahfizNavMenuBtn .nav-label,
    #tahfizNavLogout .nav-label,
    .nav-btn[onclick*="openSistemTahfizhModal"] .nav-label {
      display:none !important;
    }
    #tahfizNavNotif, #tahfizNavPesan, #tahfizNavRefresh, #tahfizNavMenuBtn, #tahfizNavLogout,
    .nav-btn[onclick*="openSistemTahfizhModal"] {
      justify-content:center !important;
      padding:0 !important;
      width:clamp(38px,9vw,44px) !important;
      min-width:clamp(38px,9vw,44px) !important;
      height:clamp(38px,9vw,44px) !important;
    }
    #tahfizNavNotif svg, #tahfizNavPesan svg, #tahfizNavRefresh svg, #tahfizNavMenuBtn svg, #tahfizNavLogout svg,
    .nav-btn[onclick*="openSistemTahfizhModal"] svg {
      width:19px !important;
      height:19px !important;
    }

    /* LiveKelas navbar: icon-only (tanpa teks) */
    #liveKelasNavNotif .nav-label,
    #liveKelasNavPesan .nav-label,
    #liveKelasNavRefresh .nav-label,
    #liveKelasNavMenuBtn .nav-label,
    #liveKelasNavLogout .nav-label {
      display:none !important;
    }
    #liveKelasNavNotif, #liveKelasNavPesan, #liveKelasNavRefresh, #liveKelasNavMenuBtn, #liveKelasNavLogout {
      justify-content:center !important;
      padding:0 !important;
      width:clamp(38px,9vw,44px) !important;
      min-width:clamp(38px,9vw,44px) !important;
      height:clamp(38px,9vw,44px) !important;
    }
    #liveKelasNavNotif svg, #liveKelasNavPesan svg, #liveKelasNavRefresh svg, #liveKelasNavMenuBtn svg, #liveKelasNavLogout svg {
      width:19px !important;
      height:19px !important;
    }

    /* ── THEME TOGGLE SLIDER ── */
    .theme-switch {
      --theme-track-w:54px;
      --theme-track-h:28px;
      --theme-thumb:22px;
      --theme-pad:3px;
      --theme-shift:26px;
      position:relative;
      display:inline-flex!important;
      align-items:center;
      justify-content:center;
      align-self:center;
      width:66px;
      min-width:66px!important;
      height:clamp(32px,7.5vw,40px);
      cursor:pointer;gap:0;line-height:0;background:none!important;border:none!important;box-shadow:none!important;padding:0 5px!important;
      border-radius:999px;
      box-sizing:border-box;
    }
    .theme-switch input { position:absolute;opacity:0;width:1px;height:1px;pointer-events:none; }
    .theme-slider {
      position:relative;width:var(--theme-track-w);height:var(--theme-track-h);border-radius:999px;
      background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.24);
      transition:background 0.28s ease,border-color 0.28s ease,box-shadow 0.28s ease;
      flex-shrink:0;box-sizing:border-box;overflow:hidden;
      box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);
    }
    .theme-slider::before,
    .theme-slider::after {
      content:'';position:absolute;top:50%;left:var(--theme-pad);
      width:var(--theme-thumb);height:var(--theme-thumb);border-radius:50%;
      transform:translateY(-50%);
      transition:transform 0.32s cubic-bezier(0.34,1.56,0.64,1);
    }
    .theme-slider::before {
      background:#fff;z-index:1;
      box-shadow:0 2px 8px rgba(0,0,0,0.24),0 0 0 1px rgba(15,23,42,0.04);
    }
    .theme-slider::after {
      z-index:2;background-repeat:no-repeat;background-position:center;background-size:15px 15px;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4.1' fill='%23fbbf24'/%3E%3Cpath d='M12 2.5v2.3M12 19.2v2.3M4.8 4.8l1.6 1.6M17.6 17.6l1.6 1.6M2.5 12h2.3M19.2 12h2.3M4.8 19.2l1.6-1.6M17.6 6.4l1.6-1.6'/%3E%3C/svg%3E");
    }
    .theme-switch:hover .theme-slider { border-color:rgba(194,207,181,0.5);box-shadow:inset 0 1px 2px rgba(0,0,0,0.22),0 0 0 3px rgba(194,207,181,0.1); }
    .theme-switch input:focus-visible + .theme-slider { box-shadow:inset 0 1px 2px rgba(0,0,0,0.22),0 0 0 3px rgba(194,207,181,0.28); }
    .theme-switch input:checked + .theme-slider { background:#1e3a5f;border-color:rgba(96,165,250,0.45); }
    .theme-switch input:checked + .theme-slider::before { transform:translateY(-50%) translateX(var(--theme-shift)); }
    .theme-switch input:checked + .theme-slider::after {
      transform:translateY(-50%) translateX(var(--theme-shift));
      background-size:14px 14px;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20.4 14.4A7.4 7.4 0 0 1 9.6 3.6 8.6 8.6 0 1 0 20.4 14.4Z' fill='%23fbbf24' stroke='%23f59e0b' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    /* ── NAV CLOCK ── */
    .nav-clock {
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      gap:0px;
      padding:0 clamp(6px,1.5vw,14px);
      border-left:1px solid rgba(255,255,255,0.1);
      border-right:1px solid rgba(255,255,255,0.1);
      height:100%;min-width:clamp(90px,22vw,160px);
      flex-shrink:0;
    }
    .nav-clock-date {
      font-size:clamp(8px,2vw,10px);
      font-weight:700;
      color:rgba(194,207,181,0.75);
      letter-spacing:0.04em;
      line-height:1.2;
      white-space:nowrap;
      text-transform:uppercase;
    }
    .nav-clock-time {
      font-size:clamp(11px,3vw,15px);
      font-weight:800;
      color:#eef2ea;
      letter-spacing:0.06em;
      line-height:1.2;
      font-variant-numeric:tabular-nums;
      white-space:nowrap;
    }
    .nav-clock-sep {
      color:rgba(139,153,124,0.6);
    }
    @media(max-width:420px){
      .nav-clock { display:none !important; }
    }
      @media(max-width:500px){
      .nav-btn .nav-label{display:none;}
      .nav-btn{padding:0 !important; justify-content:center !important; min-width:clamp(32px,8vw,38px) !important;}
      .theme-switch{width:58px!important;min-width:58px!important;padding:0 5px!important;}
    }

    /* ── NOTIFIKASI & PESAN NAV BUTTONS ── */
    .nav-btn-icon-wrap { position:relative;display:inline-flex; }
    .nav-badge-count {
      position:absolute;top:-5px;right:-5px;
      min-width:16px;height:16px;
      background:#ef4444;color:#fff;
      font-size:9px;font-weight:800;
      border-radius:999px;display:flex;align-items:center;justify-content:center;
      padding:0 3px;line-height:1;border:1.5px solid #1a2018;
      pointer-events:none;z-index:2;
      animation:badge-pop 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
    }
    @keyframes badge-pop { from{transform:scale(0)} to{transform:scale(1)} }
    .nav-badge-count.hidden { display:none; }

    /* ── NOTIF PANEL ── */
    .notif-panel-overlay {
      position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.3);
      backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
      opacity:0;pointer-events:none;transition:opacity 0.2s;
    }
    .notif-panel-overlay.open { opacity:1;pointer-events:all; }
    .notif-panel {
      position:absolute;top:calc(var(--device-nav-height, 56px) + var(--device-safe-top,0px) + 6px);right:8px;
      width:min(360px, calc(100vw - 16px));
      background:var(--app-card);border:1px solid var(--app-border);
      border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,0.25);
      overflow:hidden;transform:translateY(-8px) scale(0.97);
      transition:transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
      max-height:calc(100vh - 80px);display:flex;flex-direction:column;
    }
    .notif-panel-overlay.open .notif-panel { transform:translateY(0) scale(1); }
    .notif-panel-header {
      padding:14px 16px 10px;border-bottom:1px solid var(--app-border);
      display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
    }
    .notif-panel-title { font-weight:800;font-size:14px;color:var(--app-text); }
    .notif-panel-actions { display:flex;gap:8px;align-items:center; }
    .notif-mark-all { font-size:10px;font-weight:700;color:var(--app-blue);background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:6px; }
    .notif-mark-all:hover { background:rgba(2,132,199,0.1); }
    .notif-close-btn { background:none;border:none;cursor:pointer;color:var(--app-dim);font-size:16px;padding:2px 6px;border-radius:6px;line-height:1; }
    .notif-close-btn:hover { background:var(--app-muted); }
    .notif-del-btn {
      background:none;border:none;cursor:pointer;font-size:14px;padding:4px 6px;
      opacity:0;border-radius:6px;transition:opacity .15s,background .15s;flex-shrink:0;line-height:1;
    }
    .notif-item:hover .notif-del-btn { opacity:0.55; }
    .notif-del-btn:hover { opacity:1 !important; background:rgba(239,68,68,0.1); }
    .msg-del-btn {
      background:none;border:none;cursor:pointer;font-size:12px;padding:3px 5px;
      opacity:0;border-radius:6px;transition:opacity .15s,background .15s;flex-shrink:0;
      margin-bottom:6px;
    }
    .pesan-chat-area > div:hover .msg-del-btn { opacity:0.5; }
    .msg-del-btn:hover { opacity:1 !important; background:rgba(239,68,68,0.12); }
    .notif-list { overflow-y:auto;flex:1;min-height:0; }
    .notif-item {
      padding:12px 16px;border-bottom:1px solid var(--app-border);cursor:pointer;
      display:flex;gap:10px;align-items:flex-start;transition:background 0.15s;
    }
    .notif-item:last-child { border-bottom:none; }
    .notif-item:hover { background:var(--app-hover); }
    .notif-item.unread { background:rgba(2,132,199,0.06); }
    .notif-item.unread .notif-item-title { color:var(--app-text);font-weight:700; }
    .notif-dot { width:8px;height:8px;border-radius:50%;background:var(--app-blue);flex-shrink:0;margin-top:5px; }
    .notif-dot.read { background:transparent;border:1.5px solid var(--app-border); }
    .notif-item-body { flex:1;min-width:0; }
    .notif-item-title { font-size:12px;font-weight:600;color:var(--app-dim);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .notif-item-msg { font-size:12px;color:var(--app-text);line-height:1.4;margin-bottom:3px; }
    .notif-item-time { font-size:10px;color:var(--app-dim);font-weight:500; }
    .notif-empty { padding:32px 16px;text-align:center;color:var(--app-dim);font-size:12px; }
    .notif-empty-icon { font-size:28px;margin-bottom:8px; }

    /* Admin compose section */
    .notif-compose {
      border-top:1px solid var(--app-border);padding:12px 16px;flex-shrink:0;
      display:flex;flex-direction:column;gap:8px;
    }
    .notif-compose-title { font-size:10px;font-weight:700;color:var(--app-dim);letter-spacing:.06em;text-transform:uppercase; }
    .notif-compose-input {
      width:100%;border:1px solid var(--app-border);border-radius:8px;
      padding:7px 10px;font-size:12px;font-family:inherit;
      background:var(--app-muted);color:var(--app-text);outline:none;
      resize:none;
    }
    .notif-compose-input:focus { border-color:var(--app-blue);box-shadow:var(--app-ring); }
    .notif-compose-row { display:flex;gap:6px; }
    .notif-compose-send { flex:1;background:#0284c7;color:#fff;border:none;border-radius:8px;padding:7px;font-size:12px;font-weight:700;cursor:pointer;transition:.2s; }
    .notif-compose-send:hover { background:#0369a1; }
    .notif-compose-send:disabled { opacity:0.6;cursor:not-allowed; }

    /* ── PESAN PANEL ── */
    .pesan-panel-overlay {
      position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.35);
      backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
      opacity:0;pointer-events:none;transition:opacity 0.2s;
      display:flex;align-items:flex-start;justify-content:flex-end;
      padding-top:calc(var(--device-nav-height,56px) + var(--device-safe-top,0px) + 6px);
      padding-right:8px;
    }
    .pesan-panel-overlay.open { opacity:1;pointer-events:all; }
    .pesan-panel {
      width:min(680px, calc(100vw - 16px));
      height:min(520px, calc(100vh - 80px));
      --wa-panel:#ffffff;
      --wa-header:#f0f2f5;
      --wa-chat:#efeae2;
      --wa-line:#e9edef;
      --wa-in:#ffffff;
      --wa-out:#d9fdd3;
      --wa-inputbar:#f0f2f5;
      --wa-input:#ffffff;
      --wa-text:#111b21;
      --wa-muted:#667781;
      --wa-meta-out:#667781;
      --wa-check-delivered:#8696a0;
      --wa-check-read:#53bdeb;
      --wa-green:#00a884;
      --wa-back:#00a884;
      --wa-contact-hover:#f5f6f6;
      --wa-contact-active:#f0f2f5;
      --wa-badge-text:#ffffff;
      --wa-pattern-a:rgba(17,27,33,0.055);
      --wa-pattern-b:rgba(17,27,33,0.035);
      background:var(--wa-panel);border:1px solid var(--wa-line);
      border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,0.28);
      overflow:hidden;transform:translateY(-10px) scale(0.97);
      transition:transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
      display:flex;flex-direction:row;
    }
    #appShell[data-theme="dark"] .pesan-panel {
      --wa-panel:#111b21;
      --wa-header:#202c33;
      --wa-chat:#0b141a;
      --wa-line:#26343c;
      --wa-in:#202c33;
      --wa-out:#005c4b;
      --wa-inputbar:#111b21;
      --wa-input:#2a3942;
      --wa-text:#e9edef;
      --wa-muted:#8696a0;
      --wa-meta-out:#b7d6cf;
      --wa-check-delivered:#8696a0;
      --wa-check-read:#53bdeb;
      --wa-green:#00a884;
      --wa-back:#25d366;
      --wa-contact-hover:#182229;
      --wa-contact-active:#2a3942;
      --wa-badge-text:#111b21;
      --wa-pattern-a:rgba(233,237,239,0.045);
      --wa-pattern-b:rgba(233,237,239,0.035);
    }
    body[data-app-theme="dark"] .pesan-panel {
      --wa-panel:#111b21;
      --wa-header:#202c33;
      --wa-chat:#0b141a;
      --wa-line:#26343c;
      --wa-in:#202c33;
      --wa-out:#005c4b;
      --wa-inputbar:#111b21;
      --wa-input:#2a3942;
      --wa-text:#e9edef;
      --wa-muted:#8696a0;
      --wa-meta-out:#b7d6cf;
      --wa-check-delivered:#8696a0;
      --wa-check-read:#53bdeb;
      --wa-green:#00a884;
      --wa-back:#25d366;
      --wa-contact-hover:#182229;
      --wa-contact-active:#2a3942;
      --wa-badge-text:#111b21;
      --wa-pattern-a:rgba(233,237,239,0.045);
      --wa-pattern-b:rgba(233,237,239,0.035);
    }
    body:has(#appShell[data-theme="dark"]) .pesan-panel {
      --wa-panel:#111b21;
      --wa-header:#202c33;
      --wa-chat:#0b141a;
      --wa-line:#26343c;
      --wa-in:#202c33;
      --wa-out:#005c4b;
      --wa-inputbar:#111b21;
      --wa-input:#2a3942;
      --wa-text:#e9edef;
      --wa-muted:#8696a0;
      --wa-meta-out:#b7d6cf;
      --wa-check-delivered:#8696a0;
      --wa-check-read:#53bdeb;
      --wa-green:#00a884;
      --wa-back:#25d366;
      --wa-contact-hover:#182229;
      --wa-contact-active:#2a3942;
      --wa-badge-text:#111b21;
      --wa-pattern-a:rgba(233,237,239,0.045);
      --wa-pattern-b:rgba(233,237,239,0.035);
    }
    .pesan-panel-overlay.open .pesan-panel { transform:translateY(0) scale(1); }

    /* SIDEBAR KONTAK */
    .pesan-sidebar {
      width:220px;flex-shrink:0;border-right:1px solid var(--wa-line);
      display:flex;flex-direction:column;background:var(--wa-panel);
    }
    .pesan-sidebar-header {
      padding:12px 14px 10px;border-bottom:1px solid var(--wa-line);flex-shrink:0;
      display:flex;align-items:center;justify-content:space-between;
      background:var(--wa-header);
    }
    .pesan-sidebar-title { font-size:13px;font-weight:800;color:var(--wa-text); }
    .pesan-online-count { font-size:10px;font-weight:700;color:#6ee7b7;
      background:rgba(0,168,132,0.16);padding:2px 7px;border-radius:999px; }
    .pesan-contact-list { flex:1;overflow-y:auto;padding:6px 0; }
    .pesan-contact-item {
      display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;
      transition:background .15s;border-radius:0;position:relative;
    }
    .pesan-contact-item:hover { background:var(--wa-contact-hover); }
    .pesan-contact-item.active { background:var(--wa-contact-active); }
    .pesan-avatar {
      width:36px;height:36px;border-radius:50%;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;
      font-size:13px;font-weight:800;color:#fff;position:relative;
    }
    .pesan-avatar-status {
      position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;
      border:2px solid var(--wa-panel);
    }
    .pesan-avatar-status.online { background:#22c55e; }
    .pesan-avatar-status.disabled { display:none; }
    .pesan-avatar-status.offline { background:#667781; }
    .pesan-contact-info { flex:1;min-width:0; }
    .pesan-contact-name { font-size:12px;font-weight:700;color:var(--wa-text);
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .pesan-contact-preview { font-size:10.5px;color:var(--wa-muted);
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px; }
    .pesan-contact-meta { display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0; }
    .pesan-contact-time { font-size:9.5px;color:var(--wa-muted); }
    .pesan-contact-badge {
      background:var(--wa-green);color:var(--wa-badge-text);border-radius:999px;
      font-size:9px;font-weight:800;padding:1px 5px;min-width:16px;text-align:center;
    }

    /* AREA CHAT KANAN */
    .pesan-chat-col {
      flex:1;display:flex;flex-direction:column;min-width:0;
    }
    .pesan-chat-header {
      padding:10px 14px;border-bottom:1px solid var(--wa-line);flex-shrink:0;
      display:flex;align-items:center;justify-content:space-between;gap:8px;
      background:var(--wa-header);
    }
    .pesan-chat-header-info { display:flex;align-items:center;gap:9px;min-width:0; }
    .pesan-chat-header-name { font-size:13px;font-weight:800;color:var(--wa-text);
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .pesan-chat-header-status { font-size:10px;color:var(--wa-muted);margin-top:1px; }
    .pesan-chat-header-actions { display:flex;align-items:center;gap:6px;flex-shrink:0; }
    .pesan-chat-header-actions .notif-close-btn {
      color:var(--wa-muted)!important;
    }
    .pesan-chat-header-actions .notif-close-btn:hover {
      background:rgba(134,150,160,0.14)!important;color:var(--wa-text)!important;
    }
    .pesan-back-btn {
      display:none;background:none;border:none;cursor:pointer;color:var(--wa-text);
      width:40px;height:40px;padding:0;border-radius:50%;flex-shrink:0;margin-left:-8px;
      align-items:center;justify-content:center;
    }
    .pesan-back-icon {
      width:40px;height:40px;border-radius:50%;border:0;
      display:flex;align-items:center;justify-content:center;color:var(--wa-text);
      transition:background .16s ease,transform .16s ease,color .16s ease;
    }
    .pesan-back-icon svg { width:25px;height:25px; }
    .pesan-back-btn:hover .pesan-back-icon,
    .pesan-back-btn:focus-visible .pesan-back-icon {
      background:rgba(134,150,160,0.14);transform:scale(1.03);
    }

    /* BUBBLES */
    .pesan-chat-area {
      flex:1;overflow-y:auto;padding:14px 16px;
      display:flex;flex-direction:column;gap:2px;
      background-color:var(--wa-chat);
      background-image:
        radial-gradient(circle at 12px 12px, var(--wa-pattern-a) 1px, transparent 1.8px),
        radial-gradient(circle at 42px 34px, var(--wa-pattern-b) 1px, transparent 1.8px);
      background-size:58px 58px;
    }
    .pesan-date-sep {
      text-align:center;margin:10px 0 6px;
      font-size:10px;font-weight:700;color:var(--wa-muted);
      display:flex;align-items:center;gap:8px;
    }
    .pesan-date-sep::before,.pesan-date-sep::after {
      content:'';flex:1;height:1px;background:rgba(134,150,160,0.18);
    }
    .pesan-msg-row {
      display:flex;flex-direction:column;margin-bottom:1px;
    }
    .pesan-msg-row.from-me { align-items:flex-end; }
    .pesan-msg-row.from-other { align-items:flex-start; }
    .pesan-bubble {
      display:inline-block;width:fit-content;max-width:min(76%,360px);
      padding:4px 7px 3px;font-size:12.5px;line-height:1.34;
      position:relative;word-break:break-word;
      color:var(--wa-text);box-shadow:0 1px 0.5px rgba(0,0,0,0.18);
    }
    .pesan-msg-row.from-me .pesan-bubble {
      background:var(--wa-out);
      border-radius:7.5px 0 7.5px 7.5px;
    }
    .pesan-msg-row.from-other .pesan-bubble {
      background:var(--wa-in);
      border-radius:0 7.5px 7.5px 7.5px;
    }
    .pesan-msg-row.from-me .pesan-bubble::after,
    .pesan-msg-row.from-other .pesan-bubble::after {
      content:'';position:absolute;top:0;width:8px;height:13px;
    }
    .pesan-msg-row.from-me .pesan-bubble::after {
      right:-7px;background:var(--wa-out);
      clip-path:polygon(0 0,100% 0,0 100%);
    }
    .pesan-msg-row.from-other .pesan-bubble::after {
      left:-7px;background:var(--wa-in);
      clip-path:polygon(0 0,100% 0,100% 100%);
    }
    .pesan-bubble-meta {
      font-size:9px;color:var(--wa-muted);margin:0 0 0 7px;text-align:right;
      display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;
      line-height:1;vertical-align:-1px;white-space:nowrap;
    }
    .pesan-bubble-text { white-space:pre-wrap; }
    .pesan-msg-row.from-me .pesan-bubble-meta { color:var(--wa-meta-out); }
    .pesan-msg-row.from-other .pesan-bubble-meta { justify-content:flex-end; }
    .pesan-read-mark {
      color:var(--wa-check-delivered);font-size:11px;letter-spacing:-3px;padding-right:2px;
    }
    .pesan-read-mark.is-read { color:var(--wa-check-read); }
    .pesan-read-mark.is-delivered { color:var(--wa-check-delivered); }
    .pesan-bubble-meta .msg-del-btn { color:var(--wa-muted)!important; }
    .pesan-empty { flex:1;display:flex;flex-direction:column;align-items:center;
      justify-content:center;color:var(--wa-muted);font-size:12px;gap:8px;padding:24px; }
    .pesan-empty-ico { font-size:32px;opacity:0.5; }
    .pesan-no-contact { flex:1;display:flex;flex-direction:column;align-items:center;
      justify-content:center;color:var(--wa-muted);font-size:12px;gap:6px;padding:24px; }

    /* INPUT */
    .pesan-input-area {
      border-top:1px solid var(--wa-line);padding:8px 10px;
      display:flex;gap:8px;align-items:center;flex-shrink:0;background:var(--wa-inputbar);
    }
    .pesan-input {
      flex:1;border:none;border-radius:22px;
      padding:8px 14px;font-size:13px;font-family:inherit;
      background:var(--wa-input);color:var(--wa-text);outline:none;
      resize:none;max-height:80px;line-height:1.35;
    }
    .pesan-input::placeholder { color:var(--wa-muted);opacity:1; }
    .pesan-input:focus { box-shadow:0 0 0 2px rgba(0,168,132,0.32); }
    .pesan-send-btn {
      background:var(--wa-green);color:#fff;border:none;border-radius:50%;
      width:36px;height:36px;display:flex;align-items:center;justify-content:center;
      cursor:pointer;flex-shrink:0;transition:.2s;
    }
    .pesan-send-btn:hover { background:#06cf9c;transform:scale(1.05); }
    .pesan-send-btn:disabled { opacity:0.5;cursor:not-allowed;transform:none; }
    .notif-close-btn.pesan-close-x {
      background:none;border:none;cursor:pointer;color:var(--wa-muted);
      font-size:16px;padding:2px 6px;border-radius:6px;line-height:1;
    }
    .notif-close-btn.pesan-close-x:hover { background:rgba(134,150,160,0.14); }

    /* MOBILE: < 500px → sidebar hidden, chat full width, back btn visible */
    @media(max-width:500px){
      .pesan-panel { width:calc(100vw - 16px); height:min(540px,calc(100vh - 80px)); }
      .pesan-sidebar { position:absolute;inset:0;z-index:2;width:100%;border-right:none; }
      .pesan-sidebar.hide-mobile { display:none; }
      .pesan-chat-col { width:100%; }
      .pesan-back-btn { display:flex !important; }
    }

    @keyframes badge-pop { from{transform:scale(0)} to{transform:scale(1)} }

    /* ── PANDUAN PDF MODAL ── */
    /* ── KETERCAPAIAN PANEL ── */
    .ktr-panel {
      background: var(--app-card);
      border: 1.5px solid var(--app-border);
      border-radius: 14px;
      padding: 12px 14px 10px;
      margin-bottom: 10px;
      box-shadow: var(--app-shadow);
      display: none;
    }
    .ktr-panel.visible { display: block; }
    .ktr-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 8px; cursor: pointer; user-select: none;
    }
    .ktr-title {
      font-size: 12px; font-weight: 800; color: var(--app-text);
      display: flex; align-items: center; gap: 6px;
    }
    .ktr-badge {
      font-size: 10px; font-weight: 800; padding: 2px 9px;
      border-radius: 999px; line-height: 1.5;
      white-space: nowrap;
    }
    .ktr-badge.tercapai { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
    .ktr-badge.belum    { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
    .ktr-badge.merah    { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
    .ktr-badge.kosong   { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; }
    .ktr-alasan-wrap { margin-top: 12px; padding: 10px; background: rgba(0,0,0,0.03); border-radius: 12px; border: 1px dashed var(--app-border); }
    .ktr-alasan-label { font-size: 11px; font-weight: 700; color: var(--app-dim); margin-bottom: 6px; display: block; }
    .ktr-alasan-input { width: 100%; padding: 8px 10px; font-size: 12px; border-radius: 8px; border: 1px solid var(--app-border); background: var(--app-card); color: var(--app-text); min-height: 60px; resize: vertical; }
    .ktr-toggle { font-size: 11px; color: var(--app-dim); display: flex; align-items: center; gap: 3px; }
    .ktr-body { display: none; }
    .ktr-body.open { display: block; }
    .ktr-pekan-group { margin-bottom: 10px; }
    .ktr-pekan-label {
      font-size: 10px; font-weight: 700; color: var(--app-dim);
      text-transform: uppercase; letter-spacing: .06em;
      margin-bottom: 5px; padding-bottom: 3px;
      border-bottom: 1px solid var(--app-border);
    }
    .ktr-bab-row {
      display: flex; align-items: center; gap: 8px;
      padding: 5px 6px; border-radius: 8px; cursor: pointer;
      transition: background .15s;
    }
    .ktr-bab-row:hover { background: var(--app-hover); }
    .ktr-bab-row input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: #16a34a; flex-shrink: 0; }
    .ktr-bab-name { font-size: 12px; font-weight: 600; color: var(--app-text); flex: 1; }
    .ktr-bab-name.done { text-decoration: line-through; color: var(--app-dim); }
    .ktr-progress {
      font-size: 11px; font-weight: 700; color: var(--app-dim);
      margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--app-border);
      display: flex; align-items: center; justify-content: space-between;
    }
    .ktr-prog-bar-wrap {
      width: 100%; height: 5px; background: var(--app-chip);
      border-radius: 99px; overflow: hidden; margin: 4px 0 2px;
    }
    .ktr-prog-bar {
      height: 100%; border-radius: 99px;
      background: linear-gradient(90deg, #16a34a, #4ade80);
      transition: width .3s;
    }
    .ktr-auto-status {
      font-size: 11px;
      font-weight: 700;
      color: var(--app-dim);
      padding: 4px 10px;
      border-radius: 7px;
      background: transparent;
      transition: all .3s;
      min-width: 120px;
      display: inline-block;
      text-align: center;
    }
    .ktr-auto-status.saving { color: #b45309; background: rgba(180,83,9,.08); }
    .ktr-auto-status.saved  { color: #15803d; background: rgba(21,128,61,.08); }
    .ktr-auto-status.error  { color: #dc2626; background: rgba(220,38,38,.08); }
    .ktr-save-btn {
      font-size: 11px; font-weight: 700; color: #0284c7;
      background: rgba(2,132,199,0.07); border: 1px solid rgba(2,132,199,0.3);
      border-radius: 7px; padding: 4px 10px; cursor: pointer; transition: .15s;
    }
    .ktr-save-btn:hover { background: rgba(2,132,199,0.14); }
    .ktr-empty { font-size: 12px; color: var(--app-dim); font-style: italic; padding: 6px 2px; }

    /* ── SILABUS ADMIN PANEL ── */
    .silabus-admin-card {
      background: var(--app-card); border: 1px solid var(--app-border);
      border-radius: 14px; padding: 16px 16px 12px; margin-top: 14px;
      box-shadow: var(--app-shadow);
    }
    .silabus-admin-title { font-size: 13px; font-weight: 800; color: var(--app-text); margin-bottom: 4px; }
    .silabus-admin-sub   { font-size: 11px; color: var(--app-dim); margin-bottom: 14px; }
    .silabus-filter-row  { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
    .silabus-select {
      padding: 7px 10px; border-radius: 8px; border: 1px solid var(--app-border);
      font-size: 12px; font-weight: 600; font-family: inherit;
      background: var(--app-muted); color: var(--app-text); min-width: 130px;
    }
    .silabus-load-btn {
      padding: 7px 14px; border-radius: 8px; border: 1px solid rgba(2,132,199,0.35);
      background: rgba(2,132,199,0.08); color: #0284c7; font-size: 12px;
      font-weight: 700; font-family: inherit; cursor: pointer; transition: .15s; white-space: nowrap;
    }
    .silabus-load-btn:hover { background: rgba(2,132,199,0.16); }
    .silabus-editor { display: none; }
    .silabus-editor.visible { display: block; }
    .silabus-pekan-block {
      background: var(--app-muted); border: 1px solid var(--app-border);
      border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
    }
    .silabus-pekan-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 6px;
    }
    .silabus-pekan-label { font-size: 11px; font-weight: 800; color: var(--app-text); text-transform: uppercase; letter-spacing: .05em; }
    .silabus-bab-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
    .silabus-bab-row { display: flex; align-items: center; gap: 6px; }
    .silabus-bab-input {
      flex: 1; padding: 6px 10px; border-radius: 7px;
      border: 1px solid var(--app-border); font-size: 12px; font-weight: 600;
      font-family: inherit; background: var(--app-card); color: var(--app-text);
    }
    .silabus-bab-input:focus { outline: none; border-color: #0284c7; box-shadow: 0 0 0 2px rgba(2,132,199,.15); }
    .silabus-del-bab {
      background: none; border: none; cursor: pointer; color: var(--app-danger);
      font-size: 16px; padding: 2px 5px; border-radius: 5px; line-height: 1;
      opacity: .6; transition: .15s;
    }
    .silabus-del-bab:hover { opacity: 1; background: rgba(220,38,38,.08); }
    .silabus-add-bab-btn {
      font-size: 11px; font-weight: 700; color: #16a34a;
      background: rgba(22,163,74,.07); border: 1px solid rgba(22,163,74,.3);
      border-radius: 7px; padding: 4px 10px; cursor: pointer; transition: .15s;
    }
    .silabus-add-bab-btn:hover { background: rgba(22,163,74,.14); }
    .silabus-save-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--app-border); }
    .silabus-save-main-btn {
      padding: 8px 18px; border-radius: 9px; font-size: 12px; font-weight: 800;
      font-family: inherit; cursor: pointer; border: none;
      background: linear-gradient(135deg,#16a34a,#22c55e); color: white;
      box-shadow: 0 2px 8px rgba(22,163,74,.35); transition: .15s;
    }
    .silabus-save-main-btn:hover { opacity: .9; transform: translateY(-1px); }
    .silabus-status-msg {
      font-size: 11px; font-weight: 600; padding: 5px 10px;
      border-radius: 7px; display: none;
    }
    .silabus-pekan-selector { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
    .silabus-pekan-chip {
      font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
      cursor: pointer; border: 1.5px solid var(--app-border);
      background: var(--app-card); color: var(--app-dim); transition: .15s;
    }
    .silabus-pekan-chip.active { background: #0284c7; color: white; border-color: #0284c7; }

    .sil-lbl { font-size:10px;font-weight:700;color:var(--app-dim);text-transform:uppercase;letter-spacing:.05em; }
    .sil-step-tab {
      display:flex;align-items:center;gap:7px;
      padding:8px 16px 10px;font-family:inherit;font-size:12px;font-weight:700;
      cursor:pointer;border:none;background:none;color:var(--app-dim);
      border-bottom:3px solid transparent;margin-bottom:-2px;transition:.15s;
    }
    .sil-step-tab.active { color:var(--app-blue,#0284c7);border-bottom-color:var(--app-blue,#0284c7); }
    .sil-step-tab:hover:not(.active) { color:var(--app-text); }
    .sil-step-num {
      width:20px;height:20px;border-radius:50%;
      background:var(--app-chip);color:var(--app-dim);
      font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;
    }
    .sil-step-tab.active .sil-step-num { background:#0284c7;color:#fff; }

    /* Mapping table */
    .sil-map-table { width:100%;border-collapse:collapse;font-size:11px; }
    .sil-map-table th {
      padding:7px 10px;background:var(--app-thead);font-weight:800;
      text-align:center;border:1px solid var(--app-border);color:var(--app-dim);
      font-size:10px;text-transform:uppercase;letter-spacing:.05em;
    }
    .sil-map-table td { padding:5px 8px;border:1px solid var(--app-border);text-align:center; }
    .sil-map-bulan-col { min-width:100px;text-align:left !important;font-weight:700;color:var(--app-text);padding-left:12px !important; }
    .sil-pekan-cb { width:15px;height:15px;accent-color:#0284c7;cursor:pointer; }
    .sil-map-table tr:hover td { background:var(--app-hover); }
    .sil-map-bulan-badge {
      display:inline-block;font-size:9px;font-weight:800;padding:1px 6px;
      border-radius:999px;background:rgba(2,132,199,0.1);color:#0c4a6e;
      border:1px solid rgba(2,132,199,0.25);margin-left:4px;
    }
    .sil-map-notice { margin-bottom:12px;padding:10px 12px;border-radius:10px;font-size:11px;font-weight:700;line-height:1.55; }
    .sil-map-notice.ok { color:#166534;background:rgba(22,163,74,.09);border:1px solid rgba(22,163,74,.24); }
    .sil-map-notice.warn { color:#92400e;background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.28); }
    .sil-map-notice.err { color:#991b1b;background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.24); }
    .sil-map-weeks-cell { text-align:left!important;min-width:320px; }
    .sil-map-week-card { display:inline-flex;align-items:center;gap:7px;margin:3px 5px 3px 0;padding:5px 9px;border:1px solid rgba(2,132,199,.20);border-radius:9px;background:rgba(2,132,199,.07);white-space:nowrap; }
    .sil-map-week-card strong { color:#0369a1;font-size:10px;font-weight:900; }
    .sil-map-week-card span { color:var(--app-text);font-size:10.5px;font-weight:700; }
    .sil-map-week-card em { padding:1px 5px;border-radius:999px;background:rgba(124,58,237,.10);color:#6d28d9;font-size:8.5px;font-style:normal;font-weight:900;text-transform:uppercase;letter-spacing:.04em; }
    .sil-map-empty { color:var(--app-dim);font-size:10px;font-style:italic; }
    .sil-map-unmapped { margin-top:9px;padding:8px 10px;border-radius:8px;background:rgba(245,158,11,.08);color:#92400e;font-size:10.5px;line-height:1.5; }

    .panduan-pdf-overlay {
      position:fixed;inset:0;z-index:9000;
      background:rgba(0,0,0,0.65);
      backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
      display:flex;align-items:center;justify-content:center;
      padding:16px;opacity:0;pointer-events:none;transition:opacity 0.25s;
    }
    .panduan-pdf-overlay.open { opacity:1;pointer-events:all; }
    .panduan-pdf-modal {
      background:var(--app-card);border:1px solid var(--app-border);
      border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,0.4);
      width:min(920px,100%);max-height:calc(100vh - 32px);
      display:flex;flex-direction:column;overflow:hidden;
      transform:translateY(16px) scale(0.98);transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
    }
    .panduan-pdf-overlay.open .panduan-pdf-modal { transform:translateY(0) scale(1); }
    .panduan-pdf-modal-header {
      padding:14px 16px;border-bottom:1px solid var(--app-border);
      display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
      background:var(--app-muted);
    }
    .panduan-pdf-title { font-size:14px;font-weight:700;color:var(--app-text); }
    .panduan-pdf-close {
      background:none;border:none;cursor:pointer;padding:6px 10px;border-radius:8px;
      color:var(--app-dim);font-size:18px;line-height:1;transition:.15s;
    }
    .panduan-pdf-close:hover { background:rgba(0,0,0,0.08);color:var(--app-text); }
    .panduan-pdf-body { flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;min-height:0; }
    .panduan-pdf-frame { width:100%;flex:1;border:none;min-height:70vh; }
    .panduan-img-gallery { display:flex;flex-direction:column;gap:0;padding:0; }
    .panduan-img-gallery img { width:100%;display:block;border-bottom:2px solid var(--app-border); }
    .panduan-img-gallery img:last-child { border-bottom:none; }
    .panduan-img-counter { position:sticky;top:0;z-index:10;background:rgba(0,0,0,0.6);color:#fff;font-size:11px;font-weight:700;text-align:center;padding:4px 0;letter-spacing:.05em; }
    .panduan-thumb-row { display:flex;gap:6px;flex-wrap:wrap;margin-top:8px; }
    .panduan-thumb { width:54px;height:54px;object-fit:cover;border-radius:6px;border:2px solid var(--app-border);cursor:pointer; }
    .panduan-pdf-empty {
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      padding:48px 24px;color:var(--app-dim);text-align:center;flex:1;
    }
    .panduan-pdf-empty-icon { font-size:48px;margin-bottom:12px; }
    .panduan-pdf-empty-text { font-size:14px;font-weight:600;margin-bottom:6px;color:var(--app-text); }
    .panduan-pdf-empty-sub { font-size:12px; }
    .panduan-pdf-loading { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;color:var(--app-dim);gap:12px;flex:1; }
    .panduan-pdf-spinner { width:32px;height:32px;border:3px solid var(--app-border);border-top-color:var(--app-blue);border-radius:50%;animation:spin .7s linear infinite; }

    /* ── PANDUAN PDF UPLOAD (di Pengaturan) ── */
    .panduan-upload-card {
      background:var(--app-card);border:1px solid var(--app-border);
      border-radius:14px;padding:20px;box-shadow:var(--app-shadow);margin-top:12px;
    }
    .panduan-upload-title { font-size:13px;font-weight:700;color:var(--app-text);margin-bottom:4px; }
    .panduan-upload-sub { font-size:11px;color:var(--app-dim);margin-bottom:16px; }
    .panduan-dropzone {
      border:2px dashed var(--app-border);border-radius:12px;
      padding:28px 16px;text-align:center;cursor:pointer;
      transition:.2s;background:var(--app-muted);position:relative;
    }
    .panduan-dropzone:hover,.panduan-dropzone.drag { border-color:var(--app-blue);background:var(--app-sel); }
    .panduan-dropzone-icon { font-size:32px;margin-bottom:8px; }
    .panduan-dropzone-label { font-size:13px;font-weight:600;color:var(--app-text);margin-bottom:4px; }
    .panduan-dropzone-hint { font-size:11px;color:var(--app-dim); }
    .panduan-dropzone input[type="file"] { position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%; }
    .panduan-progress-wrap { margin-top:12px;display:none; }
    .panduan-progress-bar-bg { background:var(--app-border);border-radius:999px;height:8px;overflow:hidden; }
    .panduan-progress-bar { height:100%;background:var(--app-blue);border-radius:999px;width:0%;transition:width 0.2s; }
    .panduan-progress-label { font-size:11px;color:var(--app-dim);margin-top:4px;text-align:center; }
    .panduan-current-file {
      margin-top:14px;padding:12px 14px;
      background:var(--app-muted);border:1px solid var(--app-border);
      border-radius:10px;display:flex;align-items:center;gap:10px;
    }
    .panduan-current-icon { font-size:22px;flex-shrink:0; }
    .panduan-current-info { flex:1;min-width:0; }
    .panduan-current-name { font-size:12px;font-weight:700;color:var(--app-text); }
    .panduan-current-url { font-size:10px;color:var(--app-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px; }
    .panduan-current-actions { display:flex;gap:6px;flex-shrink:0; }
    .panduan-btn-view { background:#0284c7;color:#fff;border:none;border-radius:8px;padding:6px 10px;font-size:11px;font-weight:700;cursor:pointer;transition:.15s; }
    .panduan-btn-view:hover { background:#0369a1; }
    .panduan-btn-del { background:none;border:1px solid var(--app-danger);color:var(--app-danger);border-radius:8px;padding:6px 10px;font-size:11px;font-weight:700;cursor:pointer;transition:.15s; }
    .panduan-btn-del:hover { background:rgba(220,38,38,0.08); }
    .panduan-no-file { font-size:12px;color:var(--app-dim);font-style:italic;margin-top:10px;text-align:center; }
    .net-pill { display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:4px 9px;border-radius:999px;border:1.5px solid;transition:all 0.3s; }
    .net-pill.online { border-color:#22c55e;color:#16a34a;background:#dcfce7; }
    .net-pill.offline { border-color:#ef4444;color:#dc2626;background:#fee2e2;animation:netpulse 1.2s infinite; }
    #appShell[data-theme="dark"] .net-pill.online { background:#14532d;color:#4ade80; }
    @keyframes netpulse { 0%,100%{opacity:1}50%{opacity:.6} }
    .net-dot { width:6px;height:6px;border-radius:50%;flex-shrink:0; }
    .net-dot.online { background:#22c55e; }
    .net-dot.offline { background:#ef4444; }
    @media(max-width:480px){.net-pill{display:none;}}
    .fb-pill { display:flex;align-items:center;gap:4px;font-size:10px;color:#94a3b8;padding:4px 8px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:999px; }
    @media(max-width:600px){.fb-pill{display:none;}}
    .fb-dot { width:6px;height:6px;border-radius:50%;background:#94a3b8;flex-shrink:0;transition:background 0.3s; }
    .fb-dot.ok { background:#22c55e; }
    .fb-dot.err { background:#ef4444; }
    .fb-dot.loading { background:#f59e0b;animation:fbpulse 1s infinite; }
    @keyframes fbpulse { 0%,100%{opacity:1}50%{opacity:.3} }

    /* ── PENILAIAN VIEW ── */
    #penilaianView { display:none;width:100%;max-width:100%;box-sizing:border-box;padding:14px 12px;grid-template-columns:210px minmax(0,1fr) 270px;gap:12px;align-items:start;overflow-x:hidden; }
    #penilaianView.active { display:grid; }
    .p-left { padding:14px;display:flex;flex-direction:column;gap:10px; }
    .p-section { font-size:10px;color:var(--app-dim);letter-spacing:.08em;text-transform:uppercase;margin:6px 0 3px;font-weight:700; }
    .p-card { background:var(--app-card);border:1px solid var(--app-border);border-radius:16px;box-shadow:var(--app-shadow); }
    .literasi-panel { padding:16px;display:flex;flex-direction:column;gap:14px; }
    .literasi-head,
    .literasi-tracker-head,
    .literasi-section-head { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap; }
    .literasi-title { font-size:15px;font-weight:900;color:var(--app-text);letter-spacing:0; }
    .literasi-sub,
    .literasi-section-sub { margin-top:3px;font-size:11px;font-weight:650;color:var(--app-dim);line-height:1.5;max-width:820px; }
    .literasi-actions { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
    .literasi-toolbar { display:grid;grid-template-columns:minmax(130px,180px) minmax(210px,260px) minmax(220px,1fr);gap:10px;align-items:end;border-top:1px solid var(--app-border);padding-top:12px; }
    .literasi-field { display:flex;flex-direction:column;gap:5px;min-width:0; }
    .literasi-field label { font-size:10px;font-weight:900;color:var(--app-dim);text-transform:uppercase;letter-spacing:.06em; }
    .literasi-switch { min-height:36px;display:flex;align-items:center;gap:8px;border:1px solid var(--app-border);background:var(--app-muted);border-radius:10px;padding:8px 10px;box-sizing:border-box;font-size:12px;font-weight:850;color:var(--app-text);cursor:pointer; }
    .literasi-switch input { width:16px;height:16px;margin:0;accent-color:var(--app-accent);cursor:pointer; }
    .literasi-layout { display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:14px;align-items:start; }
    #literasiView[data-literasi-mode="tracker"] .literasi-settings-only,
    #literasiView[data-literasi-mode="settings"] .literasi-tracker-only,
    #literasiView[data-literasi-mode="settings"] .literasi-tracker { display:none!important; }
    #literasiView[data-literasi-mode="tracker"] .literasi-layout,
    #literasiView[data-literasi-mode="settings"] .literasi-layout { grid-template-columns:1fr; }
    #literasiView[data-literasi-mode="tracker"] .literasi-toolbar { grid-template-columns:minmax(150px,220px) minmax(220px,1fr); }
    #literasiView[data-literasi-mode="settings"] .literasi-toolbar { grid-template-columns:minmax(150px,220px) minmax(210px,280px); }
    .literasi-config,
    .literasi-tracker { min-width:0;display:flex;flex-direction:column;gap:12px; }
    .literasi-config { border:1px solid var(--app-border);border-radius:12px;background:var(--app-muted);padding:12px; }
    .literasi-section-title { font-size:13px;font-weight:950;color:var(--app-text);letter-spacing:0; }
    .literasi-book-list { display:flex;flex-direction:column;gap:8px;max-height:460px;overflow:auto;padding-right:2px; }
    .literasi-book-row { display:grid;grid-template-columns:68px minmax(0,1fr) 34px;gap:8px;align-items:center;border:1px solid var(--app-border);background:var(--app-card);border-radius:10px;padding:8px; }
    .literasi-book-label { font-size:11px;font-weight:950;color:var(--app-blue);white-space:nowrap; }
    .literasi-book-input { width:100%;min-width:0;box-sizing:border-box;background:var(--app-muted);border:1px solid var(--app-border);border-radius:8px;padding:8px 9px;font-family:inherit;font-size:12px;font-weight:750;color:var(--app-text);outline:none; }
    .literasi-book-input:focus { border-color:var(--app-blue);box-shadow:var(--app-ring);background:var(--app-card); }
    .literasi-book-delete { width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(220,38,38,.28);background:rgba(220,38,38,.08);color:var(--app-danger);border-radius:8px;font-size:16px;font-weight:950;cursor:pointer; }
    .literasi-book-delete:disabled { opacity:.35;cursor:not-allowed; }
    .literasi-summary { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px; }
    .literasi-stat { border:1px solid var(--app-border);background:var(--app-muted);border-radius:10px;padding:10px;min-width:0; }
    .literasi-stat span { display:block;font-size:10px;font-weight:900;color:var(--app-dim);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .literasi-stat strong { display:block;margin-top:3px;font-size:22px;font-weight:950;color:var(--app-text);line-height:1.1; }
    .literasi-disabled-note { border:1px solid rgba(217,119,6,.25);background:rgba(217,119,6,.10);color:#b45309;border-radius:10px;padding:10px 12px;font-size:12px;font-weight:800;line-height:1.45; }
    .literasi-table-wrap { position:relative;overflow:auto;border:1px solid var(--app-border);border-radius:10px;max-height:560px;background:var(--app-card); }
    .literasi-table { --literasi-name-col-width:220px;--literasi-kelas-col-width:74px;--literasi-book-col-width:138px;width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;background:var(--app-card);font-size:12px;table-layout:fixed; }
    .literasi-table th { position:sticky;top:0;z-index:2;background:var(--app-thead);padding:8px 10px;border-right:1px solid var(--app-border);border-bottom:1px solid var(--app-border);font-size:10px;font-weight:950;color:var(--app-dim);text-align:center;text-transform:uppercase;letter-spacing:.055em;white-space:nowrap; }
    .literasi-table td { padding:8px 10px;border-right:1px solid var(--app-border);border-bottom:1px solid var(--app-border);color:var(--app-text);vertical-align:middle;text-align:center;background:var(--app-card); }
    .literasi-table th:last-child,
    .literasi-table td:last-child { border-right:0; }
    .literasi-table th.num,
    .literasi-table td.num { width:42px;min-width:42px;max-width:42px; }
    .literasi-table th.name,
    .literasi-table td.name { position:sticky;left:0;z-index:4;text-align:left;width:var(--literasi-name-col-width);min-width:var(--literasi-name-col-width);max-width:var(--literasi-name-col-width);box-shadow:2px 0 0 var(--app-border); }
    .literasi-table th.name { z-index:7; }
    .literasi-table td.name { z-index:3;font-weight:900;white-space:normal;line-height:1.3; }
    .literasi-table th.kelas,
    .literasi-table td.kelas { position:sticky;left:var(--literasi-name-col-width);z-index:4;width:var(--literasi-kelas-col-width);min-width:var(--literasi-kelas-col-width);max-width:var(--literasi-kelas-col-width);box-shadow:2px 0 0 var(--app-border);font-weight:900; }
    .literasi-table th.kelas { z-index:7; }
    .literasi-table td.kelas { z-index:3; }
    .literasi-table th.book,
    .literasi-table td.book { width:var(--literasi-book-col-width);min-width:var(--literasi-book-col-width);max-width:var(--literasi-book-col-width); }
    .literasi-table td.literasi-check-cell { padding:0; }
    .literasi-table th.row-stat,
    .literasi-table td.row-stat { width:96px;min-width:96px;max-width:96px; }
    .literasi-student-meta { display:block;margin-top:2px;font-size:10px;font-weight:750;color:var(--app-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .literasi-book-head { display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1.15;min-width:0;width:100%; }
    .literasi-book-head strong { font-size:10px;font-weight:950;color:var(--app-text); }
    .literasi-book-head span { width:100%;font-size:9.5px;font-weight:750;color:var(--app-dim);text-transform:none;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .literasi-book-title-btn { width:100%;min-width:0;border:0;background:transparent;padding:0;font:inherit;color:inherit;cursor:pointer; }
    .literasi-book-title-btn:hover .literasi-book-head strong,
    .literasi-book-title-btn:focus-visible .literasi-book-head strong { color:var(--app-blue); }
    .literasi-book-title-btn:focus-visible { outline:2px solid rgba(37,99,235,.35);outline-offset:3px;border-radius:6px; }
    .literasi-check-hit { width:100%;min-height:58px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:10px;cursor:pointer;touch-action:manipulation;transition:background-color .16s ease,box-shadow .16s ease; }
    .literasi-check-hit:hover { background:var(--app-hover);box-shadow:inset 0 0 0 2px rgba(37,99,235,.10); }
    .literasi-check-hit.checked { background:rgba(22,163,74,.10);box-shadow:inset 0 0 0 2px rgba(22,163,74,.18); }
    .literasi-check-hit.disabled { cursor:not-allowed; }
    .literasi-check-hit.disabled:hover { background:transparent;box-shadow:none; }
    .literasi-check { width:24px;height:24px;margin:0;accent-color:var(--app-accent);cursor:pointer;flex:0 0 auto; }
    .literasi-check:focus-visible { outline:3px solid rgba(37,99,235,.32);outline-offset:3px; }
    .literasi-check:disabled { cursor:not-allowed;opacity:.45; }
    .literasi-row-done td { background:linear-gradient(rgba(22,163,74,.045),rgba(22,163,74,.045)),var(--app-card); }
    .literasi-row-count { font-size:12px;font-weight:950;color:var(--app-text);white-space:nowrap; }
    .literasi-row-count span { color:var(--app-dim);font-weight:850; }
    .literasi-progress-mini { display:flex;align-items:center;gap:6px;justify-content:center;min-width:0; }
    .literasi-progress-track { width:48px;height:7px;border-radius:999px;background:var(--app-muted);border:1px solid var(--app-border);overflow:hidden; }
    .literasi-progress-fill { display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--app-blue),var(--app-accent)); }
    .literasi-progress-label { min-width:28px;text-align:right;font-size:10px;font-weight:950;color:var(--app-dim); }
    .literasi-book-popup-backdrop { position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.42);padding:16px; }
    .literasi-book-popup { width:min(420px,100%);border:1px solid var(--app-border);border-radius:14px;background:var(--app-card);box-shadow:0 24px 70px rgba(15,23,42,.28);padding:16px; }
    .literasi-book-popup-kicker { font-size:11px;font-weight:950;color:var(--app-blue);text-transform:uppercase;letter-spacing:.06em; }
    .literasi-book-popup-title { margin-top:8px;font-size:16px;font-weight:950;color:var(--app-text);line-height:1.45;overflow-wrap:anywhere; }
    .literasi-book-popup-actions { display:flex;justify-content:flex-end;margin-top:16px; }
    .literasi-book-popup-close { min-height:36px;border:1px solid var(--app-border);background:var(--app-muted);border-radius:10px;padding:8px 14px;font-family:inherit;font-size:12px;font-weight:900;color:var(--app-text);cursor:pointer; }
    .literasi-status { min-height:17px;font-size:11px;font-weight:850;color:var(--app-dim); }
    .literasi-status.ok { color:#15803d; }
    .literasi-status.err { color:var(--app-danger); }
    .literasi-guru-icon { font-size:12px;font-weight:950; }
    @media(max-width:980px) {
      .literasi-layout { grid-template-columns:1fr; }
      .literasi-book-list { max-height:none; }
    }
    @media(max-width:700px) {
      .literasi-panel { padding:12px;border-radius:0; }
      .literasi-toolbar { grid-template-columns:1fr; }
      .literasi-summary { grid-template-columns:1fr 1fr; }
      .literasi-table { --literasi-name-col-width:180px;--literasi-kelas-col-width:68px;--literasi-book-col-width:128px; }
      .literasi-table th.name,
      .literasi-table td.name { width:180px;min-width:180px;max-width:180px; }
      .literasi-actions { width:100%; }
      .literasi-actions .p-btn,
      .literasi-actions .peng-save-btn { flex:1;justify-content:center; }
    }
    .kesantrian-panel { padding:16px;display:flex;flex-direction:column;gap:14px; }
    .kesantrian-head { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap; }
    .kesantrian-title { font-size:15px;font-weight:900;color:var(--app-text);letter-spacing:0; }
    .kesantrian-sub { margin-top:3px;font-size:11px;font-weight:600;color:var(--app-dim);line-height:1.5; }
    .kesantrian-filter-row { display:grid;grid-template-columns:minmax(220px,1fr) minmax(120px,160px) minmax(140px,180px) minmax(130px,170px);gap:10px;align-items:end; }
    .kesantrian-field { display:flex;flex-direction:column;gap:5px;min-width:0; }
    .kesantrian-field label { font-size:10px;font-weight:900;color:var(--app-dim);text-transform:uppercase;letter-spacing:.06em; }
    .kesantrian-input { width:100%;box-sizing:border-box;background:var(--app-card);border:1px solid var(--app-border);border-radius:9px;padding:8px 10px;font-family:inherit;font-size:12px;font-weight:700;color:var(--app-text);outline:none; }
    .kesantrian-input:focus { border-color:var(--app-blue);box-shadow:var(--app-ring); }
    .kesantrian-summary { display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px; }
    .kesantrian-room-card { border:1px solid var(--app-border);background:var(--app-muted);border-radius:10px;padding:10px 11px;min-width:0; }
    .kesantrian-room-card .room-name { font-size:11px;font-weight:900;color:var(--app-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .kesantrian-room-card .room-meta { margin-top:4px;font-size:10px;font-weight:800;color:var(--app-dim); }
    .kesantrian-toolbar { display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--app-border);padding-top:12px; }
    .kesantrian-info { font-size:12px;font-weight:800;color:var(--app-text); }
    .kesantrian-dirty { margin-top:3px;font-size:11px;font-weight:700;color:var(--app-warn);min-height:15px; }
    .kesantrian-table-wrap { overflow:auto;border:1px solid var(--app-border);border-radius:10px;max-height:520px;background:var(--app-card); }
    .kesantrian-table { width:100%;min-width:900px;border-collapse:collapse;background:var(--app-card);font-size:12px; }
    .kesantrian-table th { position:sticky;top:0;z-index:2;background:var(--app-thead);padding:8px 10px;border-bottom:1px solid var(--app-border);font-size:10px;font-weight:900;color:var(--app-dim);text-align:left;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap; }
    .kesantrian-table th.num { text-align:center;width:42px; }
    .kesantrian-table td { padding:8px 10px;border-bottom:1px solid var(--app-border);color:var(--app-text);vertical-align:middle;text-align:left; }
    .kesantrian-table td.num { text-align:center;color:var(--app-dim);font-weight:800; }
    .kesantrian-table tr.row-dirty td { background:rgba(217,119,6,.08); }
    .kesantrian-cell-name { font-weight:800;min-width:180px; }
    .kesantrian-cell-dim { color:var(--app-dim);font-weight:700;white-space:nowrap; }
    .kesantrian-select { min-width:132px;padding:7px 9px;font-size:11px; }
    .kesantrian-status { display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:900;white-space:nowrap;border:1px solid var(--app-border); }
    .kesantrian-status.ok { color:#15803d;background:rgba(22,163,74,.11);border-color:rgba(22,163,74,.25); }
    .kesantrian-status.pp { color:#0369a1;background:rgba(2,132,199,.10);border-color:rgba(2,132,199,.25); }
    .kesantrian-status.warn { color:#b45309;background:rgba(217,119,6,.10);border-color:rgba(217,119,6,.25); }
    @media(max-width:820px) {
      .kesantrian-filter-row { grid-template-columns:1fr 1fr; }
      .kesantrian-field:first-child { grid-column:1/-1; }
      .kesantrian-panel { padding:14px; }
    }
    @media(max-width:560px) {
      .kesantrian-filter-row { grid-template-columns:1fr; }
      .kesantrian-toolbar { align-items:stretch; }
      .kesantrian-toolbar .peng-save-btn { width:100%!important; }
    }
    .santri-db-panel { padding:16px;display:flex;flex-direction:column;gap:14px; }
    .santri-db-head { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap; }
    .santri-db-title { font-size:15px;font-weight:900;color:var(--app-text);letter-spacing:0; }
    .santri-db-sub { margin-top:3px;font-size:11px;font-weight:600;color:var(--app-dim);line-height:1.5;max-width:760px; }
    .santri-db-actions { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
    .santri-db-note { padding:9px 11px;border:1px solid rgba(2,132,199,.22);background:rgba(2,132,199,.08);border-radius:10px;font-size:11px;font-weight:700;color:#075985;line-height:1.45; }
    #appShell[data-theme="dark"] .santri-db-note { color:#7dd3fc;background:rgba(56,189,248,.10);border-color:rgba(56,189,248,.22); }
    .santri-db-upload-status { min-height:17px;font-size:11px;font-weight:800;color:var(--app-dim); }
    .santri-db-upload-status.ok { color:#15803d; }
    .santri-db-upload-status.err { color:var(--app-danger); }
    .santri-db-filter-row { display:grid;grid-template-columns:minmax(240px,1fr) minmax(120px,170px) minmax(140px,180px);gap:10px;align-items:end; }
    .santri-db-field { display:flex;flex-direction:column;gap:5px;min-width:0; }
    .santri-db-field label { font-size:10px;font-weight:900;color:var(--app-dim);text-transform:uppercase;letter-spacing:.06em; }
    @font-face {
      font-family: 'EmadDianaeXtra';
      src: url('../assets/fonts/Emad-DianaeXtra-Regular.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    #santriDb_namaArab,
    #santriDb_namaArabAutoGenerate { font-family:'EmadDianaeXtra','Traditional Arabic',serif !important;font-size:16px !important; }
    .santri-db-input { width:100%;box-sizing:border-box;background:var(--app-card);border:1px solid var(--app-border);border-radius:9px;padding:8px 10px;font-family:inherit;font-size:12px;font-weight:700;color:var(--app-text);outline:none; }
    .santri-db-input:focus { border-color:var(--app-blue);box-shadow:var(--app-ring); }
    .santri-db-toolbar { display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--app-border);padding-top:12px; }
    .santri-db-bulk-actions { display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap; }
    .santri-db-info { font-size:12px;font-weight:900;color:var(--app-text); }
    .santri-db-dim { margin-top:3px;font-size:11px;font-weight:700;color:var(--app-dim); }
    .santri-db-table-wrap { overflow:auto;border:1px solid var(--app-border);border-radius:10px;max-height:560px;background:var(--app-card); }
    .santri-db-table { width:100%;border-collapse:collapse;background:var(--app-card);font-size:12px;table-layout:auto; }
    .santri-db-table th { position:sticky;top:0;z-index:2;background:var(--app-thead);padding:8px 10px;border-bottom:1px solid var(--app-border);font-size:10px;font-weight:900;color:var(--app-dim);text-align:left;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap; }
    .santri-db-table th.select,
    .santri-db-table td.select { text-align:center;width:36px;min-width:36px;max-width:36px;white-space:nowrap;padding-left:6px;padding-right:6px;position:sticky;left:0; }
    .santri-db-table th.num,
    .santri-db-table td.num { text-align:center;width:36px;min-width:36px;max-width:36px;white-space:nowrap;padding-left:6px;padding-right:6px;position:sticky;left:36px; }
    .santri-db-table td.select,
    .santri-db-table td.num { z-index:1;background:var(--app-card); }
    .santri-db-table th.select,
    .santri-db-table th.num { z-index:4; }
    /* Kolom Nama Santri (ke-3) ikut dibekukan */
    .santri-db-table td.santri-db-name { position:sticky;left:72px;z-index:1;background:var(--app-card);box-shadow:2px 0 0 var(--app-border); }
    .santri-db-table th:nth-child(3) { position:sticky;left:72px;z-index:4;box-shadow:2px 0 0 var(--app-border); }
    /* Pertahankan highlight baris terpilih pada kolom yang dibekukan */
    .santri-db-row-selected td.select,
    .santri-db-row-selected td.num,
    .santri-db-row-selected td.santri-db-name { background:linear-gradient(rgba(2,132,199,.06),rgba(2,132,199,.06)),var(--app-card); }
    .santri-db-table td { padding:8px 10px;border-bottom:1px solid var(--app-border);color:var(--app-text);vertical-align:middle;white-space:nowrap; }
    .santri-db-table td.num { text-align:center;color:var(--app-dim);font-weight:800; }
    .santri-db-table th,
    .santri-db-table td { text-align:left; }
    .santri-db-table th:nth-child(1),
    .santri-db-table td:nth-child(1),
    .santri-db-table th:nth-child(2),
    .santri-db-table td:nth-child(2),
    .santri-db-table th:nth-child(5),
    .santri-db-table td:nth-child(5),
    .santri-db-table th:nth-child(6),
    .santri-db-table td:nth-child(6),
    .santri-db-table th:nth-child(7),
    .santri-db-table td:nth-child(7),
    .santri-db-table th:nth-child(10),
    .santri-db-table td:nth-child(10),
    .santri-db-table th:nth-child(11),
    .santri-db-table td:nth-child(11),
    .santri-db-table th:nth-child(12),
    .santri-db-table td:nth-child(12) { text-align:center; }
    .santri-db-table th:nth-child(3),
    .santri-db-table td:nth-child(3),
    .santri-db-table th:nth-child(4),
    .santri-db-table td:nth-child(4),
    .santri-db-table th:nth-child(9),
    .santri-db-table td:nth-child(9) { text-align:left; }
    .santri-db-table td:nth-child(10) .santri-db-badge { margin-left:auto;margin-right:auto; }
    .santri-db-row-selected { background:rgba(2,132,199,.06); }
    .santri-db-select { width:16px;height:16px;margin:0;accent-color:var(--app-blue);cursor:pointer; }
    .santri-db-name { font-weight:900;white-space:nowrap; }
    .santri-db-muted { color:var(--app-dim);font-weight:700;white-space:nowrap; }
    .santri-db-action-btn { border:0;background:transparent;color:var(--app-blue);font-family:inherit;font-size:11px;font-weight:900;cursor:pointer;padding:4px 6px;border-radius:7px; }
    .santri-db-action-btn:hover { background:var(--app-hover); }
    .santri-db-action-btn.danger { color:var(--app-danger); }
    .santri-db-badge { display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:900;border:1px solid var(--app-border);white-space:nowrap; }
    .santri-db-badge.asrama { color:#15803d;background:rgba(22,163,74,.10);border-color:rgba(22,163,74,.25); }
    .santri-db-badge.pp { color:#0369a1;background:rgba(2,132,199,.10);border-color:rgba(2,132,199,.25); }
    .santri-db-modal { position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:18px; }
    .santri-db-modal.hidden { display:none!important; }
    .santri-db-modal-backdrop { position:absolute;inset:0;background:rgba(15,23,42,.62);backdrop-filter:blur(4px); }
    .santri-db-modal-card { position:relative;z-index:1;width:100%;max-width:1120px;max-height:90vh;max-height:min(90vh,820px);display:flex;flex-direction:column;background:var(--app-card);border:1px solid var(--app-border);border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.28);overflow:hidden; }
    .santri-db-modal-head { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:17px 22px;border-bottom:1px solid var(--app-border);background:var(--app-thead); }
    .santri-db-modal-title { font-size:17px;font-weight:900;color:var(--app-text);line-height:1.25; }
    .santri-db-modal-sub { margin-top:3px;font-size:11px;font-weight:700;color:var(--app-dim);line-height:1.45; }
    .santri-db-close { width:32px;height:32px;border:0;background:transparent;color:var(--app-dim);font-size:24px;line-height:1;cursor:pointer;border-radius:8px; }
    .santri-db-close:hover { background:var(--app-hover);color:var(--app-text); }
    .santri-db-modal-head-actions { display:flex;align-items:center;gap:10px;flex:0 0 auto; }
    .santri-db-modal-nav { display:flex;align-items:center;gap:6px;flex:0 0 auto; }
    .santri-db-nav-btn { display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--app-border);background:var(--app-card);color:var(--app-dim);border-radius:8px;cursor:pointer;flex:0 0 auto; }
    .santri-db-nav-btn:hover:not(:disabled) { background:var(--app-hover);color:var(--app-text);border-color:var(--app-blue); }
    .santri-db-nav-btn:disabled { opacity:.35;cursor:not-allowed; }
    .santri-db-nav-count { font-size:11px;font-weight:900;color:var(--app-dim);white-space:nowrap;min-width:48px;text-align:center; }
    .santri-db-modal-nav.hidden { display:none!important; }
    .santri-db-tabs { display:flex;align-items:center;gap:8px;min-height:48px;overflow-x:auto;overflow-y:hidden;padding:9px 22px;border-bottom:1px solid var(--app-border);background:var(--app-card);scrollbar-width:thin; }
    .santri-db-tab { flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:30px;border:1px solid var(--app-border);background:var(--app-muted);color:var(--app-dim);border-radius:999px;padding:0 13px;font-family:inherit;font-size:11px;font-weight:900;line-height:1;letter-spacing:0;cursor:pointer;white-space:nowrap; }
    .santri-db-tab.active { border-color:var(--app-blue);background:rgba(2,132,199,.10);color:var(--app-blue); }
    .santri-db-form-grid { overflow:auto;padding:18px 22px 20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;align-items:start; }
    .santri-db-form-field { display:flex;flex-direction:column;gap:7px;min-width:0; }
    .santri-db-form-field.full { grid-column:1/-1; }
    .santri-db-form-field label { font-size:10px;font-weight:900;color:var(--app-dim);letter-spacing:.055em;text-transform:uppercase;line-height:1.2; }
    .santri-db-form-field input,
    .santri-db-form-field select,
    .santri-db-form-field textarea { width:100%;min-height:46px;box-sizing:border-box;border:1px solid var(--app-border);border-radius:9px;background:var(--app-muted);color:var(--app-text);font-family:inherit;font-size:12px;font-weight:700;padding:10px 12px;outline:none;line-height:1.35; }
    .santri-db-form-field textarea { min-height:74px;resize:vertical;line-height:1.45; }
    .santri-db-form-field input:focus,
    .santri-db-form-field select:focus,
    .santri-db-form-field textarea:focus { border-color:var(--app-blue);box-shadow:var(--app-ring);background:var(--app-card); }
    .santri-db-form-field input:disabled,
    .santri-db-form-field textarea:disabled,
    .santri-db-form-field select:disabled { border-color:rgba(100,116,139,.22);background:var(--app-thead);color:var(--app-dim);cursor:not-allowed;box-shadow:none;opacity:1; }
    .santri-db-form-field [data-santri-db-readonly="1"] { pointer-events:none; }
    .santri-db-kelas-combo { display:grid;grid-template-columns:minmax(84px,1fr) minmax(120px,1.2fr);gap:8px; }
    .santri-db-file-control { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;border:1px solid var(--app-border);border-radius:9px;background:var(--app-muted);padding:8px;min-width:0; }
    .santri-db-file-main { min-width:0; }
    .santri-db-file-name { font-size:12px;font-weight:900;color:var(--app-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .santri-db-file-meta { margin-top:2px;font-size:10px;font-weight:800;color:var(--app-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .santri-db-file-actions { display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap; }
    .santri-db-file-btn { display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(2,132,199,.35);background:rgba(2,132,199,.10);color:var(--app-blue);border-radius:7px;padding:6px 9px;font-family:inherit;font-size:10px;font-weight:900;text-decoration:none;cursor:pointer;white-space:nowrap; }
    .santri-db-file-btn:hover { background:rgba(2,132,199,.16); }
    .santri-db-file-btn.ghost { border-color:var(--app-border);background:var(--app-card);color:var(--app-text); }
    .santri-db-file-btn.danger { border-color:rgba(220,38,38,.28);background:rgba(220,38,38,.09);color:var(--app-danger); }
    .santri-db-file-btn.danger:hover { background:rgba(220,38,38,.14); }
    .santri-db-file-btn:disabled { opacity:.65;cursor:not-allowed; }
    .santri-db-file-input { display:none!important; }
    .santri-db-modal-foot { display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--app-border);background:var(--app-thead); }
    .santri-db-save-status { min-height:16px;font-size:11px;font-weight:800;color:var(--app-dim); }
    .santri-db-save-status.err { color:var(--app-danger); }
    .santri-db-foot-actions { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
    @media(max-width:820px) {
      .santri-db-filter-row { grid-template-columns:1fr 1fr; }
      .santri-db-field:first-child { grid-column:1/-1; }
      .santri-db-form-grid { grid-template-columns:1fr; }
    }
    @media(max-width:560px) {
      .santri-db-panel { padding:14px; }
      .santri-db-filter-row { grid-template-columns:1fr; }
      .santri-db-file-control { grid-template-columns:1fr; }
      .santri-db-file-actions { justify-content:flex-start; }
      .santri-db-toolbar,.santri-db-head,.santri-db-modal-foot { align-items:stretch; }
      .santri-db-actions,.santri-db-foot-actions { width:100%; }
      .santri-db-actions > *, .santri-db-foot-actions > * { flex:1; }
      .santri-db-modal { padding:8px;align-items:stretch; }
      .santri-db-modal-card { max-height:calc(100vh - 16px); }
    }
    @media(max-width:700px) {
      .santri-db-table th.select,
      .santri-db-table td.select,
      .santri-db-table th.num,
      .santri-db-table td.num {
        box-sizing:border-box;
        width:36px!important;
        min-width:36px!important;
        max-width:36px!important;
      }
    }
    .p-thin { height:1px;background:var(--app-border);margin:3px 0; }
    .live-kelas-tabs { display:flex;align-items:center;gap:6px;flex-wrap:wrap; }
    .live-kelas-tab {
      border:1.5px solid var(--app-border);background:var(--app-muted);color:var(--app-dim);
      border-radius:8px;padding:7px 12px;font-size:11px;font-weight:800;font-family:inherit;
      cursor:pointer;transition:.15s;min-height:32px;
    }
    .live-kelas-tab:hover { border-color:var(--app-blue);color:var(--app-text);background:var(--app-hover); }
    .live-kelas-tab.active { border-color:var(--app-blue);background:rgba(2,132,199,.12);color:var(--app-blue); }

    .sistem-picker { display:flex;gap:5px;flex-wrap:wrap; }
    .sistem-picker .sistem-btn { flex:1;min-width:60px; }
    .sistem-btn { flex:1;padding:9px 4px;background:var(--app-muted);border:1px solid var(--app-border);border-radius:9px;font-weight:800;font-size:12px;cursor:pointer;color:var(--app-text);text-align:center;letter-spacing:.06em;-webkit-tap-highlight-color:transparent;transition:.2s; }
    .sistem-btn:hover { transform:translateY(-1px);box-shadow:0 3px 8px rgba(2,132,199,0.15); }
    .sistem-btn.active-smart { border-color:#16a34a;background:#dcfce7;color:#15803d;box-shadow:0 0 0 2px rgba(22,163,74,0.2); }
    .sistem-btn.active-clik  { border-color:#0284c7;background:#e0f2fe;color:#0369a1;box-shadow:0 0 0 2px rgba(2,132,199,0.2); }
    #appShell[data-theme="dark"] .sistem-btn.active-smart { background:#14532d;color:#4ade80; }
    #appShell[data-theme="dark"] .sistem-btn.active-clik  { background:#0c2e44;color:#38bdf8; }

    .kelas-picker { display:flex;gap:4px;flex-wrap:wrap; }
    .kelas-btn { position:relative;overflow:visible;flex:1;min-width:30px;background:var(--app-muted);border:1px solid var(--app-border);border-radius:8px;padding:7px 4px;font-weight:800;font-size:12px;cursor:pointer;color:var(--app-text);text-align:center;-webkit-tap-highlight-color:transparent;transition:.2s; }
    .kelas-btn:hover:not(.locked) { transform:translateY(-1px);box-shadow:0 3px 8px rgba(2,132,199,0.15); }
    .kelas-btn.active { border-color:var(--app-accent);background:#dcfce7;color:#15803d;box-shadow:0 0 0 2px rgba(22,163,74,0.2); }
    #appShell[data-theme="dark"] .kelas-btn.active { background:#14532d;color:#4ade80; }
    .kelas-btn.locked { opacity:0.35;cursor:not-allowed;pointer-events:none; }
    .kelas-incomplete-badge { position:absolute;top:-4px;right:-4px;width:9px;height:9px;border-radius:50%;background:#dc2626;border:2px solid var(--app-card);box-shadow:0 1px 4px rgba(220,38,38,0.4);pointer-events:none; }
    #appShell[data-theme="dark"] .kelas-incomplete-badge { background:#ef4444;border-color:var(--app-bg); }
    .kelas-complete-badge { position:absolute;top:-4px;right:-4px;width:9px;height:9px;border-radius:50%;background:#16a34a;border:2px solid var(--app-card);box-shadow:0 1px 4px rgba(22,163,74,0.4);pointer-events:none; }
    #appShell[data-theme="dark"] .kelas-complete-badge { background:#22c55e;border-color:var(--app-bg); }
    .sistem-btn.active-sumatif { border-color:#7c3aed;background:#f3e8ff;color:#6d28d9;box-shadow:0 0 0 2px rgba(124,58,237,0.2); }
    .sistem-btn.disabled-sumatif { opacity:0.55;cursor:not-allowed;border-color:var(--app-border);color:var(--app-dim);background:var(--app-muted); }
    .sistem-btn.disabled-sumatif:hover { transform:none;box-shadow:none; }
    .sum-active-toggle { display:flex;align-items:center;gap:10px;margin-bottom:14px; }
    .completion-badge-control { width:max-content;min-width:116px;min-height:44px;padding:5px 8px;margin-left:-8px;border-radius:10px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:background .18s,box-shadow .18s; }
    .completion-badge-control:hover { background:rgba(124,58,237,0.07); }
    .completion-badge-control:focus-visible { outline:2px solid rgba(124,58,237,0.65);outline-offset:2px; }
    .completion-badge-control.saving { cursor:progress; }
    .sum-toggle-track { width:44px;height:24px;border-radius:12px;background:#e2e8f0;border:2px solid #cbd5e1;cursor:pointer;position:relative;transition:all .2s;flex-shrink:0; }
    .sum-toggle-track.on { background:#7c3aed;border-color:#6d28d9; }
    .sum-toggle-thumb { position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:all .2s;box-shadow:0 1px 4px rgba(0,0,0,0.2); }
    .sum-toggle-track.on .sum-toggle-thumb { left:22px; }
    .sum-toggle-label { font-size:13px;font-weight:700;color:var(--app-dim); }
    .sum-toggle-label.on { color:#6d28d9; }
    .sum-active-banner { padding:8px 12px;border-radius:9px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:6px;margin-bottom:12px; }

    /* Toggle Tampilkan Foto di halaman login */
    .fotologin-enable-row { display:flex;align-items:center;gap:12px; }
    .fotologin-enable-text { display:flex;flex-direction:column;gap:2px;min-width:0; }
    .fotologin-enable-hint { font-size:11px;font-weight:500;color:var(--app-dim);line-height:1.4; }
    .sum-active-banner.off { background:#fef2f2;border:1.5px solid #fecaca;color:#dc2626; }
    .sum-active-banner.on { background:#f5f3ff;border:1.5px solid #c4b5fd;color:#6d28d9; }
    .sistem-btn.locked { opacity:0.35;cursor:not-allowed;pointer-events:none; }
    /* Sumatif table */
    .sumatif-table { width:100%;border-collapse:collapse;background:var(--app-card);table-layout:fixed; }
    .sumatif-table thead th { position:sticky;top:0;background:var(--app-thead);border-bottom:1px solid var(--app-border);text-align:center;padding:9px 4px;font-size:10px;color:var(--app-dim);font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;z-index:2; }
    .sumatif-table thead th:nth-child(1) { text-align:center;width:36px;min-width:36px;position:sticky;left:0;z-index:3;background:var(--app-thead); }
    .sumatif-table thead th:nth-child(2) { text-align:left!important;width:140px;min-width:120px;position:sticky;left:36px;z-index:3;background:var(--app-thead);box-shadow:2px 0 4px rgba(0,0,0,0.07);padding-left:8px!important; }
    .sumatif-table tbody td { border-top:1px solid var(--app-border);padding:8px 4px;color:var(--app-text);height:38px;text-align:center; }
    .sumatif-table tbody tr { transition:.15s; }
    .sumatif-table tbody tr:hover { background:var(--app-hover); }
    .sumatif-table.sumatif-tahfizh-table { width:max-content;min-width:100%;table-layout:fixed; }
    .sumatif-table.sumatif-tahfizh-table thead th { min-width:38px;height:34px;padding:6px 4px; }
    .sumatif-table.sumatif-tahfizh-table thead tr:first-child th:nth-child(1),
    .sumatif-table.sumatif-tahfizh-table tbody td:nth-child(1) { position:sticky;left:0;z-index:4;width:36px;min-width:36px;background:var(--app-card); }
    .sumatif-table.sumatif-tahfizh-table thead tr:first-child th:nth-child(2),
    .sumatif-table.sumatif-tahfizh-table tbody td:nth-child(2) { position:sticky;left:36px;z-index:4;width:180px;min-width:180px;max-width:180px;background:var(--app-card);box-shadow:2px 0 4px rgba(0,0,0,0.07); }
    .sumatif-table.sumatif-tahfizh-table thead tr:first-child th:nth-child(1),
    .sumatif-table.sumatif-tahfizh-table thead tr:first-child th:nth-child(2) { background:var(--app-thead);z-index:6; }
    .sumatif-table.sumatif-tahfizh-table thead tr:first-child th:nth-child(3),
    .sumatif-table.sumatif-tahfizh-table tbody td:nth-child(3) { width:86px;min-width:86px; }
    .sum-tf-juz-input { width:58px;height:28px;border:1px solid var(--app-border);border-radius:6px;background:var(--app-card);color:var(--app-text);font-family:inherit;font-size:12px;font-weight:800;line-height:1;text-align:center;outline:none; }
    .sum-tf-juz-cell { width:38px;min-width:38px;cursor:pointer;font-weight:900;color:#dc2626;background:rgba(239,68,68,.08);user-select:none; }
    .sum-tf-juz-cell.pass { color:#15803d;background:rgba(22,163,74,.12); }
    .sum-tf-juz-cell.disabled { cursor:not-allowed;color:transparent;background:var(--app-muted); }
    .sum-tf-sigma { font-weight:900;color:#7c3aed;background:rgba(124,58,237,.10); }
    .sum-tf-pct { font-weight:900;color:#0f766e;background:rgba(20,184,166,.10);white-space:nowrap; }
    .sum-tf-summary td { font-weight:900;background:var(--app-thead)!important;color:var(--app-text); }
    .ujian-tf-head { padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; }
    .ujian-tf-title { font-size:18px;font-weight:900;color:var(--app-text);letter-spacing:0; }
    .ujian-tf-sub { font-size:11px;font-weight:700;color:var(--app-dim);margin-top:3px; }
    .ujian-tf-actions { display:flex;gap:8px;flex-wrap:wrap; }
    .ujian-tf-filter { padding:12px 16px;display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap; }
    .ujian-tf-filter > div { display:flex;flex-direction:column;gap:4px; }
    .ujian-tf-filter label { font-size:10px;font-weight:800;color:var(--app-dim);text-transform:uppercase;letter-spacing:.06em; }
    .ujian-tf-filter select { min-width:132px;padding:8px 10px;font-size:12px; }
    .ujian-tf-status { font-size:11px;font-weight:700;color:var(--app-dim);min-height:18px;display:flex;align-items:center; }
    .ujian-tf-card { overflow:hidden; }
    .ujian-tf-table-head { padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--app-border); }
    .ujian-tf-card-title { font-size:14px;font-weight:900;color:var(--app-text); }
    .ujian-tf-card-sub { margin-top:2px;font-size:11px;font-weight:700;color:var(--app-dim); }
    .ujian-tf-summary { padding:6px 10px;border-radius:8px;background:rgba(2,132,199,.10);border:1px solid rgba(2,132,199,.22);color:var(--app-blue);font-size:11px;font-weight:900;white-space:nowrap; }
    .ujian-tf-wrap { max-height:calc(100vh - 260px);min-height:320px;overflow:auto; }
    .ujian-tf-table { border-collapse:collapse;font-size:12px; }
    .ujian-tf-juz-input { width:58px;height:28px;border:1px solid var(--app-border);border-radius:6px;background:var(--app-card);color:var(--app-text);font-family:inherit;font-size:12px;font-weight:800;line-height:1;text-align:center;outline:none; }
    .ujian-tf-juz-cell { width:38px;min-width:38px;cursor:pointer;font-weight:900;color:#dc2626;background:rgba(239,68,68,.08);user-select:none; }
    .ujian-tf-juz-cell.pass { color:#15803d;background:rgba(22,163,74,.12); }
    .ujian-tf-juz-cell.disabled { cursor:not-allowed;color:transparent;background:var(--app-muted); }
    .ujian-tf-sigma { font-weight:900;color:#7c3aed;background:rgba(124,58,237,.10); }
    .ujian-tf-pct { font-weight:900;color:#0f766e;background:rgba(20,184,166,.10);white-space:nowrap; }
    .ujian-tf-summary-row td { font-weight:900;background:var(--app-thead)!important;color:var(--app-text); }
    .sumatif-table.sumatif-tahfizh-table {
      --tf-no-w:52px;
      --tf-name-w:260px;
      --tf-tested-w:150px;
      --tf-juz-w:42px;
      --tf-sigma-w:56px;
      --tf-pct-w:64px;
      --tf-head-row-h:36px;
      width:max-content;
      min-width:100%;
      table-layout:fixed;
      border-collapse:separate;
      border-spacing:0;
    }
    .sumatif-table.sumatif-tahfizh-table .tf-col-no { width:var(--tf-no-w); }
    .sumatif-table.sumatif-tahfizh-table .tf-col-name { width:var(--tf-name-w); }
    .sumatif-table.sumatif-tahfizh-table .tf-col-tested { width:var(--tf-tested-w); }
    .sumatif-table.sumatif-tahfizh-table .tf-col-juz { width:var(--tf-juz-w); }
    .sumatif-table.sumatif-tahfizh-table .tf-col-sigma { width:var(--tf-sigma-w); }
    .sumatif-table.sumatif-tahfizh-table .tf-col-pct { width:var(--tf-pct-w); }
    .sumatif-table.sumatif-tahfizh-table th,
    .sumatif-table.sumatif-tahfizh-table td { box-sizing:border-box; }
    .sumatif-table.sumatif-tahfizh-table thead th {
      height:var(--tf-head-row-h)!important;
      min-width:var(--tf-juz-w);
      padding:0 8px!important;
      vertical-align:middle;
      border-right:1px solid var(--app-border);
      border-bottom:1px solid var(--app-border);
      border-top:0;
      left:auto!important;
    }
    .sumatif-table.sumatif-tahfizh-table thead tr:nth-child(2) th {
      position:sticky!important;
      top:var(--tf-head-row-h)!important;
      z-index:6;
      background:var(--app-thead);
    }
    #ujianTfTable.sumatif-table.sumatif-tahfizh-table thead tr:nth-child(2) th {
      width:var(--tf-juz-w)!important;
      min-width:var(--tf-juz-w)!important;
      max-width:var(--tf-juz-w)!important;
      text-align:center!important;
      box-shadow:none!important;
    }
    #ujianTfTable.sumatif-table.sumatif-tahfizh-table thead tr:nth-child(2) th:nth-last-child(2) {
      width:var(--tf-sigma-w)!important;
      min-width:var(--tf-sigma-w)!important;
      max-width:var(--tf-sigma-w)!important;
    }
    #ujianTfTable.sumatif-table.sumatif-tahfizh-table thead tr:nth-child(2) th:last-child {
      width:var(--tf-pct-w)!important;
      min-width:var(--tf-pct-w)!important;
      max-width:var(--tf-pct-w)!important;
    }
    .sumatif-table.sumatif-tahfizh-table thead th[rowspan="2"] {
      height:calc(var(--tf-head-row-h) * 2)!important;
      top:0!important;
      vertical-align:middle;
    }
    .sumatif-table.sumatif-tahfizh-table tbody td {
      height:52px;
      padding:0 8px;
      border-top:0;
      border-right:1px solid var(--app-border);
      border-bottom:1px solid var(--app-border);
      vertical-align:middle;
    }
    .sumatif-table.sumatif-tahfizh-table .tf-sticky-no {
      position:sticky!important;
      left:0!important;
      width:var(--tf-no-w)!important;
      min-width:var(--tf-no-w)!important;
      max-width:var(--tf-no-w)!important;
      text-align:center!important;
    }
    .sumatif-table.sumatif-tahfizh-table .tf-sticky-name {
      position:sticky!important;
      left:var(--tf-no-w)!important;
      width:var(--tf-name-w)!important;
      min-width:var(--tf-name-w)!important;
      max-width:var(--tf-name-w)!important;
      text-align:left!important;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .sumatif-table.sumatif-tahfizh-table .tf-sticky-tested {
      position:sticky!important;
      left:calc(var(--tf-no-w) + var(--tf-name-w))!important;
      width:var(--tf-tested-w)!important;
      min-width:var(--tf-tested-w)!important;
      max-width:var(--tf-tested-w)!important;
      text-align:center!important;
      box-shadow:3px 0 0 rgba(15,23,42,.06);
    }
    .sumatif-table.sumatif-tahfizh-table thead .tf-sticky-no,
    .sumatif-table.sumatif-tahfizh-table thead .tf-sticky-name,
    .sumatif-table.sumatif-tahfizh-table thead .tf-sticky-tested {
      z-index:12!important;
      background:var(--app-thead)!important;
    }
    .sumatif-table.sumatif-tahfizh-table tbody .tf-sticky-no,
    .sumatif-table.sumatif-tahfizh-table tbody .tf-sticky-name,
    .sumatif-table.sumatif-tahfizh-table tbody .tf-sticky-tested {
      z-index:7!important;
      background:var(--app-card)!important;
    }
    .sumatif-table.sumatif-tahfizh-table tbody tr:hover .tf-sticky-no,
    .sumatif-table.sumatif-tahfizh-table tbody tr:hover .tf-sticky-name,
    .sumatif-table.sumatif-tahfizh-table tbody tr:hover .tf-sticky-tested {
      background:var(--app-hover)!important;
    }
    .sumatif-table.sumatif-tahfizh-table tbody tr.sum-tf-summary .tf-sticky-no,
    .sumatif-table.sumatif-tahfizh-table tbody tr.sum-tf-summary .tf-sticky-name,
    .sumatif-table.sumatif-tahfizh-table tbody tr.sum-tf-summary .tf-sticky-tested,
    .sumatif-table.sumatif-tahfizh-table tbody tr.ujian-tf-summary-row .tf-sticky-no,
    .sumatif-table.sumatif-tahfizh-table tbody tr.ujian-tf-summary-row .tf-sticky-name,
    .sumatif-table.sumatif-tahfizh-table tbody tr.ujian-tf-summary-row .tf-sticky-tested {
      background:var(--app-thead)!important;
      z-index:8!important;
    }
    .sumatif-table.sumatif-tahfizh-table .tf-tested-cell { padding:0 8px!important; }
    .sum-tf-juz-input,
    .ujian-tf-juz-input { width:78px;max-width:100%;height:32px; }
    .sum-tf-juz-cell,
    .ujian-tf-juz-cell {
      width:var(--tf-juz-w)!important;
      min-width:var(--tf-juz-w)!important;
      max-width:var(--tf-juz-w)!important;
      padding:0!important;
    }
    .sum-td-no { width:36px;min-width:36px;text-align:center;color:var(--app-dim);font-weight:700;position:sticky;left:0;background:var(--app-card);z-index:1; }
    .sum-td-name { font-weight:600;color:var(--app-text);width:140px;min-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left!important;position:sticky;left:36px;background:var(--app-card);z-index:1;box-shadow:2px 0 4px rgba(0,0,0,0.07);padding-left:8px!important; }
    .sum-td-nilai { font-weight:800;letter-spacing:.03em;color:#7c3aed;cursor:pointer;text-align:center;width:72px;min-width:60px; }
    .sum-td-nilai:empty::after,.sum-td-nilai.empty::after { content:'—';color:var(--app-border); }
    tr.sum-xh-row td { background:rgba(124,58,237,0.07)!important; }
    tr.sum-xh-row .sum-td-no, tr.sum-xh-row .sum-td-name { background:rgba(124,58,237,0.07)!important; }
    #appShell[data-theme="dark"] tr.sum-xh-row td { background:rgba(167,139,250,0.10)!important; }
    td.sum-xh-col { background:rgba(124,58,237,0.07)!important; }
    td.sum-xh-focus { background:rgba(124,58,237,0.18)!important;outline:2px solid #7c3aed;outline-offset:-2px;position:relative;z-index:1; }
    thead th.sum-xh-head { background:#7c3aed!important;color:#fff!important; }
    tr.sum-xh-row td.sum-td-name { font-weight:700;color:#7c3aed!important; }
    @keyframes sumcellpop { 0%{outline-color:transparent;background:rgba(124,58,237,0.35)!important}100%{outline-color:#7c3aed;background:rgba(124,58,237,0.18)!important} }
    td.sum-xh-focus { animation:sumcellpop .25s ease-out; }
    @media(max-width:700px){
      .sumatif-table thead th:nth-child(1),.sum-td-no{width:30px!important;min-width:30px!important}
      .sumatif-table thead th:nth-child(2){width:50vw!important;min-width:50vw!important;max-width:50vw!important;overflow:hidden!important;text-overflow:ellipsis!important}
      .sum-td-name{width:50vw!important;min-width:50vw!important;max-width:50vw!important;overflow-x:auto!important;overflow-y:hidden!important;white-space:nowrap!important;text-overflow:clip!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important}
      .sum-td-name::-webkit-scrollbar{display:none!important}
      .sum-td-nilai{width:72px!important;min-width:60px!important}
    }
    .sumatif-badge { display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;background:#f3e8ff;color:#6d28d9;border:1.5px solid #c4b5fd; }
    .sumatif-info { font-size:11px;color:var(--app-dim);margin:10px 0 4px;line-height:1.6; }
    #sumatifWrap { display:none; }
    #sumatifWrap.active { display:block; }
    /* Sumatif mapel picker in sidebar */
    #sumatifMapelPicker { display:flex;flex-direction:column;gap:5px;margin-bottom:10px; }
    /* Sumatif semester picker */
    #sumatifSemesterPicker { display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap; }
    .sum-sem-btn { padding:7px 16px;border-radius:9px;border:1.5px solid var(--app-border);background:var(--app-muted);font-size:12px;font-weight:700;cursor:pointer;color:var(--app-dim);transition:all .18s;font-family:inherit; }
    .sum-sem-btn.active { background:#0891b2;color:#fff;border-color:#0891b2; }
    .sum-mapel-btn { padding:7px 10px;border-radius:8px;border:1.5px solid var(--app-border);background:var(--app-muted);font-size:12px;font-weight:600;cursor:pointer;color:var(--app-dim);transition:all .18s;font-family:inherit;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:8px; }
    .sum-mapel-btn-label { min-width:0;text-align:left; }
    .sum-mapel-btn:hover:not(.locked) { border-color:#7c3aed;color:#6d28d9;background:#f3e8ff; }
    .sum-mapel-btn.active { background:#7c3aed;color:#fff;border-color:#7c3aed; }
    .sum-mapel-btn.locked { opacity:0.35;cursor:not-allowed;pointer-events:none; }
    /* Sumatif Settings Admin Tab */
    .sum-cfg-kelas-bar { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px; }
    .sum-cfg-kelas-btn { padding:5px 12px;border-radius:7px;border:1.5px solid var(--app-border);background:var(--app-muted);font-size:11px;font-weight:700;cursor:pointer;color:var(--app-dim);transition:all .18s;font-family:inherit; }
    .sum-cfg-kelas-btn.active { background:#7c3aed;color:#fff;border-color:#7c3aed; }
    .sum-cfg-mapel-list { display:flex;flex-direction:column;gap:10px; }
    .sum-cfg-mapel-card { background:var(--app-card);border:1px solid var(--app-border);border-radius:12px;padding:12px 14px;box-shadow:var(--app-shadow); }
    .sum-cfg-mapel-name { font-size:13px;font-weight:800;color:var(--app-text);margin-bottom:10px; }
    .sum-cfg-period-row { display:flex;align-items:center;gap:8px;margin-bottom:6px; }
    .sum-cfg-toggle { position:relative;display:inline-flex;align-items:center;cursor:pointer;gap:8px;flex-shrink:0; }
    .sum-cfg-toggle input { position:absolute;opacity:0;width:0;height:0; }
    .sum-cfg-slider { position:relative;width:36px;height:20px;border-radius:20px;background:var(--app-border);transition:.2s;flex-shrink:0; }
    .sum-cfg-slider::after { content:'';position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,0.3); }
    .sum-cfg-toggle input:checked + .sum-cfg-slider { background:#7c3aed; }
    .sum-cfg-toggle input:checked + .sum-cfg-slider::after { transform:translateX(16px); }
    .sum-cfg-label-inp { flex:1;padding:5px 8px;border:1.5px solid var(--app-border);border-radius:7px;font-size:12px;font-weight:600;font-family:inherit;background:var(--app-muted);color:var(--app-text);outline:none;min-width:0; }
    .sum-cfg-label-inp:focus { border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,0.15); }
    .sum-cfg-period-tag { font-size:10px;font-weight:700;color:var(--app-dim);width:22px;flex-shrink:0;text-align:center; }
    /* Admin sumatif settings — new style */
    .sum-sem-admin-btn { padding:8px 22px;border-radius:10px;border:1.5px solid var(--app-border);background:var(--app-muted);font-size:13px;font-weight:700;cursor:pointer;color:var(--app-dim);transition:all .18s;font-family:inherit; }
    .sum-sem-admin-btn.active { background:#0891b2;color:#fff;border-color:#0891b2;box-shadow:0 2px 10px rgba(8,145,178,0.25); }
    .ak-week-card { background:var(--app-card);border:1px solid var(--app-border);border-radius:14px;padding:16px;box-shadow:var(--app-shadow); }
    .ak-week-head { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px; }
    .ak-week-title { font-size:13px;font-weight:800;color:var(--app-text);margin-bottom:3px; }
    .ak-week-sub { font-size:11px;color:var(--app-dim);line-height:1.6; }
    .ak-week-page-grid { display:grid;grid-template-columns:minmax(250px,330px) minmax(0,1fr);gap:12px;align-items:start; }
    .ak-week-selector-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:620px;overflow:auto;padding-right:3px;scrollbar-gutter:stable; }
    .ak-week-chip { width:100%;min-height:58px;border:1.5px solid var(--app-border);border-radius:10px;background:var(--app-muted);color:var(--app-text);font-family:inherit;cursor:pointer;padding:9px 10px;text-align:left;transition:.16s;display:flex;flex-direction:column;justify-content:center;gap:3px; }
    .ak-week-chip strong { font-size:12px;font-weight:900;line-height:1.2; }
    .ak-week-chip span { font-size:10.5px;font-weight:700;color:var(--app-dim);line-height:1.25; }
    .ak-week-chip em { font-size:9.5px;font-style:normal;font-weight:850;color:#0284c7;line-height:1.25; }
    .ak-week-chip.active { border-color:#0284c7;background:rgba(2,132,199,0.12);box-shadow:0 0 0 3px rgba(2,132,199,0.12); }
    .ak-week-chip.done { border-color:rgba(22,163,74,0.45);background:rgba(22,163,74,0.09); }
    .ak-week-chip.done span { color:#15803d; }
    .ak-week-chip.active.done { border-color:#0284c7;background:linear-gradient(135deg,rgba(2,132,199,0.16),rgba(22,163,74,0.12)); }
    .ak-week-list { display:flex;flex-direction:column;gap:8px; }
    .ak-week-row { display:grid;grid-template-columns:72px minmax(0,1fr) 32px;align-items:center;gap:8px;padding:10px 12px;background:var(--app-muted);border:1.5px solid var(--app-border);border-radius:10px; }
    .ak-week-label { font-size:11px;font-weight:800;color:#6b7f5c;white-space:nowrap; }
    .ak-week-fields { display:grid;grid-template-columns:minmax(112px,1fr) 28px minmax(112px,1fr);align-items:end;gap:7px;min-width:0; }
    .ak-week-date-label { min-width:0;display:flex;flex-direction:column;gap:4px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--app-dim); }
    .ak-week-date { width:100%;padding:7px 9px!important;font-size:12px!important;min-height:34px; }
    .ak-week-sep { align-self:center;text-align:center;font-size:10px;font-weight:800;color:var(--app-dim);padding-bottom:8px; }
    .ak-week-del { width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:8px;cursor:pointer;color:var(--app-danger);font-size:16px;font-weight:800;font-family:inherit; }
    .ak-week-del:hover { background:rgba(220,38,38,0.08);border-color:rgba(220,38,38,0.18); }
    .ak-week-actions { display:flex;gap:8px;flex-wrap:wrap;margin-top:10px; }
    .ak-week-action { flex:1;min-width:130px;padding:8px 10px;border-radius:9px;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;transition:.15s; }
    .ak-week-action.add { background:rgba(107,127,92,0.08);border:1.5px dashed rgba(107,127,92,0.42);color:#5f734f; }
    .ak-week-action.remove { background:rgba(220,38,38,0.06);border:1.5px dashed rgba(220,38,38,0.28);color:#b91c1c; }
    .ak-week-action:disabled { opacity:.42;cursor:not-allowed; }
    .ak-week-status { margin-top:10px;font-size:11px;color:var(--app-dim);padding:9px 11px;background:var(--app-muted);border-radius:8px;line-height:1.5; }
    .ak-week-status.err { color:#991b1b;background:rgba(220,38,38,0.08);border:1px solid rgba(220,38,38,0.22); }
    .ak-calendar-card { min-width:0; }
    .ak-calendar-head { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px; }
    .ak-calendar-title { font-size:12px;font-weight:900;color:#64748b;letter-spacing:.04em;margin-bottom:4px; }
    .ak-calendar-nav { display:flex;align-items:center;gap:6px; }
    .ak-calendar-nav-btn { width:34px;height:34px;border:1.5px solid var(--app-border);border-radius:9px;background:var(--app-muted);color:var(--app-text);font-family:inherit;font-size:20px;font-weight:900;line-height:1;cursor:pointer; }
    .ak-calendar-nav-btn:hover { border-color:#0284c7;color:#0284c7;background:rgba(2,132,199,0.08); }
    .ak-calendar-month-select { width:auto;min-width:150px;padding:7px 10px!important;font-size:12px!important; }
    .ak-calendar-hint,
    .ak-calendar-picking { font-size:12px;font-weight:800;line-height:1.6;border-radius:9px;padding:10px 14px;margin-bottom:12px; }
    .ak-week-month-control { display:grid;grid-template-columns:auto minmax(210px,280px) minmax(160px,1fr);align-items:center;gap:8px;margin-bottom:12px;padding:10px 12px;border:1px solid rgba(2,132,199,.22);border-radius:10px;background:rgba(2,132,199,.06); }
    .ak-week-month-control label { font-size:10px;font-weight:900;color:#0369a1;text-transform:uppercase;letter-spacing:.06em; }
    .ak-week-month-select { width:100%;min-width:0;padding:8px 10px!important;font-size:11px!important; }
    .ak-week-month-control span { min-width:0;font-size:10.5px;font-weight:800;color:var(--app-dim);line-height:1.35; }
    .ak-calendar-hint { color:#0284c7;background:rgba(14,165,233,0.10);border:1px solid rgba(14,165,233,0.30); }
    .ak-calendar-picking { color:#0369a1;background:rgba(2,132,199,0.12);border:1px solid rgba(2,132,199,0.35); }
    .ak-calendar-grid { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px; }
    .ak-calendar-dow { font-size:11px;font-weight:900;color:#64748b;text-align:center;padding:4px 0;text-transform:uppercase; }
    .ak-calendar-day { min-height:39px;border-radius:9px;border:1.5px solid transparent;background:transparent;font-family:inherit;font-size:13px;font-weight:900;text-align:center;cursor:pointer;transition:.14s;position:relative;color:var(--app-text); }
    .ak-calendar-day.outside { opacity:.45; }
    .ak-calendar-day.assigned { background:rgba(22,163,74,0.14);border-color:rgba(22,163,74,0.45);color:#15803d; }
    .ak-calendar-day.friday:not(.assigned):not(.selected) { background:rgba(245,158,11,0.16);border-color:rgba(245,158,11,0.35);color:#92400e; }
    .ak-calendar-day.selected { background:rgba(2,132,199,0.22);border-color:#0284c7;color:#0369a1;box-shadow:0 0 0 2px rgba(2,132,199,0.10); }
    .ak-calendar-day:hover { border-color:#0284c7;background:rgba(2,132,199,0.10); }
    .ak-calendar-day small { position:absolute;right:5px;bottom:3px;font-size:8px;font-weight:900;opacity:.72; }
    .ak-calendar-legend { display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px;font-size:11px;font-weight:700;color:#64748b; }
    .ak-calendar-legend i { width:14px;height:14px;border-radius:50%;display:inline-block;vertical-align:-2px;margin-right:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.45); }
    .legend-assigned { background:linear-gradient(135deg,#4ade80,#16a34a); }
    .legend-friday { background:linear-gradient(135deg,#fde68a,#d97706); }
    .legend-selected { background:linear-gradient(135deg,#60a5fa,#2563eb); }
    @media (max-width: 560px) {
      .ak-week-page-grid { grid-template-columns:1fr; }
      .ak-week-selector-grid { grid-template-columns:1fr; }
      .ak-week-head { flex-direction:column; }
      .ak-week-row { grid-template-columns:1fr 30px;align-items:start; }
      .ak-week-label { grid-column:1 / -1; }
      .ak-week-fields { grid-template-columns:1fr;gap:6px; }
      .ak-week-sep { display:none; }
      .ak-week-del { grid-column:2;grid-row:2; }
      .ak-calendar-nav { width:100%; }
      .ak-calendar-month-select { flex:1;min-width:0; }
      .ak-week-month-control { grid-template-columns:1fr; }
      .ak-calendar-day { min-height:34px;font-size:12px;border-radius:8px; }
    }
    .sum-ikut-chip { display:inline-flex;align-items:center;padding:7px 15px;border-radius:20px;border:1.5px solid var(--app-border);background:var(--app-muted);font-size:12px;font-weight:600;cursor:pointer;color:var(--app-dim);transition:all .18s;font-family:inherit;user-select:none; }
    .sum-ikut-chip:hover { border-color:#7c3aed;color:#6d28d9;background:#f3e8ff; }
    .sum-ikut-chip.active { background:#7c3aed;color:#fff;border-color:#7c3aed;box-shadow:0 2px 8px rgba(124,58,237,0.25); }
    .sum-tahun-select { padding:8px 14px;border:1.5px solid var(--app-border);border-radius:9px;font-size:13px;font-weight:700;font-family:inherit;background:var(--app-muted);color:var(--app-text);outline:none;cursor:pointer;width:160px; }
    .sum-tahun-select:focus { border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,0.15); }
    .sum-sem-locked-label { display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--app-dim);padding:6px 12px;background:var(--app-muted);border-radius:8px;border:1.5px solid var(--app-border); }

    .p-select { width:100%;background:var(--app-card);border:1px solid var(--app-border);border-radius:9px;padding:8px 10px;font-size:12px;font-weight:700;color:var(--app-text);cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:26px; }
    .p-select:focus { border-color:var(--app-blue);box-shadow:var(--app-ring); }
    .p-select.locked-akademik,
    .p-select:disabled {
      cursor:not-allowed;
      opacity:1;
      background:var(--app-muted);
      color:var(--app-text);
      border-style:dashed;
      background-image:none;
      padding-right:10px;
    }
    #guruAkademikPicker .p-select {
      font-size:13px;
      font-weight:800;
    }
    #guruSemesterSelect[data-sem] {
      padding-left:30px;
      background-repeat:no-repeat;
      background-position:8px center;
      background-size:16px 16px;
    }
    #guruSemesterSelect[data-sem="Ganjil"] {
      background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2248px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2248px%22%20fill%3D%22%2364748b%22%3E%3Cpath%20d%3D%22M480.27-80q-82.74%200-155.5-31.5Q252-143%20197.5-197.5t-86-127.34Q80-397.68%2080-480.5t31.5-155.66Q143-709%20197.5-763t127.34-85.5Q397.68-880%20480.5-880t155.66%2031.5Q709-817%20763-763t85.5%20127Q880-563%20880-480.27q0%2082.74-31.5%20155.5Q817-252%20763-197.68q-54%2054.31-127%2086Q563-80%20480.27-80Zm.23-60Q622-140%20721-239.5t99-241Q820-622%20721.19-721T480-820q-141%200-240.5%2098.81T140-480q0%20141%2099.5%20240.5t241%2099.5Zm-.5-340Zm-8%20203h60v-406H389v60h83v346Z%22%2F%3E%3C%2Fsvg%3E");
    }
    #guruSemesterSelect[data-sem="Genap"] {
      background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2248px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2248px%22%20fill%3D%22%2364748b%22%3E%3Cpath%20d%3D%22M480.27-80q-82.74%200-155.5-31.5Q252-143%20197.5-197.5t-86-127.34Q80-397.68%2080-480.5t31.5-155.66Q143-709%20197.5-763t127.34-85.5Q397.68-880%20480.5-880t155.66%2031.5Q709-817%20763-763t85.5%20127Q880-563%20880-480.27q0%2082.74-31.5%20155.5Q817-252%20763-197.68q-54%2054.31-127%2086Q563-80%20480.27-80Zm.23-60Q622-140%20721-239.5t99-241Q820-622%20721.19-721T480-820q-141%200-240.5%2098.81T140-480q0%20141%2099.5%20240.5t241%2099.5Zm-.5-340ZM365-277h230v-60H425v-115h110q24%200%2042-18t18-42v-111q0-24-18-42t-42-18H365v60h170v111H425q-24%200-42%2018t-18%2042v175Z%22%2F%3E%3C%2Fsvg%3E");
    }
    #appShell[data-theme="dark"] #guruSemesterSelect[data-sem="Ganjil"] {
      background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2248px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2248px%22%20fill%3D%22%2394a3b8%22%3E%3Cpath%20d%3D%22M480.27-80q-82.74%200-155.5-31.5Q252-143%20197.5-197.5t-86-127.34Q80-397.68%2080-480.5t31.5-155.66Q143-709%20197.5-763t127.34-85.5Q397.68-880%20480.5-880t155.66%2031.5Q709-817%20763-763t85.5%20127Q880-563%20880-480.27q0%2082.74-31.5%20155.5Q817-252%20763-197.68q-54%2054.31-127%2086Q563-80%20480.27-80Zm.23-60Q622-140%20721-239.5t99-241Q820-622%20721.19-721T480-820q-141%200-240.5%2098.81T140-480q0%20141%2099.5%20240.5t241%2099.5Zm-.5-340Zm-8%20203h60v-406H389v60h83v346Z%22%2F%3E%3C%2Fsvg%3E");
    }
    #appShell[data-theme="dark"] #guruSemesterSelect[data-sem="Genap"] {
      background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2248px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2248px%22%20fill%3D%22%2394a3b8%22%3E%3Cpath%20d%3D%22M480.27-80q-82.74%200-155.5-31.5Q252-143%20197.5-197.5t-86-127.34Q80-397.68%2080-480.5t31.5-155.66Q143-709%20197.5-763t127.34-85.5Q397.68-880%20480.5-880t155.66%2031.5Q709-817%20763-763t85.5%20127Q880-563%20880-480.27q0%2082.74-31.5%20155.5Q817-252%20763-197.68q-54%2054.31-127%2086Q563-80%20480.27-80Zm.23-60Q622-140%20721-239.5t99-241Q820-622%20721.19-721T480-820q-141%200-240.5%2098.81T140-480q0%20141%2099.5%20240.5t241%2099.5Zm-.5-340ZM365-277h230v-60H425v-115h110q24%200%2042-18t18-42v-111q0-24-18-42t-42-18H365v60h170v111H425q-24%200-42%2018t-18%2042v175Z%22%2F%3E%3C%2Fsvg%3E");
    }

    .subjects { display:flex;flex-direction:column;gap:4px;max-height:240px;overflow-y:auto; }
    .subject-btn { background:var(--app-muted);border:1px solid var(--app-border);border-radius:9px;padding:7px 10px;color:var(--app-text);font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:.2s;font-size:12px;-webkit-tap-highlight-color:transparent; }
    .subject-btn:hover:not(.locked) { transform:translateY(-1px);box-shadow:0 4px 10px rgba(2,132,199,0.12); }
    .subject-btn.active { box-shadow:var(--app-ring);border-color:var(--app-blue);background:var(--app-sel); }
    .subject-btn.locked { opacity:0.35;cursor:not-allowed;pointer-events:none; }
    .subject-btn.my-subject { border-color:rgba(22,163,74,0.5);background:rgba(22,163,74,0.06); }
    .subject-btn-label { min-width:0;text-align:left; }
    .subject-incomplete-badge { flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;margin-left:8px;border-radius:50%;background:#dc2626;color:#fff;font-size:13px;font-weight:900;line-height:1;box-shadow:0 0 0 2px rgba(220,38,38,0.14); }
    #appShell[data-theme="dark"] .subject-incomplete-badge { background:#ef4444;box-shadow:0 0 0 2px rgba(248,113,113,0.2); }
    .subject-complete-badge { flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;margin-left:8px;border-radius:50%;background:#16a34a;color:#fff;font-size:13px;font-weight:900;line-height:1;box-shadow:0 0 0 2px rgba(22,163,74,0.14); }
    #appShell[data-theme="dark"] .subject-complete-badge { background:#22c55e;box-shadow:0 0 0 2px rgba(34,197,94,0.2); }
    .subjects-placeholder { color:var(--app-dim);font-size:11px;padding:6px 4px;font-style:italic; }

    .smart-hint { display:none;font-size:10px;color:#15803d;font-weight:600;padding:5px 8px;background:#dcfce7;border:1px solid rgba(22,163,74,0.3);border-radius:7px;line-height:1.4; }
    .smart-hint.visible { display:block; }
    #appShell[data-theme="dark"] .smart-hint { background:#14532d;color:#4ade80;border-color:rgba(74,222,128,0.25); }

    .p-btn { cursor:pointer;background:var(--app-muted);border:1px solid var(--app-border);border-radius:9px;padding:7px 9px;font-weight:600;color:var(--app-text);font-size:12px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:.2s; }
    .p-btn:hover { transform:translateY(-1px);background:var(--app-chip); }
    .p-btn.primary { border-color:var(--app-blue);color:var(--app-blue); }
    .p-btn.warn { border-color:var(--app-warn);color:var(--app-warn); }
    .p-btn.danger { border-color:var(--app-danger);color:var(--app-danger); }
    .p-hint { color:var(--app-dim);font-size:10px; }

    /* ── STRUKTUR KELAS ── */
    .sk-card { display:flex;flex-direction:column;gap:14px;padding:16px; }
    .sk-head { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap; }
    .sk-title { font-size:14px;font-weight:900;color:var(--app-text); }
    .sk-sub { margin-top:4px;font-size:11px;font-weight:600;color:var(--app-dim);line-height:1.55;max-width:780px; }
    .sk-toolbar { display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;border-top:1px solid var(--app-border);padding-top:12px; }
    .sk-field { display:flex;flex-direction:column;gap:5px; }
    .sk-field label { font-size:10px;font-weight:900;color:var(--app-dim);text-transform:uppercase;letter-spacing:.06em; }
    .sk-toolbar-spacer { flex:1 1 40px; }
    .sk-total { font-size:11px;font-weight:800;color:var(--app-dim);white-space:nowrap; }
    .sk-status { font-size:11px;font-weight:800;color:var(--app-dim);white-space:nowrap; }
    .sk-status.dirty { color:var(--app-warn); }
    .sk-status.ok { color:#15803d; }
    .sk-add-tingkat { display:flex;gap:8px;flex-wrap:wrap;align-items:center; }
    .sk-add-ta { display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;border-top:1px solid var(--app-border);padding-top:12px; }
    .sk-list { display:flex;flex-direction:column;gap:10px; }
    .sk-empty { padding:18px;text-align:center;font-size:12px;color:var(--app-dim);border:1px dashed var(--app-border);border-radius:10px;line-height:1.5; }
    .sk-tingkat { border:1px solid var(--app-border);border-radius:12px;padding:12px;background:var(--app-muted);display:flex;flex-direction:column;gap:10px; }
    .sk-tingkat-head { display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap; }
    .sk-tingkat-name { font-size:13px;font-weight:900;color:var(--app-text); }
    .sk-chips { display:flex;flex-wrap:wrap;gap:7px; }
    .sk-chip { display:inline-flex;align-items:center;gap:6px;background:var(--app-card);border:1px solid var(--app-border);border-radius:999px;padding:5px 6px 5px 11px;font-size:12px;font-weight:800;color:var(--app-text); }
    .sk-chip-x { width:18px;height:18px;border:0;border-radius:50%;background:rgba(220,38,38,.12);color:#dc2626;font-size:13px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0; }
    .sk-chip-x:hover { background:rgba(220,38,38,.22); }
    .sk-class-list { display:flex;flex-direction:column;gap:7px; }
    .sk-class-row { display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;background:var(--app-card);border:1px solid var(--app-border);border-radius:10px;padding:8px 10px; }
    .sk-class-main { display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:120px; }
    .sk-class-label { font-size:13px;font-weight:900;color:var(--app-text); }
    .sk-wali { display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-left:auto; }
    .sk-wali-label { font-size:10px;font-weight:900;color:var(--app-dim);text-transform:uppercase;letter-spacing:.05em; }
    .sk-wali-select { min-width:240px;max-width:100%; }
    .sk-class-actions { display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-left:auto; }
    .sk-note-norombel { font-size:11px;font-weight:700;color:var(--app-dim); }
    .sk-add-rombel { display:flex;gap:7px;align-items:center;flex-wrap:wrap; }

    /* ── PENEMPATAN SANTRI ── */
    .ps-target { display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;padding:12px;border:1px solid var(--app-border);border-radius:12px;background:var(--app-muted); }
    .ps-target-info { font-size:11px;font-weight:700;color:var(--app-dim);padding-bottom:9px;line-height:1.4; }

    /* ── NAIK KELAS MASSAL (modal) ── */
    .nk-body { overflow:auto;padding:16px 22px;display:flex;flex-direction:column;gap:9px;max-height:60vh; }
    .nk-foot { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;border-top:1px solid var(--app-border);flex-wrap:wrap; }
    .nk-row { display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--app-border);border-radius:10px;padding:9px 11px;background:var(--app-muted); }
    .nk-src { font-size:12px;font-weight:900;color:var(--app-text);min-width:80px; }
    .nk-count { font-size:10px;font-weight:800;color:var(--app-dim);margin-left:5px; }
    .nk-arrow { color:var(--app-dim);font-weight:900; }
    .nk-dest { flex:0 0 auto; }

    /* ── VALIDASI IMPOR DATABASE SANTRI ── */
    .sdv-toolbar { padding:10px 22px;border-bottom:1px solid var(--app-border);display:flex;gap:14px;flex-wrap:wrap;align-items:center; }
    .sdv-check { display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--app-text);cursor:pointer; }
    .sdv-body { overflow:auto;max-height:56vh;padding:0 22px 8px; }
    .sdv-table { width:100%;border-collapse:collapse;font-size:12px; }
    .sdv-table th { position:sticky;top:0;background:var(--app-thead);padding:8px 10px;border-bottom:1px solid var(--app-border);font-size:10px;font-weight:900;color:var(--app-dim);text-align:left;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;z-index:1; }
    .sdv-table td { padding:7px 10px;border-bottom:1px solid var(--app-border);color:var(--app-text);vertical-align:middle;text-align:left; }
    .sdv-table th.num { text-align:center; }
    .sdv-table td.num { text-align:center;color:var(--app-dim);font-weight:800;width:42px; }

    .sb-user { display:flex;align-items:center;gap:8px;padding:9px 10px;background:var(--app-muted);border:1px solid var(--app-border);border-radius:10px; }
    .sb-avatar { width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#6b7f5c,#a8b89a);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:white;flex-shrink:0; }
    .sb-user-text { flex:1;min-width:0; }
    .sb-name { font-size:12px;font-weight:700;color:var(--app-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .sb-role { font-size:9.5px;color:var(--app-dim);font-weight:500; }

    .p-center { padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0;overflow:hidden; }
    .ctx-bar { display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:8px 12px;background:var(--app-muted);border:1px solid var(--app-border);border-radius:10px; }
    .ctx-label { font-size:10px;font-weight:700;color:var(--app-dim);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap; }
    .ctx-sep { color:var(--app-border);font-size:16px;line-height:1; }
    .ctx-chip { background:var(--app-chip);border:1px solid var(--app-border);padding:5px 10px;border-radius:999px;font-weight:700;letter-spacing:.03em;color:var(--app-text);font-size:11px; }
    .ctx-badge { display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;flex-shrink:0; }
    .ctx-badge.smart { background:#dcfce7;color:#15803d;border:1px solid rgba(22,163,74,0.3); }
    .ctx-badge.clik  { background:#e0f2fe;color:#0369a1;border:1px solid rgba(2,132,199,0.3); }

    .toolbar { display:flex;gap:7px;flex-wrap:wrap;align-items:center; }
    .picker { display:flex;align-items:center;gap:5px;flex-wrap:wrap; }
    .picker .p-btn { padding:7px 9px;font-size:11px; }
    .picker .p-btn.active { border-color:var(--app-blue);box-shadow:var(--app-ring);background:var(--app-sel);color:var(--app-blue); }

    .table-wrap { overflow-x:auto;overflow-y:auto;border-radius:10px;border:1px solid var(--app-border);-webkit-overflow-scrolling:touch;max-height:calc(100vh - 220px);width:100%;max-width:100%;position:relative;display:block; }
    @media(max-width:700px){.table-wrap{max-height:none!important;overflow-x:auto!important;overflow-y:visible!important;border:1px solid var(--app-border)!important;border-radius:10px!important}}
    table { width:max-content;min-width:100%;border-collapse:collapse;background:var(--app-card);table-layout:auto; }
    #mainTable { width:100%;min-width:620px;table-layout:fixed; }
    thead th { position:sticky;top:0;background:var(--app-thead);border-bottom:1px solid var(--app-border);text-align:center;padding:9px 4px;font-size:10px;color:var(--app-dim);font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;z-index:2; }
    thead th:nth-child(1) { text-align:center;width:36px;min-width:36px;position:sticky;left:0;z-index:3;background:var(--app-thead); }
    thead th:nth-child(2) { text-align:left;width:140px;min-width:120px;position:sticky;left:36px;z-index:3;background:var(--app-thead);box-shadow:2px 0 4px rgba(0,0,0,0.07); }
    thead th.col-grade { width:42px;min-width:38px; }
    thead th.col-prestasi { width:60px;min-width:54px; }
    thead th.col-catatan { width:80px;min-width:70px;white-space:normal;line-height:1.2; }
    tbody td { border-top:1px solid var(--app-border);padding:8px 4px;color:var(--app-text);height:38px;text-align:center; }
    tbody tr { transition:.15s; }
    tbody tr:hover { background:var(--app-hover); }
    .td-no { width:36px;min-width:36px;text-align:center;color:var(--app-dim);font-weight:700;position:sticky;left:0;background:var(--app-card);z-index:1; }
    .td-name { font-weight:600;color:var(--app-text);width:140px;min-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;position:sticky;left:36px;background:var(--app-card);z-index:1;box-shadow:2px 0 4px rgba(0,0,0,0.07); }
    .td-cell { font-weight:800;letter-spacing:.03em;color:var(--app-text);cursor:pointer;text-align:center;width:42px;min-width:38px; }
    #mainTable thead th:nth-child(1), #mainTable .td-no { width:42px;min-width:42px;max-width:42px; }
    #mainTable thead th:nth-child(2), #mainTable .td-name { width:auto;min-width:160px;max-width:none; }
    #mainTable thead th.col-grade, #mainTable .td-cell { width:64px;min-width:64px;max-width:64px; }
    #mainTable thead th.col-prestasi, #mainTable .td-prestasi { width:76px;min-width:76px;max-width:76px; }
    #mainTable thead th.col-catatan, #mainTable .td-catatan { width:128px;min-width:128px;max-width:128px; }

    /* ── MOBILE TABLE: Nama 50vw sticky + kolom nilai natural (scroll kanan) ── */
    @media (max-width:700px) {
      table { width:max-content!important;min-width:100%!important;table-layout:auto!important; }
      #mainTable { width:max-content!important;min-width:max-content!important;table-layout:auto!important; }
      thead th:nth-child(1),.td-no { width:30px!important;min-width:30px!important; }
      thead th:nth-child(2) {
        width:50vw!important;min-width:50vw!important;max-width:50vw!important;
        overflow:hidden!important;text-overflow:ellipsis!important;
      }
      .td-name {
        width:50vw!important;min-width:50vw!important;max-width:50vw!important;
        overflow-x:auto!important;overflow-y:hidden!important;
        white-space:nowrap!important;text-overflow:clip!important;
        scrollbar-width:none!important;-ms-overflow-style:none!important;
        -webkit-overflow-scrolling:touch!important;
      }
      .td-name::-webkit-scrollbar { display:none!important; }
      thead th.col-grade { width:38px!important;min-width:38px!important;white-space:nowrap!important; }
      thead th.col-prestasi { width:64px!important;min-width:64px!important;white-space:nowrap!important; }
      thead th.col-catatan { width:72px!important;min-width:72px!important;white-space:nowrap!important; }
      .td-cell { width:38px!important;min-width:38px!important;font-size:12px!important;padding:8px 3px!important; }
      .td-prestasi { width:64px!important;min-width:64px!important;font-size:12px!important;padding:8px 3px!important; }
      .td-catatan { width:72px!important;min-width:72px!important;font-size:11px!important;padding:8px 3px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important; }
    }
    .td-prestasi { font-weight:700;color:var(--app-text);cursor:pointer;width:60px;min-width:54px;text-align:center; }
    .td-catatan { font-weight:400;color:var(--app-dim);cursor:pointer;width:80px;min-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px; }
    tr.selected { background:var(--app-sel)!important;box-shadow:inset 3px 0 0 var(--app-blue); }
    tr.selected .td-no, tr.selected .td-name { background:var(--app-sel)!important; }
    tr.xh-row td { background:rgba(2,132,199,0.07)!important; }
    tr.xh-row .td-no, tr.xh-row .td-name { background:rgba(2,132,199,0.07)!important; }
    #appShell[data-theme="dark"] tr.xh-row td { background:rgba(56,189,248,0.10)!important; }
    #appShell[data-theme="dark"] tr.xh-row .td-no,
    #appShell[data-theme="dark"] tr.xh-row .td-name { background:rgba(56,189,248,0.10)!important; }
    tbody tr:hover .td-no, tbody tr:hover .td-name { background:var(--app-hover); }
    td.xh-col { background:rgba(2,132,199,0.07)!important; }
    #appShell[data-theme="dark"] td.xh-col { background:rgba(56,189,248,0.10)!important; }
    thead th.xh-head { background:var(--app-blue)!important;color:#fff!important; }
    #appShell[data-theme="dark"] thead th.xh-head { background:#0369a1!important; }
    td.xh-focus { background:rgba(2,132,199,0.18)!important;outline:2px solid var(--app-blue);outline-offset:-2px;position:relative;z-index:1; }
    #appShell[data-theme="dark"] td.xh-focus { background:rgba(56,189,248,0.22)!important; }
    tr.xh-row td.td-name { font-weight:700;color:var(--app-blue)!important; }
    @keyframes cellpop { 0%{outline-color:transparent;background:rgba(2,132,199,0.35)!important}100%{outline-color:var(--app-blue);background:rgba(2,132,199,0.18)!important} }
    td.xh-focus { animation:cellpop .25s ease-out; }

    .statusbar { display:flex;justify-content:space-between;align-items:center;gap:7px;flex-wrap:wrap; }
    .statusbar .p-hint { color:var(--app-dim);font-size:10px; }
    .table-empty { padding:32px;text-align:center;color:var(--app-dim);font-size:12px; }

    #guruJadwalPopupBody .guru-jadwal-wrap {
      position:relative;
      overflow-x:hidden;
      border-radius:0;
      -webkit-overflow-scrolling:touch;
    }
    #guruJadwalPopupBody .guru-jadwal-table {
      width:100%!important;
      min-width:0!important;
      border-collapse:separate!important;
      border-spacing:0!important;
      table-layout:fixed!important;
    }
    #guruJadwalPopupBody .guru-jadwal-table thead th {
      position:sticky!important;
      top:0!important;
      left:auto!important;
      right:auto!important;
      z-index:3!important;
      text-align:center!important;
      vertical-align:middle!important;
      width:auto!important;
      min-width:0!important;
      max-width:128px!important;
      box-shadow:none!important;
      background:var(--app-thead)!important;
      background-clip:padding-box!important;
    }
    #guruJadwalPopupBody .guru-jadwal-table thead th:nth-child(2) {
      position:sticky!important;
      left:auto!important;
      text-align:center!important;
      box-shadow:none!important;
    }
    #guruJadwalPopupBody .guru-jadwal-table .guru-jadwal-sticky {
      position:sticky!important;
      left:0!important;
      width:92px!important;
      min-width:92px!important;
      max-width:92px!important;
      text-align:center!important;
      z-index:4!important;
      background:var(--app-muted)!important;
      background-clip:padding-box!important;
      box-shadow:2px 0 5px rgba(15,23,42,0.08)!important;
    }
    #guruJadwalPopupBody .guru-jadwal-table thead .guru-jadwal-sticky {
      top:0!important;
      z-index:6!important;
      background:var(--app-thead)!important;
      width:92px!important;
      min-width:92px!important;
      max-width:92px!important;
      box-shadow:2px 0 5px rgba(15,23,42,0.08)!important;
    }
    @media(max-width:700px) {
      #guruJadwalPopupBody .guru-jadwal-wrap {
        overflow-x:auto;
      }
      #guruJadwalPopupBody .guru-jadwal-table {
        width:max-content!important;
        min-width:860px!important;
      }
      #guruJadwalPopupBody .guru-jadwal-table thead th {
        width:128px!important;
        min-width:128px!important;
        max-width:128px!important;
      }
      #guruJadwalPopupBody .guru-jadwal-table .guru-jadwal-sticky,
      #guruJadwalPopupBody .guru-jadwal-table thead .guru-jadwal-sticky {
        width:96px!important;
        min-width:96px!important;
        max-width:96px!important;
      }
    }

    .jadwal-mingguan-wrap {
      overflow-x:hidden;
      border-radius:12px;
      border:1px solid var(--app-border);
      box-shadow:0 2px 10px rgba(0,0,0,0.06);
      -webkit-overflow-scrolling:touch;
    }
    .jadwal-mingguan-table {
      width:100%;
      min-width:0!important;
      border-collapse:collapse;
      table-layout:fixed;
      font-size:12px;
      background:var(--app-card);
    }
    .jadwal-mingguan-table thead th {
      position:sticky;
      top:0;
      z-index:4;
      padding:11px 10px;
      border-bottom:2px solid var(--app-border);
      border-right:1px solid var(--app-border);
      background:var(--app-thead);
      color:var(--app-dim);
      font-size:10px;
      font-weight:800;
      letter-spacing:.07em;
      text-align:center!important;
      text-transform:uppercase;
      white-space:nowrap;
    }
    .jadwal-mingguan-table thead th:not(.jm-sticky-jam) {
      left:auto!important;
      right:auto!important;
      width:auto!important;
      min-width:0!important;
      max-width:none!important;
      box-shadow:none!important;
    }
    .jadwal-mingguan-table .jm-sticky-jam,
    .jadwal-mingguan-table tbody td:first-child {
      position:sticky!important;
      left:0!important;
      width:92px!important;
      min-width:92px!important;
      max-width:92px!important;
      z-index:3;
      background:var(--app-thead)!important;
      background-clip:padding-box;
      text-align:center!important;
      box-shadow:2px 0 4px rgba(0,0,0,0.08);
    }
    .jadwal-mingguan-table thead .jm-sticky-jam {
      z-index:6;
      box-shadow:none;
    }
    .jadwal-mingguan-table tbody td {
      height:66px;
      padding:10px 8px;
      border-bottom:1px solid var(--app-border);
      border-right:1px solid var(--app-border);
      text-align:center;
      vertical-align:middle;
      background:var(--app-card);
    }
    .jadwal-mingguan-table tbody td:first-child {
      white-space:normal!important;
      overflow:visible!important;
    }
    .jadwal-mingguan-table .jm-jam-title,
    .jadwal-mingguan-table tbody td:first-child > br {
      display:block;
    }
    .jadwal-mingguan-table .jm-jam-title {
      font-size:12px;
      font-weight:900;
      color:var(--app-text);
      line-height:1.25;
      white-space:nowrap;
    }
    .jadwal-mingguan-table .jm-jam-time {
      display:block;
      margin-top:5px;
      font-size:10px;
      font-weight:700;
      color:var(--app-dim);
      line-height:1.2;
      white-space:nowrap;
    }
    @media(max-width:700px) {
      #jadwalMingguanModalOverlay .guru-modal {
        padding:20px 14px 18px!important;
      }
      .jadwal-mingguan-wrap {
        overflow-x:auto;
      }
      .jadwal-mingguan-table {
        width:max-content!important;
        min-width:760px!important;
      }
      .jadwal-mingguan-table thead th:nth-child(1),
      .jadwal-mingguan-table .jm-sticky-jam,
      .jadwal-mingguan-table tbody td:first-child {
        width:112px!important;
        min-width:112px!important;
        max-width:112px!important;
      }
      .jadwal-mingguan-table thead th:nth-child(2) {
        width:104px!important;
        min-width:104px!important;
        max-width:104px!important;
        left:auto!important;
      }
    }

    /* Jadwal SD mengikuti format tabel harian SD */
    .jadwal-sd-table {
      width:100%!important;
      min-width:980px!important;
      border-collapse:collapse;
      table-layout:fixed!important;
      background:#fff;
      color:#111827;
      font-family:'Plus Jakarta Sans',sans-serif;
    }
    .jadwal-sd-table th {
      background:#f6d56a;
      color:#111827;
      border:1px solid #1f2937;
      padding:7px 8px;
      font-size:12px;
      font-weight:900;
      text-align:center;
      text-transform:uppercase;
    }
    .jadwal-sd-table td {
      border:1px solid #1f2937;
      padding:7px 8px;
      text-align:center;
      vertical-align:middle;
      background:#fff;
    }
    .jadwal-sd-table .sd-no { width:48px!important;min-width:48px!important;max-width:48px!important;box-sizing:border-box;font-weight:800;font-size:12px; }
    .jadwal-sd-table .sd-time { width:106px!important;min-width:106px!important;max-width:106px!important;box-sizing:border-box;font-weight:700;font-size:11px;white-space:nowrap; }
    #manualJadwalTable thead th,
    #jadwalKelasTable thead th,
    .jadwal-sd-table thead th {
      text-align:center!important;
      vertical-align:middle;
      position:sticky;
      top:0;
      z-index:5;
      background:var(--app-thead);
      background-clip:padding-box;
    }
    #manualJadwalTable thead th:not(.jadwal-sticky-jam):not(.sd-no):not(.sd-time),
    #jadwalKelasTable thead th:not(.jadwal-sticky-jam):not(.jadwal-sticky-time):not(.sd-no):not(.sd-time),
    .jadwal-sd-table thead th:not(.sd-no):not(.sd-time) {
      left:auto!important;
      right:auto!important;
      width:auto!important;
      min-width:90px!important;
      max-width:none!important;
      z-index:5!important;
      box-shadow:none!important;
      text-align:center!important;
    }
    #manualJadwalTable .jadwal-sticky-jam,
    #jadwalKelasTable .jadwal-sticky-jam,
    .jadwal-sd-table .sd-no {
      position:sticky!important;
      left:0;
      z-index:2;
      background:var(--app-thead);
      background-clip:padding-box;
    }
    #jadwalKelasTable .jadwal-sticky-time,
    .jadwal-sd-table .sd-time {
      position:sticky!important;
      left:48px!important;
      z-index:4!important;
      background:var(--app-thead);
      background-clip:padding-box;
    }
    #jadwalKelasTable .jadwal-sticky-jam { min-width:48px!important;width:48px!important;max-width:48px!important;box-sizing:border-box; }
    #jadwalKelasTable .jadwal-sticky-time { min-width:96px!important;width:96px!important;max-width:96px!important;left:48px!important;box-sizing:border-box; }
    #manualJadwalTable .jadwal-sticky-jam { min-width:75px!important;width:75px!important;max-width:75px!important;box-sizing:border-box; }
    #manualJadwalTable tbody .jadwal-sticky-jam,
    #jadwalKelasTable tbody .jadwal-sticky-jam,
    #jadwalKelasTable tbody .jadwal-sticky-time,
    .jadwal-sd-table tbody .sd-no,
    .jadwal-sd-table tbody .sd-time {
      box-shadow:2px 0 4px rgba(0,0,0,0.08);
    }
    .jadwal-sd-table thead .sd-no,
    .jadwal-sd-table thead .sd-time,
    #manualJadwalTable thead .jadwal-sticky-jam,
    #jadwalKelasTable thead .jadwal-sticky-jam,
    #jadwalKelasTable thead .jadwal-sticky-time {
      z-index:12!important;
      box-shadow:none;
    }
    .jadwal-sd-table tbody .sd-no,
    .jadwal-sd-table tbody .sd-time {
      background:#f3f4f6;
    }
    .jadwal-sd-table .sd-main-label {
      font-size:13px;
      line-height:1.24;
      font-weight:800;
      text-transform:uppercase;
      color:#111827;
    }
    .jadwal-sd-table .sd-jelajah-label {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      flex-wrap:wrap;
      letter-spacing:0;
    }
    .jadwal-sd-table .sd-jelajah-emoji {
      display:inline-flex;
      align-items:center;
      gap:3px;
      font-size:15px;
      line-height:1;
    }
    .jadwal-sd-table .sd-jelajah-emoji span {
      display:inline-block;
      line-height:1;
    }
    .jadwal-sd-table .sd-sub-label {
      margin-top:8px;
      font-size:10.5px;
      line-height:1.25;
      font-weight:600;
      color:#1f2937;
      text-transform:none;
    }
    .jadwal-sd-table .sd-merged,
    .jadwal-sd-table .sd-fixed-row .sd-no,
    .jadwal-sd-table .sd-fixed-row .sd-time {
      background:#f3f4f6;
    }
    .jadwal-sd-table .sd-fixed-cell { background:#fff;min-height:68px; }
    .jadwal-sd-table .sd-edit-cell {
      min-height:58px;
      cursor:pointer;
      transition:background .15s, box-shadow .15s;
    }
    .jadwal-sd-table .sd-edit-cell.empty { background:#fff; }
    .jadwal-sd-table .sd-edit-cell.filled { background:#fbfff8; }
    .jadwal-sd-table .sd-edit-cell:hover {
      background:#f0f9ff;
      box-shadow:inset 0 0 0 2px rgba(2,132,199,.22);
    }
    .jadwal-rekap-wrap {
      width:100%;
      overflow-x:auto;
      overflow-y:visible;
      border:1px solid var(--app-border);
      border-radius:8px;
      background:var(--app-card);
      max-height:none;
    }
    .jadwal-rekap-table {
      border-collapse:collapse;
      width:max-content;
      min-width:100%;
      table-layout:auto;
      font-family:'Plus Jakarta Sans', sans-serif;
      font-size:11px;
      color:var(--app-text);
      background:var(--app-card);
    }
    .jadwal-rekap-table th,
    .jadwal-rekap-table td {
      border:1px solid var(--app-border);
      padding:3px 6px;
      height:22px;
      min-height:22px;
      line-height:1.12;
      text-align:left;
      vertical-align:middle;
      white-space:nowrap;
      overflow-wrap:normal;
      word-break:normal;
    }
    .jadwal-rekap-table th {
      background:var(--app-thead);
      font-weight:800;
    }
    .jadwal-rekap-table .jr-freeze-left {
      position:sticky;
      left:0;
      z-index:3;
      background:var(--app-card);
      box-shadow:2px 0 4px rgba(0,0,0,0.08);
    }
    .jadwal-rekap-table .jr-time,
    .jadwal-rekap-table .jr-day {
      white-space:nowrap;
      font-weight:700;
    }
    .jadwal-rekap-table .jr-day,
    .jadwal-rekap-table .jr-class,
    .jadwal-rekap-table .jr-teacher-header {
      background:var(--app-thead);
      color:var(--app-text);
      text-transform:uppercase;
    }
    .jadwal-rekap-table .jr-day.jr-freeze-left {
      background:var(--app-thead);
      z-index:4;
    }
    .jadwal-rekap-table .jr-empty {
      color:#9ca3af;
    }
    .jadwal-sd-table .sd-empty-mark {
      font-size:15px;
      font-weight:800;
      color:#94a3b8;
    }
    .jadwal-sd-table .sd-non-kbm-cell {
      cursor:default;
      background:#f1f5f9;
      color:#64748b;
      box-shadow:inset 0 0 0 999px rgba(15,23,42,.035);
    }
    .jadwal-sd-table .sd-non-kbm-label {
      font-size:14px;
      line-height:1.25;
      font-weight:900;
      letter-spacing:0;
      color:#64748b;
    }
    #jadwalView[data-theme="dark"] .jadwal-sd-table {
      background:#101827;
      color:#e2e8f0;
    }
    #jadwalView[data-theme="dark"] .jadwal-sd-table th {
      background:#5f4f18;
      color:#fff7d6;
      border-color:rgba(255,255,255,0.22);
    }
    #jadwalView[data-theme="dark"] .jadwal-sd-table td {
      background:#172033;
      color:#e2e8f0;
      border-color:rgba(255,255,255,0.18);
    }
    #jadwalView[data-theme="dark"] .jadwal-sd-table .sd-main-label {
      color:#f8fafc;
    }
    #jadwalView[data-theme="dark"] .jadwal-sd-table .sd-sub-label {
      color:#cbd5e1;
    }
    #jadwalView[data-theme="dark"] .jadwal-sd-table .sd-merged,
    #jadwalView[data-theme="dark"] .jadwal-sd-table .sd-fixed-row .sd-no,
    #jadwalView[data-theme="dark"] .jadwal-sd-table .sd-fixed-row .sd-time {
      background:#1f2937;
    }
    #jadwalView[data-theme="dark"] .jadwal-sd-table .sd-fixed-cell {
      background:#172033;
    }
    #jadwalView[data-theme="dark"] .jadwal-sd-table .sd-edit-cell.empty {
      background:#152033;
    }
    #jadwalView[data-theme="dark"] .jadwal-sd-table .sd-edit-cell.filled {
      background:#102a22;
    }
    #jadwalView[data-theme="dark"] .jadwal-sd-table .sd-edit-cell:hover {
      background:#12324a;
      box-shadow:inset 0 0 0 2px rgba(56,189,248,.35);
    }
    #jadwalView[data-theme="dark"] .jadwal-sd-table .sd-empty-mark {
      color:#94a3b8;
    }
    #jadwalView[data-theme="dark"] .jadwal-sd-table .sd-non-kbm-cell {
      background:#111827;
      color:#94a3b8;
      box-shadow:inset 0 0 0 999px rgba(148,163,184,.04);
    }
    #jadwalView[data-theme="dark"] .jadwal-sd-table .sd-non-kbm-label {
      color:#94a3b8;
    }

    .p-right { padding:14px;display:flex;flex-direction:column;gap:12px;position:sticky;top:68px;height:fit-content; }
    .input-panel { opacity:0.5;transition:opacity .3s ease; }
    .input-panel.active { opacity:1; }

    .grade-buttons { display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px; }
    .grade-btn { cursor:pointer;padding:10px 5px;border:1px solid var(--app-border);border-radius:9px;background:var(--app-muted);font-weight:800;text-align:center;transition:.2s;font-size:13px;color:var(--app-text);-webkit-tap-highlight-color:transparent;touch-action:manipulation; }
    .grade-btn:hover { transform:translateY(-1px);box-shadow:0 5px 12px rgba(22,163,74,0.15);border-color:var(--app-accent);color:var(--app-accent); }
    .grade-btn.disabled { opacity:0.3;cursor:not-allowed;pointer-events:none; }

    .current-student { height:94px;padding:11px;background:var(--app-muted);border-radius:9px;border:1px solid var(--app-border);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;overflow:hidden; }
    .s-name { font-size:14px;font-weight:700;color:var(--app-text);margin-bottom:4px;line-height:1.35;min-height:2.7em;max-height:2.7em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word; }
    .s-info { font-size:11px;color:var(--app-dim);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .comp-info { padding:8px;background:var(--app-muted);border-radius:7px;text-align:center;font-weight:700;border:1px solid var(--app-border);color:var(--app-text);font-size:11px; }
    .comp-info.active { border-color:var(--app-blue);background:var(--app-sel);color:var(--app-blue); }

    .prestasi-wrap { display:flex;flex-direction:column;gap:7px; }
    .prestasi-wrap label { font-size:11px;color:var(--app-dim);font-weight:600; }
    .prestasi-input { width:100%;padding:9px 10px;font-size:20px;font-weight:800;border:1px solid var(--app-border);border-radius:9px;background:var(--app-muted);color:var(--app-text);text-align:center;-webkit-appearance:none;appearance:none;outline:none; }
    .prestasi-input:focus { border-color:var(--app-blue);box-shadow:var(--app-ring); }
    .catatan-wrap { display:flex;flex-direction:column;gap:7px; }
    .catatan-wrap label { font-size:11px;color:var(--app-dim);font-weight:600;display:flex;justify-content:space-between;align-items:center; }
    .catatan-area { width:100%;padding:9px 10px;font-size:11px;line-height:1.5;border:1px solid var(--app-border);border-radius:9px;background:var(--app-muted);color:var(--app-text);resize:vertical;min-height:80px;max-height:160px;outline:none;font-family:inherit; }
    .catatan-area:focus { border-color:var(--app-blue);box-shadow:var(--app-ring); }
    .quick-actions { display:flex;flex-direction:column;gap:5px; }
    .ctx-summary { padding:9px 11px;background:var(--app-muted);border:1px solid var(--app-border);border-radius:10px;display:flex;flex-direction:column;gap:4px; }
    .sum-row { display:flex;justify-content:space-between;align-items:center;font-size:11px; }
    .sum-lbl { color:var(--app-dim);font-weight:600; }
    .sum-val { font-weight:700;color:var(--app-text);text-align:right;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
    .sum-val.missing { color:var(--app-danger);font-style:italic; }

    .offline-ov { display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;background:rgba(220,38,38,0.08);border:2px dashed #ef4444;border-radius:10px;text-align:center; }
    .offline-ov.visible { display:flex; }
    .offline-ov .ico { font-size:28px; }
    .offline-ov p { margin:0;font-size:11px;font-weight:600;color:#dc2626; }

    .panduan-panel { background:var(--app-card);border:2px solid var(--app-text);border-radius:10px;overflow:hidden; display:block; }
    .p-tbl { width:100%;border-collapse:collapse;table-layout:fixed; }
    .p-tbl thead th { position:static;padding:4px 2px;font-size:8.5px;font-weight:800;text-align:center;color:var(--app-dim);background:var(--app-thead);border-bottom:2px solid var(--app-text);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden; }
    .p-tbl thead th:first-child { width:18px; }
    .p-tbl thead th:nth-child(2) { width:auto;min-width:80px;text-align:center; }
    .p-tbl thead th:not(:first-child) { border-left:1px solid rgba(0,0,0,0.15); }
    .p-tbl thead th.col-grade { width:28px;min-width:24px; }
    .p-tbl thead th.col-catatan { width:70px;min-width:55px; }
    .p-tbl tbody tr { border-bottom:1px solid var(--app-border); }
    .p-tbl tbody tr:last-child { border-bottom:none; }
    .p-tbl tbody tr:nth-child(even) { background:var(--app-muted); }
    .p-tbl tbody td { padding:4px 2px;font-size:11px;font-weight:800;text-align:center;color:var(--app-text);height:auto;border-top:none;white-space:nowrap;overflow:hidden; }
    .p-tbl tbody td:nth-child(2) { text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px; }
    .p-tbl tbody td.td-catatan { font-size:9.5px;font-weight:400;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .p-tbl tbody td:not(:first-child) { border-left:1px solid rgba(0,0,0,0.12); }
    .pt-no { font-weight:700;color:var(--app-dim)!important;font-size:9px!important;width:18px; }
    .pt-100{color:#ca8a04!important}.pt-95{color:#16a34a!important}.pt-90,.pt-85{color:#0284c7!important}.pt-80{color:#0ea5e9!important}.pt-75{color:#d97706!important}.pt-70{color:#dc2626!important}

    .floating-grades { position:fixed;bottom:0;left:0;right:0;z-index:1000;background:var(--app-card);border-top:1px solid var(--app-border);border-radius:16px 16px 0 0;padding:12px 12px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -4px 20px rgba(0,0,0,0.15);display:none;max-height:85vh;overflow-y:auto; }
    .floating-grades.visible { display:block; }
    .floating-grades .grade-buttons { grid-template-columns:repeat(3,1fr); }
    .float-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;min-height:38px; }
    #floatStudentName, #floatSumatifStudentName { line-height:1.3;min-height:34px;max-height:34px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word; }
    .float-close { background:none;border:none;color:var(--app-dim);cursor:pointer;font-size:22px;padding:0 4px;-webkit-tap-highlight-color:transparent;line-height:1; }
    .float-nav { display:flex;gap:6px;margin-top:10px; }
    .float-nav .p-btn { flex:1;text-align:center;padding:10px 6px;font-size:12px; }

    @media(max-width:990px) { #penilaianView{grid-template-columns:210px 1fr;gap:10px} .p-right{display:none} }

    /* ── TABLET LANDSCAPE (mis. Honor Pad X8b 11" 1920x1200, rasio layar 16:10):
       tetap pakai layout 3 kolom seperti laptop/desktop — panel Input Nilai
       tampil di kanan (.p-right), BUKAN floating panel di bawah.
       CATATAN: sebelumnya dibedakan dari HP landscape lewat max-aspect-ratio,
       tapi rasio yang terbaca browser tidak bisa diandalkan (address bar/
       toolbar memakan tinggi viewport secara berbeda-beda tergantung browser
       dan state-nya), jadi tablet tetap salah kedeteksi sebagai "HP" walau
       sudah dilonggarkan ke 2/1. Sekarang murni berdasar lebar + orientation
       landscape — rentang HP asli tetap ditangani terpisah lewat rule dense
       phone-landscape di bawah (gated max-height:600 + !important). ── */
    @media (orientation:landscape) and (min-width:701px) and (max-width:1400px) {
      #penilaianView { grid-template-columns:210px minmax(0,1fr) 270px; gap:12px; }
      .p-right { display:flex; }
    }

    /* ── MOBILE: ≤700px ── */
    @media(max-width:700px) {
      /* Layout */
      #penilaianView { grid-template-columns:1fr;margin:0;padding:0;gap:0;width:100%;max-width:100%;overflow-x:hidden; }
      .p-left  { order:1;border-radius:0;border-left:none;border-right:none;border-top:none;padding:12px 14px;gap:8px;width:100%;box-sizing:border-box; }
      .p-center{ order:2;border-radius:0;border:none;padding:12px 14px;padding-bottom:90px;width:100%;box-sizing:border-box; }
      .p-card  { border-radius:0;box-shadow:none;width:100%;box-sizing:border-box; }

      /* Page footer di penilaian: sembunyikan di mobile karena floating panel nutup */
      #penilaianView .page-footer { display:none; }

      /* Nav bar — padding sudah clamp() di base CSS */

      /* Sidebar kiri — lebih compact */
      .p-section { font-size:9.5px;margin:4px 0 2px; }
      .p-left .sb-user { padding:8px 10px; }

      /* Sistem picker — full width, tinggi tap-friendly */
      .sistem-picker { gap:6px; }
      .sistem-btn { padding:11px 4px;font-size:13px;border-radius:10px; }

      /* Kelas picker — rata, besar, mudah ditap */
      .kelas-picker { gap:5px; }
      .kelas-btn { padding:10px 2px;font-size:13px;border-radius:9px;min-width:0; }

      /* Select dropdown */
      .p-select { padding:10px 10px;font-size:13px;border-radius:10px; }

      /* Mata pelajaran */
      .subjects { max-height:none;gap:5px; }
      .subject-btn { padding:10px 12px;font-size:13px;border-radius:10px; }

      /* Aksi cepat — wrap dengan gap cukup */
      .toolbar { gap:6px; }
      .p-btn { padding:9px 12px;font-size:12px;border-radius:9px; }

      /* Context bar di center */
      .ctx-bar { padding:8px 10px;gap:5px;font-size:9.5px; }
      .ctx-chip { font-size:10px;padding:4px 8px; }
      .ctx-label { font-size:9px; }

      /* Component picker */
      .picker { gap:5px; }
      .picker .p-btn { padding:9px 10px;font-size:12px; }

      /* Tabel — horizontal scroll dengan sticky kolom No & Nama */
      .table-wrap {
        overflow-x:auto!important;
        overflow-y:visible!important;
        max-height:none!important;
        border:1px solid var(--app-border)!important;
        border-radius:10px!important;
        -webkit-overflow-scrolling:touch;
      }
      table { min-width:max-content;table-layout:auto; }
      thead th { padding:7px 3px;font-size:9.5px; }
      tbody td { padding:8px 3px;font-size:12px; }
      thead th:nth-child(1) { width:34px;min-width:34px; }
      thead th:nth-child(2) { width:120px;min-width:110px; }
      .td-no { width:34px;min-width:34px; }
      .td-name { width:120px;min-width:110px; }

      /* Status bar */
      .statusbar { flex-direction:column;align-items:flex-start;gap:4px; }

      /* Floating grade panel — lebih besar dan nyaman */
      .floating-grades { padding:14px 14px 20px;border-radius:20px 20px 0 0; }
      .float-header { margin-bottom:10px; }
      .grade-buttons { grid-template-columns:repeat(4,1fr);gap:6px; }
      .grade-btn { padding:13px 5px;font-size:14px;border-radius:10px; }

      /* Input prestasi di floating */
      #floatPrestasiInput { font-size:15px;padding:10px 12px; }
    }

    /* ── TINY PHONES: ≤380px ── */
    @media(max-width:380px) {
      .kelas-btn { font-size:12px;padding:9px 2px; }
      .sistem-btn { font-size:12px; }
      .grade-buttons { grid-template-columns:repeat(3,1fr); }
      .grade-btn { padding:12px 4px;font-size:13px; }
      table { min-width:300px; }
    }

    /* ── PENGATURAN MAPEL VIEW (admin only) ── */
    #pengaturanView { display:none;width:100%;max-width:100%;box-sizing:border-box;padding:16px 12px;flex-direction:column;gap:14px; }
    #pengaturanView.active { display:flex; }

    .peng-header { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:linear-gradient(135deg,rgba(2,132,199,0.1) 0%,rgba(14,165,233,0.06) 100%);border:1px solid rgba(2,132,199,0.2);border-radius:14px;flex-wrap:wrap; }
    .peng-title-row { display:flex;align-items:center;gap:10px; }
    .peng-icon { font-size:24px; }
    .peng-title { font-size:18px;font-weight:800;color:var(--app-text);letter-spacing:-0.3px; }
    .peng-subtitle { font-size:11px;color:var(--app-dim);font-weight:500;margin-top:2px; }

    .peng-grid { display:grid;grid-template-columns:minmax(300px,340px) 1fr;gap:16px;align-items:start; }
    @media(max-width:900px) { .peng-grid{grid-template-columns:minmax(260px,300px) 1fr;} }
    @media(max-width:768px) { .peng-grid{grid-template-columns:1fr;} }

    .guru-list-card { background:var(--app-card);border:1px solid var(--app-border);border-radius:14px;box-shadow:var(--app-shadow);overflow:hidden; }
    .guru-list-header { padding:12px 14px;border-bottom:1px solid var(--app-border);display:flex;align-items:center;justify-content:space-between;gap:10px; }
    .guru-list-header-title { font-size:11px;font-weight:700;color:var(--app-dim);text-transform:uppercase;letter-spacing:.07em; }
    .guru-list-actions { display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end; }
    .guru-group-select { max-width:160px;padding:5px 8px;border:1px solid var(--app-border);border-radius:7px;background:var(--app-muted);color:var(--app-text);font-size:10.5px;font-weight:700;outline:none;font-family:inherit; }
    .guru-group-select:focus { border-color:var(--app-blue);box-shadow:var(--app-ring); }
    .btn-add-guru { display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:5px 10px;border-radius:7px;cursor:pointer;border:1px solid var(--app-blue);background:rgba(2,132,199,0.08);color:var(--app-blue);transition:.2s;touch-action:manipulation; }
    .btn-add-guru:hover { background:rgba(2,132,199,0.15); }
    .guru-list { display:flex;flex-direction:column; }
    .guru-group-heading { display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px;background:var(--app-muted);border-bottom:1px solid var(--app-border);font-size:10px;font-weight:800;color:var(--app-dim);text-transform:uppercase;letter-spacing:.06em;cursor:pointer;user-select:none;transition:.15s; }
    .guru-group-heading:hover { background:var(--app-hover);color:var(--app-text); }
    .guru-group-heading:focus-visible { outline:2px solid var(--app-blue);outline-offset:-2px; }
    .guru-group-heading::after { content:"";height:1px;background:var(--app-border);flex:1; }
    .guru-group-caret { display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:6px;border:1px solid var(--app-border);background:var(--app-card);color:var(--app-dim);font-size:12px;font-weight:900;line-height:1;letter-spacing:0; }
    .guru-group-heading.open .guru-group-caret { border-color:rgba(2,132,199,0.35);background:rgba(2,132,199,0.08);color:var(--app-blue); }
    .guru-group-title { white-space:nowrap; }
    .guru-group-heading .guru-group-count { padding:2px 7px;border-radius:999px;background:var(--app-chip);font-size:9px;letter-spacing:0;color:var(--app-dim); }
    .guru-group-body { display:flex;flex-direction:column; }
    .guru-group-body.collapsed { display:none; }
    .guru-group-empty { padding:12px 14px;border-bottom:1px solid var(--app-border);font-size:11px;color:var(--app-dim);font-style:italic; }
    .guru-item { display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--app-border);transition:.2s; }
    .guru-item:last-child { border-bottom:none; }
    .guru-item:hover { background:var(--app-hover); }
    .guru-item.selected { background:var(--app-sel);border-left:3px solid var(--app-blue); }
    .guru-item-avatar { width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#6b7f5c,#a8b89a);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:white;flex-shrink:0; }
    .guru-item-info { flex:1;min-width:0;padding-right:4px; }
    .guru-item-name { font-size:12.5px;font-weight:700;color:var(--app-text);white-space:normal;overflow-wrap:break-word;word-break:break-word;line-height:1.35; }
    .guru-item-nkk { font-size:10px;color:var(--app-dim); }
    .guru-jenjang-actions { display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:6px; }
    .guru-jenjang-btn { border:1px solid var(--app-border);background:var(--app-card);color:var(--app-dim);border-radius:999px;padding:3px 8px;font-size:9px;font-weight:800;line-height:1;cursor:pointer;font-family:inherit;letter-spacing:.03em;transition:.15s; }
    .guru-jenjang-btn:hover { border-color:var(--app-blue);color:var(--app-blue);background:rgba(2,132,199,0.08); }
    .guru-jenjang-btn.active { border-color:rgba(22,163,74,0.45);background:rgba(22,163,74,0.12);color:#15803d; }
    .guru-item-count { font-size:10px;font-weight:700;padding:2px 7px;background:var(--app-chip);border-radius:999px;color:var(--app-dim);flex-shrink:0; }
    .guru-item.selected .guru-item-count { background:#bfdbfe;color:#1d4ed8; }
    .guru-item-del { background:none;border:none;cursor:pointer;color:var(--app-danger);font-size:15px;padding:3px 5px;border-radius:5px;opacity:0;transition:.2s;flex-shrink:0; }
    .guru-item:hover .guru-item-del { opacity:1; }
    .guru-item:hover .guru-item-edit { opacity:1 !important; }
    @media(max-width:700px) { .guru-list-header { align-items:flex-start;flex-direction:column; } .guru-list-actions { width:100%;justify-content:space-between; } .guru-group-select { flex:1;max-width:none; } .guru-item-del, .guru-item-edit { opacity:0.6 !important; } }

    .guru-modal-overlay { position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(10px) saturate(125%);-webkit-backdrop-filter:blur(10px) saturate(125%); }
    .guru-modal-overlay.hidden { display:none; }
    .guru-modal { background:var(--app-card);border:1px solid var(--app-border);border-radius:16px;padding:24px;max-width:400px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,0.3); }
    #guruModalOverlay { padding:clamp(10px,2.5vh,18px) 16px; }
    #guruModalOverlay .guru-modal {
      max-width:min(560px,calc(100vw - 32px));
      max-height:calc(100vh - clamp(20px,5vh,36px));
      max-height:calc(100dvh - clamp(20px,5vh,36px));
      display:flex;
      flex-direction:column;
      overflow:hidden;
      padding:0;
    }
    #guruModalOverlay .guru-modal-title {
      flex:0 0 auto;
      margin:0;
      padding:22px 24px 14px;
    }
    #guruModalOverlay #guruModalStatus {
      flex:0 0 auto;
      margin:0 24px 12px !important;
    }
    #guruModalOverlay .guru-modal-scroll {
      flex:1 1 auto;
      min-height:0;
      overflow-y:auto;
      padding:0 24px 8px;
      -webkit-overflow-scrolling:touch;
    }
    #guruModalOverlay .guru-modal-actions {
      flex:0 0 auto;
      margin:0;
      padding:14px 24px calc(14px + env(safe-area-inset-bottom));
      background:var(--app-card);
      border-top:1px solid var(--app-border);
      box-shadow:0 -8px 18px rgba(15,23,42,0.06);
    }
    .guru-modal-title { font-size:15px;font-weight:800;color:var(--app-text);margin-bottom:16px; }
    .guru-modal-field { margin-bottom:12px; }
    .guru-modal-label { display:block;font-size:11px;font-weight:700;color:var(--app-dim);margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em; }
    .guru-modal-input { width:100%;padding:9px 12px;border:1px solid var(--app-border);border-radius:9px;background:var(--app-muted);color:var(--app-text);font-size:13px;font-weight:600;outline:none;font-family:inherit; }
    .guru-modal-input:focus { border-color:var(--app-blue);box-shadow:var(--app-ring); }
    .tf-surat-choice-row { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:start; }
    .tf-surat-search-wrap { position:relative;min-width:0; }
    .tf-surat-results { display:none;margin-top:6px;background:var(--app-card);border:1px solid var(--app-border);border-radius:8px;box-shadow:var(--app-shadow);max-height:220px;overflow-y:auto; }
    .tf-surat-result-item { width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border:0;border-bottom:1px solid var(--app-border);background:var(--app-card);color:var(--app-text);font-family:inherit;text-align:left;cursor:pointer;transition:.15s; }
    .tf-surat-result-item:hover, .tf-surat-result-item.selected { background:var(--app-hover); }
    .tf-surat-result-item:last-child { border-bottom:none; }
    .tf-surat-result-text { display:flex;flex-direction:column;gap:2px;min-width:0; }
    .tf-surat-result-name { font-size:12px;font-weight:800;color:var(--app-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .tf-surat-result-meta { font-size:10px;font-weight:700;color:var(--app-dim); }
    .tf-surat-result-action { flex-shrink:0;font-size:11px;font-weight:800;color:#16a34a;padding:4px 10px;border-radius:7px;border:1.5px solid rgba(22,163,74,0.3);background:rgba(22,163,74,0.07); }
    .tf-surat-result-empty { padding:12px;text-align:center;font-size:11px;font-weight:700;color:var(--app-dim);background:var(--app-card); }
    @media(max-width:560px){ .tf-surat-choice-row { grid-template-columns:1fr; } }
    .guru-modal-actions { display:flex;gap:8px;margin-top:16px; }
    .guru-modal-btn { flex:1;padding:10px;border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;border:1px solid var(--app-border);background:var(--app-muted);color:var(--app-text);transition:.2s;font-family:inherit; }
    .guru-modal-btn.primary { background:linear-gradient(135deg,#6b7f5c,#8b997c);border-color:transparent;color:white; }
    .guru-modal-btn:hover { opacity:0.9; }

    .live-kelas-jadwal-popup-overlay,
    .notif-panel-overlay.open,
    .pesan-panel-overlay.open,
    .panduan-pdf-overlay.open,
    #mjInputOverlay,
    #guruJadwalPopupOverlay,
    #tahfizOverrideMaqbulOverlay,
    #tahfizPaceOverlay {
      backdrop-filter:blur(10px) saturate(125%) !important;
      -webkit-backdrop-filter:blur(10px) saturate(125%) !important;
    }

    /* ── Rekap Tahfizh Table ── */
    .rekap-tbl { width:100%;border-collapse:collapse;font-size:11px;min-width:600px; }
    .rekap-tbl th { background:var(--app-thead);padding:7px 8px;font-weight:700;color:var(--app-dim);text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--app-border);white-space:nowrap;text-align:center;position:sticky;top:0;z-index:2; }
    .rekap-tbl th.col-nama { text-align:left;position:sticky;left:0;z-index:3;min-width:130px; }
    .rekap-tbl td { padding:6px 8px;border:1px solid var(--app-border);vertical-align:middle;text-align:center;white-space:nowrap; }
    .rekap-tbl td.col-nama { text-align:left;position:sticky;left:0;background:var(--app-card);z-index:1;font-weight:700;color:var(--app-text);min-width:130px; }
    .rekap-tbl td.col-no { color:var(--app-dim);font-size:10px;width:30px; }
    .rekap-tbl tr:hover td { background:var(--app-hover); }
    .rekap-tbl tr:hover td.col-nama { background:var(--app-hover); }
    .rekap-tbl td.rekap-cell { cursor:pointer;min-width:36px;font-weight:700;transition:.15s; }
    .rekap-tbl td.rekap-cell:hover { background:var(--app-sel);color:var(--app-blue); }
    .rekap-tbl td.rekap-cell.has-val { color:var(--app-accent); }
    .rekap-tbl td.rekap-sigma { font-weight:800;color:var(--app-blue);background:rgba(2,132,199,0.06); }
    .rekap-tbl td.rekap-nilai { font-weight:800; }
    .rekap-tbl td.rekap-predikat { font-weight:800;border-radius:4px;padding:4px 6px; }
    .rekap-tbl th.col-group { background:rgba(107,127,92,0.12);color:var(--app-accent); }
    .rekap-picker-val { cursor:pointer;padding:6px 4px;border-radius:6px;font-size:11px;font-weight:700;text-align:center;border:1px solid var(--app-border);background:var(--app-muted);color:var(--app-text);transition:.15s; }
    .rekap-picker-val:hover { background:var(--app-sel);border-color:var(--app-blue);color:var(--app-blue); }
    .rekap-picker-val.sel { background:var(--app-blue);color:#fff;border-color:var(--app-blue); }

    .mapel-assignment-card { background:var(--app-card);border:1px solid var(--app-border);border-radius:14px;box-shadow:var(--app-shadow);overflow:hidden; }
    .mapel-assign-header { padding:14px 16px;border-bottom:1px solid var(--app-border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px; }
    .mapel-assign-title { font-size:13px;font-weight:700;color:var(--app-text); }
    .mapel-assign-sub { font-size:10px;color:var(--app-dim);margin-top:2px; }
    .mapel-assign-actions { display:flex;gap:6px;flex-wrap:wrap; }
    .mapel-assign-btn { font-size:10px;font-weight:700;padding:5px 10px;border-radius:7px;cursor:pointer;border:1px solid var(--app-border);background:var(--app-muted);color:var(--app-dim);transition:.2s; }
    .mapel-assign-btn:hover { background:var(--app-chip); }
    .mapel-assign-btn.primary { border-color:var(--app-blue);color:var(--app-blue); }
    .mapel-assign-btn.danger { border-color:var(--app-danger);color:var(--app-danger); }

    .mapel-assign-body { padding:16px;max-height:60vh;overflow-y:auto; }
    .no-guru-selected { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 16px;gap:8px;color:var(--app-dim); }
    .no-guru-selected .big-icon { font-size:40px;opacity:0.4; }
    .no-guru-selected p { font-size:12px;font-weight:600; }

    .kelas-section { margin-bottom:18px; }
    .kelas-section-title { display:flex;align-items:center;gap:8px;margin-bottom:10px; }
    .kelas-badge { font-size:10px;font-weight:800;padding:3px 9px;border-radius:6px;background:linear-gradient(135deg,#6b7f5c,#8b997c);color:white;letter-spacing:.04em; }
    .kelas-section-line { flex:1;height:1px;background:var(--app-border); }

    .kelas-mapel-manage { margin-bottom:20px;background:var(--app-card);border:1px solid var(--app-border);border-radius:12px;overflow:hidden; }
    .kelas-mapel-manage-header { display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--app-thead);border-bottom:1px solid var(--app-border); }
    .kelas-mapel-manage-title { font-size:11px;font-weight:800;color:var(--app-text); }
    .btn-add-mapel { display:flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:4px 9px;border-radius:6px;cursor:pointer;border:1px solid var(--app-accent);background:rgba(22,163,74,0.08);color:var(--app-accent);transition:.2s; }
    .btn-add-mapel:hover { background:rgba(22,163,74,0.15); }
    .kelas-mapel-list { display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px; }
    .mapel-manage-chip { display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:8px;background:var(--app-muted);border:1.5px solid var(--app-border);color:var(--app-text); }
    .mapel-manage-del { background:none;border:none;cursor:pointer;color:var(--app-danger);font-size:13px;padding:0 0 0 2px;line-height:1;opacity:0.6;transition:.15s; }
    .mapel-manage-del:hover { opacity:1; }
    .mapel-empty { font-size:11px;color:var(--app-dim);font-style:italic;padding:4px 0; }

    .add-mapel-row { display:flex;gap:6px;align-items:center;padding:0 14px 10px; }
    .add-mapel-input { flex:1;padding:6px 10px;border:1px solid var(--app-border);border-radius:7px;font-size:12px;font-weight:600;background:var(--app-muted);color:var(--app-text);outline:none;font-family:inherit; }
    .add-mapel-input:focus { border-color:var(--app-blue);box-shadow:var(--app-ring); }
    .add-mapel-submit { padding:6px 12px;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;border:1px solid var(--app-blue);background:rgba(2,132,199,0.1);color:var(--app-blue);transition:.2s;font-family:inherit; }
    .add-mapel-submit:hover { background:rgba(2,132,199,0.18); }

    .mapel-assign-grid { display:flex;gap:6px;flex-wrap:wrap; }
    .mapel-assign-chip { display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:5px 11px;border-radius:8px;cursor:pointer;transition:all 0.18s;border:1.5px solid var(--app-border);background:var(--app-muted);color:var(--app-dim);user-select:none; }
    .mapel-assign-chip:hover { border-color:var(--app-blue);color:var(--app-blue);background:rgba(2,132,199,0.06); }
    .mapel-assign-chip.assigned { background:linear-gradient(135deg,rgba(107,127,92,0.15),rgba(139,153,124,0.1));border-color:#6b7f5c;color:#166534;font-weight:800; }
    #appShell[data-theme="dark"] .mapel-assign-chip.assigned { color:#4ade80;border-color:#22c55e; }
    .mapel-assign-chip .chip-dot { width:7px;height:7px;border-radius:50%;background:var(--app-border);flex-shrink:0;transition:.2s; }
    .mapel-assign-chip.assigned .chip-dot { background:#22c55e; }

    .peng-save-bar { display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--app-muted);border-top:1px solid var(--app-border);flex-wrap:wrap;gap:8px; }
    .peng-save-info { font-size:11px;color:var(--app-dim); }
    .peng-save-btn { display:flex;align-items:center;gap:6px;padding:9px 18px;background:linear-gradient(135deg,#6b7f5c,#8b997c);border:none;border-radius:9px;font-family:inherit;font-size:12px;font-weight:700;color:white;cursor:pointer;transition:.2s; }
    .peng-save-btn:hover { transform:translateY(-1px);box-shadow:0 6px 16px rgba(107,127,92,0.4); }
    .peng-save-spinner { width:14px;height:14px;border:2px solid rgba(255,255,255,0.3);border-top-color:white;border-radius:50%;display:none;animation:spin .7s linear infinite; }
    .peng-save-btn.loading .peng-save-spinner { display:block; }
    .peng-save-btn.loading .peng-save-label { display:none; }

    .access-badge { display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;padding:2px 7px;border-radius:999px; }
    .access-badge.admin { background:#fef3c7;color:#92400e;border:1px solid rgba(245,158,11,0.3); }
    .access-badge.guru { background:#e0f2fe;color:#0369a1;border:1px solid rgba(2,132,199,0.3); }

    /* ── LAPORAN VIEW (admin only) ── */
    #laporanView { display:none;width:100%;max-width:100%;box-sizing:border-box;padding:16px 12px;flex-direction:column;gap:14px; }
    #laporanView.active { display:flex; }
    /* Rekap FS table */
    .rfs-table-wrap { overflow-x:auto;-webkit-overflow-scrolling:touch;max-height:520px;overflow-y:auto;border-radius:10px;border:1px solid var(--app-border) }
    .rfs-table { width:100%;border-collapse:collapse;font-size:11px }
    .rfs-table thead th { position:sticky;top:0;z-index:3;background:var(--app-thead);border-bottom:1px solid var(--app-border);padding:7px 8px;font-size:9px;font-weight:800;color:var(--app-dim);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;text-align:center }
    .rfs-table thead th.th-sticky-no { position:sticky;left:0;z-index:4;background:var(--app-thead) }
    .rfs-table thead th.th-sticky-name { position:sticky;left:38px;z-index:4;background:var(--app-thead);text-align:left;padding-left:10px;min-width:160px }
    .rfs-table thead th.th-meta { background:var(--app-thead) }
    .rfs-table thead th.th-bulan { background:rgba(34,197,94,.07);color:var(--app-accent) }
    .rfs-table thead th.th-formatif { background:rgba(34,197,94,.15);color:var(--app-accent) }
    .rfs-table thead th.th-sumatif { background:rgba(168,85,247,.1);color:#a855f7 }
    .rfs-table thead th.th-akhir { background:rgba(245,158,11,.1);color:var(--app-warn) }
    .rfs-table thead th.th-final { background:rgba(239,68,68,.08);color:var(--app-danger) }
    .rfs-table tbody td { border-top:1px solid var(--app-border);padding:6px 8px;vertical-align:middle;text-align:center }
    .rfs-table tbody tr:hover { background:var(--app-hover) }
    .rfs-table tbody tr:hover .td-sticky-no,.rfs-table tbody tr:hover .td-sticky-name { background:var(--app-hover) }
    .rfs-table .td-sticky-no { position:sticky;left:0;z-index:2;background:var(--app-card);font-weight:700;color:var(--app-dim);font-size:11px;width:38px }
    .rfs-table .td-sticky-name { position:sticky;left:38px;z-index:2;background:var(--app-card);text-align:left;font-weight:600;padding-left:10px;white-space:nowrap }
    .rfs-table .td-bulan { font-weight:700 }
    .rfs-table .td-formatif { font-weight:800;color:var(--app-accent) }
    .rfs-table .td-sumatif { font-weight:800;color:#a855f7 }
    .rfs-table .td-akhir { font-weight:800;color:var(--app-warn) }
    .rfs-table .td-final { font-weight:900;font-size:12px }
    .rfs-table .td-grade { font-size:12px;font-weight:900 }
    .rfs-grade-A { color:var(--app-accent) }
    .rfs-grade-B { color:var(--app-blue) }
    .rfs-grade-C { color:var(--app-warn) }
    .rfs-grade-D { color:var(--app-danger) }
    .rfs-empty { color:var(--app-border);font-size:12px }
    .rfs-iv-input { width:58px;padding:3px 6px;text-align:center;background:var(--app-muted);border:1.5px solid var(--app-border);border-radius:6px;font-size:12px;font-weight:700;color:var(--app-text);font-family:inherit;outline:none }
    .rfs-iv-input:focus { border-color:var(--app-warn) }
    .rfs-foot { background:var(--app-muted);border-top:2px solid var(--app-border) }
    .rfs-table tfoot td { border-top:1px solid var(--app-border);padding:5px 8px;text-align:center;vertical-align:middle;font-size:11px }

    .laporan-header { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:linear-gradient(135deg,rgba(245,158,11,0.1) 0%,rgba(251,191,36,0.06) 100%);border:1px solid rgba(245,158,11,0.25);border-radius:14px;flex-wrap:wrap; }
    .laporan-title { font-size:18px;font-weight:800;color:var(--app-text);letter-spacing:-0.3px; }
    .laporan-subtitle { font-size:11px;color:var(--app-dim);font-weight:500;margin-top:2px; }

    .laporan-filters { background:var(--app-card);border:1px solid var(--app-border);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:14px; }
    .laporan-filter-row { display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end; }
    .laporan-filter-group { display:flex;flex-direction:column;gap:5px;min-width:140px;flex:1; }
    .laporan-filter-label { font-size:10px;font-weight:700;color:var(--app-dim);text-transform:uppercase;letter-spacing:.07em; }
    .laporan-select { width:100%;background:var(--app-muted);border:1px solid var(--app-border);border-radius:9px;padding:9px 10px;font-size:12px;font-weight:700;color:var(--app-text);cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:26px;font-family:inherit; }
    .laporan-select:focus { border-color:var(--app-blue);box-shadow:var(--app-ring); }
    .laporan-btn { display:flex;align-items:center;gap:6px;padding:10px 18px;border:none;border-radius:9px;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:.2s;touch-action:manipulation;white-space:nowrap; }
    .laporan-btn.primary { background:linear-gradient(135deg,#6b7f5c,#8b997c);color:white; }
    .laporan-btn.primary:hover { transform:translateY(-1px);box-shadow:0 6px 16px rgba(107,127,92,0.4); }
    .laporan-btn.export { background:var(--app-muted);color:var(--app-text);border:1px solid var(--app-border); }
    .laporan-btn.export:hover { background:var(--app-chip); }
    .laporan-btn.export:disabled { opacity:0.4;cursor:not-allowed;transform:none; }

    .laporan-result { background:var(--app-card);border:1px solid var(--app-border);border-radius:14px;overflow:hidden; }
    .laporan-result-header { padding:12px 16px;border-bottom:1px solid var(--app-border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px; }
    .laporan-result-title { font-size:13px;font-weight:700;color:var(--app-text); }
    .laporan-result-info { font-size:10px;color:var(--app-dim); }
    .laporan-table-wrap { overflow-x:auto;-webkit-overflow-scrolling:touch;max-height:480px;overflow-y:auto; }
    .laporan-table { width:100%;border-collapse:collapse;font-size:11px; }
    .laporan-table thead th { position:sticky;top:0;background:var(--app-thead);border-bottom:1px solid var(--app-border);padding:8px 10px;font-size:9px;font-weight:700;color:var(--app-dim);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;z-index:2; }
    .laporan-table tbody td { border-top:1px solid var(--app-border);padding:8px 10px;vertical-align:middle; }
    .laporan-table tbody tr:hover { background:var(--app-hover); }
    .laporan-empty { padding:40px;text-align:center;color:var(--app-dim);font-size:12px; }
    td.pp-interv { cursor:text;border:1.5px dashed #f9a8d4;min-width:80px; }
    td.pp-interv:focus { outline:2px solid #db2777;background:rgba(252,231,243,0.8)!important; }
    td.pp-interv:empty:before { content:'—';color:#f9a8d4;font-size:12px; }
    .laporan-spinner { display:flex;align-items:center;justify-content:center;padding:40px;gap:10px;color:var(--app-dim); }
    .lap-spin { width:20px;height:20px;border:2.5px solid var(--app-border);border-top-color:var(--app-blue);border-radius:50%;animation:spin .7s linear infinite; }

    .leger-bulan-toggle-row { display:flex;gap:14px;margin-bottom:6px;align-items:center; }
    .leger-radio-label { display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--app-text);cursor:pointer; }
    .leger-radio-label input[type="radio"] { accent-color:var(--app-primary);width:14px;height:14px;margin:0;cursor:pointer; }
    .leger-bulan-inputs { display:flex;flex-direction:column;gap:6px; }
    .leger-mapel-box { border:1px solid var(--app-border);border-radius:10px;background:var(--app-muted);padding:10px 12px;display:flex;flex-direction:column;gap:9px; }
    .leger-rank-hidden .leger-rank, .leger-rank-hidden .td-rank { display:none !important; }
    .leger-mapel-head { display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:10px;font-weight:800;color:var(--app-dim);letter-spacing:.06em;text-transform:uppercase; }
    .leger-mini-btn { border:1px solid var(--app-border);background:var(--app-card);color:var(--app-text);border-radius:7px;padding:5px 9px;font-family:inherit;font-size:10px;font-weight:800;cursor:pointer; }
    .leger-mini-btn:hover { border-color:var(--app-blue);color:var(--app-blue); }
    .leger-mapel-options { display:flex;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--app-dim); }
    .leger-mapel-chip { display:inline-flex;align-items:center;gap:6px;border:1px solid var(--app-border);background:var(--app-card);color:var(--app-text);border-radius:8px;padding:6px 9px;font-size:11px;font-weight:700;line-height:1; }
    .leger-mapel-chip input { width:14px;height:14px;margin:0;accent-color:var(--app-accent); }
    #legerResult .laporan-result + .laporan-result { margin-top:12px; }
    #legerResult .laporan-result { overflow:visible; border-radius:14px; }
    #legerResult .leger-multi-table-strip { display:flex;gap:12px;align-items:flex-start;overflow-x:auto;overflow-y:visible;padding-bottom:6px; }
    #legerResult .leger-multi-table-strip .laporan-result { flex:0 0 max-content;margin-top:0!important;min-width:min(980px, calc(100vw - 48px)); }
    .leger-print-header { display:none; }
    .leger-table-wrap { overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;max-height:none;border:1px solid var(--app-border);border-radius:10px;background:#fff; }
    .leger-table { border-collapse:separate;border-spacing:0;min-width:980px;width:max-content;font-size:12px;color:#000;background:#fff; }
    .leger-table th,.leger-table td { border:0;border-right:1px solid #000;border-bottom:1px solid #000;padding:4px 7px;text-align:center;vertical-align:middle;height:28px;color:#000; }
    .leger-table tr > :first-child { border-left:1px solid #000; }
    .leger-table thead tr:first-child > * { border-top:1px solid #000; }
    .leger-table thead th { position:sticky;top:0;z-index:4;background:#fff;font-weight:700;color:#000; }
    .leger-table .leger-no { width:44px;min-width:44px; }
    .leger-table .leger-name { width:330px;min-width:330px;text-align:left; }
    .leger-table .leger-mapel { width:64px;min-width:64px;background:#FFC000; }
    .leger-table .leger-summary { width:56px;min-width:56px;background:#00B0F0; }
    .leger-table .leger-rank { width:50px;min-width:50px;background:#FF0000;font-weight:800; }
    .leger-table .leger-vertical { writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;height:170px;margin:auto;font-weight:800;letter-spacing:0;text-transform:none; }
    .leger-table tbody td { background:#fff; }
    .leger-table .td-name { text-align:left;white-space:nowrap; }
    .leger-table .td-summary { background:#00B0F0; }
    .leger-table .td-rank { background:#FF0000;font-weight:900; }
    .leger-table .td-empty { color:#999; }
    .leger-table .leger-separator-row td { border:0 !important;background:#fff !important;height:22px; }
    .leger-table .leger-stat-first-row > * { border-top:1px solid #000; }
    .leger-table tfoot tr:not(.leger-separator-row) .td-name { border-left:1px solid #000; }
    .leger-table tfoot tr:not(.leger-separator-row) td:nth-last-child(2) { border-right:1px solid #000; }
    .leger-table .leger-stat-empty {
      border:0 !important;
      background:#fff !important;
      box-shadow:none !important;
    }
    .leger-table .td-rata2-label { font-weight:800;color:#000; }
    .leger-table tbody tr:hover td:not(.td-summary):not(.td-rank) { background:#fff; }
    .leger-table tbody tr:hover .td-summary { background:#00B0F0; }
    .leger-table tbody tr:hover .td-rank { background:#FF0000; }
    .leger-table .leger-focus-row td,
    .leger-table .leger-focus-row th {
      box-shadow: inset 0 0 0 9999px rgba(255,242,153,.34);
    }
    .leger-table .leger-focus-col {
      box-shadow: inset 0 0 0 9999px rgba(187,222,251,.36);
    }
    .leger-table .leger-focus-row .leger-focus-col {
      box-shadow: inset 0 0 0 9999px rgba(255,242,153,.24), inset 0 0 0 9999px rgba(187,222,251,.30);
    }
    .leger-table .leger-focus-cell {
      position:relative;
      z-index:6;
      box-shadow:
        inset 0 0 0 9999px rgba(255,255,255,.26),
        inset 0 0 0 2px #111827,
        0 0 0 1px #111827 !important;
    }
    .leger-table thead .leger-focus-cell,
    .leger-table .leger-sticky-no.leger-focus-cell,
    .leger-table .leger-sticky-name.leger-focus-cell { z-index:7; }
    .leger-table .leger-sticky-no { position:sticky;left:0;z-index:3;background:#fff; }
    .leger-table .leger-sticky-name { position:sticky;left:44px;z-index:3;background:#fff; }
    .leger-table thead .leger-sticky-no,.leger-table thead .leger-sticky-name { z-index:5; }

    .nt-table .nt-focus-row td,
    .nt-table .nt-focus-row th {
      box-shadow: inset 0 0 0 9999px rgba(255,242,153,.34);
    }
    .nt-table .nt-focus-col {
      box-shadow: inset 0 0 0 9999px rgba(187,222,251,.36);
    }
    .nt-table .nt-focus-row .nt-focus-col {
      box-shadow: inset 0 0 0 9999px rgba(255,242,153,.24), inset 0 0 0 9999px rgba(187,222,251,.30);
    }
    .nt-table .nt-focus-cell {
      position:relative;
      z-index:9;
      box-shadow:
        inset 0 0 0 9999px rgba(255,255,255,.26),
        inset 0 0 0 2px #111827,
        0 0 0 1px #111827 !important;
    }
    .nt-table thead .nt-focus-cell { z-index:11; }
    #nilaiTahfizhResult .nt-table,
    #nilaiTahfizhResult .nt-table th,
    #nilaiTahfizhResult .nt-table td {
      color:#111827 !important;
    }
    #nilaiTahfizhResult .nt-juz-lulus-input {
      width:100%;
      min-width:38px;
      height:22px;
      box-sizing:border-box;
      border:1px solid rgba(71,85,105,.42);
      border-radius:4px;
      background:#fff;
      color:#111827;
      font-family:inherit;
      font-size:10px;
      font-weight:800;
      line-height:1;
      text-align:center;
      outline:none;
      padding:1px 2px;
    }
    #nilaiTahfizhResult .nt-juz-lulus-input:focus {
      border-color:#0ea5e9;
      box-shadow:0 0 0 2px rgba(14,165,233,.22);
    }
    #nilaiTahfizhResult .nt-juz-lulus-input-manual {
      background:#eff6ff;
      border-color:#0284c7;
    }

    @media (min-width:1024px) {
      .leger-table-wrap {
        max-height:calc(100dvh - 260px);
        overflow:auto;
        overflow-x:auto;
        overflow-y:auto;
      }
      .leger-table {
        width:100%;
        min-width:700px;
        table-layout:fixed;
        font-size:11px;
      }
      .leger-table th,.leger-table td { padding:3px 4px;height:25px; }
      .leger-table .leger-no,
      .leger-table .leger-sticky-no { width:34px;min-width:34px; }
      .leger-table .leger-name,
      .leger-table .leger-sticky-name { width:190px;min-width:190px; }
      .leger-table .leger-sticky-name { left:34px; }
      .leger-table .leger-mapel { width:clamp(34px, 3.15vw, 46px);min-width:34px; }
      .leger-table .leger-summary { width:42px;min-width:42px; }
      .leger-table .leger-rank { width:40px;min-width:40px; }
      .leger-table .leger-vertical { height:128px;font-size:10px; }
      .leger-table .td-name { overflow:hidden;text-overflow:ellipsis;max-width:190px; }
    }

    .page-footer { text-align:center;padding:18px 16px 20px;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--app-dim);border-top:1px solid var(--app-border);line-height:1.7; }
    .page-footer strong { font-weight:700;letter-spacing:.06em;text-transform:uppercase; }
    .page-footer span { display:block;font-size:10.5px;letter-spacing:.03em; }

    /* Loading overlay for pengaturan */
    .peng-loading { display:flex;align-items:center;justify-content:center;gap:10px;padding:48px 16px;color:var(--app-dim);font-size:12px;font-weight:600; }
    .peng-load-spin { width:18px;height:18px;border:2.5px solid var(--app-border);border-top-color:var(--app-blue);border-radius:50%;animation:spin .7s linear infinite; }

    /* ── SAVE TOAST ── */
    #saveToast {
      position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120%);
      z-index:99999;
      display:flex;align-items:center;gap:10px;
      background:linear-gradient(135deg,rgba(22,101,52,0.56),rgba(15,23,42,0.48));
      color:#fff;
      padding:12px 22px;
      border-radius:999px;
      font-size:13px;font-weight:700;
      box-shadow:0 18px 45px rgba(0,0,0,0.34),0 6px 18px rgba(22,101,52,0.28),inset 0 1px 0 rgba(255,255,255,0.22),inset 0 -1px 0 rgba(255,255,255,0.08);
      border:1px solid rgba(34,197,94,0.72);
      white-space:nowrap;
      pointer-events:none;
      transition:transform 0.38s cubic-bezier(0.34,1.56,0.64,1),opacity 0.3s ease;
      opacity:0;
      overflow:hidden;
      backdrop-filter:blur(22px) saturate(180%);
      -webkit-backdrop-filter:blur(22px) saturate(180%);
    }
    #saveToast::before {
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(180deg,rgba(255,255,255,0.18),rgba(255,255,255,0.03) 46%,rgba(255,255,255,0));
      pointer-events:none;
    }
    #saveToast > * { position:relative;z-index:1; }
    #saveToast.show {
      transform:translateX(-50%) translateY(0);
      opacity:1;
    }
    #saveToast.hide {
      transform:translateX(-50%) translateY(120%);
      opacity:0;
    }
    body.toast-avoid-floating #saveToast,
    body:has(.floating-grades.visible) #saveToast {
      bottom:max(var(--toast-floating-offset,112px),calc(24px + var(--device-safe-bottom)));
    }
    body.toast-avoid-floating #saveToast.hide,
    body:has(.floating-grades.visible) #saveToast.hide {
      transform:translateX(-50%) translateY(120%);
    }
    .toast-check { width:20px;height:20px;border-radius:50%;background:#22c55e;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
    .toast-check svg { width:12px;height:12px; }
    .toast-bar { position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 0 999px 999px;width:100%;transform-origin:left;animation:none; }
    @keyframes toastProgress { from{transform:scaleX(1)} to{transform:scaleX(0)} }
    #saveToast.show .toast-bar { animation:toastProgress 2.2s linear forwards; }
    /* ══════════════════════════════════════════════
       DEVICE DETECTION & ANDROID APK RESPONSIVE
       ══════════════════════════════════════════════ */

    /* ── CSS Variables untuk device sizing ── */
    :root {
      --device-nav-height: 56px;
      --device-font-base: 13px;
      --device-padding-h: 12px;
      --device-padding-v: 14px;
      --device-btn-min-h: 44px; /* min tap target */
      --device-input-font: 15px;
      --device-input-pad: 13px 14px 13px 44px;
      --device-safe-bottom: env(safe-area-inset-bottom, 0px);
      --device-safe-top: env(safe-area-inset-top, 0px);
      --device-safe-left: env(safe-area-inset-left, 0px);
      --device-safe-right: env(safe-area-inset-right, 0px);
    }

    /* ── Tablet (768px - 1100px) ── */
    @media (min-width:768px) and (max-width:1100px) {
      :root {
        --device-nav-height: 56px;
        --device-font-base: 13px;
        --device-padding-h: 14px;
        --device-btn-min-h: 44px;
      }
    }

    /* ── Phone Besar (480px - 767px) ── */
    @media (max-width:767px) {
      :root {
        --device-nav-height: 54px;
        --device-font-base: 13px;
        --device-padding-h: 10px;
        --device-padding-v: 12px;
        --device-btn-min-h: 44px;
        --device-input-font: 16px; /* prevent zoom on iOS/Android */
      }
    }

    /* ── HP Sedang (360px - 479px) ── */
    @media (max-width:479px) {
      :root {
        --device-nav-height: 52px;
        --device-font-base: 12.5px;
        --device-padding-h: 10px;
        --device-padding-v: 10px;
        --device-btn-min-h: 46px; /* lebih besar untuk HP kecil */
        --device-input-font: 16px;
        --device-input-pad: 12px 12px 12px 42px;
      }
    }

    /* ── HP Kecil (≤359px, misal 320px) ── */
    @media (max-width:359px) {
      :root {
        --device-nav-height: 50px;
        --device-font-base: 12px;
        --device-padding-h: 8px;
        --device-padding-v: 9px;
        --device-btn-min-h: 46px;
        --device-input-font: 16px;
        --device-input-pad: 11px 11px 11px 40px;
      }
    }

    /* ── Global: semua elemen ikuti variabel ── */
    html, body {
      font-size: var(--device-font-base) !important;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      overscroll-behavior: none;
      /* Padding safe area untuk notch/punch-hole Android */
      padding-top: var(--device-safe-top);
    }

    /* ── Navbar height responsive ── */
    .app-nav {
      /* Tinggi total = nav height + safe area top (notch) */
      height: calc(var(--device-nav-height) + var(--device-safe-top)) !important;
      padding-top: var(--device-safe-top);
      padding-left: var(--device-safe-left);
      padding-right: var(--device-safe-right);
    }
    #appShell { padding-top: calc(var(--device-nav-height) + var(--device-safe-top)) !important; }

    /* ── Floating panel safe area bottom ── */
    .floating-grades {
      padding-bottom: calc(12px + var(--device-safe-bottom)) !important;
    }

    /* ── Input font 16px mencegah auto-zoom Android/iOS ── */
    @media (max-width:767px) {
      .form-input, .prestasi-input, .catatan-area,
      .p-select, .laporan-select, .guru-modal-input,
      .add-mapel-input {
        font-size: 16px !important;
      }
    }

    /* ── Tombol tap target minimum 44×44dp (Android guideline) ── */
    @media (max-width:767px) {
      .btn-login, .nav-btn, .p-btn, .grade-btn,
      .sistem-btn, .kelas-btn, .subject-btn,
      .laporan-btn, .peng-save-btn, .float-nav .p-btn,
      .guru-item, .mapel-assign-chip {
        min-height: var(--device-btn-min-h) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
      }
      .menu-card {
        min-height: var(--device-btn-min-h) !important;
        align-items: center !important;
        justify-content: center !important;
      }
      /* Override untuk subject-btn agar justify jadi space-between */
      .subject-btn {
        justify-content: space-between !important;
      }
    }

    /* ── HP KECIL (≤359px): Layout tighter ── */
    @media (max-width:359px) {
      /* Login card */
      .login-card { padding: 24px 14px 20px !important; border-radius:18px !important; }
      .logo-icon { width:56px !important; height:56px !important; border-radius:16px !important; }
      .logo-icon svg { width:28px !important; height:28px !important; }
      .logo-title { font-size:16px !important; }
      .logo-org { font-size:11px !important; }
      /* Dashboard */
      .dashboard { padding:18px 12px !important; border-radius:18px !important; }
      .menu-card { padding:14px 8px !important; gap:6px !important; }
      .menu-icon { width:34px !important; height:34px !important; font-size:14px !important; border-radius:8px !important; }
      .menu-label { font-size:9.5px !important; }
      /* Navbar — ukuran diatur oleh clamp() di base CSS */
      /* App */
      .sistem-btn { font-size:11px !important; padding:10px 2px !important; }
      .kelas-btn { font-size:11px !important; padding:9px 1px !important; }
      .grade-btn { font-size:12px !important; padding:11px 3px !important; }
      .subject-btn { font-size:11px !important; }
      .ctx-chip { font-size:9.5px !important; }
      /* Tabel */
      table { min-width:280px !important; }
      thead th { font-size:8.5px !important; padding:6px 2px !important; }
      tbody td { font-size:11px !important; padding:7px 2px !important; }
    }

    /* ── HP SEDANG (360px - 479px): Optimasi ── */
    @media (min-width:360px) and (max-width:479px) {
      .login-card { padding:28px 16px 24px !important; }
      .logo-icon { width:64px !important; height:64px !important; }
      .menu-card { padding:16px 10px !important; }
    }

    /* ── Sembunyikan label navbar di HP kecil & sedang ── */
    @media (max-width:479px) {
      .fb-pill { display:none !important; }
    }

    /* ── Penyesuaian overlay untuk Android status bar ── */
    .overlay {
      padding-top: max(24px, calc(16px + var(--device-safe-top))) !important;
    }

    /* ── Grade buttons 4 kolom di HP besar, 3 di HP kecil ── */
    @media (min-width:360px) and (max-width:767px) {
      .floating-grades .grade-buttons { grid-template-columns: repeat(4,1fr) !important; }
    }
    @media (max-width:359px) {
      .floating-grades .grade-buttons { grid-template-columns: repeat(3,1fr) !important; }
    }

    /* ── Toast positioning dengan safe area ── */
    #saveToast {
      bottom: calc(24px + var(--device-safe-bottom)) !important;
    }

    /* ── Scroll momentum di Android WebView ── */
    .table-wrap, .subjects, .mapel-assign-body,
    .laporan-table-wrap, .floating-grades {
      -webkit-overflow-scrolling: touch;
    }

    /* ── Landscape mode adjustments ── */
    @media (max-height:500px) and (orientation:landscape) {
      .overlay { padding-top:8px !important; padding-bottom:8px !important; }
      .login-card { padding:16px 20px !important; }
      .logo-icon { width:48px !important; height:48px !important; margin-bottom:10px !important; }
      .logo-wrap { margin-bottom:16px !important; }
      .dash-header { margin-bottom:12px !important; }
      .menu-grid { grid-template-columns: 1fr 1fr 1fr 1fr !important; }
      .floating-grades { max-height:80vh !important; }
      .app-nav { height:46px !important; }
      #appShell { padding-top:46px !important; }
      .grade-deadline-warning { top:calc(46px + var(--device-safe-top,0px) - 1px) !important; }
    }

    /* Landscape Android: show full navbar when height is enough (not cramped) */
    @media (min-width:600px) and (min-height:601px) and (orientation:landscape) {
      .nav-btn .nav-label { display:inline !important; }
      .nav-btn { padding:0 10px !important; justify-content:flex-start !important; min-width:unset !important; }
      .nav-btn svg { width:15px !important; height:15px !important; }
      .app-nav-badge { display:flex !important; }
      .nav-clock { display:flex !important; }
      .fb-pill { display:flex !important; }
    }

    /* Phone landscape: 19.5:9 Android screens need a denser work surface.
       min-aspect-ratio:2/1 + max-height:600px memastikan hanya HP ramping
       (bukan tablet lebar seperti Honor Pad X8b, 1920x1200 / rasio 16:10)
       yang kena rule ini. !important di sini sengaja menimpa blok TABLET
       LANDSCAPE di atas untuk kasus HP yang kebetulan match rentang lebar
       yang sama. */
    @media (max-width:1100px) and (max-height:600px) and (orientation:landscape) and (min-aspect-ratio:2/1) {
      :root { --device-nav-height:42px; }
      .app-nav {
        height:calc(var(--device-nav-height) + var(--device-safe-top)) !important;
      }
      #appShell {
        padding-top:calc(var(--device-nav-height) + var(--device-safe-top)) !important;
      }
      .app-nav-inner { padding:0 7px !important; gap:5px !important; }
      .app-nav-left { flex:0 1 auto; max-width:34vw; gap:6px !important; }
      .app-nav-title { font-size:12px !important; max-width:18vw !important; }
      .app-nav-badge, .nav-clock, .fb-pill, .net-pill { display:none !important; }
      .app-nav-right { gap:5px !important; min-width:0; }
      .nav-btn {
        width:38px !important;
        min-width:38px !important;
        height:34px !important;
        padding:0 !important;
        justify-content:center !important;
        border-radius:9px !important;
      }
      .nav-btn .nav-label { display:none !important; }
      .nav-btn svg { width:16px !important; height:16px !important; }
      .theme-switch {
        width:54px !important;
        min-width:54px !important;
        height:34px !important;
        padding:0 5px !important;
        --theme-track-w:44px;
        --theme-track-h:24px;
        --theme-thumb:18px;
        --theme-pad:3px;
        --theme-shift:20px;
      }
      .theme-slider::after { background-size:13px 13px !important; }

      #penilaianView {
        grid-template-columns:168px minmax(0,1fr) !important;
        gap:6px !important;
        padding:6px !important;
        align-items:start;
      }
      .p-left {
        padding:8px !important;
        gap:5px !important;
        max-height:calc(100dvh - var(--device-nav-height) - var(--device-safe-top) - 12px);
        overflow-y:auto;
        border-radius:12px !important;
      }
      .p-center {
        padding:6px !important;
        gap:5px !important;
        min-height:calc(100dvh - var(--device-nav-height) - var(--device-safe-top) - 12px);
        border-radius:12px !important;
      }
      .p-section { font-size:8.5px !important; margin:3px 0 1px !important; }
      .sb-user { padding:6px 7px !important; gap:6px !important; border-radius:8px !important; }
      .sb-avatar { width:24px !important; height:24px !important; font-size:10px !important; }
      .sb-name { font-size:10.5px !important; }
      .sb-role { font-size:8.5px !important; }
      .sistem-picker { gap:4px !important; }
      .sistem-btn {
        min-height:32px !important;
        padding:6px 3px !important;
        font-size:10.5px !important;
        border-radius:8px !important;
        letter-spacing:.03em !important;
      }
      .p-select {
        min-height:30px !important;
        padding:6px 8px !important;
        font-size:11px !important;
        border-radius:8px !important;
      }
      .kelas-picker { gap:4px !important; }
      .kelas-btn {
        min-height:30px !important;
        padding:6px 2px !important;
        font-size:11px !important;
        border-radius:8px !important;
      }
      .subjects { max-height:116px !important; gap:4px !important; }
      .subject-btn {
        min-height:30px !important;
        padding:6px 8px !important;
        font-size:10.5px !important;
        border-radius:8px !important;
      }
      #aksiCepatSection { display:none !important; }
      .p-thin { margin:1px 0 !important; }

      .ctx-bar { padding:5px 7px !important; gap:4px !important; border-radius:8px !important; }
      .ctx-label, .ctx-sep { display:none !important; }
      .ctx-chip { font-size:9px !important; padding:3px 6px !important; max-width:145px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .ktr-panel { display:none !important; }
      .toolbar { gap:4px !important; align-items:center !important; }
      .toolbar .p-btn {
        min-height:30px !important;
        padding:6px 8px !important;
        font-size:10px !important;
      }
      .picker { gap:4px !important; }
      .picker .p-btn {
        min-height:30px !important;
        padding:6px 8px !important;
        font-size:10.5px !important;
      }
      .table-wrap {
        max-height:calc(100dvh - var(--device-nav-height) - var(--device-safe-top) - 96px) !important;
        overflow:auto !important;
        border-radius:8px !important;
      }
      thead th { padding:6px 3px !important; font-size:9px !important; }
      tbody td { padding:7px 3px !important; height:34px !important; font-size:11.5px !important; }
      thead th:nth-child(1), .td-no { width:32px !important; min-width:32px !important; }
      thead th:nth-child(2), .td-name { width:160px !important; min-width:150px !important; }
      thead th:nth-child(2), .td-name { left:32px !important; }
      .td-cell, thead th.col-grade { width:40px !important; min-width:38px !important; }
      .td-prestasi, thead th.col-prestasi { width:60px !important; min-width:56px !important; }
      .td-catatan, thead th.col-catatan { width:72px !important; min-width:66px !important; }
      .statusbar { display:none !important; }

      .floating-grades {
        left:50% !important;
        right:auto !important;
        width:min(620px,calc(100vw - 16px)) !important;
        transform:translateX(-50%) !important;
        bottom:max(6px, var(--device-safe-bottom)) !important;
        border:1px solid var(--app-border) !important;
        border-radius:14px !important;
        padding:6px 8px calc(6px + var(--device-safe-bottom)) !important;
        max-height:34dvh !important;
        overflow-y:auto !important;
      }
      .float-header { margin-bottom:5px !important; min-height:22px; }
      #floatStudentName, #floatSumatifStudentName {
        font-size:11px !important;
        line-height:1.25 !important;
        display:block !important;
        min-height:14px !important;
        max-height:14px !important;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .float-close { font-size:18px !important; padding:0 4px !important; }
      .floating-grades .grade-buttons {
        grid-template-columns:repeat(7,minmax(40px,1fr)) !important;
        gap:4px !important;
      }
      .floating-grades .grade-btn {
        min-height:30px !important;
        padding:5px 4px !important;
        font-size:12px !important;
        border-radius:999px !important;
      }
      .float-nav { gap:5px !important; margin-top:5px !important; }
      .float-nav .p-btn {
        min-height:30px !important;
        padding:5px 9px !important;
        font-size:10.5px !important;
        border-radius:999px !important;
      }
      #floatSumatifContent { gap:5px !important; }
      #floatSumatifLabel,
      #floatPrestasiWrap label,
      #floatCatatanWrap label {
        font-size:10px !important;
      }
      .floating-grades .prestasi-input {
        min-height:32px !important;
        font-size:16px !important;
        padding:5px 10px !important;
      }
      #floatSavePrestasiBtn,
      #floatSaveCatatanBtn,
      #floatSumatifSaveBtn {
        min-height:30px !important;
        padding:5px 10px !important;
        font-size:10.5px !important;
      }
      body.toast-avoid-floating #saveToast,
      body:has(.floating-grades.visible) #saveToast {
        top:calc(var(--device-nav-height) + var(--device-safe-top) + 8px) !important;
        bottom:auto !important;
        max-width:calc(100vw - 24px) !important;
        padding:8px 14px !important;
        font-size:11px !important;
        transform:translateX(-50%) translateY(-140%) !important;
      }
      body.toast-avoid-floating #saveToast.show,
      body:has(.floating-grades.visible) #saveToast.show {
        transform:translateX(-50%) translateY(0) !important;
      }
      body.toast-avoid-floating #saveToast.hide,
      body:has(.floating-grades.visible) #saveToast.hide {
        transform:translateX(-50%) translateY(-140%) !important;
      }
      body.toast-avoid-floating #saveToast .toast-check,
      body:has(.floating-grades.visible) #saveToast .toast-check {
        width:18px !important;
        height:18px !important;
      }
      .catatan-area { min-height:54px !important; max-height:84px !important; font-size:11px !important; }
    }

    /* ══════════════════════════════════════════════
       WIDE LANDSCAPE (mis. HP/tablet 9 inci landscape):
       PRIORITAS tampilkan JAM & TANGGAL. Tombol cukup ikon saja
       (tanpa label) selama ruang belum benar-benar lega. Label
       tombol baru ditampilkan saat lebar sangat mencukupi.
       Blok ini sengaja diletakkan SETELAH mode padat agar menang.
       ══════════════════════════════════════════════ */
    @media (min-width:600px) and (max-height:600px) and (orientation:landscape) {
      :root { --device-nav-height:50px; }
      .app-nav {
        height:calc(50px + var(--device-safe-top)) !important;
      }
      #appShell {
        padding-top:calc(50px + var(--device-safe-top)) !important;
      }
      .app-nav-inner { padding:0 clamp(8px,2vw,18px) !important; gap:8px !important; }
      .app-nav-left { flex:0 1 auto !important; max-width:38vw !important; gap:8px !important; }
      /* Prioritas utama: jam & tanggal selalu tampil di sini */
      .nav-clock { display:flex !important; }
      .app-nav-right { gap:6px !important; min-width:0; flex-shrink:0; }
      /* Tombol tetap ikon saja agar jam/tanggal kebagian ruang */
      .nav-btn {
        width:38px !important;
        min-width:38px !important;
        height:36px !important;
        padding:0 !important;
        justify-content:center !important;
        border-radius:9px !important;
      }
      .nav-btn .nav-label { display:none !important; }
      .nav-btn svg { width:16px !important; height:16px !important; }
    }

    /* Cukup lega (≥820px): pill status ikut tampil di samping jam. */
    @media (min-width:820px) and (max-height:600px) and (orientation:landscape) {
      .app-nav-badge { display:flex !important; }
      .fb-pill { display:flex !important; }
      .net-pill { display:flex !important; }
      .app-nav-title { font-size:14px !important; max-width:26vw !important; }
    }

    /* Sangat lega (≥1040px): label tombol ikut tampil → identik navbar laptop. */
    @media (min-width:1040px) and (max-height:600px) and (orientation:landscape) {
      .app-nav-left { flex:1 1 auto !important; max-width:none !important; }
      .app-nav-title { font-size:15px !important; max-width:340px !important; }
      .app-nav-right { gap:7px !important; }
      .nav-btn {
        width:auto !important;
        min-width:unset !important;
        padding:0 12px !important;
        gap:6px !important;
        justify-content:flex-start !important;
        border-radius:10px !important;
      }
      .nav-btn .nav-label { display:inline !important; }
    }

    /* ══════════════════════════════════════════════
       PORTRAIT: ruang horizontal terbatas. Tombol (Notif, Pesan,
       Refresh, Menu, Keluar) cukup IKON saja tanpa tulisan, dan
       pill online cukup indikator hijau tanpa tulisan "Online".
       Tetap responsif: di layar portrait sangat lebar (≥820px,
       mis. tablet besar) label boleh tampil kembali.
       ══════════════════════════════════════════════ */
    @media (orientation:portrait) and (max-width:820px) {
      .nav-btn .nav-label { display:none !important; }
      .nav-btn {
        width:38px !important;
        min-width:38px !important;
        padding:0 !important;
        gap:0 !important;
        justify-content:center !important;
      }
      /* Theme toggle juga ber-class .nav-btn → kembalikan ukuran tracknya */
      .theme-switch, .theme-switch.nav-btn {
        width:54px !important;
        min-width:54px !important;
        padding:0 5px !important;
      }
      /* Pill online: indikator hijau saja, sembunyikan teks "Online" */
      .net-pill span:last-child { display:none !important; }
      .net-pill { padding:4px 7px !important; gap:0 !important; }

      /* ── Tombol back wajib selalu tampil & tidak boleh terdesak keluar.
         Elemen lain di app-nav-left dipadatkan agar arrow back kebagian ruang. ── */
      .peng-nav-back.visible,
      .jadwal-nav-back,
      .livekelas-nav-back {
        display:inline-flex !important;
        width:34px !important;
        height:34px !important;
        min-width:34px !important;
        flex-shrink:0 !important;
      }
      .peng-nav-back:not(.visible) { display:none !important; }
      .peng-nav-back::before { width:21px;height:21px; -webkit-mask-size:20px 20px; mask-size:20px 20px; }
      .jadwal-nav-back svg,
      .livekelas-nav-back svg { width:19px !important;height:19px !important; }
      .app-nav-left {
        gap:4px !important;
        min-width:0 !important;
        flex:1 1 auto !important;
      }
      .app-nav-brand { gap:5px !important;min-width:0 !important;flex-shrink:1 !important; }
      .app-nav-dot { width:24px !important;height:24px !important; }
      .app-nav-dot.tahfizh-nav-logo,
      .app-nav-dot.jadwal-nav-logo,
      .app-nav-dot.penilaian-nav-logo,
      .app-nav-dot.absensi-nav-logo,
      .app-nav-dot.analitik-nav-logo,
      .app-nav-dot.strukturkelas-nav-logo,
      .app-nav-dot.livekelas-nav-logo { width:24px !important;height:24px !important; }
      .app-nav-title { font-size:11px !important;max-width:24vw !important; }
      .app-nav-badge { display:none !important; }
    }

    /* ── Portrait sempit (≤480px): ruang makin sedikit, padatkan lagi
       supaya tombol back tetap utuh tampil. ── */
    @media (orientation:portrait) and (max-width:480px) {
      .app-nav-inner { gap:4px !important; }
      .app-nav-left { gap:3px !important; }
      .app-nav-brand { gap:4px !important; }
      .app-nav-title { font-size:10px !important;max-width:18vw !important; }
      .app-nav-right { gap:3px !important; }
      .nav-btn { width:34px !important;min-width:34px !important; }
      .nav-clock { display:none !important; }
      .fb-pill { display:none !important; }
    }

    /* ══════════════════════════════════════════════
       CLASS-BASED DEVICE STYLES (di-inject oleh JS)
       ══════════════════════════════════════════════ */

    /* Android WebView: kurangi animasi berat di HP entry-level */
    html.reduce-effects .orb { display: none !important; }
    html.reduce-effects .bg-grid { opacity: 0.4 !important; }
    html.reduce-effects .orb-1, html.reduce-effects .orb-2,
    html.reduce-effects .orb-3 { animation: none !important; }

    /* Android: pastikan tap feedback lebih cepat */
    html.is-android * { touch-action: manipulation; }
    html.is-android .btn-login, html.is-android .nav-btn,
    html.is-android .grade-btn, html.is-android .kelas-btn,
    html.is-android .sistem-btn, html.is-android .subject-btn,
    html.is-android .menu-card { -webkit-tap-highlight-color: transparent; }

    /* Tiny device (≤359px) via JS class — sembunyikan elemen tidak kritis */
    html.device-tiny .net-pill { display:none !important; }
    html.device-tiny .app-nav-badge { display:none !important; }
    html.device-tiny .fb-pill { display:none !important; }

    /* Small device (360-479px) via JS class */
    html.device-small .net-pill span:last-child { display:none !important; }

    /* ── VIEW SISWA / KENAIKAN / RIWAYAT / GRAFIK ── */
    #siswaView { display:none; }
    #kenaikanView { display:none; }
    #literasiView { display:none; }
    #murojaahView { display:none; }
    #riwayatView { display:none; }
    #grafikView { display:none; }
    #halaqahView { display:none;width:100%;max-width:100%;box-sizing:border-box;padding:16px 12px;flex-direction:column;gap:14px; }
    #rekapTahfizhView { display:none; }
    #ujianTahfizhView { display:none; }
    #siswaView.active { display:flex; }
    #kenaikanView.active { display:flex; }
    #literasiView.active { display:flex; }
    #murojaahView.active { display:flex; }
    #riwayatView.active { display:flex; }
    #grafikView.active { display:flex; }
    #halaqahView.active { display:flex; }
    #rekapTahfizhView.active { display:flex; }
    #ujianTahfizhView.active { display:flex; }
    @media(max-width:700px){
      #siswaView,#kenaikanView,#literasiView,#murojaahView,#riwayatView,#grafikView,#ujianTahfizhView { padding:8px !important; gap:8px !important; }
      .ujian-tf-head,.ujian-tf-filter,.ujian-tf-table-head { padding:10px 12px; }
      .ujian-tf-wrap { max-height:calc(100vh - 240px); }
    }
    .grafik-chart-wrap { position:relative;width:100%;height:360px;max-height:420px;padding:12px 16px 18px;box-sizing:border-box;overflow:hidden;display:flex;align-items:center;justify-content:center; }
    .murojaah-panel { padding:14px 16px; }
    .murojaah-filter { display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap; }
    .murojaah-field { display:flex;flex-direction:column;gap:4px;min-width:150px; }
    .murojaah-field.grow { flex:1;min-width:220px; }
    .murojaah-field label { font-size:10px;font-weight:800;color:var(--app-dim);text-transform:uppercase;letter-spacing:.06em; }
    .murojaah-status { margin-top:10px;font-size:11px;font-weight:700;color:var(--app-dim);min-height:16px; }
    .murojaah-status.ok { color:#15803d; }
    .murojaah-status.err { color:#dc2626; }
    .murojaah-summary { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px; }
    .murojaah-stat { background:var(--app-card);border:1px solid var(--app-border);border-radius:10px;padding:12px 14px;box-shadow:var(--app-shadow);min-width:0; }
    .murojaah-stat span { display:block;font-size:10px;font-weight:800;color:var(--app-dim);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .murojaah-stat strong { display:block;font-size:24px;line-height:1.1;margin-top:6px;color:var(--app-text); }
    .murojaah-section-head { padding:14px 16px;border-bottom:1px solid var(--app-border);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap; }
    .murojaah-section-title { font-size:15px;font-weight:900;color:var(--app-text); }
    .murojaah-section-sub { font-size:11px;font-weight:700;color:var(--app-dim);margin-top:2px; }
    .murojaah-grid { padding:14px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px; }
    .murojaah-card { background:var(--app-card);border:1.5px solid var(--app-border);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0;transition:.15s; }
    .murojaah-card:hover { border-color:rgba(107,127,92,.45);box-shadow:0 10px 28px rgba(15,23,42,.08); }
    .murojaah-card.done { border-color:rgba(21,128,61,.35);background:rgba(22,163,74,.04); }
    .murojaah-card-head,
    .murojaah-card-top { display:flex;align-items:flex-start;justify-content:space-between;gap:8px; }
    .murojaah-card-top { flex-wrap:wrap; }
    .murojaah-card-top > div:first-child { flex:1 1 140px;min-width:0; }
    .murojaah-card-top > .murojaah-chip { flex:1 1 100%;width:100%;max-width:100%;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere;line-height:1.35; }
    .murojaah-card-name { font-size:13px;font-weight:900;color:var(--app-text);overflow:hidden;text-overflow:ellipsis; }
    .murojaah-card-meta { font-size:10px;font-weight:700;color:var(--app-dim);margin-top:2px; }
    .murojaah-card-progress { border:1px solid rgba(107,127,92,.18);background:rgba(107,127,92,.07);border-radius:8px;padding:8px 9px;font-size:11px;font-weight:750;color:var(--app-text);line-height:1.45; }
    .murojaah-card-foot { display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:10px;font-weight:800;color:var(--app-dim);line-height:1.35; }
    .murojaah-card-actions { display:flex;align-items:center;gap:7px;flex-wrap:wrap; }
    .murojaah-chip-row { display:flex;flex-wrap:wrap;gap:5px; }
    .murojaah-chip { display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:900;border:1px solid var(--app-border);background:var(--app-muted);color:var(--app-dim);white-space:nowrap; }
    .murojaah-chip.ok { color:#15803d;background:rgba(22,163,74,.10);border-color:rgba(22,163,74,.28); }
    .murojaah-chip.warn { color:#b45309;background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.28); }
    .murojaah-chip.bad { color:#dc2626;background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.25); }
    .murojaah-chip.done { color:#15803d;background:rgba(22,163,74,.10);border-color:rgba(22,163,74,.28); }
    .murojaah-chip.pending { color:#64748b;background:rgba(100,116,139,.10);border-color:rgba(100,116,139,.24); }
    .murojaah-card button { align-self:flex-start; }
    .murojaah-input-btn,
    .murojaah-mini-btn,
    .murojaah-history-btn { border:1px solid rgba(107,127,92,.32);background:rgba(107,127,92,.10);color:var(--app-accent);border-radius:8px;padding:7px 10px;font-family:inherit;font-size:11px;font-weight:900;cursor:pointer; }
    .murojaah-input-btn:hover,
    .murojaah-mini-btn:hover,
    .murojaah-history-btn:hover { background:rgba(107,127,92,.16); }
    .murojaah-input-btn:disabled,
    .murojaah-history-btn:disabled { cursor:not-allowed;opacity:.55;color:var(--app-dim);background:var(--app-muted);border-color:var(--app-border); }
    .murojaah-history-btn { border-color:rgba(2,132,199,.28);background:rgba(2,132,199,.08);color:#0369a1; }
    .murojaah-history-btn:hover:not(:disabled) { background:rgba(2,132,199,.14); }
    .murojaah-history-btn:disabled { color:var(--app-dim);background:var(--app-muted);border-color:var(--app-border); }
    .murojaah-empty { grid-column:1/-1;border:1px dashed var(--app-border);border-radius:10px;padding:18px;text-align:center;font-size:12px;font-weight:800;color:var(--app-dim);background:var(--app-muted); }
    .murojaah-empty-cell { text-align:center!important;padding:22px!important;color:var(--app-dim)!important;font-weight:800; }
    .murojaah-table-wrap { overflow:auto;max-width:100%; }
    .murojaah-table { width:100%;min-width:820px;border-collapse:collapse;font-size:11px;background:var(--app-card); }
    .murojaah-table th { padding:9px 10px;background:var(--app-thead);border-bottom:1px solid var(--app-border);font-size:10px;font-weight:900;color:var(--app-dim);text-transform:uppercase;letter-spacing:.04em;text-align:left;white-space:nowrap; }
    .murojaah-table td { padding:9px 10px;border-bottom:1px solid var(--app-border);color:var(--app-text);vertical-align:top; }
    .murojaah-table td.num { text-align:center;color:var(--app-dim);font-weight:800;width:44px; }
    .murojaah-history-modal { width:min(1040px,calc(100vw - 28px));max-width:1040px; }
    .murojaah-history-table-wrap { max-height:65vh;border:1px solid var(--app-border);border-radius:10px; }
    .murojaah-history-table { min-width:940px; }
    .murojaah-history-table th { position:sticky;top:0;z-index:2; }
    .murojaah-history-note { min-width:180px;max-width:280px;white-space:normal;line-height:1.45; }
    .murojaah-result-pill { display:inline-flex;align-items:center;border-radius:999px;padding:4px 9px;font-size:10px;font-weight:900;white-space:nowrap; }
    .murojaah-result-pill.mumtaz { color:#15803d;background:rgba(22,163,74,.10);border:1px solid rgba(22,163,74,.25); }
    .murojaah-result-pill.jj { color:#0369a1;background:rgba(2,132,199,.10);border:1px solid rgba(2,132,199,.25); }
    .murojaah-result-pill.jayyid { color:#b45309;background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.25); }
    .murojaah-result-pill.rasib { color:#dc2626;background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.25); }
    .murojaah-modal { max-width:680px;max-height:92vh;overflow-y:auto; }
    .murojaah-modal-sub { font-size:11px;font-weight:700;color:var(--app-dim);margin:-6px 0 12px;line-height:1.45; }
    .murojaah-progress-note { border:1px solid rgba(107,127,92,.24);background:rgba(107,127,92,.08);border-radius:10px;padding:9px 11px;font-size:11px;font-weight:700;color:var(--app-text);margin-bottom:12px;line-height:1.45; }
    .murojaah-modal-grid,.murojaah-score-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
    .murojaah-help { font-size:10px;font-weight:700;color:var(--app-dim);line-height:1.45;margin-top:5px; }
    .murojaah-juz-grid { display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px; }
    .murojaah-juz-option,
    .murojaah-juz-item { position:relative; }
    .murojaah-juz-option input,
    .murojaah-juz-item input { position:absolute;opacity:0;pointer-events:none; }
    .murojaah-juz-option span,
    .murojaah-juz-item span { display:flex;align-items:center;justify-content:center;height:34px;border-radius:8px;border:1.5px solid var(--app-border);background:var(--app-card);color:var(--app-text);font-size:11px;font-weight:900;cursor:pointer;transition:.15s; }
    .murojaah-juz-option.recommended span,
    .murojaah-juz-item.recommended span { border-color:rgba(2,132,199,.68);background:rgba(2,132,199,.12);color:#0369a1;box-shadow:none; }
    .murojaah-juz-item.locked span { cursor:not-allowed;opacity:.46;background:var(--app-muted);color:var(--app-dim);border-color:var(--app-border);box-shadow:none; }
    .murojaah-juz-item.recorded span { cursor:not-allowed;opacity:.72;border-color:rgba(22,163,74,.45);background:rgba(22,163,74,.10);color:#15803d;box-shadow:none; }
    .murojaah-juz-item.filled span { box-shadow:inset 0 -3px 0 rgba(22,163,74,.28); }
    .murojaah-juz-item span { height:42px;flex-direction:column;gap:2px;line-height:1.05; }
    .murojaah-juz-item span strong { font:inherit; }
    .murojaah-juz-item span small { font-size:8px;font-weight:850;opacity:.78;white-space:nowrap; }
    .murojaah-juz-option input:checked + span,
    .murojaah-juz-item input:checked + span { border-color:#15803d;background:rgba(22,163,74,.14);color:#15803d; }
    .murojaah-juz-score-list { display:flex;flex-direction:column;gap:12px;margin-top:12px; }
    .murojaah-juz-score-card { border:1px solid var(--app-border);border-radius:12px;background:var(--app-card);padding:12px;box-shadow:0 1px 2px rgba(15,23,42,.04); }
    .murojaah-juz-score-head { display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid var(--app-border); }
    .murojaah-juz-score-head strong { font-size:13px;font-weight:950;color:var(--app-text); }
    .murojaah-juz-score-head span { font-size:10px;font-weight:800;color:#15803d;text-align:right; }
    .murojaah-juz-score-empty { border:1px dashed var(--app-border);border-radius:10px;background:var(--app-muted);padding:14px;text-align:center;font-size:11px;font-weight:800;color:var(--app-dim); }
    .murojaah-result-box { display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;border:1px solid var(--app-border);border-radius:10px;background:var(--app-muted);padding:12px;margin:6px 0 12px; }
    .murojaah-result-box span { font-size:10px;font-weight:900;color:var(--app-dim);text-transform:uppercase;letter-spacing:.06em; }
    .murojaah-result-box strong { font-size:28px;line-height:1;color:var(--app-text); }
    .murojaah-result-box em { font-style:normal;font-size:12px;font-weight:900;border-radius:999px;padding:6px 10px;background:rgba(22,163,74,.10);color:#15803d;white-space:nowrap; }
    .murojaah-result-box em.jj { color:#0369a1;background:rgba(2,132,199,.10); }
    .murojaah-result-box em.jayyid { color:#b45309;background:rgba(245,158,11,.10); }
    .murojaah-result-box em.rasib { color:#dc2626;background:rgba(220,38,38,.08); }
    @media(max-width:760px){
      .murojaah-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .murojaah-modal-grid,.murojaah-score-grid { grid-template-columns:1fr; }
      .murojaah-juz-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
    }
    .grafik-chart-wrap > canvas { display:block;max-width:100%;max-height:100%;margin:0 auto; }
    .grafik-chart-wrap #grafikHeatmapWrap { width:100%;height:100%; }
    .grafik-chart-wrap.radar { height:420px;max-height:480px; }
    .grafik-radar-card {
      overflow:hidden;
      border-color:rgba(139,145,190,.24)!important;
      background:
        radial-gradient(circle at 70% 40%,rgba(100,104,154,.16),transparent 48%),
        linear-gradient(145deg,#171b35 0%,#202542 56%,#181c36 100%)!important;
      box-shadow:0 22px 55px rgba(15,23,42,.25)!important;
      color:#f7f8ff;
    }
    .grafik-radar-layout { display:grid;grid-template-columns:minmax(190px,250px) minmax(0,1fr);min-height:520px; }
    .grafik-radar-copy { padding:38px 20px 34px 30px;display:flex;flex-direction:column;align-items:flex-start;position:relative;z-index:1; }
    .grafik-radar-kicker { color:#7cf4ac;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px; }
    .grafik-radar-heading { color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:40px;font-weight:500;line-height:.98;letter-spacing:-.035em; }
    .grafik-radar-meta { color:#b2b6cb;font-size:11px;font-weight:650;line-height:1.55;margin-top:18px;overflow-wrap:anywhere; }
    .grafik-radar-source { color:#848aa8;font-size:13px;font-weight:600;line-height:1.25;margin-top:24px; }
    .grafik-radar-source span { display:block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px; }
    .grafik-radar-source strong { color:#aab0ca;font-weight:700; }
    .grafik-radar-legend { display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:28px;color:#c7cadb;font-size:11px;font-weight:700; }
    .grafik-radar-legend span { display:flex;align-items:center;gap:8px; }
    .grafik-radar-legend-dot { display:inline-block;width:18px;height:3px;border-radius:999px;background:#79f4aa;box-shadow:0 0 10px rgba(121,244,170,.35); }
    .grafik-radar-legend-dot.average { height:0;background:transparent;border-top:2px dashed #a7accb;box-shadow:none; }
    .grafik-radar-status { margin-top:16px;min-height:16px;color:#8f95b2;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; }
    .grafik-radar-stage { height:520px!important;max-height:none!important;padding:24px 34px 24px 6px!important;overflow:visible; }
    .grafik-radar-stage > canvas { filter:drop-shadow(0 12px 24px rgba(5,10,30,.2)); }
    .grafik-print-chart-frame { display:none; }
    .grafik-print-chart-img { display:block;max-width:100%;max-height:100%;object-fit:contain;margin:0 auto; }
    .grafik-tabs { display:flex;gap:8px;flex-wrap:wrap;align-items:center; }
    .grafik-tab-btn { border:1px solid var(--app-border);background:var(--app-card);color:var(--app-dim);border-radius:9px;padding:8px 13px;font-size:12px;font-weight:800;font-family:inherit;cursor:pointer;transition:.15s; }
    .grafik-tab-btn:hover { background:var(--app-hover);color:var(--app-text); }
    .grafik-tab-btn.active { border-color:var(--app-blue);background:rgba(2,132,199,.12);color:var(--app-blue); }
    .grafik-tab-panel { display:none; }
    .grafik-tab-panel.active { display:flex;flex-direction:column;gap:14px; }
    .grafik-conditional-row { display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap; }
    .grafik-search-results { display:none;position:absolute;z-index:30;top:100%;left:0;right:0;margin-top:4px;background:var(--app-card);border:1px solid var(--app-border);border-radius:9px;box-shadow:var(--app-shadow);max-height:220px;overflow-y:auto; }
    .grafik-search-item { padding:9px 11px;border-bottom:1px solid var(--app-border);cursor:pointer;font-size:12px;color:var(--app-text); }
    .grafik-search-item:hover { background:var(--app-hover); }
    .grafik-search-item:last-child { border-bottom:none; }
    .grafik-insight-box { padding:12px 16px;border-top:1px solid var(--app-border);font-size:12px;color:var(--app-text);line-height:1.55;background:var(--app-muted); }
    .grafik-heatmap-scroll { width:100%;height:100%;overflow:auto;border-radius:9px;border:1px solid var(--app-border);background:var(--app-card); }
    .grafik-heatmap-table { width:max-content;min-width:100%;border-collapse:collapse;font-size:11px;background:var(--app-card); }
    .grafik-heatmap-table th { position:sticky;top:0;z-index:2;background:var(--app-thead);color:var(--app-dim);font-weight:800;border:1px solid var(--app-border);padding:7px 8px;white-space:nowrap; }
    .grafik-heatmap-table td { border:1px solid var(--app-border);padding:7px 8px;text-align:center;font-weight:800;min-width:58px; }
    .grafik-heatmap-name { position:sticky;left:0;z-index:1;text-align:left!important;background:var(--app-card);color:var(--app-text);min-width:150px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
    .grafik-heat-ok { background:rgba(22,163,74,.18);color:#15803d; }
    .grafik-heat-mid { background:rgba(234,179,8,.22);color:#a16207; }
    .grafik-heat-low { background:rgba(220,38,38,.16);color:#dc2626; }
    .grafik-heat-empty { background:rgba(148,163,184,.16);color:var(--app-dim); }
    .grafik-summary-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:14px; }
    .grafik-summary-card { background:var(--app-card);border:1px solid var(--app-border);border-radius:12px;padding:13px 14px;box-shadow:var(--app-shadow); }
    .grafik-summary-label { font-size:10px;font-weight:800;color:var(--app-dim);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px; }
    .grafik-summary-value { font-size:16px;font-weight:800;color:var(--app-text);line-height:1.35; }
    .grafik-summary-note { font-size:12px;font-weight:700;color:var(--app-dim);line-height:1.45; }
    @media(max-width:700px){ .grafik-chart-wrap { height:300px;max-height:340px;padding:10px 10px 14px; } }
    @media(max-width:820px){
      .grafik-radar-layout { grid-template-columns:1fr; }
      .grafik-radar-copy { padding:24px 24px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px; }
      .grafik-radar-kicker,.grafik-radar-heading,.grafik-radar-meta { grid-column:1; }
      .grafik-radar-heading { font-size:34px; }
      .grafik-radar-source { grid-column:2;grid-row:1 / span 3;margin-top:0;text-align:right; }
      .grafik-radar-legend { grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;margin-top:18px;padding-top:0; }
      .grafik-radar-status { grid-column:1 / -1;margin-top:12px; }
      .grafik-radar-stage { height:440px!important;padding:8px 20px 24px!important; }
    }
    @media(max-width:700px){ .grafik-chart-wrap.radar { height:340px;max-height:380px; } }
    @media(max-width:520px){
      .grafik-radar-copy { display:flex;padding:22px 20px 8px; }
      .grafik-radar-heading { font-size:31px; }
      .grafik-radar-source { margin-top:16px;text-align:left; }
      .grafik-radar-legend { flex-direction:column;margin-top:18px; }
      .grafik-radar-stage { height:390px!important;padding:4px 6px 20px!important; }
    }
    
/* Leger web: gunakan tinggi penuh konten agar tidak muncul scrollbar vertikal di dalam tabel.
   Scrollbar hanya dipakai untuk geser horizontal ke kanan/kiri. */
#legerResult .leger-table-wrap {
  max-height:none !important;
  height:auto !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
}
#legerResult .laporan-result,
#legerResult .leger-multi-table-strip {
  max-height:none !important;
  height:auto !important;
}

@media print {
      @page { size:A4 portrait;margin:10mm; }
      body.grafik-printing * { visibility:hidden!important; }
      body.grafik-printing #grafikPrintArea,
      body.grafik-printing #grafikPrintArea * { visibility:visible!important; }
      body.grafik-printing #grafikPrintArea { position:absolute;left:0;right:0;top:0;width:100%;max-width:190mm;margin:0 auto;padding:0;background:#fff; }
      body.grafik-printing .grafik-no-print { display:none!important; }
      body.grafik-printing .p-card,
      body.grafik-printing .grafik-summary-card { box-shadow:none!important;break-inside:avoid; }
      body.grafik-printing #grafikRadarCard { width:100%;box-sizing:border-box;-webkit-print-color-adjust:exact;print-color-adjust:exact; }
      body.grafik-printing .grafik-radar-layout { grid-template-columns:45mm minmax(0,1fr);min-height:140mm; }
      body.grafik-printing .grafik-radar-copy { padding:10mm 4mm 8mm 8mm; }
      body.grafik-printing .grafik-radar-heading { font-size:27px; }
      body.grafik-printing .grafik-radar-meta { font-size:9px; }
      body.grafik-printing .grafik-radar-source { font-size:10px; }
      body.grafik-printing #grafikRadarTitle { white-space:normal;overflow-wrap:anywhere;line-height:1.35; }
      body.grafik-printing .grafik-chart-wrap.radar { height:140mm!important;max-height:140mm!important;padding:5mm 6mm 7mm!important;display:flex;align-items:center;justify-content:center;overflow:hidden; }
      body.grafik-printing.grafik-print-image-ready .grafik-chart-wrap.radar > canvas { display:none!important; }
      body.grafik-printing.grafik-print-image-ready .grafik-print-chart-frame { display:flex!important;width:100%;height:100%;align-items:center;justify-content:center; }
      body.grafik-printing .grafik-print-chart-img { width:auto;height:auto;max-width:165mm;max-height:140mm;object-fit:contain;margin:0 auto; }
      body.grafik-printing .grafik-summary-grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:3mm;margin-top:6mm; }
      body.grafik-printing .grafik-summary-card { border-radius:6px;padding:4mm; }
      body.grafik-printing .grafik-summary-value { font-size:13px;overflow-wrap:anywhere; }
      body.grafik-printing .grafik-summary-note { font-size:10px;overflow-wrap:anywhere; }
      body.grafik-active-printing * { visibility:hidden!important; }
      body.grafik-active-printing #grafikView .grafik-tab-panel.active,
      body.grafik-active-printing #grafikView .grafik-tab-panel.active *,
      body.grafik-active-printing #grafikView .grafik-insight-box,
      body.grafik-active-printing #grafikView .grafik-insight-box * { visibility:visible!important; }
      body.grafik-active-printing #grafikView .grafik-tab-panel.active { position:absolute;left:0;top:0;width:100%;background:#fff;padding:0; }
      body.grafik-active-printing .laporan-filters,
      body.grafik-active-printing .grafik-tabs,
      body.grafik-active-printing .page-footer,
      body.grafik-active-printing .grafik-no-print { display:none!important; }
      body.grafik-active-printing .p-card { box-shadow:none!important;break-inside:avoid; }
      body.grafik-active-printing .grafik-chart-wrap { height:150mm;max-height:150mm;display:flex;align-items:center;justify-content:center; }
      body.grafik-active-printing .grafik-chart-wrap > canvas { max-width:100%!important;max-height:100%!important;margin:0 auto!important; }
      body.leger-printing * { visibility:hidden!important; }
      body.leger-printing #legerResult,
      body.leger-printing #legerResult * { visibility:visible!important; }
      body.leger-printing {
        background:#fff!important;
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
      }
      body.leger-printing #legerResult {
        position:absolute;
        left:0;
        top:0;
        width:auto;
        background:#fff!important;
      }
      body.leger-printing .leger-multi-table-strip {
        display:block!important;
        overflow:visible!important;
        padding-bottom:0!important;
      }
      body.leger-printing .laporan-result {
        border:0!important;
        border-radius:0!important;
        box-shadow:none!important;
        overflow:visible!important;
        background:#fff!important;
      }
      body.leger-printing.leger-printing-multi .laporan-result {
        break-after:page;
        page-break-after:always;
      }
      body.leger-printing.leger-printing-multi .laporan-result:last-child {
        break-after:auto;
        page-break-after:auto;
      }
      body.leger-printing .laporan-result-header { display:none!important; }
      body.leger-printing .leger-print-header {
        display:flex!important;
        position:fixed;
        top:-10mm;
        left:0;
        right:0;
        height:8mm;
        align-items:flex-start;
        justify-content:space-between;
        font-family:'Plus Jakarta Sans',sans-serif;
        font-size:9pt;
        font-weight:400;
        color:#000;
        background:transparent!important;
        white-space:pre-line;
        line-height:1.2;
      }
      body.leger-printing.leger-printing-multi .leger-print-header {
        position:static;
        top:auto;
        left:auto;
        right:auto;
        height:8mm;
        margin:0 0 2mm 0;
      }
      body.leger-printing .leger-print-header span:last-child { text-align:right; }
      body.leger-printing .leger-table-wrap {
        display:block!important;
        overflow:visible!important;
        max-height:none!important;
        border:0!important;
        border-radius:0!important;
        background:#fff!important;
      }
      body.leger-printing .leger-table {
        border-collapse:separate!important;
        border-spacing:0!important;
        table-layout:fixed!important;
        width:auto!important;
        min-width:0!important;
        font-family:'Plus Jakarta Sans',sans-serif!important;
        font-size:11px!important;
        color:#000!important;
        background:#fff!important;
        zoom:var(--leger-web-print-scale, .77);
      }
      body.leger-printing .leger-table thead { display:table-header-group; }
      body.leger-printing .leger-table th,
      body.leger-printing .leger-table td {
        position:static!important;
        z-index:auto!important;
        box-shadow:none!important;
        border:0!important;
        border-right:1px solid #000!important;
        border-bottom:1px solid #000!important;
        padding:0 2px!important;
        height:19.33px!important;
        min-height:19.33px!important;
        line-height:1.1!important;
        text-align:center!important;
        vertical-align:middle!important;
        overflow:hidden!important;
        color:#000!important;
      }
      body.leger-printing .leger-table tr > :first-child { border-left:1px solid #000!important; }
      body.leger-printing .leger-table thead tr:first-child > * { border-top:1px solid #000!important; }
      body.leger-printing .leger-table thead th {
        height:131px!important;
        min-height:131px!important;
        font-weight:700!important;
      }
      body.leger-printing .leger-table .leger-no,
      body.leger-printing .leger-table .leger-sticky-no { width:27.4px!important;min-width:27.4px!important;max-width:27.4px!important; }
      body.leger-printing .leger-table .leger-name,
      body.leger-printing .leger-table .leger-sticky-name { width:208.6px!important;min-width:208.6px!important;max-width:208.6px!important;text-align:left!important;left:auto!important; }
      body.leger-printing .leger-table .td-name { text-align:left!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important;max-width:208.6px!important; }
      body.leger-printing .leger-table .leger-mapel { width:31.1px!important;min-width:31.1px!important;max-width:31.1px!important;background:#FFC000!important; }
      body.leger-printing .leger-table .leger-summary,
      body.leger-printing .leger-table .td-summary { background:#00B0F0!important; }
      body.leger-printing .leger-table .leger-rank,
      body.leger-printing .leger-table .td-rank { width:31.1px!important;min-width:31.1px!important;max-width:31.1px!important;background:#FF0000!important;font-weight:900!important; }
      body.leger-printing .leger-table tr > :nth-last-child(4) { width:56px!important;min-width:56px!important;max-width:56px!important; }
      body.leger-printing .leger-table tr > :nth-last-child(3) { width:51px!important;min-width:51px!important;max-width:51px!important; }
      body.leger-printing .leger-table tr > :nth-last-child(2) { width:58px!important;min-width:58px!important;max-width:58px!important; }
      body.leger-printing .leger-table tr > :last-child { width:31.1px!important;min-width:31.1px!important;max-width:31.1px!important; }
      body.leger-printing .leger-table .leger-vertical {
        writing-mode:vertical-rl!important;
        transform:rotate(180deg)!important;
        white-space:nowrap!important;
        height:118px!important;
        max-height:118px!important;
        margin:auto!important;
        font-size:10px!important;
        font-weight:800!important;
        letter-spacing:0!important;
      }
      body.leger-printing .leger-table .leger-separator-row td {
        border:0!important;
        background:#fff!important;
        height:19.33px!important;
      }
      body.leger-printing .leger-table .leger-stat-first-row > * { border-top:1px solid #000!important; }
      body.leger-printing .leger-table .leger-stat-empty {
        border:0!important;
        background:#fff!important;
      }
      body.rekap-tahfizh-printing * { visibility:hidden!important; }
      body.rekap-tahfizh-printing #rekapPrintArea,
      body.rekap-tahfizh-printing #rekapPrintArea * { visibility:visible!important; }
      body.rekap-tahfizh-printing #rekapPrintArea {
        position:absolute;left:0;top:0;right:0;width:100%;margin:0;padding:0;background:#fff;
      }
      body.rekap-tahfizh-printing #rekapPrintHeader { display:block!important;margin-bottom:4mm; }
      body.rekap-tahfizh-printing #rekapEmptyMsg { display:none!important; }
      body.rekap-tahfizh-printing #rekapStatsWrap { max-width:100%!important;margin-top:6mm!important; }
      body.rekap-tahfizh-printing .rekap-tbl {
        zoom:var(--rekap-tahfizh-print-scale, 0.6);
        width:max-content!important;
      }
      body.rekap-tahfizh-printing .rekap-tbl th,
      body.rekap-tahfizh-printing .rekap-tbl td { position:static!important; }
    }
    #csvDropZone:hover, #csvDropZone.drag-over { border-color:var(--app-accent);background:rgba(22,163,74,0.05); }
    .riwayat-search-item { padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--app-border);font-size:13px; }
    .riwayat-search-item:hover { background:var(--app-hover); }
    .riwayat-search-item:last-child { border-bottom:none; }

    /* ══════════════════════════════════════════════ */
  .sum-sem-admin-btn { padding:9px 18px; border-radius:10px; border:2px solid var(--app-border); background:var(--app-muted); font-size:13px; font-weight:700; font-family:inherit; cursor:pointer; color:var(--app-dim); transition:all .18s; }
  .sum-sem-admin-btn.active { border-color:#0284c7; background:rgba(2,132,199,0.12); color:#0284c7; }

    @media (max-width:700px) {
      #mainTable {
        width:max-content!important;
        min-width:max-content!important;
        table-layout:auto!important;
      }
      #mainTable thead th:nth-child(1),
      #mainTable .td-no {
        width:30px!important;
        min-width:30px!important;
        max-width:30px!important;
      }
      #mainTable thead th:nth-child(2),
      #mainTable .td-name {
        left:30px!important;
        width:25vw!important;
        min-width:96px!important;
        max-width:25vw!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        text-overflow:clip!important;
        white-space:nowrap!important;
        scrollbar-width:none!important;
        -ms-overflow-style:none!important;
      }
      #mainTable .td-name::-webkit-scrollbar { display:none!important; }
      #mainTable thead th.col-grade,
      #mainTable .td-cell {
        width:54px!important;
        min-width:54px!important;
        max-width:54px!important;
      }
      #mainTable thead th.col-prestasi,
      #mainTable .td-prestasi {
        width:68px!important;
        min-width:68px!important;
        max-width:68px!important;
      }
      #mainTable thead th.col-catatan,
      #mainTable .td-catatan {
        width:88px!important;
        min-width:88px!important;
        max-width:88px!important;
      }
    }

    #mainTable col.main-col-no { width:42px; }
    #mainTable col.main-col-name { width:auto; }
    #mainTable col.main-col-grade { width:64px; }
    #mainTable col.main-col-prestasi { width:76px; }
    #mainTable col.main-col-catatan { width:128px; }

    @media (max-width:1100px) {
      #mainTable {
        width:100%!important;
        min-width:520px!important;
        table-layout:fixed!important;
      }
      #mainTable col.main-col-no { width:30px!important; }
      #mainTable col.main-col-name { width:25%!important; }
      #mainTable col.main-col-grade { width:54px!important; }
      #mainTable col.main-col-prestasi { width:68px!important; }
      #mainTable col.main-col-catatan { width:auto!important; }
      #mainTable thead th:nth-child(1),
      #mainTable .td-no {
        width:30px!important;
        min-width:30px!important;
        max-width:30px!important;
      }
      #mainTable thead th:nth-child(2),
      #mainTable .td-name {
        left:30px!important;
        width:25%!important;
        min-width:96px!important;
        max-width:25%!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        text-overflow:clip!important;
        white-space:nowrap!important;
        scrollbar-width:none!important;
        -ms-overflow-style:none!important;
        -webkit-overflow-scrolling:touch!important;
      }
      #mainTable .td-name::-webkit-scrollbar { display:none!important; }
      #mainTable thead th.col-grade,
      #mainTable .td-cell {
        width:54px!important;
        min-width:54px!important;
        max-width:54px!important;
      }
      #mainTable thead th.col-prestasi,
      #mainTable .td-prestasi {
        width:68px!important;
        min-width:68px!important;
        max-width:68px!important;
      }
      #mainTable thead th.col-catatan,
      #mainTable .td-catatan {
        width:auto!important;
        min-width:88px!important;
        max-width:none!important;
      }
    }

    /* Global rounded-corner system */
    :root {
      --ui-radius-panel:18px;
      --ui-radius-card:10px;
      --ui-radius-control:8px;
      --ui-radius-pill:999px;
    }

    .login-card,
    .dashboard,
    .p-card,
    .guru-modal,
    .notif-panel,
    .pesan-panel,
    .panduan-pdf-modal,
    .mapel-assignment-card,
    .kelas-mapel-manage,
    .sum-cfg-mapel-card,
    .floating-grades,
    #guruJadwalPopupOverlay > div,
    #mjInputCard {
      border-radius:var(--ui-radius-panel) !important;
    }

    .user-banner,
    .dash-status-row,
    .menu-card,
    .dash-analytics-breadcrumb,
    .dash-analytics-accordion,
    .month-readonly-panel,
    .global-error,
    .error-msg,
    .sb-user,
    .ctx-bar,
    .table-wrap,
    .subjects,
    .tf-surat-results,
    .mapel-assign-body,
    .laporan-table-wrap,
    .panduan-upload-card,
    .panduan-current-file,
    .ktr-box,
    .ktr-alasan-wrap,
    .current-student,
    .offline-ov,
    .smart-hint,
    #guruNoAssignmentBanner,
    #dashJadwalHarian > div,
    #csvDropZone,
    #laporanResult,
    #legerResult {
      border-radius:var(--ui-radius-card) !important;
    }

    .logo-icon,
    .menu-icon,
    .dash-analytics-icon,
    .custom-checkbox {
      border-radius:var(--ui-radius-control) !important;
    }

    .form-input,
    .guru-modal-input,
    .p-select,
    .laporan-select,
    .sum-tahun-select,
    .prestasi-input,
    .catatan-area,
    .add-mapel-input,
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
      border-radius:var(--ui-radius-control) !important;
    }

    .btn-login,
    .user-password-btn,
    .p-btn,
    .nav-btn,
    .grade-btn,
    .sistem-btn,
    .kelas-btn,
    .subject-btn,
    .guru-modal-btn,
    .peng-save-btn,
    .mapel-assign-btn,
    .btn-add-mapel,
    .add-mapel-submit,
    .month-readonly-btn,
    .panduan-btn-view,
    .panduan-btn-del,
    .sum-sem-btn,
    .sum-mapel-btn,
    .sum-cfg-kelas-btn,
    .sum-sem-admin-btn,
    .guru-jenjang-btn,
    .notif-compose-send,
    button {
      border-radius:var(--ui-radius-pill) !important;
    }

    .ctx-chip,
    .ctx-badge,
    .net-pill,
    .fb-pill,
    .access-badge,
    .sumatif-badge,
    .sum-ikut-chip,
    .mapel-assign-chip,
    .mapel-manage-chip,
    .kelas-badge,
    .guru-item-count {
      border-radius:var(--ui-radius-pill) !important;
    }

    /* ══════════════════════════════════════════════════════
       KALENDER POPUP
       ══════════════════════════════════════════════════════ */
    .kal-trigger {
      cursor: pointer;
      transition: background 0.15s;
    }
    .kal-trigger:hover {
      background: rgba(255,255,255,0.08);
      border-radius: 6px;
    }
    .kal-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background:
        linear-gradient(135deg,rgba(15,23,42,0.30),rgba(15,23,42,0.12)),
        rgba(255,255,255,0.18);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 56px 16px 24px;
      animation: kalFadeIn 0.18s ease;
      backdrop-filter: blur(18px) saturate(160%);
      -webkit-backdrop-filter: blur(18px) saturate(160%);
    }
    .kal-overlay.hidden { display: none !important; }
    @keyframes kalFadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    .kal-popup {
      position: relative;
      isolation: isolate;
      background:
        linear-gradient(150deg,rgba(255,255,255,0.82),rgba(255,255,255,0.50) 48%,rgba(255,255,255,0.30));
      border: 1px solid rgba(255,255,255,0.62);
      border-radius: 26px;
      box-shadow:
        0 28px 78px rgba(15,23,42,0.30),
        0 8px 24px rgba(15,23,42,0.16),
        inset 0 1px 0 rgba(255,255,255,0.88),
        inset 0 -1px 0 rgba(255,255,255,0.22);
      width: clamp(290px, 88vw, 360px);
      padding: 14px;
      animation: kalSlideIn 0.22s cubic-bezier(.2,.8,.2,1);
      max-height: calc(100vh - 80px);
      overflow-y: auto;
      backdrop-filter: blur(28px) saturate(185%) contrast(1.04);
      -webkit-backdrop-filter: blur(28px) saturate(185%) contrast(1.04);
    }
    .kal-popup::before {
      content: "";
      position: absolute;
      inset: 1px;
      z-index: -1;
      border-radius: inherit;
      background:
        linear-gradient(135deg,rgba(255,255,255,0.72),rgba(255,255,255,0.08) 38%,rgba(255,255,255,0.34));
      pointer-events: none;
    }
    .kal-popup::after {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      top: 10px;
      height: 1px;
      border-radius: 999px;
      background: rgba(255,255,255,0.88);
      box-shadow: 0 1px 18px rgba(255,255,255,0.56);
      pointer-events: none;
    }
    @keyframes kalSlideIn {
      from { opacity: 0; transform: translateY(-8px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .kal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 12px;
      padding: 4px 2px 2px;
    }
    .kal-title {
      font-size: 14px;
      font-weight: 800;
      color: var(--app-text,#111827);
      letter-spacing: 0.03em;
      text-transform: uppercase;
      text-align: center;
      flex: 1;
      text-shadow: 0 1px 0 rgba(255,255,255,0.62);
    }
    .kal-nav-btn {
      background: rgba(255,255,255,0.34);
      border: 1px solid rgba(255,255,255,0.56);
      border-radius: 999px;
      width: 32px;
      height: 32px;
      font-size: 20px;
      line-height: 1;
      color: var(--app-text, #222);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .14s ease,background .14s ease,border-color .14s ease,box-shadow .14s ease;
      padding: 0;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.76),
        0 8px 18px rgba(15,23,42,0.10);
    }
    .kal-nav-btn:hover {
      background: rgba(255,255,255,0.62);
      border-color: rgba(255,255,255,0.78);
      color: var(--app-primary,#4a7c59);
      transform: translateY(-1px);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.92),
        0 12px 24px rgba(15,23,42,0.14);
    }
    .kal-day-labels {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
      margin: 0 2px 6px;
    }
    .kal-day-labels span {
      text-align: center;
      font-size: 10px;
      font-weight: 700;
      color: var(--app-dim, #888);
      letter-spacing: 0.04em;
      padding: 2px 0;
    }
    .kal-day-labels span:first-child { color: var(--app-danger, #e05252); }
    .kal-day-labels span:last-child  { color: var(--app-dim, #888); }
    .kal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
    }
    .kal-cell {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 13px;
      font-size: 12px;
      font-weight: 750;
      color: var(--app-text, #222);
      cursor: default;
      position: relative;
      transition: transform .12s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease,color .12s ease;
      background: rgba(255,255,255,0.26);
      border: 1px solid rgba(255,255,255,0.34);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.56),
        inset 0 -1px 0 rgba(255,255,255,0.12);
    }
    .kal-cell.kal-empty { background: transparent; }
    .kal-cell.kal-other-month {
      color: var(--app-dim, #aaa);
      opacity: 0.38;
      cursor: default;
    }
    .kal-cell.kal-minggu { color: var(--app-danger, #e05252); }
    .kal-cell.kal-sabtu  { color: var(--app-dim, #666); }
    .kal-cell.kal-libur {
      background: linear-gradient(145deg,rgba(255,255,255,0.42),rgba(224,82,82,0.14));
      color: var(--app-danger, #e05252);
      border-color: rgba(224,82,82,0.32);
    }
    .kal-cell.kal-libur:hover {
      background: linear-gradient(145deg,rgba(255,255,255,0.56),rgba(224,82,82,0.24));
      cursor: pointer;
    }
    .kal-cell.kal-today {
      background: linear-gradient(145deg,rgba(255,255,255,0.34),#7f946d 52%,#536b46) !important;
      color: #fff !important;
      border-color: rgba(255,255,255,0.50) !important;
      font-weight: 900;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.72),
        0 10px 22px rgba(83,107,70,0.30);
    }
    .kal-cell:not(.kal-empty):not(.kal-today):hover {
      background: rgba(255,255,255,0.58);
      border-color: rgba(255,255,255,0.72);
      transform: translateY(-1px);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.86),
        0 8px 18px rgba(15,23,42,0.10);
    }
    .kal-libur-dot-indicator {
      position: absolute;
      bottom: 3px;
      left: 50%;
      transform: translateX(-50%);
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--app-danger, #e05252);
    }
    .kal-today .kal-libur-dot-indicator { background: rgba(255,255,255,0.7); }
    .kal-kegiatan-dot-stack {
      position: absolute;
      bottom: 3px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      max-width: calc(100% - 8px);
    }
    .kal-kegiatan-dot-stack .kal-kegiatan-dot-indicator {
      position: static;
      transform: none;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.85);
      flex: 0 0 auto;
    }
    .kal-kegiatan-dot-more {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: var(--app-dim, #64748b);
      flex: 0 0 auto;
    }
    .kal-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
      padding: 10px;
      border: 1px solid rgba(255,255,255,0.38);
      border-radius: 0;
      background: rgba(255,255,255,0.22);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.48);
    }
    .kal-leg-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      color: var(--app-dim, #888);
      font-weight: 600;
    }
    .kal-leg-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      flex-shrink: 0;
    }
    .kal-today-dot  { background: #8b997c; }
    .kal-libur-dot  { background: rgba(224,82,82,0.55); border: 1px solid rgba(224,82,82,0.4); }
    .kal-minggu-dot { background: transparent; border: 1px solid var(--app-danger, #e05252); }
    .kal-agenda {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 10px;
      padding: 10px;
      max-height: 136px;
      overflow: auto;
      border: 1px solid rgba(2,132,199,0.18);
      border-radius: 0;
      background: rgba(240,249,255,0.50);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.58);
    }
    .kal-agenda:empty { display: none; }
    .kal-agenda-title {
      font-size: 10px;
      font-weight: 900;
      color: var(--app-blue, #0284c7);
      text-transform: uppercase;
      letter-spacing: .06em;
    }
    .kal-agenda-item {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 7px 8px;
      border: 1px solid rgba(2,132,199,0.16);
      border-radius: 10px !important;
      background: rgba(255,255,255,0.58);
      color: var(--app-text, #1e293b);
      cursor: pointer;
      font-family: inherit;
      text-align: left;
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
    }
    .kal-agenda-item:hover {
      transform: translateY(-1px);
      border-color: rgba(2,132,199,0.34);
      background: rgba(255,255,255,0.78);
    }
    .kal-agenda-date {
      align-self: center;
      color: var(--app-blue, #0284c7);
      font-size: 11px;
      font-weight: 900;
      white-space: nowrap;
      line-height: 1.35;
    }
    .kal-agenda-name {
      min-width: 0;
      color: var(--app-text, #1e293b);
      font-size: 11px;
      font-weight: 750;
      line-height: 1.35;
      overflow-wrap: anywhere;
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    .kal-agenda-event {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      max-width: 100%;
      padding: 5px 8px;
      border-radius: 0;
      color: var(--kal-event-color, var(--app-blue, #0284c7));
      background: var(--kal-event-soft, rgba(2,132,199,0.10));
      border: 1px solid var(--kal-event-strong, rgba(2,132,199,0.20));
      font-weight: 800;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }
    .kal-event-swatch {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--kal-event-color, var(--app-blue, #0284c7));
      box-shadow: 0 0 0 1px rgba(255,255,255,0.78);
      flex: 0 0 auto;
    }
    .kal-info {
      margin-top: 10px;
      padding: 7px 12px;
      font-size: 11px;
      color: var(--app-danger, #e05252);
      font-weight: 700;
      text-align: left;
      line-height: 1.4;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      border-radius: 14px;
      background: rgba(224,82,82,0.08);
      border: 1px solid rgba(224,82,82,0.18);
      transition: opacity 0.15s ease;
    }
    .kal-info:empty {
      display: none;
    }
    .kal-info strong {
      display: block;
      margin-bottom: 6px;
      color: var(--app-text, #1e293b);
    }
    .kal-info-items {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    .kal-info-chip {
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      padding: 5px 8px;
      border-radius: 0;
      font-size: 10px;
      font-weight: 800;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }
    .kal-info-chip--libur {
      color: var(--app-danger, #dc2626);
      background: rgba(220,38,38,0.10);
      border: 1px solid rgba(220,38,38,0.18);
    }
    .kal-info-chip--kegiatan {
      gap: 5px;
      color: var(--kal-event-color, var(--app-blue, #0284c7));
      background: var(--kal-event-soft, rgba(2,132,199,0.10));
      border: 1px solid var(--kal-event-strong, rgba(2,132,199,0.18));
    }

    /* ══════════════════════════════════════════════════════
       KEGIATAN TAHUNAN TAB
       ══════════════════════════════════════════════════════ */
    .kgt-form {
      background: var(--app-muted);
      border: 1px solid var(--app-border);
      border-radius: 12px;
      padding: 14px;
      margin-bottom: 4px;
    }
    .kgt-form-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .kgt-form-row--actions {
      margin-top: 10px;
      align-items: center;
    }
    .kgt-form-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .kgt-form-group--tanggal { min-width: 145px; }
    .kgt-form-group--nama { flex: 1; min-width: 180px; }
    .kgt-label {
      font-size: 10px;
      font-weight: 700;
      color: var(--app-dim);
      letter-spacing: .06em;
    }
    .kgt-input {
      background: var(--app-card);
      border: 1px solid var(--app-border);
      border-radius: 8px;
      padding: 7px 10px;
      font-size: 12px;
      color: var(--app-text);
      font-family: inherit;
      outline: none;
      transition: border-color .15s;
      width: 100%;
      box-sizing: border-box;
    }
    .kgt-input:focus { border-color: var(--app-accent, #16a34a); }
    .kgt-btn-tambah {
      background: linear-gradient(135deg,#15803d,#16a34a) !important;
      color: #fff !important;
      border-color: #15803d !important;
      font-size: 12px !important;
      padding: 7px 16px !important;
      white-space: nowrap;
      box-shadow: 0 8px 18px rgba(21,128,61,0.22);
    }
    .kgt-btn-tambah:hover {
      opacity: 1;
      background: linear-gradient(135deg,#166534,#15803d) !important;
    }
    .kgt-btn-tambah:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(22,163,74,0.24),0 8px 18px rgba(21,128,61,0.22);
    }
    .kgt-btn-simpan {
      background: linear-gradient(135deg,#1d4ed8,#2563eb) !important;
      color: #fff !important;
      border-color: #1d4ed8 !important;
      font-size: 12px !important;
      padding: 7px 16px !important;
      white-space: nowrap;
      box-shadow: 0 8px 18px rgba(29,78,216,0.22);
    }
    .kgt-btn-simpan:hover {
      opacity: 1;
      background: linear-gradient(135deg,#1e40af,#1d4ed8) !important;
    }
    .kgt-btn-simpan:disabled {
      opacity: .6;
      cursor: not-allowed;
    }
    .kgt-btn-simpan:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(37,99,235,0.24),0 8px 18px rgba(29,78,216,0.22);
    }
    .kgt-hint {
      font-size: 11px;
      color: var(--app-danger);
      font-weight: 600;
    }
    .kgt-filter-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      flex-wrap: wrap;
      gap: 6px;
    }
    .kgt-select {
      background: var(--app-card);
      border: 1px solid var(--app-border);
      border-radius: 8px;
      padding: 5px 10px;
      font-size: 12px;
      color: var(--app-text);
      font-family: inherit;
      cursor: pointer;
      outline: none;
    }
    .kgt-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .kgt-item {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--app-card);
      border: 1px solid var(--app-border);
      border-left: 4px solid var(--kgt-color, var(--app-accent, #16a34a));
      border-radius: 10px;
      padding: 10px 12px;
      transition: border-color .15s;
    }
    .kgt-item:hover { border-color: var(--app-accent, #16a34a); }
    .kgt-item-swatch {
      width: 11px;
      height: 11px;
      border-radius: 999px;
      background: var(--kgt-color, var(--app-accent, #16a34a));
      box-shadow: 0 0 0 2px rgba(255,255,255,0.78),0 2px 7px rgba(15,23,42,0.16);
      flex: 0 0 auto;
    }
    .kgt-item-date {
      font-size: 11px;
      font-weight: 800;
      color: var(--app-accent, #16a34a);
      min-width: 90px;
      letter-spacing: .02em;
    }
    .kgt-item-name {
      flex: 1;
      font-size: 12px;
      font-weight: 600;
      color: var(--app-text);
    }
    .kgt-item-del {
      background: transparent;
      border: 1px solid transparent;
      border-radius: 6px;
      color: var(--app-dim);
      cursor: pointer;
      padding: 3px 7px;
      font-size: 14px;
      line-height: 1;
      transition: .12s;
      flex-shrink: 0;
    }
    .kgt-item-del:hover {
      background: rgba(224,82,82,0.1);
      border-color: var(--app-danger);
      color: var(--app-danger);
    }
    .kgt-item-edit {
      background: transparent;
      border: 1px solid transparent;
      border-radius: 6px;
      color: var(--app-dim);
      cursor: pointer;
      padding: 3px 7px;
      font-size: 14px;
      line-height: 1;
      transition: .12s;
      flex-shrink: 0;
    }
    .kgt-item-edit:hover {
      background: rgba(37,99,235,0.1);
      border-color: #2563eb;
      color: #2563eb;
    }
    .kgt-item--editing {
      border-color: #2563eb !important;
      box-shadow: 0 0 0 2px rgba(37,99,235,0.18);
    }
    .kgt-btn-batal {
      font-size: 12px !important;
      padding: 7px 16px !important;
      white-space: nowrap;
    }
    .kgt-empty {
      text-align: center;
      padding: 28px 0;
      font-size: 12px;
      color: var(--app-dim);
      font-style: italic;
    }
    /* Kegiatan pesantren di kalender — warna biru/teal */
    .kal-cell.kal-kegiatan {
      background: linear-gradient(145deg,rgba(255,255,255,0.42),rgba(2,132,199,0.16));
      color: var(--app-blue, #0284c7);
      border-color: rgba(2,132,199,0.34);
    }
    .kal-cell.kal-kegiatan:hover {
      background: linear-gradient(145deg,rgba(255,255,255,0.56),rgba(2,132,199,0.24));
      cursor: pointer;
    }
    .kal-kegiatan-dot-indicator {
      position: absolute;
      bottom: 3px;
      left: 50%;
      transform: translateX(-50%);
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--app-blue, #0284c7);
    }
    .kal-leg-kegiatan { background: rgba(2,132,199,0.45); border: 1px solid rgba(2,132,199,0.35); }
    /* Jika tanggal kegiatan sekaligus hari libur nasional → libur menang */
    .kal-cell.kal-libur.kal-kegiatan {
      background: linear-gradient(145deg,rgba(255,255,255,0.42),rgba(224,82,82,0.16));
      color: var(--app-danger, #e05252);
      border-color: rgba(224,82,82,0.34);
    }

    #jadwalFormasiTableWrap th,
    #jadwalFormasiTableWrap td {
      text-align: center !important;
      vertical-align: middle !important;
    }

/* FIX LEGER WEB MULTI-BULAN: tampilkan seperti export XLSX (blok tabel berdampingan) */
#legerResult .leger-table-wrap-multi-blocks { overflow:auto; max-height:70vh; background:#fff; }
#legerResult .leger-table-multi-blocks { border-collapse:collapse; width:max-content; min-width:980px; table-layout:auto; }
#legerResult .leger-table-multi-blocks th,
#legerResult .leger-table-multi-blocks td { color:#000 !important; visibility:visible !important; opacity:1 !important; }
#legerResult .leger-table-multi-blocks .leger-sticky-no,
#legerResult .leger-table-multi-blocks .leger-sticky-name,
#legerResult .leger-table-multi-blocks .leger-no,
#legerResult .leger-table-multi-blocks .leger-name { position:static !important; left:auto !important; z-index:auto !important; }
#legerResult .leger-table-multi-blocks .leger-block-title { height:26px !important; min-height:26px !important; padding:3px 6px !important; text-align:left !important; font-weight:800; background:#fff !important; color:#000 !important; white-space:nowrap; border:1px solid #000 !important; }
#legerResult .leger-table-multi-blocks .leger-gap { width:14px !important; min-width:14px !important; max-width:14px !important; background:#fff !important; border:0 !important; padding:0 !important; }
#legerResult .leger-table-multi-blocks .leger-no { width:24px; min-width:24px; max-width:24px; }
#legerResult .leger-table-multi-blocks .leger-name { width:185px; min-width:185px; max-width:185px; text-align:left; }
#legerResult .leger-table-multi-blocks .td-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#legerResult .leger-table-multi-blocks .leger-mapel { width:24px; min-width:24px; max-width:24px; background:#FFC000 !important; }
#legerResult .leger-table-multi-blocks .leger-summary,
#legerResult .leger-table-multi-blocks .td-summary { width:44px; min-width:44px; max-width:44px; background:#00B0F0 !important; }
#legerResult .leger-table-multi-blocks .leger-rank,
#legerResult .leger-table-multi-blocks .td-rank { width:32px; min-width:32px; max-width:32px; background:#FF0000 !important; font-weight:900; }
#legerResult .leger-table-multi-blocks .leger-vertical { height:92px !important; font-size:10px; }
#legerResult .leger-table-multi-blocks .leger-empty-block { background:#fff !important; }
#legerResult .leger-table tfoot tr:not(.leger-separator-row) .td-name,
#legerResult .leger-table-multi-blocks tfoot tr:not(.leger-separator-row) .td-name {
  background:#fff !important;
  color:#000 !important;
  box-shadow:none !important;
}
#legerResult .leger-table-multi-blocks tfoot .td-rank.leger-stat-empty {
  background:#fff !important;
  border:0 !important;
  box-shadow:none !important;
}
#legerResult .leger-table .td-rata2-label,
#legerResult .leger-table-multi-blocks .td-rata2-label {
  color:#000 !important;
  background:#fff !important;
  font-size:10px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  padding:2px 1px !important;
  text-align:center !important;
  white-space:nowrap !important;
  word-break:keep-all !important;
}

/* ═════════ ABSENSI KELAS ═════════ */
#absensiView{display:none;width:100%;max-width:980px;margin:0 auto;padding:14px 12px;box-sizing:border-box;}
#absensiView.active{display:block;}
.absensi-shell{display:flex;flex-direction:column;gap:14px;overflow:visible;}
.absensi-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--app-border);}
.absensi-kicker{font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--app-accent);opacity:.85;}
.absensi-title{font-size:24px;font-weight:900;color:var(--app-text);letter-spacing:-.04em;margin-top:3px;}
.absensi-subtitle{font-size:12px;color:var(--app-dim);font-weight:600;margin-top:3px;line-height:1.4;}
.absensi-live{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:rgba(107,127,92,.12);border:1px solid rgba(107,127,92,.28);font-size:11px;font-weight:900;color:var(--app-accent);white-space:nowrap;}
.absensi-live span{width:8px;height:8px;border-radius:999px;background:#22c55e;box-shadow:0 0 10px #22c55e;animation:dbpulse 1.8s infinite;}
.absensi-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;}
.absensi-meta-grid.is-picker-open{z-index:10000;}
.absensi-meta-card{background:var(--app-card);border:1px solid var(--app-border);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:5px;}
.absensi-meta-card.is-picker-open{position:relative;z-index:10001;}
.absensi-meta-card span{font-size:10px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--app-accent);opacity:.8;}
.absensi-select,.absensi-date,.absensi-search{width:100%;border:0;outline:0;background:transparent;color:var(--app-text);font-family:inherit;font-weight:800;font-size:14px;}
.absensi-date-wrap{position:relative;width:100%;min-height:24px;}
.absensi-date-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;}
.absensi-date-native::-webkit-datetime-edit{color:transparent;}
.absensi-date-native::-webkit-calendar-picker-indicator{display:none;}
.absensi-date-display{position:relative;width:100%;min-height:26px;display:flex;align-items:center;color:var(--app-text);font-family:inherit;font-weight:800;font-size:14px;line-height:1.25;white-space:normal;}
.absensi-date-picker-trigger{padding:0 28px 0 0;border:0;background:transparent;text-align:left;cursor:pointer;}
.absensi-date-picker-trigger::after{content:'▾';position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--app-dim);}
.absensi-date-picker{position:absolute;z-index:10002;top:calc(100% + 8px);left:0;width:min(330px,calc(100vw - 40px));padding:12px;border:1px solid var(--app-border);border-radius:14px;background:var(--app-card);box-shadow:0 18px 48px rgba(0,0,0,.38);}
.absensi-date-picker[hidden]{display:none!important;}
.absensi-date-picker-head{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;gap:8px;margin-bottom:10px;}
.absensi-date-picker-head strong{text-align:center;color:var(--app-text);font-size:13px;font-weight:900;}
.absensi-date-picker-nav{width:34px;height:34px;border:1px solid var(--app-border);border-radius:9px;background:var(--app-muted);color:var(--app-text);font-family:inherit;font-size:21px;line-height:1;cursor:pointer;}
.absensi-date-picker-weekdays,.absensi-date-picker-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;}
.absensi-date-picker-weekdays span{text-align:center;color:var(--app-dim);font-size:9px;font-weight:900;text-transform:uppercase;}
.absensi-date-picker-days{margin-top:6px;}
.absensi-date-picker-day{position:relative;aspect-ratio:1;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--app-text);font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;}
.absensi-date-picker-day:hover:not(:disabled){background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.32);}
.absensi-date-picker-day.is-selected{background:var(--app-accent);border-color:var(--app-accent);color:#fff;}
.absensi-date-picker-day.is-today:not(.is-selected){border-color:rgba(2,132,199,.55);}
.absensi-date-picker-day:disabled{background:rgba(100,116,139,.09);color:rgba(100,116,139,.55);cursor:not-allowed;}
.absensi-date-picker-day.is-empty{visibility:hidden;pointer-events:none;}
.absensi-date-picker-note{margin-top:10px;padding-top:9px;border-top:1px solid var(--app-border);color:var(--app-dim);font-size:9.5px;font-weight:700;line-height:1.4;}
.absensi-inline-date-wrap{position:relative;width:100%;min-height:26px;display:flex;align-items:center;}
.absensi-inline-date-wrap .absensi-date{position:relative;z-index:2;min-height:26px;padding-right:30px;box-sizing:border-box;}
.absensi-inline-date-native{color:transparent!important;caret-color:transparent;}
.absensi-inline-date-native::-webkit-datetime-edit{color:transparent;}
.absensi-inline-date-native::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.88;}
.absensi-inline-date-display{position:absolute;inset:0 30px 0 0;z-index:1;display:flex;align-items:center;pointer-events:none;color:var(--app-text);font-family:inherit;font-weight:800;font-size:14px;line-height:1.25;white-space:normal;}
.absensi-select option{color:#111827;background:#fff;}
#appShell[data-theme="dark"] .absensi-select option{color:#e5e7eb;background:#1f2937;}
.absensi-stats{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;}
.absensi-stats::-webkit-scrollbar{display:none;}
.absensi-chip{flex-shrink:0;display:flex;align-items:center;gap:6px;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:900;border:1px solid transparent;}
.absensi-chip i,.absensi-legend i{width:8px;height:8px;border-radius:3px;display:inline-block;}
.chip-H{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.24);color:#16a34a}.chip-H i,.lg-H{background:#22c55e}
.chip-S{background:rgba(245,158,11,.11);border-color:rgba(245,158,11,.26);color:#d97706}.chip-S i,.lg-S{background:#f59e0b}
.chip-I{background:rgba(2,132,199,.10);border-color:rgba(2,132,199,.24);color:#0284c7}.chip-I i,.lg-I{background:#0284c7}
.chip-A{background:rgba(220,38,38,.10);border-color:rgba(220,38,38,.22);color:#dc2626}.chip-A i,.lg-A{background:#ef4444}
.chip-P{background:rgba(124,58,237,.10);border-color:rgba(124,58,237,.22);color:#7c3aed}.chip-P i,.lg-P{background:#8b5cf6}
.absensi-tools{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px;align-items:center;}
.absensi-search-wrap{display:flex;align-items:center;gap:9px;background:var(--app-card);border:1px solid var(--app-border);border-radius:13px;padding:0 12px;min-height:42px;}
.absensi-search-wrap span{opacity:.55;font-size:14px;}
.absensi-mini-btn{height:42px;border-radius:12px;border:1px solid var(--app-border);background:var(--app-card);color:var(--app-dim);font-family:inherit;font-size:11px;font-weight:900;padding:0 14px;cursor:pointer;white-space:nowrap;}
.absensi-mini-btn:hover{border-color:rgba(107,127,92,.38);color:var(--app-text);}
.absensi-mini-btn.success{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.26);color:#16a34a;}
.absensi-mini-btn.danger{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.25);color:#ef4444;}
.absensi-mini-btn.danger:hover{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.42);color:#dc2626;}
.absensi-legend{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:10.5px;font-weight:800;color:var(--app-dim);}
.absensi-legend span{display:inline-flex;align-items:center;gap:5px;}
.absensi-section-line{display:flex;align-items:center;gap:12px;color:var(--app-accent);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.14em;}
.absensi-section-line:before{content:'';height:1px;background:var(--app-border);flex:1;order:2}.absensi-section-line span{order:1}.absensi-section-line em{order:3;font-style:normal;color:var(--app-dim);}
.absensi-list{display:flex;flex-direction:column;gap:8px;}
.absensi-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 12px;background:var(--app-card);border:1px solid var(--app-border);border-radius:14px;transition:.15s;}
.absensi-no{width:32px;height:32px;border-radius:9px;background:rgba(107,127,92,.10);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:var(--app-accent);}
.absensi-name{font-size:13.5px;font-weight:850;color:var(--app-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.absensi-nis{font-size:10.5px;color:var(--app-dim);font-weight:700;margin-top:2px;}
.absensi-status-btns{display:flex;gap:5px;}
.absensi-status-btn{width:34px;height:34px;border-radius:9px;border:1.5px solid var(--app-border);background:rgba(255,255,255,.04);color:var(--app-dim);font-family:inherit;font-size:10px;font-weight:950;cursor:pointer;transition:.12s;}
.absensi-status-btn.active-H{background:#22c55e;border-color:#22c55e;color:#fff}.absensi-row.status-H{border-color:rgba(34,197,94,.38);background:rgba(34,197,94,.055)}
.absensi-status-btn.active-S{background:#f59e0b;border-color:#f59e0b;color:#fff}.absensi-row.status-S{border-color:rgba(245,158,11,.38);background:rgba(245,158,11,.06)}
.absensi-status-btn.active-I{background:#0284c7;border-color:#0284c7;color:#fff}.absensi-row.status-I{border-color:rgba(2,132,199,.38);background:rgba(2,132,199,.06)}
.absensi-status-btn.active-A{background:#ef4444;border-color:#ef4444;color:#fff}.absensi-row.status-A{border-color:rgba(239,68,68,.38);background:rgba(239,68,68,.055)}
.absensi-status-btn.active-P{background:#8b5cf6;border-color:#8b5cf6;color:#fff}.absensi-row.status-P{border-color:rgba(139,92,246,.38);background:rgba(139,92,246,.055)}
.absensi-sakit-note{grid-column:2/-1;display:flex;align-items:center;margin-top:2px;}
.absensi-sakit-input{width:100%;min-height:34px;border:1px solid rgba(245,158,11,.30);border-radius:10px;background:rgba(245,158,11,.08);color:var(--app-text);font-family:inherit;font-size:12px;font-weight:700;outline:none;padding:8px 10px;}
.absensi-sakit-input::placeholder{color:var(--app-dim);font-weight:600;}
.absensi-empty{padding:22px;text-align:center;border:1px dashed var(--app-border);border-radius:14px;color:var(--app-dim);font-size:12px;font-weight:700;background:var(--app-card);}
@media(max-width:720px){#absensiView{padding:8px}.absensi-head{flex-direction:column}.absensi-meta-grid,.absensi-tools{grid-template-columns:1fr}.absensi-row{grid-template-columns:32px minmax(0,1fr);}.absensi-status-btns,.absensi-sakit-note{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr)}.absensi-sakit-note{display:flex}.absensi-status-btn{width:100%;}.absensi-title{font-size:20px}}


/* ═════════ ABSENSI KELAS — DARK BACKGROUND REVISI ═════════ */
#absensiView{
  display:none;
  width:100%;
  max-width:none;
  margin:0;
  padding:18px 14px 110px;
  box-sizing:border-box;
  min-height:100vh;
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(201,168,76,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 90% 100%, rgba(91,156,246,0.05) 0%, transparent 60%),
    repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(255,255,255,0.012) 60px, rgba(255,255,255,0.012) 61px),
    repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(255,255,255,0.012) 60px, rgba(255,255,255,0.012) 61px),
    #0d1b2a;
  color:#f5f0e8;
}
#absensiView.active{display:block;}
#absensiView .absensi-shell{
  max-width:980px;
  margin:0 auto;
  padding:0;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:visible;
}
#absensiView .absensi-head{
  padding:8px 0 16px;
  border-bottom:1px solid rgba(201,168,76,0.25);
}
#absensiView .absensi-title-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
#absensiView .absensi-back-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  flex-shrink:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:rgba(245,240,232,0.82);
  font-family:inherit;
  font-size:12px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
#absensiView .absensi-back-btn::before{
  content:'';
  width:22px;
  height:22px;
  display:inline-block;
  flex-shrink:0;
  background:currentColor;
  -webkit-mask:var(--ks-back-arrow-icon) center/21px 21px no-repeat;
  mask:var(--ks-back-arrow-icon) center/21px 21px no-repeat;
}
#absensiView .absensi-back-btn:hover,
#absensiView .absensi-back-btn:focus-visible{
  background:rgba(245,240,232,0.18);
  color:#fff;
  outline:none;
}
#absensiView .absensi-title{
  color:#f5f0e8;
  font-size:24px;
  font-weight:900;
  letter-spacing:-.04em;
}
#absensiView .absensi-live{
  background:rgba(201,168,76,0.15);
  border-color:rgba(201,168,76,0.25);
  color:#e8c97a;
}
#absensiView .absensi-meta-card,
#absensiView .absensi-search-wrap,
#absensiView .absensi-mini-btn,
#absensiView .absensi-row,
#absensiView .absensi-empty{
  background:rgba(245,240,232,0.07);
  border-color:rgba(255,255,255,0.07);
  backdrop-filter:blur(8px);
}
#absensiView .absensi-meta-card span,
#absensiView .absensi-section-line{
  color:#c9a84c;
}
#absensiView .absensi-select,
#absensiView .absensi-date,
#absensiView .absensi-date-display,
#absensiView .absensi-inline-date-display,
#absensiView .absensi-search,
#absensiView .absensi-name{
  color:#f5f0e8;
}
#absensiView .absensi-nis,
#absensiView .absensi-legend,
#absensiView .absensi-mini-btn,
#absensiView .absensi-section-line em{
  color:rgba(245,240,232,0.55);
}
#absensiView .absensi-search::placeholder{color:rgba(245,240,232,0.3);}
#absensiView .absensi-section-line:before{background:rgba(255,255,255,0.06);}
#absensiView .absensi-no{
  background:rgba(255,255,255,0.06);
  color:rgba(245,240,232,0.55);
}
#absensiView .absensi-mini-btn.success{
  background:rgba(46,204,154,0.15);
  border-color:rgba(46,204,154,0.30);
  color:#2ecc9a;
}
#absensiView .chip-H{background:rgba(46,204,154,0.15);border-color:rgba(46,204,154,0.25);color:#2ecc9a}
#absensiView .chip-S{background:rgba(240,165,0,0.15);border-color:rgba(240,165,0,0.25);color:#f0a500}
#absensiView .chip-I{background:rgba(91,156,246,0.15);border-color:rgba(91,156,246,0.25);color:#5b9cf6}
#absensiView .chip-A{background:rgba(224,92,92,0.15);border-color:rgba(224,92,92,0.25);color:#e05c5c}
#absensiView .chip-P{background:rgba(176,109,222,0.15);border-color:rgba(176,109,222,0.25);color:#b06dde}
@media(max-width:720px){
  #absensiView{padding:12px 10px 100px;}
  #absensiView .absensi-shell{max-width:none;}
}

/* ═════════ ABSENSI — TAB REKAP DASHBOARD ═════════ */
#absensiView .absensi-tabs{
  display:flex;
  gap:8px;
  padding:4px;
  border:1px solid rgba(201,168,76,0.20);
  background:rgba(245,240,232,0.055);
  border-radius:16px;
  backdrop-filter:blur(8px);
}
#absensiView .absensi-tab{
  flex:1;
  min-height:42px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:rgba(245,240,232,0.58);
  font-family:inherit;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
  cursor:pointer;
  transition:.18s ease;
}
#absensiView .absensi-tab.active{
  background:linear-gradient(135deg, rgba(201,168,76,.95), rgba(168,120,42,.95));
  color:#0d1b2a;
  box-shadow:0 10px 28px rgba(201,168,76,.18);
}
#absensiView .absensi-panel{display:none;flex-direction:column;gap:14px;}
#absensiView .absensi-panel.active{display:flex;}
#absensiView .absensi-rekap-toolbar{
  display:grid;
  grid-template-columns:minmax(220px,360px) auto;
  gap:10px;
  align-items:end;
}
#absensiView .rekap-date-card{min-height:64px;}
#absensiView .absensi-rekap-hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:16px;
  border:1px solid rgba(201,168,76,.18);
  border-radius:18px;
  background:linear-gradient(135deg, rgba(201,168,76,.12), rgba(245,240,232,.045));
  backdrop-filter:blur(8px);
}
#absensiView .absensi-rekap-kicker{
  font-size:10px;
  font-weight:950;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#c9a84c;
  margin-bottom:4px;
}
#absensiView .absensi-rekap-title{
  font-size:21px;
  font-weight:950;
  color:#f5f0e8;
  letter-spacing:-.04em;
}
#absensiView .absensi-rekap-date{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(13,27,42,.45);
  border:1px solid rgba(245,240,232,.08);
  color:#e8c97a;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}
#absensiView .absensi-rekap-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}
#absensiView .absensi-rekap-grid > .absensi-empty{grid-column:1/-1;}
#absensiView .absensi-rekap-stat{
  min-height:100px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(245,240,232,.07);
  backdrop-filter:blur(8px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:8px;
}
#absensiView .absensi-rekap-stat span{
  font-size:10px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#c9a84c;
}
#absensiView .absensi-rekap-stat strong{
  font-size:30px;
  line-height:1;
  color:#f5f0e8;
  font-weight:950;
}
#absensiView .absensi-rekap-stat em{
  font-style:normal;
  font-size:11px;
  color:rgba(245,240,232,.55);
  font-weight:750;
  line-height:1.35;
}
#absensiView .absensi-rekap-stat.ok{border-color:rgba(46,204,154,.22);background:rgba(46,204,154,.08);}
#absensiView .absensi-rekap-stat.warn{border-color:rgba(240,165,0,.26);background:rgba(240,165,0,.085);}
#absensiView .absensi-rekap-stat.danger{border-color:rgba(224,92,92,.28);background:rgba(224,92,92,.085);}
#absensiView .absensi-rekap-stat.clickable{
  cursor:pointer;
  border-radius:14px;
}
#absensiView .absensi-rekap-stat.clickable:hover,
#absensiView .absensi-rekap-stat.clickable:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(201,168,76,.34);
  box-shadow:0 14px 34px rgba(0,0,0,.16);
  outline:none;
}
#absensiView .absensi-rekap-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
#absensiView .absensi-sakit-panel[hidden]{display:none!important;}
#absensiView .absensi-sakit-panel{
  border:1px solid rgba(240,165,0,.22);
  border-radius:16px;
  background:rgba(240,165,0,.075);
  overflow:hidden;
  backdrop-filter:blur(8px);
}
#absensiView .absensi-sakit-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:15px 16px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
#absensiView .absensi-sakit-head h3{
  margin:0;
  color:#f5f0e8;
  font-size:15px;
  font-weight:800;
  line-height:1.3;
}
#absensiView .absensi-sakit-head p{
  margin:3px 0 0;
  color:rgba(245,240,232,.55);
  font-size:11.5px;
  font-weight:600;
}
#absensiView .absensi-sakit-close{
  width:32px;
  height:32px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  background:rgba(255,255,255,.06);
  color:rgba(245,240,232,.78);
  font-family:inherit;
  font-size:18px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
}
#absensiView .absensi-sakit-list{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
#absensiView .absensi-sakit-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(160px,260px);
  gap:10px;
  align-items:center;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:rgba(13,27,42,.22);
}
#absensiView .absensi-sakit-item strong{
  display:block;
  color:#f5f0e8;
  font-size:13px;
  font-weight:800;
  line-height:1.35;
}
#absensiView .absensi-sakit-item small{
  display:block;
  margin-top:2px;
  color:rgba(245,240,232,.52);
  font-size:10.5px;
  font-weight:600;
}
#absensiView .absensi-sakit-item span{
  justify-self:end;
  max-width:100%;
  padding:7px 10px;
  border-radius:10px;
  background:rgba(240,165,0,.14);
  color:#f0a500;
  font-size:11.5px;
  font-weight:700;
  line-height:1.35;
  overflow-wrap:anywhere;
}
#absensiView .absensi-rekap-card{
  border:1px solid rgba(201,168,76,.16);
  border-radius:20px;
  background:rgba(245,240,232,.055);
  overflow:hidden;
  backdrop-filter:blur(8px);
}
#absensiView .absensi-rekap-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding:15px 16px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
#absensiView .absensi-rekap-card-head h3{
  margin:0;
  font-size:15px;
  font-weight:950;
  color:#f5f0e8;
}
#absensiView .absensi-rekap-card-head p{
  margin:3px 0 0;
  font-size:11px;
  font-weight:750;
  color:rgba(245,240,232,.55);
}
#absensiView .absensi-rekap-card-head span{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(224,92,92,.13);
  border:1px solid rgba(224,92,92,.22);
  color:#e05c5c;
  font-size:10px;
  font-weight:950;
  white-space:nowrap;
}
#absensiView .absensi-rekap-list{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
#absensiView .absensi-rekap-group{
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  background:rgba(13,27,42,.24);
  overflow:hidden;
}
#absensiView .absensi-rekap-group-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
#absensiView .absensi-rekap-group-head b{font-size:12px;color:#e8c97a;font-weight:950;}
#absensiView .absensi-rekap-group-head span{font-size:10px;color:rgba(245,240,232,.55);font-weight:900;}
#absensiView .absensi-rekap-person{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px 12px;
}
#absensiView .absensi-rekap-person + .absensi-rekap-person{border-top:1px solid rgba(255,255,255,.045);}
#absensiView .absensi-rekap-person strong{
  display:block;
  color:#f5f0e8;
  font-size:12.5px;
  font-weight:900;
  line-height:1.25;
}
#absensiView .absensi-rekap-person small{
  display:block;
  color:rgba(245,240,232,.50);
  font-size:10px;
  font-weight:750;
  margin-top:2px;
}
#absensiView .absensi-rekap-person > span{
  padding:6px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:950;
  white-space:nowrap;
}
#absensiView .absensi-rekap-person > span.status-S{background:rgba(240,165,0,.16);color:#f0a500;}
#absensiView .absensi-rekap-person > span.status-I{background:rgba(91,156,246,.16);color:#5b9cf6;}
#absensiView .absensi-rekap-person > span.status-A{background:rgba(224,92,92,.16);color:#e05c5c;}
#absensiView .absensi-rekap-person > span.status-P{background:rgba(176,109,222,.16);color:#b06dde;}

/* ── REKAP BULANAN ── */
#absensiView .absbl-note{margin-top:12px;font-size:11.5px;line-height:1.6;color:rgba(226,232,240,.62);}
#absensiView[data-absensi-theme="light"] .absbl-note{color:rgba(23,32,51,.62);}
#absensiView .absbl-table-wrap{overflow:auto;border:1px solid rgba(255,255,255,.08);border-radius:12px;}
#absensiView[data-absensi-theme="light"] .absbl-table-wrap{border-color:rgba(23,32,51,.12);}
#absensiView .absbl-table{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap;}
#absensiView .absbl-monthly-table{table-layout:fixed;min-width:920px;width:100%;}
#absensiView .absbl-monthly-table .absbl-col-no{width:4%;}
#absensiView .absbl-monthly-table .absbl-col-name{width:28%;}
#absensiView .absbl-monthly-table .absbl-col-kelas{width:9%;}
#absensiView .absbl-monthly-table .absbl-col-status{width:6%;}
#absensiView .absbl-monthly-table .absbl-col-total{width:8%;}
#absensiView .absbl-monthly-table .absbl-col-pct{width:9%;}
#absensiView .absbl-monthly-table .absbl-col-active{width:12%;}
#absensiView .absbl-monthly-table .absbl-col-grade{width:6%;}
#absensiView .absbl-table th,#absensiView .absbl-table td{border:1px solid rgba(255,255,255,.08);padding:7px 9px;text-align:center;}
#absensiView .absbl-table td.absbl-name{text-align:left;white-space:nowrap;font-weight:700;}
#absensiView .absbl-table thead th{position:sticky;top:0;background:rgba(30,41,59,.96);color:#e2e8f0;font-weight:800;z-index:1;}
#absensiView .absbl-table tfoot td{font-weight:800;background:rgba(255,255,255,.05);}
#absensiView[data-absensi-theme="light"] .absbl-table th,#absensiView[data-absensi-theme="light"] .absbl-table td{border-color:rgba(23,32,51,.12);color:#172033;}
#absensiView[data-absensi-theme="light"] .absbl-table thead th{background:#eef2f7;color:#172033;}
#absensiView[data-absensi-theme="light"] .absbl-table tfoot td{background:#f5f7fa;}
#absensiView .absensi-histori-search-card{min-width:min(100%,360px);position:relative;z-index:2;}
#absensiView .absensi-histori-search-card.has-results{z-index:45;}
#absensiView .absensi-histori-search-wrap{position:relative;width:100%;}
#absensiView .absensi-histori-search-wrap .absensi-search{width:100%;box-sizing:border-box;}
#absensiView .absensi-histori-results{
  display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;
  max-height:280px;overflow:auto;border:1px solid rgba(255,255,255,.12);
  border-radius:12px;background:rgba(13,27,42,.98);box-shadow:0 18px 42px rgba(0,0,0,.28);
  padding:6px;
}
#absensiView .absensi-histori-search-card.has-results .absensi-histori-results{
  position:static;
  margin-top:8px;
}
#absensiView[data-absensi-theme="light"] .absensi-histori-results{background:#fff;border-color:rgba(23,32,51,.14);box-shadow:0 18px 42px rgba(23,32,51,.14);}
#absensiView .absensi-histori-result{
  width:100%;border:0;background:transparent;color:#f5f0e8;text-align:left;
  padding:9px 10px;border-radius:9px;cursor:pointer;font-family:inherit;
}
#absensiView .absensi-histori-result:hover{background:rgba(201,168,76,.14);}
#absensiView .absensi-histori-result strong{display:block;font-size:12px;font-weight:900;line-height:1.25;}
#absensiView .absensi-histori-result span{display:block;margin-top:2px;font-size:10.5px;color:rgba(245,240,232,.58);font-weight:750;}
#absensiView[data-absensi-theme="light"] .absensi-histori-result{color:#172033;}
#absensiView[data-absensi-theme="light"] .absensi-histori-result span{color:rgba(23,32,51,.58);}
#absensiView .absensi-histori-empty{padding:10px;color:rgba(245,240,232,.58);font-size:11px;font-weight:750;}
#absensiView[data-absensi-theme="light"] .absensi-histori-empty{color:rgba(23,32,51,.58);}
#absensiView .absensi-histori-selected{
  margin:0 0 12px;padding:12px 14px;border:1px solid rgba(201,168,76,.22);
  border-radius:14px;background:rgba(201,168,76,.10);
}
#absensiView .absensi-histori-selected strong{display:block;color:#e8c97a;font-size:14px;font-weight:950;}
#absensiView .absensi-histori-selected span{display:block;margin-top:3px;color:rgba(245,240,232,.58);font-size:11px;font-weight:800;}
#absensiView[data-absensi-theme="light"] .absensi-histori-selected{background:rgba(201,168,76,.12);}
#absensiView[data-absensi-theme="light"] .absensi-histori-selected span{color:rgba(23,32,51,.58);}
#absensiView .absensi-histori-summary{margin-bottom:12px;}
#absensiView .absensi-histori-table td.absensi-histori-reason{text-align:left;white-space:normal;min-width:240px;}
#absensiView .absensi-histori-status{display:inline-flex;align-items:center;justify-content:center;min-width:68px;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:950;}
#absensiView .absensi-histori-status.status-H{background:rgba(42,157,143,.16);color:#2a9d8f;}
#absensiView .absensi-histori-status.status-S{background:rgba(240,165,0,.16);color:#f0a500;}
#absensiView .absensi-histori-status.status-I{background:rgba(91,156,246,.16);color:#5b9cf6;}
#absensiView .absensi-histori-status.status-A{background:rgba(224,92,92,.16);color:#e05c5c;}
#absensiView .absensi-histori-status.status-P{background:rgba(176,109,222,.16);color:#b06dde;}
#absensiView .absensi-libur-toolbar{display:grid;grid-template-columns:auto minmax(220px,320px) auto;gap:10px;align-items:end;}
#absensiView .absensi-libur-hint{
  padding:12px 14px;border:1px solid rgba(91,156,246,.28);border-radius:12px;
  background:rgba(91,156,246,.10);color:#7db4ff;font-size:12px;font-weight:850;line-height:1.5;
}
#absensiView .absensi-hari-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
#absensiView .absensi-hari-card{min-width:0;}
#absensiView .absensi-libur-counters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px;}
#absensiView .absensi-libur-counters div{
  min-width:0;padding:9px 10px;border:1px solid rgba(255,255,255,.08);border-radius:10px;
  background:rgba(245,240,232,.055);
}
#absensiView .absensi-libur-counters span{
  display:block;color:rgba(245,240,232,.58);font-size:9.5px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;
}
#absensiView .absensi-libur-counters strong{
  display:block;margin-top:3px;color:#e8c97a;font-size:20px;font-weight:950;line-height:1;
}
#absensiView .absensi-libur-calendar{margin-top:12px;}
#absensiView .absensi-libur-weekdays,
#absensiView .absensi-libur-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;}
#absensiView .absensi-libur-weekdays span{
  text-align:center;color:rgba(245,240,232,.58);font-size:10px;font-weight:950;letter-spacing:.08em;
}
#absensiView .absensi-libur-days{margin-top:6px;}
#absensiView .absensi-libur-day{
  position:relative;min-height:42px;border:1px solid rgba(255,255,255,.09);border-radius:10px;
  background:rgba(245,240,232,.055);color:#f5f0e8;font-family:inherit;font-size:13px;font-weight:950;
  cursor:pointer;transition:background .14s ease,border-color .14s ease,transform .14s ease;
}
#absensiView .absensi-libur-day:hover{transform:translateY(-1px);border-color:rgba(91,156,246,.36);background:rgba(91,156,246,.10);}
#absensiView .absensi-libur-day.is-empty{visibility:hidden;pointer-events:none;}
#absensiView .absensi-libur-day.is-sunday{
  cursor:not-allowed;background:rgba(224,92,92,.12);border-color:rgba(224,92,92,.28);color:#ff9a9a;
}
#absensiView .absensi-libur-day.is-sunday::after{
  content:'Ahad';position:absolute;left:0;right:0;bottom:4px;text-align:center;
  font-size:8px;font-weight:900;color:rgba(255,154,154,.82);
}
#absensiView .absensi-libur-day.is-holiday{
  background:rgba(240,165,0,.18);border-color:rgba(240,165,0,.50);color:#ffd98a;box-shadow:0 8px 24px rgba(240,165,0,.12);
}
#absensiView .absensi-libur-day.is-holiday::after{
  content:'Libur';position:absolute;left:0;right:0;bottom:4px;text-align:center;
  font-size:8px;font-weight:950;color:rgba(255,217,138,.9);
}
#absensiView .absensi-libur-day.is-today{outline:2px solid rgba(91,156,246,.55);outline-offset:1px;}
#absensiView .absensi-hari-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
#absensiView .absensi-hari-actions span{font-size:11.5px;font-weight:800;color:rgba(245,240,232,.58);}
#absensiView[data-absensi-theme="light"] .absensi-libur-hint{background:#eaf5ff;border-color:#b7ddff;color:#0072b8;}
#absensiView[data-absensi-theme="light"] .absensi-libur-counters div{background:rgba(255,255,255,.72);border-color:rgba(23,32,51,.10);}
#absensiView[data-absensi-theme="light"] .absensi-libur-counters span{color:rgba(23,32,51,.58);}
#absensiView[data-absensi-theme="light"] .absensi-libur-counters strong{color:#8a641c;}
#absensiView[data-absensi-theme="light"] .absensi-libur-weekdays span{color:rgba(23,32,51,.58);}
#absensiView[data-absensi-theme="light"] .absensi-libur-day{background:rgba(255,255,255,.78);border-color:rgba(23,32,51,.10);color:#172033;}
#absensiView[data-absensi-theme="light"] .absensi-libur-day.is-sunday{background:#ffeaea;border-color:#ffb8b8;color:#b91c1c;}
#absensiView[data-absensi-theme="light"] .absensi-libur-day.is-sunday::after{color:rgba(185,28,28,.78);}
#absensiView[data-absensi-theme="light"] .absensi-libur-day.is-holiday{background:#fff1cc;border-color:#ffbd59;color:#a24700;}
#absensiView[data-absensi-theme="light"] .absensi-libur-day.is-holiday::after{color:rgba(162,71,0,.85);}
#absensiView[data-absensi-theme="light"] .absensi-hari-actions span{color:rgba(23,32,51,.58);}
@media(max-width:720px){#absensiView .absbl-toolbar{grid-template-columns:1fr 1fr;}}
@media(max-width:980px){
  #absensiView .absensi-rekap-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  #absensiView .absensi-rekap-columns{grid-template-columns:1fr;}
  #absensiView .absensi-hari-grid{grid-template-columns:1fr;}
}
@media(max-width:720px){
  #absensiView .absensi-tabs{position:sticky;top:0;z-index:4;background:rgba(13,27,42,.88);}
  #absensiView .absensi-libur-toolbar{grid-template-columns:1fr;}
  #absensiView .absensi-libur-counters{grid-template-columns:1fr 1fr;}
  #absensiView .absensi-rekap-toolbar{grid-template-columns:1fr;}
  #absensiView .absensi-rekap-hero{align-items:flex-start;flex-direction:column;}
  #absensiView .absensi-rekap-date{white-space:normal;}
}

/* ═════════ ABSENSI — LIGHT/DARK MODE + SAVE INDICATOR ═════════ */
#absensiView .absensi-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
#absensiView .absensi-theme-toggle{height:34px;border-radius:999px;border:1px solid rgba(201,168,76,.25);background:rgba(201,168,76,.12);color:#e8c97a;font-family:inherit;font-size:11px;font-weight:950;padding:0 12px;cursor:pointer;white-space:nowrap;}
#absensiView .absensi-save-bar{position:sticky;bottom:10px;z-index:20;display:flex;gap:10px;align-items:center;padding:12px;border:1px solid rgba(201,168,76,.18);border-radius:18px;background:rgba(13,27,42,.82);backdrop-filter:blur(14px);box-shadow:0 18px 45px rgba(0,0,0,.28);}
#absensiView .absensi-progress-wrap{flex:1;min-height:46px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(245,240,232,.055);position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;padding:0 14px;}
#absensiView .absensi-progress-bar{position:absolute;inset:0 auto 0 0;width:0%;background:rgba(201,168,76,.18);transition:width .28s ease;}
#absensiView .absensi-progress-text,#absensiView .absensi-progress-sub{position:relative;z-index:1;font-size:12px;font-weight:950;color:#e8c97a;white-space:nowrap;}
#absensiView .absensi-progress-sub{margin-left:auto;color:rgba(245,240,232,.58);font-size:11px;}
#absensiView .absensi-save-btn{height:46px;border:0;border-radius:14px;background:linear-gradient(135deg,#c9a84c,#a8782a);color:#0d1b2a;font-family:inherit;font-size:12px;font-weight:950;letter-spacing:.04em;padding:0 26px;cursor:pointer;box-shadow:0 10px 26px rgba(201,168,76,.22);white-space:nowrap;}
#absensiView .absensi-save-btn.saved{background:linear-gradient(135deg,#2ecc9a,#1a9e6e);color:#fff;box-shadow:0 10px 26px rgba(46,204,154,.20);}
#absensiView .absensi-save-btn:disabled{opacity:.72;cursor:not-allowed;box-shadow:none;}

#absensiView[data-absensi-theme="light"]{
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(201,168,76,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 90% 100%, rgba(91,156,246,0.12) 0%, transparent 60%),
    repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(13,27,42,0.035) 60px, rgba(13,27,42,0.035) 61px),
    repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(13,27,42,0.035) 60px, rgba(13,27,42,0.035) 61px),
    #f7f3ea;
  color:#172033;
}
#absensiView[data-absensi-theme="light"] .absensi-head{border-bottom-color:rgba(13,27,42,.10);}
#absensiView[data-absensi-theme="light"] .absensi-title,
#absensiView[data-absensi-theme="light"] .absensi-name,
#absensiView[data-absensi-theme="light"] .absensi-rekap-title,
#absensiView[data-absensi-theme="light"] .absensi-sakit-head h3,
#absensiView[data-absensi-theme="light"] .absensi-sakit-item strong,
#absensiView[data-absensi-theme="light"] .absensi-rekap-stat strong,
#absensiView[data-absensi-theme="light"] .absensi-rekap-card-head h3,
#absensiView[data-absensi-theme="light"] .absensi-rekap-person strong{color:#172033;}
#absensiView[data-absensi-theme="light"] .absensi-live,
#absensiView[data-absensi-theme="light"] .absensi-theme-toggle{background:rgba(201,168,76,.14);border-color:rgba(168,120,42,.22);color:#8a641c;}
#absensiView[data-absensi-theme="light"] .absensi-back-btn{background:transparent;color:#8a641c;}
#absensiView[data-absensi-theme="light"] .absensi-back-btn:hover,
#absensiView[data-absensi-theme="light"] .absensi-back-btn:focus-visible{background:rgba(201,168,76,.18);color:#6f4e12;}
#absensiView[data-absensi-theme="light"] .absensi-meta-card,
#absensiView[data-absensi-theme="light"] .absensi-search-wrap,
#absensiView[data-absensi-theme="light"] .absensi-mini-btn,
#absensiView[data-absensi-theme="light"] .absensi-row,
#absensiView[data-absensi-theme="light"] .absensi-empty,
#absensiView[data-absensi-theme="light"] .absensi-tabs,
#absensiView[data-absensi-theme="light"] .absensi-rekap-card,
#absensiView[data-absensi-theme="light"] .absensi-sakit-panel,
#absensiView[data-absensi-theme="light"] .absensi-sakit-item,
#absensiView[data-absensi-theme="light"] .absensi-rekap-stat{background:rgba(255,255,255,.68);border-color:rgba(13,27,42,.09);box-shadow:0 10px 30px rgba(15,23,42,.045);}
#absensiView[data-absensi-theme="light"] .absensi-sakit-input{background:rgba(245,158,11,.09);border-color:rgba(217,119,6,.28);color:#172033;}
#absensiView[data-absensi-theme="light"] .absensi-select,
#absensiView[data-absensi-theme="light"] .absensi-date,
#absensiView[data-absensi-theme="light"] .absensi-date-display,
#absensiView[data-absensi-theme="light"] .absensi-inline-date-display,
#absensiView[data-absensi-theme="light"] .absensi-search{color:#172033;}
#absensiView[data-absensi-theme="light"] .absensi-nis,
#absensiView[data-absensi-theme="light"] .absensi-legend,
#absensiView[data-absensi-theme="light"] .absensi-mini-btn,
#absensiView[data-absensi-theme="light"] .absensi-section-line em,
#absensiView[data-absensi-theme="light"] .absensi-rekap-stat em,
#absensiView[data-absensi-theme="light"] .absensi-rekap-card-head p,
#absensiView[data-absensi-theme="light"] .absensi-sakit-head p,
#absensiView[data-absensi-theme="light"] .absensi-sakit-item small,
#absensiView[data-absensi-theme="light"] .absensi-rekap-group-head span,
#absensiView[data-absensi-theme="light"] .absensi-rekap-person small{color:rgba(23,32,51,.58);}
#absensiView[data-absensi-theme="light"] .absensi-no{
  background:rgba(154,116,40,.12);
  color:#7a5818;
}
#absensiView[data-absensi-theme="light"] .absensi-meta-card span,
#absensiView[data-absensi-theme="light"] .absensi-section-line,
#absensiView[data-absensi-theme="light"] .absensi-rekap-kicker,
#absensiView[data-absensi-theme="light"] .absensi-rekap-stat span,
#absensiView[data-absensi-theme="light"] .absensi-rekap-group-head b{color:#9a7428;}
#absensiView[data-absensi-theme="light"] .absensi-section-line:before{background:rgba(13,27,42,.10);}
#absensiView[data-absensi-theme="light"] .absensi-tab{color:rgba(23,32,51,.56);}
#absensiView[data-absensi-theme="light"] .absensi-tab.active{color:#172033;}
#absensiView[data-absensi-theme="light"] .absensi-rekap-hero{background:linear-gradient(135deg,rgba(201,168,76,.16),rgba(255,255,255,.64));border-color:rgba(168,120,42,.14);}
#absensiView[data-absensi-theme="light"] .absensi-rekap-date{background:rgba(255,255,255,.72);border-color:rgba(13,27,42,.09);color:#8a641c;}
#absensiView[data-absensi-theme="light"] .absensi-rekap-group{background:rgba(255,255,255,.52);border-color:rgba(13,27,42,.08);}
#absensiView[data-absensi-theme="light"] .absensi-rekap-group-head,
#absensiView[data-absensi-theme="light"] .absensi-rekap-person + .absensi-rekap-person,
#absensiView[data-absensi-theme="light"] .absensi-rekap-card-head,
#absensiView[data-absensi-theme="light"] .absensi-sakit-head{border-color:rgba(13,27,42,.08);}
#absensiView[data-absensi-theme="light"] .absensi-sakit-close{background:rgba(13,27,42,.04);border-color:rgba(13,27,42,.10);color:rgba(23,32,51,.62);}
#absensiView[data-absensi-theme="light"] .absensi-sakit-item span{background:rgba(217,119,6,.12);color:#b45309;}
#absensiView[data-absensi-theme="light"] .absensi-save-bar{background:rgba(247,243,234,.86);border-color:rgba(168,120,42,.16);box-shadow:0 18px 45px rgba(15,23,42,.12);}
#absensiView[data-absensi-theme="light"] .absensi-progress-wrap{background:rgba(255,255,255,.72);border-color:rgba(13,27,42,.08);}
#absensiView[data-absensi-theme="light"] .absensi-progress-text{color:#8a641c;}
#absensiView[data-absensi-theme="light"] .absensi-progress-sub{color:rgba(23,32,51,.58);}
@media(max-width:720px){#absensiView .absensi-head-actions{justify-content:flex-start}#absensiView .absensi-save-bar{position:sticky;bottom:8px;display:grid;grid-template-columns:1fr}#absensiView .absensi-save-btn{width:100%;}}

/* ═════════ ABSENSI — SAMAKAN FONT DENGAN HALAMAN PENILAIAN ═════════ */
#absensiView,
#absensiView *{
  font-family:'Plus Jakarta Sans',sans-serif !important;
}
#absensiView{
  font-size:13px;
}
#absensiView .absensi-title{
  font-size:22px;
  font-weight:800;
  letter-spacing:0;
  line-height:1.25;
}
#absensiView .absensi-name{
  font-size:13px;
  font-weight:700;
}
#absensiView .absensi-select,
#absensiView .absensi-date,
#absensiView .absensi-date-display,
#absensiView .absensi-search{
  font-size:13px;
  font-weight:700;
}
#absensiView .absensi-meta-card span,
#absensiView .absensi-section-line,
#absensiView .absensi-chip,
#absensiView .absensi-mini-btn,
#absensiView .absensi-tab,
#absensiView .absensi-save-btn,
#absensiView .absensi-progress-text,
#absensiView .absensi-progress-sub{
  font-weight:700;
  letter-spacing:.01em;
}

#absensiView .absensi-live strong{font:inherit;font-weight:800;}
#absensiView .absensi-live[data-state="pending"]{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.32);color:#f59e0b;}
#absensiView .absensi-live[data-state="pending"] span{background:#f59e0b;box-shadow:0 0 10px #f59e0b;}
#absensiView .absensi-live[data-state="saving"]{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.32);color:#60a5fa;}
#absensiView .absensi-live[data-state="saving"] span{background:#60a5fa;box-shadow:0 0 10px #60a5fa;animation-duration:.65s;}
#absensiView .absensi-live[data-state="saved"]{background:rgba(34,197,94,.13);border-color:rgba(34,197,94,.3);color:#22c55e;}
#absensiView .absensi-live[data-state="saved"] span{background:#22c55e;box-shadow:0 0 10px #22c55e;animation:none;}
#absensiView .absensi-live[data-state="error"]{background:rgba(239,68,68,.13);border-color:rgba(239,68,68,.3);color:#ef4444;}
#absensiView .absensi-live[data-state="error"] span{background:#ef4444;box-shadow:0 0 10px #ef4444;animation:none;}

#absensiView .absensi-rekap-hero{
  padding:18px 20px;
  border-radius:14px;
  gap:18px;
  align-items:center;
}
#absensiView .absensi-rekap-hero > div:first-child{
  min-width:0;
}
#absensiView .absensi-rekap-kicker{
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.25;
  margin-bottom:7px;
}
#absensiView .absensi-rekap-title{
  font-size:20px;
  font-weight:800;
  letter-spacing:0;
  line-height:1.28;
}
#absensiView .absensi-rekap-date{
  border-radius:10px;
  font-size:12px;
  font-weight:700;
  line-height:1.35;
  padding:8px 11px;
}
#absensiView .absensi-rekap-grid{
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;
}
#absensiView .absensi-rekap-stat{
  min-height:104px;
  padding:15px 16px;
  border-radius:14px;
  justify-content:flex-start;
  gap:7px;
}
#absensiView .absensi-rekap-stat span{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.07em;
  line-height:1.25;
}
#absensiView .absensi-rekap-stat strong{
  font-size:31px;
  font-weight:800;
  line-height:1.08;
  letter-spacing:0;
}
#absensiView .absensi-rekap-stat em{
  font-size:11.5px;
  font-weight:600;
  line-height:1.35;
}
#absensiView .absensi-rekap-card{
  border-radius:14px;
}
#absensiView .absensi-rekap-card-head{
  padding:14px 16px;
  gap:12px;
}
#absensiView .absensi-rekap-card-head h3{
  font-size:14px;
  font-weight:800;
  line-height:1.3;
  letter-spacing:0;
}
#absensiView .absensi-rekap-card-head p{
  font-size:11px;
  font-weight:600;
  line-height:1.35;
}
#absensiView .absensi-rekap-card-head span,
#absensiView .absensi-rekap-group-head b,
#absensiView .absensi-rekap-group-head span,
#absensiView .absensi-rekap-person > span{
  font-weight:700;
  letter-spacing:0;
}
#absensiView .absensi-rekap-group{
  border-radius:12px;
}
#absensiView .absensi-rekap-person strong{
  font-weight:700;
  line-height:1.35;
  letter-spacing:0;
}
#absensiView .absensi-rekap-person small{
  font-weight:600;
  line-height:1.35;
}

@media(max-width:720px){
  #absensiView .absensi-rekap-hero{
    padding:15px;
    gap:10px;
  }
  #absensiView .absensi-rekap-title{
    font-size:18px;
  }
  #absensiView .absensi-rekap-grid{
    grid-template-columns:1fr;
  }
  #absensiView .absensi-rekap-stat{
    min-height:92px;
  }
  #absensiView .absensi-sakit-item{
    grid-template-columns:1fr;
  }
  #absensiView .absensi-sakit-item span{
    justify-self:start;
  }
}
/* Penyusun Kalender Akademik */
.kaldik-builder-shell{display:flex;flex-direction:column;gap:14px;color:var(--app-text)}
.kaldik-builder-head,.kaldik-config-card,.kaldik-editor-card,.kaldik-preview-card{background:var(--app-card);border:1px solid var(--app-border);box-shadow:var(--app-shadow)}
.kaldik-builder-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:20px;border-radius:16px}
.kaldik-builder-head h2{font-size:22px;line-height:1.2;margin:3px 0 7px;color:var(--app-text)}
.kaldik-builder-head p{max-width:720px;font-size:12px;line-height:1.6;color:var(--app-dim)}
.kaldik-builder-eyebrow{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--app-warn)}
.kaldik-builder-actions,.kaldik-form-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kaldik-btn{border:1px solid transparent;border-radius:9px;padding:9px 13px;font:700 11px/1 'Plus Jakarta Sans',sans-serif;cursor:pointer;transition:.18s ease}
.kaldik-btn:hover{transform:translateY(-1px);filter:brightness(.98)}
.kaldik-btn:disabled{cursor:wait;opacity:.58;transform:none}
.kaldik-btn.primary{background:var(--app-blue);border-color:var(--app-blue);color:#fff}
.kaldik-btn.secondary{background:var(--app-muted);border-color:var(--app-border);color:var(--app-text)}
.kaldik-config-card{display:grid;grid-template-columns:150px 130px minmax(230px,1fr);gap:12px;padding:15px;border-radius:14px}
.kaldik-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.kaldik-field>span,.kaldik-check-field span{font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--app-dim)}
.kaldik-field input,.kaldik-field select,.kaldik-field textarea{width:100%;border:1px solid var(--app-border);border-radius:8px;background:var(--app-muted);color:var(--app-text);font:600 12px/1.35 'Plus Jakarta Sans',sans-serif;padding:9px 10px;outline:none}
.kaldik-field textarea{resize:vertical;min-height:72px}
.kaldik-field input:focus,.kaldik-field select:focus,.kaldik-field textarea:focus{border-color:var(--app-blue);box-shadow:var(--app-ring)}
.kaldik-field-full{grid-column:1/-1}
.kaldik-builder-grid{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:14px;align-items:start}
.kaldik-editor-card,.kaldik-preview-card{border-radius:14px;padding:15px}
.kaldik-editor-card{position:sticky;top:84px;display:flex;flex-direction:column;gap:12px}
.kaldik-card-title{font-size:12px;font-weight:900;color:var(--app-text)}
.kaldik-selected-label{padding:9px 10px;border-left:3px solid var(--app-blue);background:var(--app-sel);font-size:11px;font-weight:700;color:var(--app-blue)}
.kaldik-form-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.kaldik-color-row{align-items:end}
.kaldik-color-input{display:grid;grid-template-columns:38px 1fr;gap:6px}
.kaldik-color-input input[type=color]{height:35px;padding:3px;cursor:pointer}
.kaldik-check-field{display:flex;align-items:center;gap:7px;min-height:36px;padding:7px 8px;border:1px solid var(--app-border);border-radius:8px;background:var(--app-muted);cursor:pointer}
.kaldik-check-field input{accent-color:var(--app-danger)}
.kaldik-palette{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.kaldik-palette-btn{height:30px;border:2px solid rgba(15,23,42,.18);border-radius:7px;cursor:pointer;position:relative}
.kaldik-palette-btn.active{outline:3px solid rgba(2,132,199,.28);border-color:var(--app-blue)}
.kaldik-palette-btn span{position:absolute;inset:auto 2px 2px;font-size:7px;font-weight:900;color:rgba(0,0,0,.72);text-align:center;text-transform:uppercase;overflow:hidden}
.kaldik-event-section{border-top:1px solid var(--app-border);padding-top:12px;display:flex;flex-direction:column;gap:9px}
.kaldik-event-list{display:flex;flex-direction:column;gap:7px;max-height:330px;overflow:auto;padding-right:2px}
.kaldik-event-empty{padding:16px;border:1px dashed var(--app-border);border-radius:9px;text-align:center;font-size:11px;color:var(--app-dim)}
.kaldik-event-item{display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:8px;align-items:start;padding:9px;border:1px solid var(--app-border);border-radius:9px;background:var(--app-muted)}
.kaldik-event-swatch{width:9px;height:100%;min-height:36px;border-radius:5px}
.kaldik-event-date{font-size:9px;font-weight:800;color:var(--app-dim);margin-bottom:2px}
.kaldik-event-name{font-size:10px;font-weight:800;line-height:1.35;color:var(--app-text);overflow-wrap:anywhere}
.kaldik-event-flags{font-size:8px;color:var(--app-danger);font-weight:800;margin-top:3px}
.kaldik-event-actions{display:flex;gap:3px}
.kaldik-event-actions button{border:1px solid var(--app-border);background:var(--app-card);color:var(--app-dim);border-radius:6px;padding:4px 6px;font-size:9px;font-weight:800;cursor:pointer}
.kaldik-event-actions button:last-child{color:var(--app-danger)}
.kaldik-preview-card{min-width:0}
.kaldik-preview-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}
.kaldik-preview-sub{font-size:10px;color:var(--app-dim);margin-top:3px}
.kaldik-template-note{font-size:9px;font-weight:800;color:var(--app-dim);background:var(--app-muted);border:1px solid var(--app-border);border-radius:999px;padding:6px 9px;white-space:nowrap}
.kaldik-calendar-preview{display:grid;grid-template-columns:repeat(3,minmax(190px,1fr));gap:9px}
.kaldik-semester-title{grid-column:1/-1;background:#00ffff;color:#111827;border:1px solid rgba(15,23,42,.3);padding:6px 9px;text-align:center;font-size:10px;font-weight:900;letter-spacing:.08em}
.kaldik-month{border:1px solid rgba(15,23,42,.28);background:#fff;min-width:0}
.kaldik-month-title{background:#dce6e8;border-bottom:1px solid rgba(15,23,42,.25);padding:5px;text-align:center;font-size:10px;font-weight:900;color:#111827;text-transform:uppercase}
.kaldik-weekdays,.kaldik-days{display:grid;grid-template-columns:repeat(7,1fr)}
.kaldik-weekdays span{background:#d9e9fd;border-right:1px solid rgba(15,23,42,.18);border-bottom:1px solid rgba(15,23,42,.24);padding:4px 1px;text-align:center;font-size:8px;font-weight:900;color:#111827}
.kaldik-weekdays span:last-child{border-right:0}
.kaldik-day{aspect-ratio:1.15;min-height:26px;border:0;border-right:1px solid rgba(15,23,42,.17);border-bottom:1px solid rgba(15,23,42,.17);background:#92d050;color:#111827;font:800 9px/1 'Plus Jakarta Sans',sans-serif;cursor:pointer;position:relative}
.kaldik-day:nth-child(7n){border-right:0}
.kaldik-day.empty{background:#fff;cursor:default}
.kaldik-day.sunday{background:#ff0000;color:#fff}
.kaldik-day.selected{z-index:1;outline:3px solid #0284c7;outline-offset:-2px}
.kaldik-day.has-event::after{content:'';position:absolute;width:4px;height:4px;border-radius:50%;right:3px;bottom:3px;background:currentColor;box-shadow:0 0 0 1px rgba(255,255,255,.75)}
.kaldik-day:hover:not(.empty){filter:brightness(.9)}
.kaldik-status{display:none;border-radius:9px;padding:10px 12px;font-size:11px;font-weight:700}
.kaldik-status.show{display:block;background:var(--app-sel);color:var(--app-blue);border:1px solid rgba(2,132,199,.25)}
.kaldik-status.error{background:#fef2f2;color:var(--app-danger);border-color:#fecaca}
@media(max-width:1050px){.kaldik-builder-grid{grid-template-columns:1fr}.kaldik-editor-card{position:static}.kaldik-calendar-preview{grid-template-columns:repeat(3,minmax(160px,1fr))}}
@media(max-width:760px){.kaldik-builder-head{flex-direction:column}.kaldik-config-card{grid-template-columns:1fr 1fr}.kaldik-field-wide,.kaldik-field-full{grid-column:1/-1}.kaldik-calendar-preview{grid-template-columns:repeat(2,minmax(140px,1fr))}}
@media(max-width:480px){.kaldik-config-card,.kaldik-form-row{grid-template-columns:1fr}.kaldik-field-wide,.kaldik-field-full{grid-column:auto}.kaldik-calendar-preview{grid-template-columns:1fr}.kaldik-builder-actions{width:100%}.kaldik-builder-actions .kaldik-btn{flex:1}.kaldik-palette{grid-template-columns:repeat(4,1fr)}}

/* ══════════════════ DAFTAR KEHADIRAN PER MAPEL (mhd-*) ══════════════════ */
.mhd-modal{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;padding:18px;}
.mhd-modal.hidden{display:none!important;}
.mhd-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.62);backdrop-filter:blur(4px);}
.mhd-modal-card{position:relative;z-index:1;width:100%;max-width:1080px;max-height:92vh;max-height:min(92vh,860px);display:flex;flex-direction:column;background:var(--app-card);border:1px solid var(--app-border);border-radius:16px;box-shadow:0 18px 60px rgba(0,0,0,.32);overflow:hidden;font-family:'Plus Jakarta Sans',sans-serif;}
.mhd-modal-head{flex-shrink:0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--app-border);background:var(--app-thead);}
.mhd-modal-title{font-size:16px;font-weight:900;color:var(--app-text);line-height:1.25;}
.mhd-modal-sub{margin-top:4px;font-size:11.5px;font-weight:700;color:var(--app-dim);line-height:1.5;}
.mhd-close-btn{flex:0 0 auto;width:34px;height:34px;border-radius:10px;border:1px solid var(--app-border);background:var(--app-card);color:var(--app-dim);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.mhd-close-btn:hover{background:var(--app-hover);color:var(--app-text);}
.mhd-tabs{flex-shrink:0;display:flex;gap:4px;padding:10px 20px 0;border-bottom:1px solid var(--app-border);background:var(--app-thead);overflow-x:auto;}
.mhd-tab{flex-shrink:0;padding:9px 16px;border:none;background:none;border-radius:10px 10px 0 0;font-size:12.5px;font-weight:800;color:var(--app-dim);cursor:pointer;white-space:nowrap;}
.mhd-tab.active{color:var(--app-accent);background:var(--app-card);box-shadow:inset 0 -2px 0 var(--app-accent);}
.mhd-body{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:14px;}
.mhd-panel{display:none;flex-direction:column;gap:14px;}
.mhd-panel.active{display:flex;}

.mhd-pertemuan-row{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;}
.mhd-pertemuan-bar{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;padding:2px;}
.mhd-pertemuan-chip{flex:0 0 auto;min-width:56px;padding:8px 12px;border-radius:10px;border:1.5px solid var(--app-border);background:var(--app-muted);color:var(--app-text);font-size:11.5px;font-weight:800;cursor:pointer;text-align:center;line-height:1.35;}
.mhd-pertemuan-chip .mhd-pc-no{display:block;font-size:13px;font-weight:900;}
.mhd-pertemuan-chip .mhd-pc-tgl{display:block;font-size:9px;font-weight:700;opacity:.7;}
.mhd-pertemuan-chip.active{background:var(--app-accent);border-color:var(--app-accent);color:#fff;}
.mhd-pertemuan-chip.active .mhd-pc-tgl{opacity:.9;}

.mhd-meta-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:12px;background:var(--app-muted);border:1px solid var(--app-border);border-radius:12px;}
.mhd-meta-field{display:flex;flex-direction:column;gap:5px;font-size:10.5px;font-weight:800;color:var(--app-dim);}
.mhd-meta-field-grow{flex:1;min-width:180px;}
.mhd-meta-field input{height:38px;border-radius:9px;border:1px solid var(--app-border);background:var(--app-card);color:var(--app-text);padding:0 11px;font-family:inherit;font-size:12.5px;font-weight:700;}
.mhd-meta-field input:focus{outline:none;border-color:var(--app-accent);}

.mhd-stats{display:flex;gap:8px;flex-wrap:wrap;}
.mhd-stat-chip{display:flex;align-items:center;gap:6px;border-radius:999px;padding:7px 12px;font-size:11.5px;font-weight:900;border:1px solid transparent;background:var(--app-muted);color:var(--app-dim);}
.mhd-stat-chip i{width:8px;height:8px;border-radius:3px;display:inline-block;}
.mhd-stat-chip.chip-H{background:rgba(34,197,94,.10);color:#16a34a;}.mhd-stat-chip.chip-H i{background:#16a34a;}
.mhd-stat-chip.chip-S{background:rgba(245,158,11,.10);color:#d97706;}.mhd-stat-chip.chip-S i{background:#f59e0b;}
.mhd-stat-chip.chip-I{background:rgba(2,132,199,.10);color:#0284c7;}.mhd-stat-chip.chip-I i{background:#0284c7;}
.mhd-stat-chip.chip-A{background:rgba(220,38,38,.10);color:#dc2626;}.mhd-stat-chip.chip-A i{background:#dc2626;}
.mhd-stat-chip.chip-P{background:rgba(124,58,237,.10);color:#7c3aed;}.mhd-stat-chip.chip-P i{background:#8b5cf6;}
.mhd-stat-chip.chip-B{background:rgba(100,116,139,.12);color:#475569;}.mhd-stat-chip.chip-B i{background:#64748b;}

.mhd-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.mhd-search-wrap{flex:1;min-width:180px;display:flex;align-items:center;gap:8px;border:1px solid var(--app-border);border-radius:10px;padding:0 12px;height:38px;background:var(--app-card);}
.mhd-search-wrap input{flex:1;border:none;background:none;font-family:inherit;font-size:12.5px;color:var(--app-text);height:100%;}
.mhd-search-wrap input:focus{outline:none;}

.mhd-mini-btn{height:38px;border-radius:10px;border:1px solid var(--app-border);background:var(--app-card);color:var(--app-dim);font-family:inherit;font-size:11px;font-weight:900;padding:0 14px;cursor:pointer;white-space:nowrap;}
.mhd-mini-btn:hover{border-color:rgba(107,127,92,.4);color:var(--app-text);}
.mhd-mini-btn.primary{background:rgba(22,163,74,.10);border-color:rgba(22,163,74,.3);color:#16a34a;}
.mhd-mini-btn.success{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.26);color:#16a34a;}
.mhd-mini-btn.danger{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.25);color:#ef4444;}
.mhd-mini-btn.danger:hover{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.42);color:#dc2626;}
.mhd-mini-btn:disabled{opacity:.5;cursor:not-allowed;}

.mhd-legend{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:10.5px;font-weight:800;color:var(--app-dim);}
.mhd-legend span{display:inline-flex;align-items:center;gap:5px;}
.mhd-lg{width:8px;height:8px;border-radius:3px;display:inline-block;}
.mhd-lg-H{background:#16a34a;}.mhd-lg-S{background:#f59e0b;}.mhd-lg-I{background:#0284c7;}.mhd-lg-A{background:#dc2626;}.mhd-lg-P{background:#8b5cf6;}

.mhd-list{display:flex;flex-direction:column;gap:8px;}
.mhd-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;background:var(--app-card);border:1px solid var(--app-border);border-radius:12px;transition:.15s;}
.mhd-row-no{font-size:11px;font-weight:800;color:var(--app-dim);text-align:center;}
.mhd-row-name{min-width:0;}
.mhd-row-name b{display:block;font-size:12.5px;font-weight:800;color:var(--app-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mhd-row-reason{margin-top:5px;width:100%;height:30px;border-radius:8px;border:1px solid var(--app-border);background:var(--app-muted);color:var(--app-text);font-family:inherit;font-size:11px;padding:0 9px;}
.mhd-row-reason:focus{outline:none;border-color:var(--app-accent);}
.mhd-status-btns{display:flex;gap:5px;flex-shrink:0;}
.mhd-status-btn{width:36px;height:32px;border-radius:8px;border:1px solid var(--app-border);background:var(--app-muted);color:var(--app-dim);font-family:inherit;font-size:12px;font-weight:900;cursor:pointer;}
.mhd-status-btn.active-H{background:#22c55e;border-color:#22c55e;color:#fff;}.mhd-row.status-H{border-color:rgba(34,197,94,.38);background:rgba(34,197,94,.055);}
.mhd-status-btn.active-S{background:#f59e0b;border-color:#f59e0b;color:#fff;}.mhd-row.status-S{border-color:rgba(245,158,11,.38);background:rgba(245,158,11,.06);}
.mhd-status-btn.active-I{background:#0284c7;border-color:#0284c7;color:#fff;}.mhd-row.status-I{border-color:rgba(2,132,199,.38);background:rgba(2,132,199,.06);}
.mhd-status-btn.active-A{background:#ef4444;border-color:#ef4444;color:#fff;}.mhd-row.status-A{border-color:rgba(239,68,68,.38);background:rgba(239,68,68,.055);}
.mhd-status-btn.active-P{background:#8b5cf6;border-color:#8b5cf6;color:#fff;}.mhd-row.status-P{border-color:rgba(139,92,246,.38);background:rgba(139,92,246,.055);}

.mhd-empty{padding:22px;text-align:center;border:1px dashed var(--app-border);border-radius:14px;color:var(--app-dim);font-size:12px;font-weight:700;background:var(--app-card);}

.mhd-rekap-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.mhd-rekap-hint{font-size:10.5px;font-weight:700;color:var(--app-dim);}
.mhd-rekap-table-wrap{overflow-x:auto;border:1px solid var(--app-border);border-radius:12px;}
.mhd-rekap-table{width:100%;border-collapse:separate;border-spacing:0;font-size:11.5px;table-layout:fixed;}
.mhd-rekap-table th.mhd-rekap-num-th,.mhd-rekap-table td.mhd-rekap-num-td{width:46px;}
.mhd-rekap-table th.mhd-rekap-name-th,.mhd-rekap-table td.mhd-rekap-name{width:170px;overflow:hidden;text-overflow:ellipsis;}
.mhd-rekap-table th.mhd-rekap-total-th,.mhd-rekap-table td.mhd-rekap-total{width:100px;}
.mhd-rekap-table th,.mhd-rekap-table td{padding:8px 9px;border-bottom:1px solid var(--app-border);text-align:center;white-space:nowrap;}
.mhd-rekap-table thead th{background:var(--app-thead);color:var(--app-dim);font-weight:900;font-size:10px;position:sticky;top:0;}
.mhd-rekap-table td.mhd-rekap-name{text-align:left;font-weight:800;color:var(--app-text);cursor:pointer;min-width:150px;}
.mhd-rekap-table td.mhd-rekap-name:hover{color:var(--app-accent);}
.mhd-rekap-table tbody tr:hover td{background:var(--app-hover);}
.mhd-rekap-cell{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;font-weight:900;font-size:10px;color:#fff;}
.mhd-rekap-cell.c-H{background:#22c55e;}.mhd-rekap-cell.c-S{background:#f59e0b;}.mhd-rekap-cell.c-I{background:#0284c7;}.mhd-rekap-cell.c-A{background:#ef4444;}.mhd-rekap-cell.c-P{background:#8b5cf6;}
.mhd-rekap-cell.c-blank{background:var(--app-muted);color:var(--app-dim);}
.mhd-rekap-total{font-weight:900;color:var(--app-text);}
.mhd-rekap-total.zero{color:var(--app-dim);font-weight:700;}
.mhd-rekap-detail-row td{background:var(--app-muted)!important;text-align:left;white-space:normal;padding:10px 14px;}
.mhd-rekap-detail-list{display:flex;flex-direction:column;gap:6px;}
.mhd-rekap-detail-item{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:var(--app-text);}
.mhd-rekap-detail-item .mhd-rekap-cell{flex-shrink:0;}
.mhd-rekap-detail-item span.mhd-rekap-alasan{color:var(--app-dim);font-weight:600;}
.mhd-rekap-nohadir{font-size:11.5px;font-weight:700;color:var(--app-accent);}

.mhd-foot{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 20px;border-top:1px solid var(--app-border);background:var(--app-thead);}
.mhd-save-status{font-size:10.5px;font-weight:800;color:var(--app-dim);}

.mhd-today-meeting-head{font-size:11px;font-weight:900;color:var(--app-dim);margin-bottom:6px;}
.mhd-today-sep{border:none;border-top:1px solid var(--app-border);margin:14px 0;}

.p-btn.p-btn-off{opacity:.45;cursor:not-allowed;pointer-events:none;}

.iqro-label {
  font-size:10px;
  font-weight:800;
  color:var(--app-dim);
  display:block;
  margin-bottom:5px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.iqro-filter-grid {
  display:grid;
  grid-template-columns:2fr minmax(140px,1fr) auto;
  gap:10px;
  align-items:end;
}
.iqro-rekap-grid {
  display:grid;
  grid-template-columns:2fr minmax(110px,1fr) minmax(90px,100px) auto auto;
  gap:10px;
  align-items:end;
}
.iqro-modal-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.iqro-picker-filter-grid {
  display:grid;
  grid-template-columns:170px 1fr;
  gap:10px;
  align-items:end;
  margin-top:2px;
}

@media(max-width:720px){
  .iqro-filter-grid,
  .iqro-rekap-grid,
  .iqro-modal-grid,
  .iqro-picker-filter-grid {
    grid-template-columns:1fr!important;
  }
  #iqroView .nav-clock,
  #iqroView .fb-pill,
  #iqroView .net-pill {
    display:none;
  }
  #iqroView .p-btn,
  #iqroHalaqahOverlay .guru-modal-btn,
  #iqroInputOverlay .guru-modal-btn {
    min-height:38px;
  }
  .mhd-modal{padding:0;align-items:stretch;}
  .mhd-modal-card{max-width:none;max-height:100vh;border-radius:0;}
  .mhd-body{padding:14px;}
  .mhd-row{grid-template-columns:26px minmax(0,1fr);}
  .mhd-status-btns{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);margin-top:8px;}
  .mhd-status-btn{width:100%;}
  .mhd-meta-row{flex-direction:column;align-items:stretch;}
  .mhd-meta-field-grow{min-width:0;}
}
.message-feature-disabled,
.communication-feature-disabled {
  opacity: .42 !important;
  cursor: not-allowed !important;
  filter: grayscale(.35);
}