.highlights-section { background:var(--white); border-top:1px solid var(--line); }
.resources-highlights { background:var(--paper); }
.highlight-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:32px; }
.highlight-heading h2 { margin:0; color:var(--navy); font-size:32px; line-height:44px; }
.highlight-heading p { max-width:640px; margin:12px 0 0; color:var(--muted); font-size:16px; line-height:26px; }
.highlight-tools { display:flex; align-items:center; gap:16px; flex:0 0 auto; }
.highlight-all { display:inline-flex; align-items:center; min-height:44px; color:var(--blue); font-size:14px; font-weight:600; }
.highlight-all:hover { text-decoration:underline; }
.highlight-refresh { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:8px; color:var(--blue); background:var(--white); cursor:pointer; }
.highlight-refresh:hover:not(:disabled) { border-color:var(--blue); background:var(--paper); }
.highlight-refresh:active:not(:disabled) { background:var(--line); }
.highlight-refresh:disabled { opacity:.55; cursor:wait; }
.highlight-refresh i { width:18px; height:18px; background:currentColor; mask:url('/assets/icons/rotate-ccw.svg') center/contain no-repeat; }
.highlight-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.highlight-card { position:relative; min-width:0; display:flex; flex-direction:column; align-items:flex-start; padding:28px; border:1px solid var(--line); border-radius:8px; background:var(--white); }
.highlight-card:hover,.highlight-card:focus-within { border-color:var(--blue-2); }
.highlight-category { display:flex; align-items:center; gap:8px; min-height:24px; color:var(--blue); font-size:14px; line-height:22px; }
.highlight-type-icon { display:block; width:20px; height:20px; flex:0 0 20px; background:currentColor; mask:url('/assets/icons/braces.svg') center/contain no-repeat; }
.highlight-type-icon[data-type="prompt"] { mask-image:url('/assets/icons/text.svg'); }
.highlight-type-icon[data-type="image"] { mask-image:url('/assets/icons/image.svg'); }
.highlight-type-icon[data-type="workflow"] { mask-image:url('/assets/icons/list-tree.svg'); }
.highlight-type-icon[data-type="template"] { mask-image:url('/assets/icons/copy.svg'); }
.highlight-card h3 { margin:20px 0 12px; color:var(--navy); font-size:20px; line-height:30px; }
.highlight-card h3 a::after { content:""; position:absolute; inset:0; border-radius:8px; }
.highlight-card h3 a:focus-visible { outline:none; }
.highlight-card:has(a:focus-visible) { outline:2px solid var(--blue); outline-offset:4px; }
.highlight-card p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; margin:0 0 24px; color:var(--muted); font-size:14px; line-height:24px; }
.highlight-meta { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:auto; padding-bottom:24px; color:var(--muted); font-size:12px; line-height:20px; }
.highlight-meta span { overflow-wrap:anywhere; min-width:0; }
.highlight-card-action { margin-top:auto; color:var(--blue); font-size:14px; font-weight:600; line-height:22px; }
.highlight-card:hover .highlight-card-action { text-decoration:underline; }
.highlight-state { grid-column:1/-1; min-height:136px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px 24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center; color:var(--muted); }
.highlight-state p { margin:0; font-size:14px; line-height:24px; }
.highlight-state a { display:inline-flex; align-items:center; min-height:44px; color:var(--blue); font-size:14px; text-decoration:underline; }
.highlight-loading { width:120px; height:4px; border-radius:8px; background:var(--line); border-left:32px solid var(--blue); }
@media(max-width:980px) { .highlight-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) {
  .highlight-heading { align-items:flex-start; flex-direction:column; gap:16px; margin-bottom:24px; }
  .highlight-heading h2 { font-size:24px; line-height:34px; }
  .highlight-heading p { font-size:14px; line-height:24px; }
  .highlight-tools { width:100%; justify-content:space-between; }
  .highlight-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .highlight-card { padding:24px; }
}