/* sv.css — gaya modul Supervisi Pembelajaran.
   Disamakan dengan modul BK/Asesmen: kartu putih bergaris tipis, tabel berkepala navy, tombol teal,
   kotak rekap "timbul" bergradasi. Semua kelas berawalan "sv-" (Tailwind aplikasi adalah CSS statis). */
.sv{color:#334155;font-size:.78rem;max-width:100%}
.sv *{box-sizing:border-box}
.sv-loading{padding:60px 0;text-align:center;color:#94a3b8;font-weight:600}

/* ---- kepala halaman ---- */
.sv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;margin-bottom:.9rem;flex-wrap:wrap}
.sv-title{font-size:1rem;font-weight:900;color:#0f172a;margin:0}
.sv-sub{margin:3px 0 0;font-size:.72rem;color:#64748b;line-height:1.5;max-width:60rem}
.sv-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* ---- kartu ---- */
.sv-box{background:#fff;border:1px solid #e5e7eb;border-radius:.75rem;padding:1rem;margin-bottom:1rem;box-shadow:0 4px 18px rgba(15,23,42,.07)}
.sv-h3{font-size:.9rem;font-weight:900;margin:0 0 .6rem;color:#0f172a;display:flex;align-items:center;gap:.5rem}
.sv-h3 i{color:#0f766e}
.sv-note{font-size:.7rem;color:#64748b;line-height:1.5}
.sv-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.sv-grow{flex:1}
.sv-err{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.sv-warn{padding:.7rem .9rem;background:#fffbeb;border:1px solid #fde68a;border-radius:.6rem;color:#92400e;font-size:.75rem;margin-bottom:1rem}
.sv-info{padding:.7rem .9rem;background:#eff6ff;border:1px solid #bfdbfe;border-radius:.6rem;color:#1e40af;font-size:.75rem;margin-bottom:1rem}
.sv-okmsg{padding:.7rem .9rem;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:.6rem;color:#166534;font-size:.75rem;font-weight:700;margin-bottom:1rem}
.sv-empty{text-align:center;color:#94a3b8;padding:36px 12px}.sv-empty i{display:block;font-size:38px;margin-bottom:10px;color:#99f6e4}

/* ---- isian ---- */
.sv-in{border:1px solid #cbd5e1;border-radius:.5rem;padding:.55rem .7rem;font-size:.78rem;width:100%;min-width:0;background:#fff;color:#0f172a;transition:.15s;font-family:inherit}
.sv-in:focus{outline:none;border-color:#0f766e;box-shadow:0 0 0 2px rgba(15,118,110,.12)}
.sv-in:disabled,.sv-in[readonly]{background:#f1f5f9;color:#64748b}
textarea.sv-in{resize:vertical;min-height:84px;line-height:1.5}
.sv-search{max-width:380px}.sv-sel{width:auto;min-width:150px}
.sv-lbl{display:block;font-size:.64rem;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px}
.sv-fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.75rem}
.sv-fg .full{grid-column:1/-1}

/* ---- tombol ---- */
.sv-btn{background:#0f766e;color:#fff;border:0;border-radius:.55rem;padding:.55rem .85rem;font-size:.72rem;font-weight:800;cursor:pointer;white-space:nowrap;transition:.15s;display:inline-flex;align-items:center;gap:6px;font-family:inherit;min-height:36px}
.sv-btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.07)}
.sv-btn:disabled{opacity:.5;cursor:not-allowed}
.sv-btn.ghost{background:#f1f5f9;color:#334155}.sv-btn.ghost:hover:not(:disabled){background:#e2e8f0;filter:none}
.sv-btn.green{background:#16a34a}.sv-btn.blue{background:#2563eb}.sv-btn.amber{background:#d97706}
.sv-btn.red{background:#fee2e2;color:#b91c1c}.sv-btn.red:hover:not(:disabled){background:#fecaca;filter:none}
.sv-btn.sm{padding:.35rem .6rem;font-size:.68rem;min-height:30px}
.sv-ic{border:0;background:#f1f5f9;border-radius:.5rem;width:32px;height:32px;cursor:pointer;color:#475569;transition:.15s}
.sv-ic:hover{background:#ccfbf1;color:#0f766e}.sv-ic.red{color:#dc2626;background:#fee2e2}.sv-ic.red:hover{background:#fecaca}

/* ---- lencana / predikat ---- */
.sv-chip{display:inline-flex;align-items:center;gap:4px;font-size:.6rem;font-weight:900;padding:.2rem .55rem;border-radius:999px;background:#e2e8f0;color:#475569;text-transform:uppercase;white-space:nowrap}
.sv-chip.draf{background:#fef3c7;color:#92400e}.sv-chip.final{background:#dcfce7;color:#166534}.sv-chip.none{background:#f1f5f9;color:#94a3b8}.sv-chip.today{background:#dbeafe;color:#1e40af}.sv-chip.late{background:#fee2e2;color:#991b1b}
.sv-pill{display:inline-block;font-size:.66rem;font-weight:900;padding:.22rem .6rem;border-radius:.45rem;background:#e2e8f0;color:#475569;white-space:nowrap}
.sv-pill.sb{background:#dcfce7;color:#166534}.sv-pill.b{background:#dbeafe;color:#1e40af}.sv-pill.c{background:#fef3c7;color:#92400e}.sv-pill.k{background:#fee2e2;color:#991b1b}
.sv-dash{color:#cbd5e1;font-weight:800}
.sv-cell{border:0;cursor:pointer;font-family:inherit;font-weight:900;font-size:.72rem;padding:.3rem .55rem;border-radius:.45rem;background:#e2e8f0;color:#475569;transition:.15s}
.sv-cell:hover{filter:brightness(.95);transform:translateY(-1px)}
.sv-cell.sb{background:#dcfce7;color:#166534}.sv-cell.b{background:#dbeafe;color:#1e40af}.sv-cell.c{background:#fef3c7;color:#92400e}.sv-cell.k{background:#fee2e2;color:#991b1b}
.sv-draf{display:block;font-size:.55rem;font-weight:800;color:#b45309;text-transform:uppercase;margin-top:1px}

/* ---- tabel ---- */
.sv-scroll{overflow-x:auto;max-height:68vh;overflow-y:auto;border:1px solid #e5e7eb;border-radius:.75rem;background:#fff}
.sv-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:.75rem}
.sv-tbl th{background:#0f172a;color:#fff;text-align:left;padding:.65rem;font-size:.66rem;font-weight:800;text-transform:uppercase;position:sticky;top:0;z-index:1;white-space:nowrap}
.sv-tbl td{padding:.6rem .65rem;border-bottom:1px solid #e5e7eb;vertical-align:middle}
.sv-tbl tbody tr:nth-child(odd){background:#f1f6fc}.sv-tbl tbody tr:hover{background:#e6f0fb}
.sv-tbl tbody tr:last-child td{border-bottom:0}
.sv-tbl .c{text-align:center}.sv-tbl .nw{white-space:nowrap}
.sv-tbl small{display:block;color:#64748b;font-size:.64rem;font-weight:600}
.sv-nm{font-weight:800;color:#0f172a}
.sv-d{display:block}.sv-m{display:none}

/* ---- kartu mobile (daftar) ---- */
.sv-card{background:#fff;border:1px solid #e5e7eb;border-radius:.75rem;padding:.8rem;margin-bottom:.65rem;box-shadow:0 2px 10px rgba(15,23,42,.05)}
.sv-card-h{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;margin-bottom:.5rem}
.sv-card-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;margin:.5rem 0}
.sv-card-g div{background:#f8fafc;border-radius:.5rem;padding:.4rem .5rem;text-align:center}
.sv-card-g span{display:block;font-size:.58rem;font-weight:800;color:#64748b;text-transform:uppercase;margin-bottom:3px}
.sv-card-f{display:flex;gap:6px;flex-wrap:wrap;margin-top:.5rem}

/* ---- kotak rekap "timbul" ---- */
.sv-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));column-gap:.85rem;row-gap:1.1rem;margin-bottom:1.1rem}
.sv-stats>div{--c1:#5aa2ff;--c2:#1d63e0;--sh:#154aa8;position:relative;overflow:hidden;min-height:92px;margin:0 0 6px;padding:.85rem 1rem 1rem;color:#fff;border-radius:1rem;
 background:linear-gradient(160deg,var(--c1) 0%,var(--c2) 100%);
 box-shadow:0 6px 0 var(--sh),0 14px 18px -4px rgba(15,23,42,.38),inset 0 2px 1px rgba(255,255,255,.5),inset 0 -8px 12px rgba(0,0,0,.16)}
.sv-stats>div:before{content:"";position:absolute;left:7%;right:7%;top:3px;height:42%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0));pointer-events:none}
.sv-stats>div:after{content:attr(data-ic);font-family:"Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome;font-weight:900;position:absolute;right:-.3rem;bottom:-.6rem;font-size:4.4rem;line-height:1;color:#fff;opacity:.22;transform:rotate(-12deg)}
.sv-stats b{position:relative;display:block;font-size:1.8rem;line-height:1.05;font-weight:900;z-index:1;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.sv-stats span{position:relative;display:block;margin-top:.3rem;padding-right:2rem;font-size:.64rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;z-index:1;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.sv-stats>div:nth-child(5n+2){--c1:#34d6c1;--c2:#0d9488;--sh:#0a665e}
.sv-stats>div:nth-child(5n+3){--c1:#ffb457;--c2:#f97316;--sh:#b25208}
.sv-stats>div:nth-child(5n+4){--c1:#fb7a8a;--c2:#dc2626;--sh:#951b1b}
.sv-stats>div:nth-child(5n+5){--c1:#c78bff;--c2:#7c3aed;--sh:#561fae}

/* ---- tab/chips pilihan ---- */
.sv-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.sv-tab{border:1px solid #e5e7eb;background:#fff;padding:.45rem .9rem;font-weight:800;font-size:.72rem;color:#64748b;cursor:pointer;border-radius:99px;transition:.15s;font-family:inherit}
.sv-tab:hover{border-color:#5eead4;color:#0f766e}.sv-tab.on{background:#0f766e;border-color:#0f766e;color:#fff}
.sv-pick{display:flex;gap:6px;flex-wrap:wrap}
.sv-pick button{border:1px solid #cbd5e1;background:#fff;border-radius:.55rem;padding:.45rem .75rem;font-size:.72rem;font-weight:800;color:#64748b;cursor:pointer;font-family:inherit;display:inline-flex;gap:6px;align-items:center;min-height:36px}
.sv-pick button.on{background:#f0fdfa;border-color:#0f766e;color:#0f766e}
.sv-chk{max-height:230px;overflow:auto;border:1px solid #e5e7eb;border-radius:.6rem;padding:.4rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px}
.sv-chk label{display:flex;gap:8px;align-items:center;padding:.4rem .5rem;border-radius:.45rem;cursor:pointer;font-size:.74rem}
.sv-chk label:hover{background:#f1f5f9}.sv-chk input{width:16px;height:16px;accent-color:#0f766e;flex-shrink:0}

/* ---- ringkasan skor (lengket) ---- */
.sv-sum{position:sticky;top:0;z-index:6;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(150px,1.3fr);gap:.5rem;align-items:center;background:#0f172a;color:#fff;border-radius:.75rem;padding:.65rem .85rem;margin-bottom:1rem;box-shadow:0 8px 20px -6px rgba(15,23,42,.5)}
.sv-sum>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.sv-sum span{font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#94a3b8}
.sv-sum b{font-size:1.05rem;font-weight:900;line-height:1.1}
.sv-sum .sv-pill{align-self:flex-start;font-size:.7rem}
.sv-prog i{display:block;height:7px;border-radius:99px;background:#334155;overflow:hidden;margin-top:4px}
.sv-prog u{display:block;height:100%;background:linear-gradient(90deg,#14b8a6,#34d399);border-radius:99px;transition:width .25s;text-decoration:none}

/* ---- baris komponen ---- */
.sv-legend{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:.75rem}
.sv-legend span{font-size:.66rem;font-weight:800;border-radius:99px;padding:.22rem .65rem;background:#f1f5f9;color:#475569}
.sv-items{border:1px solid #e5e7eb;border-radius:.75rem;overflow:hidden;background:#fff}
.sv-grp{background:#e2e8f0;color:#0f172a;font-weight:900;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;padding:.55rem .85rem;border-top:1px solid #cbd5e1}
.sv-grp:first-child{border-top:0}
.sv-ith{display:grid;grid-template-columns:2.6rem minmax(0,1fr) 11.5rem minmax(0,.75fr);gap:.75rem;background:#0f172a;color:#fff;font-size:.64rem;font-weight:800;text-transform:uppercase;padding:.6rem .85rem}
.sv-item{display:grid;grid-template-columns:2.6rem minmax(0,1fr) 11.5rem minmax(0,.75fr);gap:.75rem;align-items:center;padding:.7rem .85rem;border-top:1px solid #e5e7eb}
.sv-item:nth-child(even){background:#fafcff}
.sv-item.miss{background:#fef2f2;box-shadow:inset 3px 0 0 #dc2626}
.sv-no{width:30px;height:30px;border-radius:50%;background:linear-gradient(145deg,#14b8a6,#0f766e);color:#fff;font-weight:900;font-size:.74rem;display:flex;align-items:center;justify-content:center}
.sv-txt{font-size:.8rem;color:#0f172a;line-height:1.45;font-weight:600}
.sv-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sv-opt{height:40px;border-radius:.6rem;border:2px solid #cbd5e1;background:#fff;font-weight:900;font-size:.95rem;color:#64748b;cursor:pointer;transition:.12s;font-family:inherit;padding:0}
.sv-opt:hover:not(:disabled){border-color:#0f766e;color:#0f766e}
.sv-opt.on.v0{background:#dc2626;border-color:#dc2626;color:#fff}.sv-opt.on.v1{background:#f59e0b;border-color:#f59e0b;color:#fff}
.sv-opt.on.v2{background:#2563eb;border-color:#2563eb;color:#fff}.sv-opt.on.v3{background:#16a34a;border-color:#16a34a;color:#fff}
.sv-opt:disabled{cursor:not-allowed;opacity:.85}.sv-opt:disabled:not(.on){opacity:.45}
.sv-lock{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;border-radius:.6rem;padding:.65rem .85rem;margin-bottom:1rem;font-weight:700}
.sv-save{font-size:.68rem;font-weight:700;color:#64748b}.sv-save.err{color:#dc2626}.sv-save.ok{color:#0f766e}
.sv-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:1rem}
.sv-hdr{display:flex;gap:.75rem;align-items:center;margin-bottom:.8rem;flex-wrap:wrap}
.sv-ava{width:44px;height:44px;border-radius:50%;background:linear-gradient(145deg,#14b8a6,#0f766e);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}

/* ---- kartu hasil (guru) ---- */
.sv-m-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.75rem}
.sv-m-grid .sv-card{margin:0}

/* ---- jadwal ---- */
.sv-day{background:#fff;border:1px solid #e5e7eb;border-left:5px solid #0f766e;border-radius:12px;padding:12px 14px;margin-bottom:10px;box-shadow:0 4px 18px rgba(15,23,42,.06)}
.sv-day.today{border-left-color:#2563eb;background:#eff6ff}.sv-day.past{opacity:.65;border-left-color:#94a3b8}
.sv-day-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.85rem;margin-bottom:.4rem}
.sv-tags{display:flex;gap:5px;flex-wrap:wrap}
.sv-tag{font-size:.62rem;font-weight:800;padding:.2rem .55rem;border-radius:99px;background:#ccfbf1;color:#0f766e}.sv-tag.ok{background:#dcfce7;color:#166534}

/* ---- pengaturan ---- */
.sv-set{display:grid;gap:.9rem}
.sv-set .sv-box{margin:0;box-shadow:none;background:#f8fafc}
.sv-switch{display:flex;align-items:center;gap:12px;border:1px solid #e5e7eb;border-radius:12px;padding:12px 14px;background:#fff}
.sv-switch>div{flex:1;display:flex;flex-direction:column;line-height:1.35}.sv-switch small{color:#64748b;font-size:.7rem}
.sv-tg{position:relative;width:46px;height:26px;flex-shrink:0;display:inline-block}
.sv-tg input{opacity:0;width:0;height:0}
.sv-tg span{position:absolute;inset:0;background:#cbd5e1;border-radius:99px;cursor:pointer;transition:.2s}
.sv-tg span:before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.sv-tg input:checked+span{background:#0f766e}.sv-tg input:checked+span:before{transform:translateX(20px)}

/* ---- toast ---- */
.sv-toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);opacity:0;transition:.25s;z-index:99999;background:#0f172a;color:#fff;padding:11px 20px;border-radius:12px;font-size:13px;font-weight:600;max-width:90vw;box-shadow:0 10px 28px rgba(15,23,42,.4)}
.sv-toast.show{opacity:1;transform:translate(-50%,0)}.sv-toast.err{background:#b91c1c}

/* ---- responsif ---- */
@media (max-width:900px){
 .sv-ith{display:none}
 .sv-item{grid-template-columns:2.2rem minmax(0,1fr);grid-template-areas:"no txt" "opts opts" "ket ket";gap:.55rem .65rem;align-items:start;padding:.8rem}
 .sv-item .sv-no{grid-area:no}.sv-item .sv-txt{grid-area:txt}.sv-item .sv-opts{grid-area:opts}.sv-item .sv-ketw{grid-area:ket}
 .sv-opt{height:46px;font-size:1.05rem}
}
@media (max-width:767px){
 .sv-d{display:none}.sv-m{display:block}
 .sv-search{max-width:none}.sv-title{font-size:1.05rem}.sv-box{padding:.85rem}
 .sv-stats{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:.65rem;row-gap:.9rem}
 .sv-stats>div{min-height:84px;padding:.7rem .8rem .85rem}.sv-stats b{font-size:1.5rem}
 .sv-sum{grid-template-columns:repeat(2,minmax(0,1fr));padding:.55rem .7rem;gap:.35rem .6rem}.sv-sum .sv-prog{grid-column:1/-1}
 .sv-sum b{font-size:.95rem}
 .sv-btn{flex:1 1 auto;justify-content:center}.sv-actions{width:100%}.sv-foot .sv-btn{flex:1 1 45%}
 .sv-fg{grid-template-columns:1fr}.sv-chk{grid-template-columns:1fr}
 .sv-sel{width:100%}
}
@media print{.sv{display:none}}

/* =====================================================================
   SUPERVISOR, TUGAS SUPERVISI, BERITA ACARA, KAMERA (sv-ba.js)
   ===================================================================== */
.sv-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem;margin-bottom:1rem}
.sv-grid2 .sv-box{margin:0}
.sv-ok{color:#16a34a}
.sv-ava.sm{width:34px;height:34px;font-size:.78rem}

/* ---- ketik nama lalu klik (typeahead) ---- */
.sv-ta{position:relative}
.sv-ta-list{margin-top:6px;display:flex;flex-direction:column;gap:4px;max-height:300px;overflow:auto}
.sv-ta-list:empty{display:none}
.sv-ta-it{display:flex;align-items:center;gap:.65rem;text-align:left;width:100%;border:1px solid #e5e7eb;background:#fff;border-radius:.6rem;padding:.5rem .65rem;cursor:pointer;font-family:inherit;transition:.12s;min-height:48px}
.sv-ta-it:hover{border-color:#0f766e;background:#f0fdfa}
.sv-ta-it>span:nth-child(2){flex:1;min-width:0}
.sv-ta-it b{display:block;color:#0f172a;font-size:.78rem}
.sv-ta-it small{display:block;color:#64748b;font-size:.66rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-ta-it>i{color:#0f766e;font-size:1.05rem}
.sv-ta-empty{padding:.7rem;color:#94a3b8;font-size:.74rem;text-align:center;border:1px dashed #cbd5e1;border-radius:.6rem}

/* ---- bagi rata otomatis (jadwal) ---- */
.sv-auto{display:flex;gap:10px;align-items:flex-start;padding:.65rem .8rem;border:1px solid #cbd5e1;border-radius:.6rem;background:#f8fafc;cursor:pointer}
.sv-auto input{width:18px;height:18px;margin-top:2px;accent-color:#0f766e;flex-shrink:0}
.sv-auto span{display:flex;flex-direction:column;line-height:1.35;font-size:.76rem;color:#0f172a}
.sv-auto small{color:#64748b;font-size:.68rem;font-weight:500}

/* ---- tugas supervisi ---- */
.sv-ins-g{display:flex;flex-direction:column;gap:6px}
.sv-ins{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;border:1px solid #e5e7eb;background:#f8fafc;border-radius:.6rem;padding:.55rem .75rem;cursor:pointer;font-family:inherit;font-size:.76rem;font-weight:800;color:#0f172a;min-height:44px;transition:.12s}
.sv-ins:hover{border-color:#0f766e;background:#f0fdfa}
.sv-ins i{color:#0f766e;margin-right:6px}
.sv-ins>span:last-child{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#475569}

/* ---- berita acara: ruang lingkup + foto ---- */
.sv-sc{background:#fff;border:1px solid #e5e7eb;border-left:5px solid #0f766e;border-radius:.75rem;padding:.9rem;margin-bottom:.9rem;box-shadow:0 4px 18px rgba(15,23,42,.06)}
.sv-sc-h{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.7rem;font-size:.85rem;color:#0f172a}
.sv-sc-h i{color:#0f766e;margin-right:4px}
.sv-sc-m{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sv-ph-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.sv-ph-box{position:relative;aspect-ratio:4/3;border:2px dashed #cbd5e1;border-radius:.7rem;background:#f8fafc;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sv-ph-box.ok{border:2px solid #16a34a;background:#000}
.sv-ph-box img{width:100%;height:100%;object-fit:contain;display:block}
.sv-ph-no{display:flex;flex-direction:column;align-items:center;gap:6px;color:#94a3b8}
.sv-ph-no i{font-size:1.9rem}.sv-ph-no small{font-size:.68rem;font-weight:700}
.sv-ph-f{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;font-size:.68rem;font-weight:700;color:#475569}
.sv-ph-b{display:inline-flex;gap:6px;align-items:center}

/* ---- kamera (modal) ---- */
.sv-noscroll{overflow:hidden}
.sv-cam{position:fixed;inset:0;z-index:100000;background:rgba(2,6,23,.86);display:flex;align-items:center;justify-content:center;padding:10px}
.sv-cam-box{width:100%;max-width:560px;max-height:100%;overflow:auto;background:#0f172a;color:#fff;border-radius:1rem;padding:.8rem;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.sv-cam-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:.6rem}
.sv-cam-h b{display:block;font-size:.9rem}.sv-cam-h small{display:block;color:#94a3b8;font-size:.68rem}
.sv-cam-h .sv-ic{background:#1e293b;color:#fff}
.sv-cam-v{position:relative;background:#000;border-radius:.7rem;overflow:hidden;min-height:200px}
.sv-cam-v video,.sv-cam-v img{display:block;width:100%;max-height:62vh;object-fit:contain;background:#000}
.sv-cam-msg{position:absolute;left:0;right:0;bottom:0;padding:.55rem .75rem;background:rgba(15,23,42,.88);color:#e2e8f0;font-size:.74rem;font-weight:600;display:none}
.sv-cam-msg.err{background:rgba(153,27,27,.92);color:#fff}
.sv-cam-f{display:flex;gap:8px;justify-content:center;margin-top:.7rem}
.sv-cam-f .sv-btn{flex:1;justify-content:center;min-height:46px;font-size:.8rem}
.sv-cam-box .sv-btn.ghost{background:#1e293b;color:#e2e8f0}
.sv-shoot{background:#dc2626!important}

@media (max-width:480px){.sv-ph-g{gap:.5rem}.sv-ph-f{font-size:.62rem}.sv-ph-b .sv-btn.sm{padding:.3rem .45rem}}