.class-page { padding-bottom: 5rem; }
.class-hero { display:flex; justify-content:space-between; gap:2rem; align-items:flex-end; padding:2.5rem 0 1.5rem; border-bottom:1px solid var(--line,#e5e7eb); }
.class-hero h1 { margin:.35rem 0 .5rem; }
.class-hero p { max-width:40rem; }
.class-summary { min-width:12rem; padding:1rem 1.15rem; border:1px solid var(--line,#e5e7eb); border-radius:12px; background:var(--surface,#fff); }
.class-summary strong,.class-summary span { display:block; }
.class-summary strong { font-size:1.2rem; }
.class-summary span { color:var(--muted,#667085); margin-top:.25rem; font-size:.9rem; }
.class-tabs { display:flex; gap:.35rem; overflow-x:auto; padding:1.25rem 0; scrollbar-width:none; }
.class-tabs a { flex:0 0 auto; color:var(--muted,#667085); text-decoration:none; padding:.65rem .9rem; border-radius:9px; }
.class-tabs a[aria-current="page"] { background:#111827; color:#fff; }
.class-selector { display:flex; align-items:center; flex-wrap:wrap; gap:.65rem; margin-bottom:1.25rem; padding:.85rem 1rem; border:1px solid var(--line,#e5e7eb); border-radius:10px; background:var(--surface,#fff); }
.class-selector label { font-weight:650; }
.class-selector select { min-width:12rem; border:1px solid var(--line,#d1d5db); border-radius:8px; padding:.55rem .7rem; background:#fff; }
.muted { color:var(--muted,#667085); font-size:.9rem; }
.activity-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.activity-card { display:flex; flex-direction:column; min-height:12rem; padding:1.15rem; border:1px solid var(--line,#e5e7eb); border-radius:12px; background:#fff; text-decoration:none; color:inherit; transition:border-color .15s ease, transform .15s ease; }
.activity-card:hover,.activity-card:focus-visible { border-color:#111827; transform:translateY(-1px); }
.activity-card .activity-meta { display:flex; justify-content:space-between; gap:.5rem; color:var(--muted,#667085); font-size:.83rem; }
.activity-card h2 { font-size:1.1rem; line-height:1.35; margin:.8rem 0 .45rem; }
.activity-card p { color:var(--muted,#667085); margin:0; line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.activity-card .activity-footer { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-top:auto; padding-top:1rem; font-size:.86rem; }
.activity-status { color:#166534; }
.activity-status.closed { color:#92400e; }
.detail-panel { border:1px solid var(--line,#e5e7eb); border-radius:12px; background:#fff; padding:1.35rem; }
.detail-head { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; }
.detail-head h2 { margin:.25rem 0 .5rem; }
.detail-copy { white-space:pre-wrap; color:var(--muted,#4b5563); line-height:1.7; }
.detail-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.25rem; }
.attachment-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin-top:1rem; }
.attachment-card { display:flex; justify-content:space-between; align-items:center; gap:.75rem; border:1px solid var(--line,#e5e7eb); border-radius:9px; padding:.8rem; min-width:0; }
.attachment-card strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attachment-card a { flex:0 0 auto; }
.class-empty { max-width:40rem; padding:2.5rem 1rem; }
.class-empty h2 { margin:.35rem 0 .5rem; }
.class-empty p { color:var(--muted,#667085); line-height:1.65; }
@media (max-width: 900px) { .activity-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .attachment-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) { .class-hero { display:block; padding-top:1.5rem; } .class-summary { margin-top:1rem; } .activity-grid,.attachment-grid { grid-template-columns:1fr; } .class-tabs a { padding:.6rem .7rem; } }