:root{
  --bg:#F7F8FA; --panel:#FFFFFF; --panel2:#F1F3F5; --border:#E4E7EB;
  --text:#20242B; --muted:#828A96; --accent:#2F6FE4; --accent-ink:#FFFFFF;
  --new:#2F6FE4; --progress:#D89A1E; --done:#2FA160; --danger:#DB5555;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);}
#app{max-width:900px;margin:0 auto;padding:0 0 40px;}

.il-header{padding:22px 20px 14px;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:10px;}
.il-title{font-size:18px;font-weight:700;}
.il-sub{color:var(--muted);font-size:12px;margin-top:2px;}
.il-header-actions{display:flex;gap:8px;flex-wrap:wrap;}
.il-btn{border:1px solid var(--border);background:var(--panel);color:var(--text);font-size:13px;font-weight:600;padding:8px 14px;border-radius:7px;cursor:pointer;}
.il-btn:hover{border-color:var(--accent);color:var(--accent);}
.il-btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.il-btn.primary:hover{filter:brightness(1.06);color:var(--accent-ink);}
.il-btn:disabled{opacity:.55;cursor:default;}

.il-stats{display:flex;gap:8px;padding:2px 20px 14px;flex-wrap:wrap;}
.il-stat{flex:1;min-width:100px;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:9px 12px;}
.il-stat .num{font-size:19px;font-weight:700;}
.il-stat .lbl{font-size:11px;color:var(--muted);margin-top:1px;}
.il-stat.new .num{color:var(--new);}
.il-stat.progress .num{color:var(--progress);}
.il-stat.done .num{color:var(--done);}

.il-filters{display:flex;gap:8px;padding:0 20px 12px;flex-wrap:wrap;position:sticky;top:0;background:var(--bg);z-index:5;}
.il-filters input, .il-filters select{background:var(--panel);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:7px 10px;font-size:13px;font-family:var(--sans);}
.il-filters input{flex:1;min-width:160px;}
.il-filters select{min-width:120px;}

.il-list{padding:0 20px;display:flex;flex-direction:column;gap:8px;}
.il-card{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:11px 14px;cursor:pointer;}
.il-card:hover{border-color:var(--accent);}
.il-row1{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.il-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.il-dot.new{background:var(--new);} .il-dot.progress{background:var(--progress);} .il-dot.done{background:var(--done);}
.il-stt{font-family:var(--mono);color:var(--muted);font-size:11.5px;}
.il-module{font-size:11px;background:var(--panel2);padding:2px 7px;border-radius:5px;}
.il-badge{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;margin-left:auto;}
.il-badge.new{background:#EAF1FD;color:var(--new);}
.il-badge.progress{background:#FBF1DD;color:var(--progress);}
.il-badge.done{background:#E8F6ED;color:var(--done);}
.il-desc{margin-top:5px;font-size:13.5px;line-height:1.4;}
.il-meta{margin-top:4px;font-size:11.5px;color:var(--muted);}
.il-imgcount{font-size:11px;color:var(--muted);}

.il-empty{text-align:center;padding:44px 20px;color:var(--muted);font-size:13.5px;}
.il-loading{text-align:center;padding:44px;color:var(--muted);font-size:13px;}

/* ---- Modal chi tiết (mở riêng, không vẽ lại danh sách) ---- */
.il-overlay{position:fixed;inset:0;background:rgba(20,24,29,.45);display:none;align-items:center;justify-content:center;z-index:9999;padding:20px;}
.il-overlay.open{display:flex;}
.il-modal{background:var(--panel);border-radius:12px;width:100%;max-width:560px;max-height:88vh;overflow-y:auto;padding:22px;}
.il-modal h3{margin:0 0 4px;font-size:16px;}
.il-modal .il-modal-sub{color:var(--muted);font-size:12px;margin-bottom:14px;}
.il-field{margin-bottom:11px;}
.il-field label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px;}
.il-field input, .il-field textarea, .il-field select{width:100%;background:var(--panel2);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:8px 10px;font-size:13px;font-family:var(--sans);}
.il-field textarea{min-height:56px;resize:vertical;}
.il-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;}

/* detail (xem) modal */
.il-detail-fld{margin-bottom:12px;font-size:13.5px;line-height:1.5;}
.il-detail-fld b{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.02em;display:block;margin-bottom:3px;}
.il-detail-top{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.il-gallery{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;}
.il-gallery img{width:84px;height:84px;object-fit:cover;border-radius:6px;border:1px solid var(--border);cursor:zoom-in;}
.il-detail-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;}

.il-pending-gallery{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.il-pending-thumb{position:relative;width:60px;height:60px;}
.il-pending-thumb img{width:100%;height:100%;object-fit:cover;border-radius:5px;border:1px solid var(--border);}
.il-pending-thumb .rm{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:var(--danger);color:#fff;font-size:11px;line-height:18px;text-align:center;cursor:pointer;border:none;padding:0;}

.il-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--text);color:#fff;padding:9px 16px;border-radius:8px;font-size:12.5px;z-index:10000;opacity:0;pointer-events:none;transition:opacity .25s;}
.il-toast.show{opacity:1;}
.il-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:10001;padding:20px;cursor:zoom-out;}
.il-lightbox.open{display:flex;}
.il-lightbox img{max-width:100%;max-height:100%;border-radius:6px;}