/* Gaya tampilan BQMS (disalin dari BQMS lama agar tampilannya sama) */
:root {
    --plq:#1E9B3B; --plq-dark:#15752C; --plq-soft:#E6F4E9;
    --rq:#3FB38A; --rq-dark:#2E9370; --rq-soft:#E4F6EF;
    --gold:#EF9F27; --gold-soft:#FAEEDA; --gold-deep:#A96D0B;
    --ink:#1a2233; --ink-deep:#12261F; --muted:#6b7280; --line:#e8ebf0; --line-strong:#d7dce4;
    --bg:#f4f6fa; --surface:#ffffff; --surface-2:#f9fafc; --parchment:#FBF7EC;
    --danger:#E24B4A; --danger-soft:#FCEBEB; --success:#639922; --success-soft:#EAF3DE;
    --radius:14px; --shadow:0 4px 24px rgba(20,30,55,.08); --shadow-sm:0 2px 8px rgba(20,30,55,.05);
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:'Plus Jakarta Sans',system-ui,sans-serif; background:var(--bg); color:var(--ink);
    -webkit-font-smoothing:antialiased; }

  .boot { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; }
  .boot-logo { width:64px; height:64px; border-radius:18px; display:flex; align-items:center; justify-content:center;
    font-size:32px; color:#fff; background:linear-gradient(135deg,var(--rq),var(--plq)); }
  .spinner { width:34px; height:34px; border:3px solid var(--line); border-top-color:var(--rq);
    border-radius:50%; animation:spin 1s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }

  .btn { padding:11px 18px; border:none; border-radius:11px; font-weight:600; cursor:pointer; font-size:14px;
    font-family:inherit; transition:all .18s; display:inline-flex; align-items:center; gap:8px; justify-content:center; }
  .btn-primary { background:var(--ink); color:#fff; }
  .btn-primary:hover { background:#0d1420; transform:translateY(-1px); }
  .btn-ghost { background:var(--surface-2); color:var(--ink); border:1px solid var(--line); }
  .btn-ghost:hover { background:#eef1f6; }
  .btn-sm { padding:7px 12px; font-size:12px; border-radius:9px; }
  .btn-icon { background:transparent; border:none; cursor:pointer; color:var(--muted); padding:6px; border-radius:8px; }
  .btn-icon:hover { background:var(--surface-2); }
  .btn-danger-ghost { color:var(--danger); }

  input, select, textarea { padding:11px 13px; border:1px solid var(--line-strong); border-radius:11px;
    font-size:14px; font-family:inherit; width:100%; background:var(--surface); transition:all .15s; color:var(--ink); }
  input:focus, select:focus, textarea:focus { outline:none; border-color:var(--rq); box-shadow:0 0 0 3px var(--rq-soft); }

  /* ===== LOGIN ===== */
  /* Latar polos & tenang -- tanpa pola bintang, tanpa gradasi warna-warni. */
  .login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
    background:var(--bg); position:relative; overflow:hidden; }
  .login-card { width:100%; max-width:410px; background:linear-gradient(180deg, var(--rq-soft) 0%, #ffffff 40%, #ffffff 100%);
    border-radius:20px; padding:38px 32px 32px;
    box-shadow:0 20px 50px rgba(20,30,55,.14), 0 6px 16px rgba(20,30,55,.08);
    border:1px solid var(--line); position:relative; z-index:1; }
  .login-card::before { content:''; position:absolute; top:0; left:24px; right:24px; height:3px;
    background:linear-gradient(90deg, transparent, var(--rq), transparent); border-radius:0 0 3px 3px; }
  .login-head { text-align:center; margin-bottom:24px; }
  .login-head .logo { width:66px; height:66px; margin:0 auto 18px; border-radius:18px; display:flex;
    align-items:center; justify-content:center; font-size:32px; color:#fff;
    background:linear-gradient(135deg,var(--rq),var(--plq)); box-shadow:0 8px 20px rgba(30,155,59,.25); }
  .login-head .logo.logo-img { width:96px; height:96px; margin:0 auto 16px; border-radius:22px; background:#fff;
    border:1px solid var(--line); padding:10px; box-shadow:0 10px 24px rgba(20,30,55,.10); }
  .logo-img img { width:100%; height:100%; object-fit:contain; display:block; }
  .login-head h1 { font-family:'Fraunces',Georgia,serif; font-optical-sizing:auto;
    font-size:28px; font-weight:600; letter-spacing:.2px; color:var(--ink-deep); }
  .divider-mark { display:flex; align-items:center; justify-content:center; gap:8px; margin:9px 0 8px; }
  .divider-mark .ln { width:28px; height:1px; background:linear-gradient(90deg, transparent, var(--rq)); }
  .divider-mark .ln.r { background:linear-gradient(90deg, var(--rq), transparent); }
  .divider-mark svg { width:11px; height:11px; }
  .login-head p { font-size:12.5px; color:var(--muted); letter-spacing:.3px; margin-top:0; }
  .role-label { font-size:11px; color:var(--rq-dark); margin-bottom:10px; font-weight:700;
    letter-spacing:.6px; text-transform:uppercase; }
  .role-list { display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
  .role-btn { display:flex; align-items:center; gap:13px; padding:12px 14px; border:1.5px solid var(--line);
    background:var(--surface); border-radius:12px; cursor:pointer; text-align:left; transition:all .15s; width:100%; }
  .role-btn:hover { border-color:var(--line-strong); }
  .role-btn.sel { border-color:var(--rq); background:var(--rq-soft); }
  .role-btn .ri { width:34px; height:34px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; background:var(--rq-soft); color:var(--rq-dark); }
  .role-btn.sel .ri { background:var(--rq); color:#fff; }
  .role-btn .ri svg { width:17px; height:17px; }
  .role-btn strong { display:block; font-size:13.5px; font-weight:700; color:var(--ink); }
  .role-btn span.d { display:block; font-size:11px; color:var(--muted); margin-top:1px; }
  .login-fields { display:flex; flex-direction:column; gap:10px; }
  .login-fields input { border-radius:11px; }
  .lembaga-badge { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted);
    padding:9px 3px; border-bottom:1px dashed var(--line-strong); margin-bottom:2px; }
  .lembaga-badge .ic { width:15px; height:15px; color:var(--rq-dark); flex-shrink:0; }
  .lembaga-badge b { color:var(--ink); font-weight:700; }
  .lembaga-badge a { margin-left:auto; color:var(--rq-dark); text-decoration:none; font-size:11.5px; font-weight:600; }
  .btn-masuk { margin-top:4px; padding:13px; border:none; border-radius:12px; cursor:pointer;
    font-family:inherit; font-size:14px; font-weight:700; color:#fff; width:100%;
    background:linear-gradient(135deg, var(--ink-deep), #1c3d2e);
    display:flex; align-items:center; justify-content:center; gap:8px;
    box-shadow:0 8px 18px rgba(18,38,32,.22); transition:transform .12s, box-shadow .12s; }
  .btn-masuk:hover { transform:translateY(-1px); box-shadow:0 10px 22px rgba(18,38,32,.28); }
  .btn-masuk svg { width:16px; height:16px; }
  .login-hint { text-align:center; font-size:11.5px; color:var(--muted); margin-top:16px; line-height:1.6; }
  .login-err { background:var(--danger-soft); color:var(--danger); font-size:12.5px; padding:9px 12px;
    border-radius:10px; margin-bottom:12px; display:none; }

  /* ===== LANDING ===== */
  .landing-bg { min-height:100vh; background-size:cover; background-position:center right;
    background-attachment:fixed; position:relative; }
  /* lapisan pola bintang delapan — motif geometris Islami, diambil dari bentuk logo */
  .landing-bg::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
    background-image:
      radial-gradient(circle at 12% 22%, rgba(30,155,59,.07) 0 2px, transparent 2px),
      radial-gradient(circle at 88% 78%, rgba(63,179,138,.07) 0 2px, transparent 2px);
    background-size:64px 64px, 64px 64px; }
  .page-pad { padding:26px; max-width:1180px; margin:0 auto; position:relative; }
  .brandbar { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
  .brandbar .logo { width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center;
    font-size:19px; color:#fff; background:linear-gradient(135deg,var(--rq),var(--plq)); }
  .brandbar .logo.logo-img { background:#fff; border:1px solid var(--line); padding:4px; }
  .brandbar .bt strong { display:block; font-size:14px; font-weight:800; line-height:1.1; }
  .brandbar .bt span { font-size:11px; color:var(--muted); }

  /* --- Sambutan --- */
  .landing-hero { text-align:center; margin:46px 0 14px; }
  .hero-eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase; color:var(--plq-dark);
    background:rgba(255,255,255,.7); border:1px solid rgba(30,155,59,.18);
    padding:6px 14px; border-radius:100px; margin-bottom:18px; }
  .hero-eyebrow .dot { width:6px; height:6px; border-radius:50%; background:var(--plq); }
  .landing-hero h2 { font-family:'Fraunces',Georgia,serif; font-size:clamp(28px,4.4vw,44px);
    font-weight:600; line-height:1.14; letter-spacing:-.015em; color:var(--ink); }
  .landing-hero h2 .nm { color:var(--plq-dark); font-style:italic; }
  .landing-hero p { font-size:14.5px; color:var(--muted); margin-top:10px; }
  .hero-rule { width:52px; height:2px; background:linear-gradient(90deg,var(--rq),var(--plq));
    border-radius:2px; margin:20px auto 0; }

  /* --- Kartu lembaga --- */
  .lemb-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:940px; margin:36px auto 0; }
  /* saat hanya satu lembaga (guru), kartu di tengah dengan lebar wajar */
  .lemb-grid.lemb-tunggal { grid-template-columns:minmax(340px,460px); justify-content:center; }
  .lemb-card { position:relative; border:1px solid rgba(255,255,255,.75); background:rgba(255,255,255,.9);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-radius:22px; overflow:hidden;
    cursor:pointer; text-align:left; box-shadow:0 10px 40px rgba(20,45,32,.1);
    transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, border-color .22s;
    font-family:inherit; width:100%; display:block; }
  .lemb-card::after { content:''; position:absolute; inset:0; border-radius:22px; pointer-events:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
  /* pita warna lembaga di tepi atas */
  .lemb-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; z-index:1; }
  .lemb-card.rq::before { background:linear-gradient(90deg,var(--rq),var(--rq-dark)); }
  .lemb-card.plq::before { background:linear-gradient(90deg,var(--plq),var(--plq-dark)); }
  .lemb-card:hover { transform:translateY(-5px); box-shadow:0 18px 52px rgba(20,45,32,.17); }
  .lemb-card:focus-visible { outline:3px solid var(--plq); outline-offset:3px; }
  .lemb-card.rq:hover { border-color:rgba(63,179,138,.5); }
  .lemb-card.plq:hover { border-color:rgba(30,155,59,.5); }

  /* kepala kartu: logo + identitas */
  .lemb-head { display:flex; align-items:center; gap:14px; padding:24px 20px 0; }
  .lemb-mark { width:60px; height:60px; border-radius:16px; flex-shrink:0; background:#fff;
    display:flex; align-items:center; justify-content:center; padding:7px;
    box-shadow:0 3px 14px rgba(20,45,32,.13); }
  .lemb-mark img { width:100%; height:100%; object-fit:contain; }
  .lemb-id h3 { font-size:16.5px; font-weight:800; line-height:1.22; letter-spacing:-.01em; }
  .lemb-tipe { display:flex; align-items:flex-start; gap:6px; font-size:11px; font-weight:600;
    color:var(--muted); margin-top:5px; line-height:1.35; }
  .lemb-tipe .pip { margin-top:5px; flex-shrink:0; }
  .lemb-tipe .pip { width:5px; height:5px; border-radius:50%; }
  .lemb-card.rq .lemb-tipe .pip { background:var(--rq); }
  .lemb-card.plq .lemb-tipe .pip { background:var(--plq); }

  /* cincin ketercapaian — elemen khas halaman ini */
  .lemb-ring-row { display:flex; align-items:center; gap:18px; padding:18px 20px 0; }
  .lemb-ring { position:relative; width:96px; height:96px; flex-shrink:0; }
  .lemb-ring svg { transform:rotate(-90deg); display:block; }
  .lemb-ring .trk { fill:none; stroke:var(--line); stroke-width:8; }
  .lemb-ring .bar { fill:none; stroke-width:8; stroke-linecap:round;
    transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.3,1); }
  .lemb-ring .mid { position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; }
  .lemb-ring .mid b { font-size:22px; font-weight:800; line-height:1; letter-spacing:-.02em; }
  .lemb-ring .mid span { font-size:9.5px; color:var(--muted); font-weight:600;
    text-transform:uppercase; letter-spacing:.08em; margin-top:3px; }

  /* rincian angka di sebelah cincin — tumpukan vertikal, tanpa lubang kosong */
  .lemb-facts { flex:1; display:flex; flex-direction:column; gap:11px; min-width:0; }
  .lemb-fact { display:flex; align-items:baseline; gap:9px; }
  .lemb-fact .v { font-size:19px; font-weight:800; line-height:1; letter-spacing:-.02em; flex-shrink:0; }
  .lemb-fact .k { font-size:11.5px; color:var(--muted); font-weight:600; }
  .lemb-fact .sub { font-size:10.5px; color:var(--muted); opacity:.8; margin-left:auto;
    white-space:nowrap; }
  /* batang komposisi putra/putri */
  .lemb-bar { height:5px; border-radius:100px; background:var(--line); overflow:hidden; display:flex; }
  .lemb-bar i { display:block; height:100%; }

  /* kaki kartu */
  .lemb-foot { display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin-top:18px; padding:14px 20px; border-top:1px solid var(--line);
    background:rgba(249,250,252,.7); }
  .lemb-go { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; }
  .lemb-go .arw { transition:transform .22s; display:inline-block; }
  .lemb-card:hover .lemb-go .arw { transform:translateX(4px); }
  .lemb-hadir { font-size:11px; color:var(--muted); display:inline-flex; align-items:center; gap:6px; }
  .lemb-hadir .live { width:7px; height:7px; border-radius:50%; background:var(--success);
    box-shadow:0 0 0 3px rgba(99,153,34,.16); }

  .landing-foot { text-align:center; margin:34px 0 10px; font-size:11.5px; color:var(--muted); }

  @media (prefers-reduced-motion:reduce){
    .lemb-card, .lemb-ring .bar, .lemb-go .arw { transition:none !important; }
  }

  /* ===== APP SHELL ===== */
  .shell { display:flex; min-height:100vh; }
  .sidebar { width:230px; background:var(--surface); border-right:1px solid var(--line); display:flex;
    flex-direction:column; position:fixed; height:100vh; z-index:60; transition:transform .25s; }
  .side-top { padding:18px 16px; border-bottom:1px solid var(--line); }
  .side-lemb { display:flex; align-items:center; gap:10px; margin-top:12px; }
  .side-lemb .lg { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    font-size:17px; color:#fff; }
  .side-lemb .lg.lg-img { background:#fff; border:1px solid var(--line); padding:3px; }
  .side-lemb .lg.lg-img img { width:100%; height:100%; object-fit:contain; display:block; }
  .side-lemb .nm { font-size:12.5px; font-weight:700; line-height:1.25; }
  .nav { padding:12px 12px; display:flex; flex-direction:column; gap:6px; overflow-y:auto; flex:1; }
  .nav-grup-wrap { display:flex; flex-direction:column; gap:2px; }
  .nav-grup { width:100%; }
  .nav-anak { margin-top:1px; }
  .nav-item { display:flex; align-items:center; gap:11px; padding:8px 11px; border-radius:11px; cursor:pointer;
    font-size:13.5px; font-weight:600; color:var(--muted); border:none; background:transparent; text-align:left;
    width:100%; transition:background .14s, color .14s, transform .14s; font-family:inherit; }
  /* warna latar diatur inline per menu, jadi hover cukup memberi efek angkat */
  .nav-item:hover { transform:translateX(2px); filter:brightness(.97); }
  .nav-item:hover .ni { transform:scale(1.06); }
  .nav-item.active:hover { filter:none; }
  .nav-item.active { color:#fff; box-shadow:0 4px 14px rgba(20,30,55,.16); }
  /* kotak ikon: berisi SVG garis satu warna, bukan emoji */
  .nav-item .ni { width:30px; height:30px; min-width:30px; border-radius:9px;
    display:flex; align-items:center; justify-content:center; line-height:1;
    transition:transform .14s, background .14s; }
  .nav-item .ni svg { width:17px; height:17px; display:block; }
  @media (prefers-reduced-motion: reduce){
    .nav-item, .nav-item .ni { transition:none; }
    .nav-item:hover .ni { transform:none; }
  }
  .side-user { padding:14px 16px; border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; }
  .side-user .av { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; color:#fff; }
  .side-user .info strong { display:block; font-size:12.5px; font-weight:700; }
  .side-user .info span { font-size:11px; color:var(--muted); }

  .main { flex:1; margin-left:230px; display:flex; flex-direction:column; min-width:0; }
  .topbar { background:var(--surface); border-bottom:1px solid var(--line); padding:15px 26px; display:flex;
    align-items:center; gap:14px; position:sticky; top:0; z-index:40; }
  .topbar h2 { font-size:19px; font-weight:800; }
  .topbar .tipe-badge { margin-left:auto; font-size:12px; padding:6px 14px; border-radius:20px; font-weight:600; }
  .menu-toggle { display:none; background:none; border:none; font-size:22px; cursor:pointer; color:var(--ink); }
  .content { padding:26px; flex:1; }

  /* ===== CARDS / STATS ===== */
  .grid { display:grid; gap:16px; }
  .stat-grid { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
  .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px;
    box-shadow:var(--shadow-sm); }
  .stat { position:relative; overflow:hidden; transition:transform .16s ease, box-shadow .16s ease; }
  .stat:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(20,30,55,.09); }
  .stat .ic { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    font-size:20px; margin-bottom:11px; }
  .stat .val { font-size:27px; font-weight:800; line-height:1; letter-spacing:-.01em; }
  .stat .lbl { font-size:12.5px; color:var(--muted); margin-top:5px; font-weight:600; }
  .stat .ket { font-size:11px; color:var(--muted); margin-top:7px; opacity:.85; }
  /* lingkaran samar di pojok, memberi kesan tidak datar */
  .stat::after { content:''; position:absolute; right:-26px; top:-26px; width:86px; height:86px;
    border-radius:50%; background:currentColor; opacity:.05; pointer-events:none; }
  @media (prefers-reduced-motion: reduce){
    .stat { transition:none; }
    .stat:hover { transform:none; }
  }

  .hero-banner { border-radius:var(--radius); padding:20px 22px; color:#fff; margin-bottom:18px; }
  .hero-banner h3 { font-size:19px; font-weight:800; }
  .hero-banner p { opacity:.92; font-size:13px; margin-top:3px; }

  .card-title { font-size:14px; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
  .chart-box { position:relative; height:210px; }
  .chart-box.sm { height:190px; }

  @media (max-width:640px){ .wa-ident { grid-template-columns:1fr !important; } }

  /* tab Input Harian / Riwayat */
  .seg { display:inline-flex; background:#fff; border:1px solid var(--line); border-radius:11px;
    padding:4px; gap:4px; }
  .seg-btn { border:0; background:transparent; padding:8px 16px; border-radius:8px; cursor:pointer;
    font-family:inherit; font-size:13px; font-weight:700; color:var(--muted); transition:background .15s,color .15s; }
  .seg-btn:hover { background:#f3f5f8; }
  .seg-btn.on { background:var(--ink); color:#fff; }
  @media (max-width:520px){ .seg { display:flex; width:100%; } .seg-btn { flex:1; padding:9px 8px; } }

  /* ---- Checklist 100 Life Skill: rapat, kotak menempel teksnya ---- */
  .ls-kat { margin-bottom:9px; padding:11px 13px; }
  .ls-kat-head { display:flex; justify-content:space-between; align-items:center;
    margin-bottom:7px; padding-bottom:6px; border-bottom:1px solid var(--line); }
  .ls-kat-nama { font-weight:700; font-size:12.5px; }
  .ls-kat-skor { font-size:11.5px; font-weight:700; color:#6b7280; white-space:nowrap; }
  /* kolom mengikuti isi, tidak melar memenuhi layar */
  .ls-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,235px));
    gap:1px 10px; justify-content:start; }
  .ls-item { display:flex; align-items:center; gap:7px; padding:3px 6px;
    border-radius:6px; cursor:pointer; font-size:12px; line-height:1.35;
    transition:background .12s; }
  .ls-item:hover { background:#f3f6f9; }
  .ls-item.on { background:#dcfce7; }
  .ls-item input { flex:none; width:14px; height:14px; margin:0; cursor:pointer; accent-color:#16a34a; }
  .ls-item span { flex:1; }
  .ls-item b { font-weight:700; color:#9aa4b0; margin-right:1px; }
  .ls-item.on b { color:#15803D; }
  @media (max-width:640px){
    .ls-grid { grid-template-columns:1fr; }
    .ls-item { padding:5px 6px; }
  }

  .btn-keluar { display:inline-flex; align-items:center; }
  .btn-keluar svg { flex:none; }

  /* tombol centang habit */
  .hb-cek { width:28px; height:28px; border-radius:8px; border:1.6px solid var(--line-strong);
    background:#fff; cursor:pointer; font-size:14px; font-weight:800; color:#fff;
    display:inline-flex; align-items:center; justify-content:center; padding:0;
    transition:background .12s, border-color .12s, transform .12s; font-family:inherit; }
  .hb-cek:hover { border-color:#86B049; transform:scale(1.08); }
  .hb-cek.on { background:#5C8B2A; border-color:#5C8B2A; }
  @media (prefers-reduced-motion: reduce){ .hb-cek { transition:none; } .hb-cek:hover { transform:none; } }

  /* input harian: baris tombol menempel saat digulir */
  .ih-bar { box-shadow:0 2px 12px rgba(20,30,55,.07); }
  @media (max-width:768px){
    .ih-bar { gap:9px; }
    .ih-bar .btn { flex:1; min-width:132px; }
  }

  /* ===== TABLE ===== */
  .table-wrap { overflow-x:auto; }
  table { width:100%; border-collapse:collapse; }
  th { text-align:left; padding:11px 10px; font-size:11px; text-transform:uppercase; letter-spacing:.5px;
    color:var(--muted); font-weight:700; border-bottom:2px solid var(--line); white-space:nowrap; }
  td { padding:12px 10px; border-bottom:1px solid var(--line); font-size:13.5px; }
  tbody tr:hover td { background:var(--surface-2); }
  .badge { padding:4px 10px; border-radius:20px; font-size:11.5px; font-weight:600; white-space:nowrap; }
  .badge.ok { background:var(--success-soft); color:#3B6D11; }
  .badge.warn { background:var(--gold-soft); color:#854F0B; }
  .badge.L { background:#E6F1FB; color:#0C447C; }
  .badge.P { background:#FBEAF0; color:#993556; }
  .progress { display:flex; align-items:center; gap:8px; min-width:110px; }
  .progress .track { flex:1; height:7px; background:var(--surface-2); border-radius:4px; overflow:hidden; }
  .progress .fill { height:100%; border-radius:4px; }
  .progress .pct { font-size:12px; color:var(--muted); min-width:34px; }

  .toolbar { display:flex; gap:12px; margin-bottom:16px; align-items:center; flex-wrap:wrap; }
  .toolbar .grow { flex:1; min-width:180px; }

  .kpi-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px; }
  .kpi-box { border-radius:var(--radius); padding:15px; }
  .kpi-box .k { font-size:12px; font-weight:600; }
  .kpi-box .v { font-size:19px; font-weight:800; margin-top:4px; }

  .empty { text-align:center; padding:50px 20px; color:var(--muted); }
  .empty .ei { font-size:42px; opacity:.5; }

  .note-item { display:flex; gap:11px; padding:12px 0; border-bottom:1px solid var(--line); }
  .note-item:last-child { border-bottom:none; }
  .note-item .ni2 { font-size:18px; margin-top:1px; }
  .note-item p { font-size:13px; color:var(--ink); line-height:1.5; }
  .note-item .meta { color:var(--muted); font-size:12px; }

  /* ===== MODAL ===== */
  .modal-overlay { position:fixed; inset:0; background:rgba(15,23,42,.55); display:none; align-items:center;
    justify-content:center; z-index:200; padding:18px; }
  .modal-overlay.show { display:flex; }
  .modal { background:var(--surface); border-radius:18px; width:100%; max-width:620px; max-height:90vh;
    overflow-y:auto; padding:26px; box-shadow:var(--shadow); }
  .modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
  .modal-head h3 { font-size:18px; font-weight:800; }
  .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .fg { display:flex; flex-direction:column; gap:6px; }
  .fg.full { grid-column:1/-1; }
  .fg label { font-size:12.5px; font-weight:600; }
  .modal-foot { display:flex; gap:11px; justify-content:flex-end; margin-top:22px; }

  @media (max-width:820px) {
    .lemb-grid, .form-grid, .kpi-row { grid-template-columns:1fr; }
  }
  @media (max-width:768px) {
    .sidebar { transform:translateX(-100%); }
    .sidebar.open { transform:translateX(0); }
    .main { margin-left:0; }
    .menu-toggle { display:block; }
    .dash-2col { grid-template-columns:1fr !important; }
    .pres-wrap { grid-template-columns:1fr !important; }
  }

  /* ===== PRESENSI QR ===== */
  .pres-wrap { display:grid; grid-template-columns:minmax(320px,420px) 1fr; gap:16px; align-items:start; }
  .pres-status-row { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
  .pres-st-btn { flex:1; min-width:64px; padding:8px 4px; border:1.5px solid var(--line); background:var(--surface-2);
    border-radius:10px; font-size:12.5px; font-weight:600; cursor:pointer; color:var(--muted); transition:all .15s; }
  .pres-st-btn.active { border-color:var(--rq); background:var(--rq-soft); color:var(--rq-dark); }
  .qr-reader { width:100%; border-radius:14px; overflow:hidden; background:#0b1220; min-height:60px; }
  .qr-reader video { border-radius:14px; }
  .pres-scan-actions { display:flex; gap:10px; margin-top:12px; }
  .pres-scan-actions .btn { flex:1; }
  .scan-result { display:none; align-items:center; gap:12px; margin-top:12px; padding:12px 14px; border-radius:12px; }
  .scan-result.ok, .scan-result.warn, .scan-result.err { display:flex; }
  .scan-result.ok { background:var(--success-soft); }
  .scan-result.warn { background:var(--gold-soft); }
  .scan-result.err { background:var(--danger-soft); }
  .scan-result .sr-icon { font-size:26px; }
  .scan-result strong { font-size:15px; }
  .scan-result .sr-sub { font-size:12px; color:var(--muted); margin-top:2px; }
  .rekap-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
  .rekap-stats .rk { text-align:center; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:10px 4px; }
  .rekap-stats .rv { font-size:22px; font-weight:800; line-height:1; }
  .rekap-stats .rl { font-size:11px; color:var(--muted); margin-top:4px; }

  /* tab presensi */
  .pres-tabs { display:flex; gap:8px; margin-bottom:16px; }
  .pres-tab { padding:9px 16px; border:1.5px solid var(--line); background:var(--surface);
    border-radius:10px; font-size:13px; font-weight:600; cursor:pointer; color:var(--muted); transition:all .15s; }
  .pres-tab.active { border-color:var(--rq); background:var(--rq-soft); color:var(--rq-dark); }
  /* bar persentase kehadiran */
  .pct-bar { position:relative; background:var(--surface-2); border-radius:8px; height:20px; min-width:120px; overflow:hidden; }
  .pct-fill { position:absolute; left:0; top:0; height:100%; border-radius:8px; transition:width .3s; }
  .pct-bar span { position:relative; z-index:1; font-size:11px; font-weight:700; line-height:20px; padding-left:8px; color:var(--ink); }
  .scan-alt { margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }
  .scan-newtab { margin-bottom:14px; padding:14px; border:1.5px solid var(--rq); background:var(--rq-soft); border-radius:12px; }

  /* ===== KARTU HERO ABSEN (modern) ===== */
  .scan-hero { text-align:center; padding:32px 24px; }
  .scan-hero-icon { width:76px; height:76px; border-radius:22px; margin:0 auto 18px;
    display:flex; align-items:center; justify-content:center; font-size:36px;
    box-shadow:0 10px 24px -6px rgba(46,147,112,.45); }
  .scan-hero-title { font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--ink); margin-bottom:6px; }
  .scan-hero-sub { font-size:13px; line-height:1.55; color:#6b7280; max-width:340px; margin:0 auto 22px; }
  .scan-hero-btn { width:100%; max-width:320px; padding:14px 20px; font-size:15px; font-weight:700;
    border-radius:14px; box-shadow:0 8px 20px -6px rgba(46,147,112,.5); }
  .scan-hero-status { font-size:11.5px; color:#6b7280; margin-top:12px; }
  .scan-hero-alt { display:flex; gap:18px; justify-content:center; margin-top:18px; flex-wrap:wrap; }
  .scan-hero-alt a { font-size:12.5px; color:var(--rq-dark); font-weight:600; text-decoration:none; }
  .scan-hero-alt a:hover { text-decoration:underline; }
  .pres-mode-drop select { cursor:pointer; box-shadow:var(--shadow-sm); }
  .pres-mode-drop select:hover { border-color:var(--rq); }

  /* ===== KARTU QR ===== */
  .kartu-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
  .kartu-wrap { display:flex; flex-direction:column; }

  /* ===== KARTU ID SANTRI (gaya template hijau-emas, potret) ===== */
  .kartu { position:relative; border-radius:18px; overflow:hidden; page-break-inside:avoid; aspect-ratio:1/1.58;
    border:1px solid #e8ebf0; display:flex; flex-direction:column; box-shadow:var(--shadow); background:#ffffff; }
  /* lapisan gradasi hijau-putih di latar kartu */
  .kartu::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:linear-gradient(160deg, var(--kartu-hijau,#1E6B3A) 0%, rgba(255,255,255,0) 40%),
               linear-gradient(20deg, var(--kartu-hijau,#1E6B3A) 0%, rgba(255,255,255,0) 34%);
    opacity:.12; }
  /* bingkai emas tipis di dalam */
  .kartu::after { content:""; position:absolute; inset:6px; border:2px solid var(--kartu-emas,#C79A3B);
    border-radius:13px; pointer-events:none; z-index:3; opacity:.55; }
  /* strip samping "KARTU SANTRI" */
  .kartu-strip { position:absolute; left:0; top:64px; bottom:64px; width:30px; z-index:2;
    background:var(--kartu-hijau,#1E6B3A);
    display:flex; align-items:center; justify-content:center; }
  .kartu-strip span { writing-mode:vertical-rl; transform:rotate(180deg); color:#fff;
    font-size:10.5px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
  .kartu-head { display:flex; align-items:center; gap:9px; padding:14px 14px 12px 40px;
    background:transparent; position:relative; z-index:1; }
  .kartu-head .kh-logo { width:44px; height:44px; flex-shrink:0; }
  .kartu-head .kh-logo img { width:100%; height:100%; object-fit:contain; }
  .kartu-head .kh-nama { font-size:15px; font-weight:800; line-height:1.05; color:var(--kartu-hijau,#1E6B3A);
    font-family:'Fraunces',Georgia,serif; }
  .kartu-head .kh-sub { font-size:9px; color:var(--kartu-emas,#C79A3B); font-weight:600; margin-top:2px; letter-spacing:.02em; }
  .kartu-body { padding:6px 16px 14px 40px; text-align:center; display:flex; flex-direction:column;
    align-items:center; flex:1; position:relative; z-index:1; }
  .kartu-foto { width:120px; height:150px; border-radius:10px; overflow:hidden; background:#eef2ee;
    display:flex; align-items:center; justify-content:center; border:3px solid var(--kartu-emas,#C79A3B);
    box-shadow:0 3px 10px rgba(0,0,0,.12); margin-bottom:10px; }
  .kartu-foto img { width:100%; height:100%; object-fit:cover; }
  .kartu-nama { font-size:16px; font-weight:800; color:var(--kartu-hijau,#1E6B3A); letter-spacing:.01em;
    line-height:1.1; padding:0 4px; }
  .kartu-garis { width:60%; height:2px; margin:7px auto 9px; border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--kartu-emas,#C79A3B),transparent); }
  .kartu-info { width:100%; font-size:12px; }
  .kartu-info .baris { display:flex; align-items:center; gap:8px; margin:3px 0; justify-content:flex-start; padding-left:8px; }
  .kartu-info .ikn { width:20px; height:20px; border-radius:50%; background:var(--kartu-hijau,#1E6B3A);
    color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; }
  .kartu-info .lbl { color:#374151; font-weight:700; min-width:78px; text-align:left; }
  .kartu-info .val { color:#111; font-weight:800; }
  .kartu-qr { display:flex; justify-content:center; margin-top:auto; padding-top:10px; }
  .kartu-qr-wrap { background:#fff; border:1.5px solid #e5e7eb; border-radius:8px; padding:6px; display:inline-block; }
  .kartu-qr img, .kartu-qr canvas { display:block; }
  .kartu-idbawah { font-size:11px; font-weight:800; color:var(--kartu-hijau,#1E6B3A); letter-spacing:.06em; margin-top:4px; }
  .kartu-meta { font-size:11.5px; color:var(--muted); margin-top:3px; }

  /* ===== KARTU KPI PLQ ===== */
  .kpi-sheet { font-size:13px; }
  .kpi-card { border:1.5px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); }
  .kpi-card-head { padding:9px 12px; font-weight:800; font-size:12.5px; text-align:center; letter-spacing:.02em; }
  .kpi-card-body { padding:12px; }
  .kpi-idt { width:100%; border-collapse:collapse; font-size:12.5px; }
  .kpi-idt td { padding:4px 6px; border-bottom:1px solid var(--line); }
  .kpi-idt td:first-child { color:#6b7280; width:44%; }
  @media (max-width:860px){
    .kpi-sheet .grid { grid-template-columns:1fr !important; }
  }

  /* ===== LEMBAR RAPOR ===== */
  .rapor-sheet { background:#fff; max-width:780px; margin:16px auto; padding:32px 36px; color:#000;
    font-family:'Times New Roman',Georgia,serif; font-size:13px; line-height:1.35; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
  .rapor-head { text-align:center; margin-bottom:18px; }
  .rapor-logo { display:block; height:80px; width:auto; margin:0 auto 8px; }
  .rapor-judul { font-weight:700; font-size:15px; letter-spacing:.3px; }
  .rapor-id { margin:14px 0 10px; }
  .rapor-id > div { margin-bottom:4px; }
  .rapor-id .titik { display:inline-block; margin-left:8px; }
  .rapor-tbl { width:100%; border-collapse:collapse; margin-top:6px; }
  .rapor-tbl th, .rapor-tbl td { border:1px solid #000; padding:4px 8px; }
  .rapor-tbl th { text-align:center; font-weight:700; }
  .rapor-tbl td.c { text-align:center; }
  .rapor-tbl tr.rapor-jml td { background:#f2f2f2; font-weight:700; }
  .rapor-peringkat { margin:10px 0; }
  .rapor-kepr { width:100%; border-collapse:collapse; margin:6px 0; }
  .rapor-kepr td { border:1px solid #000; padding:4px 8px; }
  .rapor-catatan { border:1px solid #000; padding:8px; min-height:52px; margin:8px 0; }
  .rapor-ttd-info { margin-top:14px; }
  .rapor-mengetahui { text-align:center; margin-top:10px; }
  .rapor-ttd { display:flex; justify-content:space-between; margin-top:8px; }
  .rapor-ttd .ttd-kol { text-align:center; width:45%; }
  .rapor-ttd .ttd-garis { margin-top:52px; }

  /* ===== KARTU PENCAPAIAN SANTRI (PLQ) ===== */
  .kpc-sheet { background:#fff; max-width:760px; margin:16px auto; padding:30px 34px; color:#000;
    border-radius:16px; box-shadow:var(--shadow); }
  .kpc-head { text-align:center; margin-bottom:6px; }
  .kpc-logo { display:block; height:56px; width:auto; margin:0 auto 10px; }
  .kpc-logo-fallback { width:56px; height:56px; border-radius:14px; margin:0 auto 10px; display:flex; align-items:center;
    justify-content:center; font-size:26px; color:#fff; background:linear-gradient(135deg,var(--plq),var(--plq-dark)); }
  .kpc-judul-lbg { font-weight:800; font-size:16px; letter-spacing:.3px; color:var(--plq-dark); }
  .kpc-nama-lbg { font-weight:700; font-size:13px; color:var(--gold); margin-top:2px; }
  .kpc-section-title { font-size:13.5px; font-weight:800; margin:18px 0 10px; color:var(--ink); text-align:center; }

  /* Radial: foto di tengah, titik pencapaian di sekeliling (kiri/kanan) */
  .kpc-radial { position:relative; display:flex; align-items:center; justify-content:center;
    gap:6px; margin:18px 0 22px; padding:10px 0; }
  .kpc-radial::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:92%; height:94%; max-width:500px; border-radius:50%; border:2px dashed var(--line-strong);
    opacity:.7; z-index:0; }
  .kpc-radial-col { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:space-evenly;
    gap:11px; flex:1; min-width:0; }
  .kpc-radial-item { display:flex; align-items:center; gap:7px; padding:6px 10px; border-radius:10px;
    background:var(--surface-2); border:1px solid var(--line); }
  .kpc-radial-item.on { background:var(--plq-soft); border-color:var(--plq); }
  .kpc-radial-col.left .kpc-radial-item { flex-direction:row; text-align:left; justify-content:flex-start; }
  .kpc-radial-col.right .kpc-radial-item { flex-direction:row-reverse; text-align:right; justify-content:flex-start; }
  .kpc-radial-txt { font-size:11px; font-weight:700; line-height:1.2; color:var(--ink); }
  .kpc-radial-item:not(.on) .kpc-radial-txt { color:var(--muted); font-weight:600; }
  .kpc-ic { width:19px; height:19px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:800; color:#fff; background:var(--line-strong); }
  .kpc-radial-item.on .kpc-ic { background:var(--plq); }

  .kpc-radial-center { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
    gap:7px; width:186px; flex-shrink:0; padding:0 4px; }
  .kpc-foto-ring { width:140px; height:140px; border-radius:50%; padding:5px;
    background:conic-gradient(from 180deg, var(--gold), var(--plq), var(--gold)); }
  .kpc-foto { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; border:4px solid #fff; }
  .kpc-foto-kosong { display:flex; align-items:center; justify-content:center; font-size:46px; color:var(--muted);
    background:var(--surface-2); }
  .kpc-nama-santri { font-size:16px; font-weight:800; text-align:center; margin-top:2px; }
  .kpc-sub { font-size:11.5px; color:var(--muted); text-align:center; }
  .kpc-badge { display:inline-block; padding:4px 11px; border-radius:20px; background:var(--plq-soft);
    color:var(--plq-dark); font-size:11px; font-weight:700; text-align:center; }
  .kpc-lvl-lain { font-size:10px; color:var(--muted); text-align:center; }

  .kpc-ls-grid { display:flex; flex-direction:column; gap:8px; }
  .kpc-ls-row { font-size:12px; }
  .kpc-ls-lbl { display:flex; justify-content:space-between; font-weight:700; margin-bottom:3px; }
  .kpc-ls-lbl span { font-weight:600; color:var(--muted); }
  .kpc-ls-bar { height:7px; border-radius:5px; background:var(--line); overflow:hidden; }
  .kpc-ls-fill { height:100%; background:linear-gradient(90deg,var(--plq),var(--gold)); border-radius:5px; }
  .kpc-foot { text-align:center; font-size:10.5px; color:var(--muted); margin-top:20px; }

  @media print {
    .sidebar, .topbar, .no-print { display:none !important; }
    .main { margin-left:0 !important; }
    .content { padding:0 !important; }
    .kartu-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
    .kartu { box-shadow:none; }
    .kartu-strip, .kartu-head .kh-nama, .kartu-head .kh-sub, .kartu-foto,
    .kartu-nama, .kartu-garis, .kartu-info .ikn, .kartu::after,
    .kartu-foto img { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .rapor-sheet { box-shadow:none; border:none; margin:0; max-width:100%; padding:10px 20px; }
    .kpc-sheet { box-shadow:none; border:none; margin:0; max-width:100%; }
    .kpc-sheet, .kpc-sheet * {
      -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; color-adjust:exact !important;
    }
    @page { size:A4; margin:12mm; }
  }