:root { color-scheme: dark; --ink:#09090b; --panel:#111114; --line:rgba(255,255,255,.14); --silver:#f0eee9; --muted:#b7b3b0; --violet:#a98cff; --red:#e9454e; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { background:radial-gradient(circle at 15% 20%, rgba(104,69,151,.26), transparent 32%), radial-gradient(circle at 90% 85%, rgba(142,28,45,.22), transparent 30%), var(--ink); color:var(--silver); font-family:"DM Sans", system-ui, sans-serif; }
.page-shell { min-height:100vh; display:grid; place-items:center; padding:32px 20px 22px; }
.profile-card { width:min(100%, 980px); min-height:670px; display:grid; grid-template-columns:minmax(320px, .9fr) 1.1fr; overflow:hidden; border:1px solid var(--line); border-radius:26px; background:linear-gradient(120deg, rgba(255,255,255,.08), rgba(255,255,255,.025) 44%, rgba(0,0,0,.3)); box-shadow:0 26px 80px rgba(0,0,0,.42); }
.portrait-wrap { min-height:670px; background:#050506; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.portrait { width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.92) contrast(1.04); }
.content { padding:76px clamp(30px, 6vw, 74px); display:flex; flex-direction:column; justify-content:center; }
.kicker { margin:0 0 22px; color:var(--violet); font-size:.76rem; font-weight:700; letter-spacing:.18em; }
h1 { margin:0; font-family:"Space Grotesk", sans-serif; font-size:clamp(3.4rem, 8vw, 6.3rem); line-height:.86; letter-spacing:-.07em; }
h1 span { color:#c9c6c1; }
.intro { max-width:430px; margin:28px 0 32px; color:var(--muted); font-size:1.08rem; line-height:1.55; }
.actions { display:grid; gap:12px; }
.action { display:flex; align-items:center; justify-content:space-between; min-height:56px; padding:0 18px 0 21px; border:1px solid var(--line); border-radius:14px; color:var(--silver); text-decoration:none; font-weight:700; background:rgba(255,255,255,.035); transition:transform .2s ease, border-color .2s ease, background .2s ease; }
.action:hover, .action:focus-visible { transform:translateY(-2px); border-color:rgba(169,140,255,.8); background:rgba(169,140,255,.12); outline:none; }
.action.primary { border-color:rgba(233,69,78,.7); background:linear-gradient(100deg, rgba(233,69,78,.22), rgba(169,140,255,.12)); }
.action b { color:var(--violet); font-size:1.25rem; font-weight:500; }
.pending { margin:22px 0 0; color:#89858a; font-size:.82rem; line-height:1.45; }
footer { width:min(100%, 980px); display:flex; justify-content:space-between; padding:18px 4px 0; color:#77737a; font-size:.7rem; letter-spacing:.17em; }
@media (max-width:700px) { .page-shell { padding:12px; } .profile-card { grid-template-columns:1fr; min-height:auto; border-radius:20px; } .portrait-wrap { min-height:390px; max-height:55vh; } .content { padding:38px 24px 32px; } h1 { font-size:4.5rem; } .intro { margin:22px 0 26px; font-size:1rem; } footer { padding:14px 2px 0; } }