/* ============================================================
   TEMPLATE LIBRARY UI — search · category tabs · ATS filter ·
   sorting · 55 cards with live-rendered thumbnails · big preview
   Uses the dashboard design tokens (light + dark). All local.
   ============================================================ */
.lib-back{position:fixed;inset:0;background:rgba(2,6,23,.6);display:none;z-index:120;padding:14px}
.lib-back.show{display:block}
.lib{background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);
  height:100%;display:flex;flex-direction:column;overflow:hidden}

/* ---------- header ---------- */
.lib-head{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border);flex:none;background:var(--panel2)}
.lib-head h2{margin:0;font-size:16.5px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.lib-count{font-size:11.5px;font-weight:700;color:var(--muted);background:var(--panel);
  border:1px solid var(--border);border-radius:20px;padding:2px 9px}
.lib-head .topbar-spacer{flex:1}

/* ---------- toolbar ---------- */
.lib-tools{padding:11px 16px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:9px;flex:none}
.lib-tools-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
#libSearch{flex:1;min-width:180px}
.lib-cats{display:flex;gap:6px;flex-wrap:wrap}
.lib-cat{border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:20px;
  padding:5px 11px;cursor:pointer;font-weight:600;font-size:12px;display:inline-flex;gap:6px;align-items:center;transition:.15s}
.lib-cat:hover{border-color:var(--accent);background:var(--accent-soft)}
.lib-cat.active{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.lib-cat b{font-size:10.5px;opacity:.75;font-weight:700}
.lib-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lib-filters select{border:1px solid var(--border);background:var(--panel);color:var(--text);
  border-radius:8px;padding:6px 9px;font-size:12.5px;cursor:pointer}
.lib-filters .hint{font-size:11.5px;color:var(--muted)}
.lib-note{font-size:11.5px;color:var(--muted);margin:0}

/* ---------- body ---------- */
.lib-body{flex:1;display:flex;gap:0;min-height:0}
.lib-grid-wrap{flex:1;min-width:0;overflow:auto;padding:14px 16px}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:13px}
.lib-empty{padding:40px 10px;text-align:center;color:var(--muted);grid-column:1/-1}

/* ---------- card ---------- */
.lib-card{border:2px solid var(--border);border-radius:11px;background:var(--panel);cursor:pointer;
  padding:0;overflow:hidden;text-align:left;display:flex;flex-direction:column;gap:0;transition:.14s;font:inherit;color:inherit}
.lib-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.lib-card.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.lib-card-b{padding:8px 9px 9px;display:flex;flex-direction:column;gap:5px;background:var(--panel)}
.lib-card-t{font-size:12.5px;font-weight:800;line-height:1.25}
.lib-card-cat{font-size:10.5px;color:var(--muted);font-weight:600;letter-spacing:.2px}
.lib-card-d{font-size:11px;color:var(--muted);line-height:1.42;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lib-card-f{display:flex;gap:5px;flex-wrap:wrap;align-items:center}

/* ATS compatibility badges — accurate wording, no "HR approved" claims */
.badge{font-size:9.8px;font-weight:800;letter-spacing:.3px;border-radius:20px;padding:2px 7px;white-space:nowrap;
  border:1px solid transparent;text-transform:uppercase}
.badge.ats-high{background:rgba(22,163,74,.14);color:#15803d;border-color:rgba(22,163,74,.35)}
.badge.ats-medium{background:rgba(37,99,235,.13);color:#1d4ed8;border-color:rgba(37,99,235,.32)}
.badge.ats-low{background:rgba(217,119,6,.15);color:#b45309;border-color:rgba(217,119,6,.35)}
[data-theme="dark"] .badge.ats-high{color:#4ade80}
[data-theme="dark"] .badge.ats-medium{color:#93c5fd}
[data-theme="dark"] .badge.ats-low{color:#fbbf24}
.tag{font-size:9.8px;color:var(--muted);border:1px solid var(--border);border-radius:5px;padding:1px 5px;background:var(--panel2)}

/* ---------- big live preview ---------- */
.lib-preview{width:400px;flex:none;border-left:1px solid var(--border);background:var(--panel2);
  display:flex;flex-direction:column;min-height:0}
.lib-preview-head{padding:12px 14px 9px;border-bottom:1px solid var(--border);flex:none}
.lib-preview-head .row1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lib-preview-head h3{margin:0;font-size:14.5px;font-weight:800}
.lib-preview-cat{font-size:11px;color:var(--muted);font-weight:700;margin-top:2px}
.lib-desc{font-size:11.8px;color:var(--muted);line-height:1.5;margin:7px 0 0}
.lib-prev-scroll{flex:1;overflow:auto;padding:14px;display:flex;justify-content:flex-start;min-height:0;
  background:repeating-conic-gradient(var(--panel) 0% 25%, var(--panel2) 0% 50%) 50%/18px 18px}
.lib-prev-sheet{flex:none;box-shadow:var(--shadow);max-width:none;margin:0}
.lib-prev-foot{padding:11px 14px;border-top:1px solid var(--border);display:flex;gap:8px;align-items:center;flex:none;background:var(--panel)}
.lib-prev-foot .btn{flex:1;justify-content:center}
.lib-ats-note{font-size:10.8px;color:var(--warn);margin:0;line-height:1.4}

/* ---------- sidebar: current template card ---------- */
.tpl-current{width:100%;display:flex;gap:10px;align-items:center;border:1px solid var(--border);
  background:var(--panel2);border-radius:11px;padding:9px;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:.15s}
.tpl-current:hover{border-color:var(--accent);background:var(--accent-soft)}
.tpl-current .tpl-thumb{width:52px;flex:none}
.tpl-current-meta{min-width:0;flex:1}
.tpl-current-meta b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpl-current-meta small{display:block;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpl-current-cta{font-size:11px;font-weight:800;color:var(--accent);white-space:nowrap}

/* ---------- thumbnail frame (real scaled render, no images) ---------- */
.lib .tpl-thumb,.tpl-current .tpl-thumb{background:#fff;border-color:var(--border)}
.thumb-scale{contain:layout paint style}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .lib-preview{width:330px}
}
@media(max-width:900px){
  .lib-body{flex-direction:column}
  .lib-preview{width:auto;border-left:0;border-top:1px solid var(--border);max-height:46%}
  .lib-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
}
@media(max-width:640px){
  .lib-back{padding:0}
  .lib{border-radius:0}
  .lib-grid{grid-template-columns:repeat(auto-fill,minmax(116px,1fr))}
  .lib-preview{max-height:42%}
  .lib-prev-scroll{padding:9px}
}