@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); }
.section-header { color:var(--sc-amber); border-bottom:1px solid var(--sc-border); padding-bottom:5px; margin:0 0 1rem; font-size:1.5rem; text-transform:uppercase; }
.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-out,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); }
.sc-btn.amber:hover { background:var(--sc-amber); color:#000; border-color:var(--sc-amber); }
.members-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.member-card { --member-accent:var(--sc-cyan); background:linear-gradient(145deg,color-mix(in srgb,var(--member-accent) 10%,transparent),rgba(7,15,24,.9) 48%,rgba(255,157,0,.06)),var(--sc-panel); border:1px solid color-mix(in srgb,var(--member-accent) 22%,var(--sc-border)); border-top:3px solid var(--member-accent); box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 28px rgba(0,0,0,.22); padding:16px; text-decoration:none; color:var(--sc-text); transition:border-color var(--motion-standard,.22s) var(--ease-standard,ease), transform var(--motion-standard,.22s) var(--ease-out,ease), box-shadow var(--motion-standard,.22s) var(--ease-standard,ease), background var(--motion-standard,.22s) var(--ease-standard,ease); position:relative; overflow:hidden; }
.member-card::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background:radial-gradient(circle at 12% 8%, color-mix(in srgb,var(--member-accent) 24%,transparent), transparent 36%), linear-gradient(135deg, transparent 0 58%, color-mix(in srgb,var(--member-accent) 12%,transparent)); transition:opacity var(--motion-standard,.22s) var(--ease-standard,ease), transform var(--motion-standard,.22s) var(--ease-out,ease); }
.member-card:hover { background:linear-gradient(145deg,color-mix(in srgb,var(--member-accent) 20%,transparent),rgba(10,22,35,.96) 46%,color-mix(in srgb,var(--member-accent) 14%,transparent)),var(--sc-panel); border-color:color-mix(in srgb,var(--member-accent) 70%,var(--sc-border)); transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 42px rgba(0,0,0,.34),0 0 30px color-mix(in srgb,var(--member-accent) 18%,transparent); }
.member-card:hover::before { opacity:.9; transform:scale(1.02); }
.member-card > * { position:relative; z-index:1; }
.member-head { display:flex; gap:12px; align-items:center; min-width:0; }
.member-name-wrap { min-width:0; }
.member-name { color:var(--sc-white); font-weight:700; font-size:1.2rem; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; display:block; }
.member-name:hover { color:var(--member-accent); }
.member-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:14px; }
.member-stat { background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.06); padding:8px; }
.member-stat strong { display:block; color:var(--sc-white); font-size:1.2rem; line-height:1; }
.member-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.member-actions .sc-btn { flex:1 1 120px; margin:0; padding:9px 10px; font-size:.92rem; }

@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:560px) {
    .main-display { padding:1rem; }
    .members-grid { grid-template-columns:1fr; }
    .member-stats { grid-template-columns:1fr 1fr; }
    .member-name { white-space:normal; overflow-wrap:anywhere; }
}