:root { color-scheme:light; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --bg:#f4f6f8; --surface:#fff; --soft:#e8eef6; --text:#202124; --muted:#687078; --line:#dfe3e7; --orange:#f26c3a; --shadow:0 1px 3px rgba(18,26,35,.12); }
:root.dark-mode { color-scheme:dark; --bg:#15191f; --surface:#1d2631; --soft:#273443; --text:#f4f5f7; --muted:#b6bcc5; --line:#3a424c; --shadow:0 1px 3px rgba(0,0,0,.35); }
* { box-sizing:border-box; } html { background:var(--bg); } body { margin:0; color:var(--text); background:var(--bg); } a { color:inherit; text-decoration:none; } button { font:inherit; } [hidden] { display:none!important; } .shell { width:100%; min-height:100vh; margin:0; overflow:hidden; background:var(--surface); border:0; border-radius:0; box-shadow:none; }
.topbar { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:10px 20px; border-bottom:1px solid var(--line); } .brand,.topbar nav { display:flex; align-items:center; gap:12px; } .brand { font-weight:800; } .brand-mark { width:34px; height:34px; display:grid; place-items:center; color:#fff; background:var(--orange); border-radius:50%; } .topbar nav a { color:var(--muted); font-size:11px; } .icon-button { width:38px; height:38px; display:grid; place-items:center; color:var(--text); background:var(--soft); border:0; border-radius:6px; cursor:pointer; }
.loading-state,.private-state { min-height:520px; display:flex; align-items:center; justify-content:center; gap:12px; padding:32px; color:var(--muted); text-align:center; } .loading-state svg { animation:spin 1s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } .private-state { flex-direction:column; } .private-state > svg { width:46px; height:46px; padding:11px; color:var(--orange); background:var(--soft); border-radius:50%; } .private-state h1 { margin:6px 0 8px; color:var(--text); font-size:30px; letter-spacing:0; } .private-state p { margin:0 auto 18px; max-width:440px; line-height:1.6; } .button { display:inline-flex; align-items:center; gap:6px; padding:10px 13px; color:var(--text); background:var(--soft); border-radius:5px; font-size:11px; font-weight:700; }
.profile-head { display:flex; align-items:center; gap:20px; padding:42px; } .member-avatar { width:82px; height:82px; display:grid; flex:0 0 auto; place-items:center; overflow:hidden; color:#fff; background:var(--orange); border-radius:50%; } .member-avatar img { width:100%; height:100%; object-fit:cover; } .member-avatar svg { width:34px; height:34px; } .eyebrow { color:var(--orange); font-size:10px; font-weight:800; text-transform:uppercase; } .profile-copy h1 { margin:6px 0 4px; font-size:38px; letter-spacing:0; } .profile-copy p { margin:0; color:var(--muted); font-size:12px; } .profile-copy a { display:inline-flex; align-items:center; gap:5px; margin-top:10px; color:var(--orange); font-size:11px; font-weight:700; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); background:var(--bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .stats div { padding:18px 22px; } .stats div + div { border-left:1px solid var(--line); } .stats strong,.stats span { display:block; } .stats strong { color:var(--orange); font-size:22px; } .stats span { margin-top:2px; color:var(--muted); font-size:9px; text-transform:uppercase; }
.collection { padding:32px 38px 38px; } .collection.recipes { background:var(--bg); border-top:1px solid var(--line); } .section-head { margin-bottom:15px; } .section-head h2 { margin:5px 0 4px; font-size:24px; } .section-head p { margin:0; color:var(--muted); font-size:11px; } .card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .contribution-card { min-width:0; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); } .contribution-card:hover,.contribution-card:focus-visible { border-color:var(--orange); outline:0; } .contribution-card img { width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--soft); } .card-body { display:block; padding:13px; } .card-body small,.card-body strong,.card-body span { display:block; } .card-body small { color:var(--orange); font-size:9px; font-weight:700; text-transform:uppercase; } .card-body strong { display:-webkit-box; min-height:36px; margin:5px 0 8px; overflow:hidden; font-size:12px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .card-body span { color:var(--muted); font-size:9px; } .empty { padding:28px; color:var(--muted); text-align:center; border:1px dashed var(--line); border-radius:6px; font-size:11px; }
footer { display:flex; justify-content:space-between; gap:20px; padding:18px 38px; color:var(--muted); border-top:1px solid var(--line); font-size:10px; } footer a { color:var(--orange); font-weight:700; }
@media(max-width:700px) { .card-grid { grid-template-columns:1fr 1fr; } .stats { grid-template-columns:1fr 1fr; } .stats div:nth-child(3) { border-left:0; } .stats div:nth-child(n+3) { border-top:1px solid var(--line); } }
@media(max-width:500px) { .shell { width:100%; margin:0; border-width:0; border-radius:0; } .topbar { flex-wrap:wrap; padding:10px 14px 0; } .topbar nav { width:calc(100% + 28px); margin:0 -14px; padding:0 14px 10px; overflow-x:auto; } .topbar nav a { flex:0 0 auto; } .profile-head { align-items:flex-start; padding:28px 18px; } .member-avatar { width:62px; height:62px; } .profile-copy h1 { font-size:28px; } .collection { padding-left:18px; padding-right:18px; } .card-grid { grid-template-columns:1fr; } footer { display:grid; padding-left:18px; padding-right:18px; } }