.cl{background:#f1f5f9;padding:28px 24px;font-family:'Nunito',sans-serif;min-height:600px;}
.cl-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
.cl-title{font-size:22px;font-weight:800;color:#1a1a1a;}
.cl-title span{color:var(--blue-mid);}
.cl-badge{background:var(--blue-light);color:var(--blue-mid);font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px;border:1px solid var(--blue-mid);}
.cl-search-wrap{position:relative;margin-bottom:16px;}
.cl-search-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#94a3b8;pointer-events:none;}
.cl-search{width:100%;padding:9px 14px 9px 38px;border:1.5px solid #e2e8f0;border-radius:8px;background:#fff;font-size:13.5px;color:#1a1a1a;outline:none;transition:border-color 0.18s;height: 45px;}
.cl-search:focus{border-color:#0a245a;}
.cl-search::placeholder{color:#94a3b8;}
.cl-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;}
.cl-pill{padding:7px 16px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;border:1.5px solid #e2e8f0;background:#fff;color:#1a1a1a;transition:all 0.15s;white-space:nowrap;}
.cl-pill:hover{border-color:var(--blue-mid);color:var(--blue-mid);}
.cl-pill.active{background:var(--blue-mid);color:#fff;border-color:var(--blue-mid);}
.cl-pill .pill-count{font-size:11px;opacity:0.75;margin-left:4px;}
.cl-meta{font-size:12px;color:#a07850;margin-bottom:14px;}
.cl-meta span{color:#e8620a;font-weight:700;}
.cl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
/* .cl-card{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid #f0e4d4;border-radius:12px;padding:14px 16px;text-decoration:none;color:inherit;cursor:pointer;transition:border-color 0.18s,box-shadow 0.18s,transform 0.15s;animation:fadeUp 0.22s ease both;} */
.cl-card{display: flex;align-items: center;gap: 10px;padding: 14px 16px;background: #fff;border: 1px solid #e2e8f0;border-radius: 8px;text-decoration: none;transition: .2s;}
.cl-card:hover{border-color: var(--blue-mid);box-shadow: 0 3px 14px rgba(10, 36, 90, .1);transform: translateY(-1px);background-color: var(--blue-light);}
.cl-flag{flex-shrink:0;width:36px;height:27px;border-radius:4px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.14);}
.cl-flag .fi{width:36px;height:27px;font-size:27px;line-height:27px;display:block;}
.cl-name{font-size:14px;font-weight:700;color:#1a1a1a;line-height:1.3;flex:1}
.cl-count{font-size:11.5px;color:#a07850;margin-top:2px;}
.cl-count::before{content:"• ";color:#e8620a;}
.cl-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px;}
.cl-tag{font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px;background:#fff3ec;color:#e8620a;border:1px solid #fbd5bc;}
.cl-empty{grid-column:1/-1;text-align:center;padding:56px 0;color:#c4a882;font-size:14px;}
.cl-empty svg{display:block;margin:0 auto 12px;opacity:0.35;}
.cl-card:hover .cl-arrow{color: var(--blue-mid);font-weight: 600}
.cl-arrow{color: #cbd5e1;font-size: 16px};
@keyframes fadeUp{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:translateY(0);}}
@media(max-width:640px){.cl-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:380px){.cl-grid{grid-template-columns:1fr;}}


/* ══════════════════════════════════════
   PAGE HERO — slim breadcrumb bar
   ══════════════════════════════════════ */
.page-hero{background:var(--navy);border-bottom:1px solid rgba(255,255,255,.06)}
.page-hero-inner{max-width:1300px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.4)}
.breadcrumb a{color:rgba(255,255,255,.55);transition:color .14s}
.breadcrumb a:hover{color:#fff}
.breadcrumb-sep{font-size:10px;opacity:.4}
.breadcrumb span{color:rgba(255,255,255,.8);font-weight:600}
.page-hero-title{color:#fff;font-size:20px;font-weight:800;letter-spacing:-.4px;margin:4px 0 2px}
.page-hero-meta{font-size:12px;color:rgba(255,255,255,.45)}
.page-hero-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.hero-stat-pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:8px 14px;text-align:center}
.hsp-val{font-size:16px;font-weight:800;color:#fff;letter-spacing:-.4px;line-height:1}
.hsp-val sup{font-size:10px;color:#7dd3fc}
.hsp-lbl{font-size:9.5px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}