:root { color-scheme: dark; --bg:#09101a; --panel:#111b29; --line:rgba(255,255,255,.09); --text:#f5f8fc; --muted:#8f9dad; --blue:#0d8bff; --green:#38d28b; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; background:var(--bg); color:var(--text); }
body { background:radial-gradient(circle at 90% 0,rgba(13,139,255,.22),transparent 35%),radial-gradient(circle at 0 55%,rgba(93,71,255,.12),transparent 32%),var(--bg); }
[hidden] { display:none!important; }
.author-shell { width:min(100%,720px); min-height:100dvh; margin:0 auto; }
.author-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:14px 18px 0; padding:4px; border:1px solid var(--line); border-radius:13px; background:rgba(10,22,36,.8); }
.author-tabs a { padding:9px 12px; border-radius:9px; color:var(--muted); font-size:13px; font-weight:700; text-align:center; text-decoration:none; }
.author-tabs a.is-active { color:#fff; background:#1a2b42; box-shadow:0 4px 16px rgba(0,0,0,.2); }
header { position:sticky; top:0; z-index:4; display:flex; align-items:center; gap:12px; min-height:74px; padding:max(14px,env(safe-area-inset-top)) 18px 12px; border-bottom:1px solid var(--line); background:rgba(9,16,26,.82); backdrop-filter:blur(18px); }
header img { width:40px; height:40px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.14); }
header strong,header small { display:block; } header small { margin-top:2px; color:var(--muted); font-size:12px; } header i { width:9px; height:9px; margin-left:auto; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(56,210,139,.1); }
main { padding:22px 16px max(30px,env(safe-area-inset-bottom)); }
.loading,.error { display:grid; justify-items:center; text-align:center; padding:24vh 18px 20px; }
.loading span { width:38px; height:38px; border:3px solid rgba(255,255,255,.12); border-top-color:var(--blue); border-radius:50%; animation:spin .8s linear infinite; }
.loading h1,.error h1 { margin:20px 0 6px; font-size:24px; }.loading p,.error p { max-width:420px; margin:0; color:var(--muted); line-height:1.5; }
.error b { display:grid; place-items:center; width:58px; height:58px; border-radius:18px; background:rgba(255,107,107,.14); color:#ff7777; font-size:30px; }.error button { margin-top:22px; padding:12px 22px; border:0; border-radius:12px; background:var(--blue); color:#fff; font-weight:750; }
.profile-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; padding:20px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg,rgba(13,139,255,.15),rgba(17,27,41,.95)); }
.profile-avatar { display:grid; place-items:center; width:54px; height:54px; overflow:hidden; border-radius:50%; background:linear-gradient(145deg,#0d8bff,#755cff); font-size:22px; font-weight:800; }.profile-avatar img { display:block; width:100%; height:100%; object-fit:cover; }.profile-card span,.section-head span { color:#64b7ff; font-size:11px; font-weight:800; letter-spacing:.12em; }.profile-card h1 { margin:3px 0; font-size:21px; }.profile-card p { margin:0; color:var(--muted); font-size:13px; }.score { text-align:right; }.score strong { font-size:30px; }.score small { color:var(--muted); }
.tier { width:max-content; margin:10px 0 18px auto; padding:7px 11px; border:1px solid rgba(56,210,139,.26); border-radius:999px; color:#67e4a8; font-size:12px; font-weight:750; text-transform:uppercase; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }.metric { padding:14px 10px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }.metric strong,.metric small { display:block; }.metric strong { font-size:22px; }.metric small { margin-top:4px; color:var(--muted); font-size:11px; }
.section-head { margin:30px 4px 12px; }.section-head h2 { margin:4px 0 0; font-size:21px; }.timeline { display:grid; gap:9px; }.timeline article { padding:15px 16px; border:1px solid var(--line); border-radius:15px; background:var(--panel); animation:itemIn .2s ease both; }.timeline article header { position:static; min-height:0; padding:0; border:0; background:none; backdrop-filter:none; }.timeline strong { font-size:13px; }.timeline time { margin-left:auto; color:var(--muted); font-size:11px; }.timeline p { margin:9px 0 0; color:#dce4ec; line-height:1.45; white-space:pre-wrap; }.empty { padding:24px; border:1px dashed var(--line); border-radius:14px; color:var(--muted); text-align:center; }
@keyframes spin { to { transform:rotate(360deg); } } @keyframes itemIn { from { opacity:0; transform:translateY(5px); } }
@media(max-width:560px) { .metrics { grid-template-columns:repeat(2,1fr); }.profile-card { grid-template-columns:auto 1fr; }.score { grid-column:1/-1; display:flex; align-items:baseline; justify-content:flex-end; } }