@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&display=swap');

:root { --sc-bg:#06090e; --sc-panel:rgba(12,20,31,.85); --sc-cyan:#00d8ff; --sc-cyan-dim:rgba(0,216,255,.15); --sc-amber:#ff9d00; --sc-text:#a4bccc; --sc-white:#e0f2fe; --sc-border:#1a3045; --sc-like:#ff3366; }
body { background-color:var(--sc-bg); background-image:linear-gradient(rgba(0,216,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,216,255,.03) 1px, transparent 1px); background-size:30px 30px; color:var(--sc-text); font-family:'Rajdhani',sans-serif; margin:0; display:flex; height:100vh; overflow:hidden; }
.sidebar { flex:0 0 314px; width:314px; min-width:314px; max-width:314px; height:100vh; box-sizing:border-box; background:rgba(6,9,14,.95); border-right:1px solid var(--sc-border); padding:2rem; display:flex; flex-direction:column; gap:15px; z-index:10; box-shadow:5px 0 15px rgba(0,0,0,.5); overflow-y:auto; }
.main-display { flex:1 1 auto; min-width:0; padding:2rem 3rem; overflow-y:auto; }
.brand-title { color:var(--sc-white); font-size:2rem; font-weight:700; margin:0 0 2rem; border-bottom:2px solid var(--sc-cyan); padding-bottom:10px; }
.brand-title span { color:var(--sc-cyan); }
.sc-btn { background:var(--sc-cyan-dim); color:var(--sc-cyan); border:1px solid transparent; padding:12px 15px; font-family:'Rajdhani',sans-serif; font-size:1.1rem; font-weight:600; text-transform:uppercase; cursor:pointer; clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%); transition:background-color var(--motion-standard,.22s) var(--ease-standard,ease), color var(--motion-standard,.22s) var(--ease-standard,ease), border-color var(--motion-standard,.22s) var(--ease-standard,ease), transform var(--motion-standard,.22s) var(--ease-standard,ease), box-shadow var(--motion-standard,.22s) var(--ease-standard,ease); text-decoration:none; text-align:center; display:block; }
.sc-btn:hover, .sc-btn.active { background:var(--sc-cyan); color:#000; }
.sc-btn.amber { color:var(--sc-amber); background:rgba(255,157,0,.1); border-color:var(--sc-amber); }
.activity-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:end; border:1px solid var(--sc-border); border-left:4px solid var(--sc-cyan); background:linear-gradient(90deg,rgba(0,216,255,.1),rgba(0,0,0,.18)); padding:18px; margin-bottom:16px; }
.activity-kicker { color:var(--sc-cyan); font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.activity-hero h1 { color:#fff; margin:4px 0 4px; text-transform:uppercase; font-size:2rem; }
.activity-hero p { margin:0; max-width:760px; }
.activity-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px; }
.activity-tabs a { width:auto; display:inline-flex; align-items:center; gap:8px; min-height:42px; box-sizing:border-box; }
.activity-filterbar { display:grid; grid-template-columns:minmax(160px,1.4fr) minmax(140px,.8fr) minmax(150px,.8fr) auto auto; gap:8px; align-items:end; margin:0 0 18px; }
.activity-filterbar input, .activity-filterbar select { width:100%; box-sizing:border-box; background:rgba(0,0,0,.35); border:1px solid var(--sc-border); color:var(--sc-white); padding:10px; font-family:'Rajdhani',sans-serif; font-weight:700; min-height:42px; }
.activity-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; align-items:start; }
.activity-feed { display:grid; gap:12px; }
.activity-feed.is-loading { opacity:.68; pointer-events:none; }
.activity-card { --activity-color:var(--sc-cyan); display:grid; grid-template-columns:52px minmax(0,1fr) 118px; gap:14px; align-items:stretch; border:1px solid color-mix(in srgb,var(--activity-color) 34%,var(--sc-border)); border-left:4px solid var(--activity-color); background:linear-gradient(90deg,color-mix(in srgb,var(--activity-color) 9%,transparent),rgba(0,0,0,.3)); padding:12px; color:var(--sc-text); text-decoration:none; position:relative; overflow:hidden; }
.activity-card:hover { border-color:var(--activity-color); transform:translateY(-1px); }
.activity-icon { width:52px; height:52px; display:flex; align-items:center; justify-content:center; border:1px solid color-mix(in srgb,var(--activity-color) 52%,var(--sc-border)); background:rgba(0,0,0,.28); color:var(--activity-color); font-size:1.35rem; clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%); }
.activity-content { min-width:0; display:grid; gap:7px; }
.activity-line { display:flex; gap:8px; align-items:center; flex-wrap:wrap; color:var(--sc-text); font-weight:800; text-transform:uppercase; font-size:.88rem; }
.activity-line img { width:26px; height:26px; flex-basis:26px; }
.activity-line span:first-of-type { color:var(--activity-color); }
.activity-title { color:#fff; font-size:1.18rem; font-weight:800; text-transform:uppercase; overflow-wrap:anywhere; line-height:1.08; }
.activity-body { margin:0; overflow-wrap:anywhere; }
.activity-meta { display:flex; gap:7px; flex-wrap:wrap; }
.activity-thumb { width:118px; height:82px; object-fit:cover; border:1px solid var(--sc-border); background:rgba(0,0,0,.4); align-self:center; }
.activity-empty { border:1px solid var(--sc-border); border-left:4px solid var(--sc-amber); background:rgba(255,157,0,.08); padding:18px; color:var(--sc-text); }
.activity-load-more-wrap { display:flex; justify-content:center; margin-top:4px; }
.activity-load-more-wrap[hidden] { display:none; }
.activity-load-more[disabled] { opacity:.58; cursor:wait; }
.activity-side { display:grid; gap:14px; position:sticky; top:14px; }
.activity-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.activity-stat { border:1px solid var(--sc-border); background:rgba(0,0,0,.28); padding:10px; }
.activity-stat strong { display:block; color:#fff; font-size:1.45rem; line-height:1; }
.radar-row { --badge-color:var(--sc-amber); display:flex; gap:10px; align-items:center; color:var(--sc-text); text-decoration:none; padding:8px; border:1px solid color-mix(in srgb,var(--badge-color) 28%,rgba(255,255,255,.06)); background:linear-gradient(90deg,color-mix(in srgb,var(--badge-color) 8%,transparent),rgba(0,0,0,.18)); }
.radar-row:hover { border-color:var(--badge-color); }
.radar-row div { min-width:0; }
.radar-row strong { display:block; color:#fff; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width:1100px) { .activity-layout { grid-template-columns:1fr; } .activity-side { position:static; } }
@media (max-width:900px) {
    body { display:block; overflow:auto; height:auto; min-height:100vh; }
    .sidebar { position:sticky; top:0; width:100%; min-width:0; max-width:none; height:auto; flex-direction:row; align-items:center; overflow-x:auto; padding:1rem; }
    .brand-title { font-size:1.35rem; margin:0 1rem 0 0; white-space:nowrap; }
    .sidebar .sc-btn { white-space:nowrap; }
    .main-display { padding:1.25rem; overflow:visible; }
}
@media (max-width:640px) {
    .activity-hero { grid-template-columns:1fr; }
    .activity-card { grid-template-columns:42px minmax(0,1fr); }
    .activity-icon { width:42px; height:42px; }
    .activity-thumb { grid-column:1 / -1; width:100%; height:auto; aspect-ratio:16 / 9; }
    .activity-tabs { display:grid; grid-template-columns:1fr 1fr; }
    .activity-tabs a { justify-content:center; }
    .activity-filterbar { grid-template-columns:1fr; }
}