@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --ink: #18221f;
    --muted: #63706b;
    --paper: #f3f6f0;
    --panel: rgba(255, 255, 255, 0.86);
    --line: #dce5df;
    --accent: #d97745;
    --accent-dark: #9f4a26;
    --mint: #b9d8c4;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background: radial-gradient(circle at 15% 10%, #f9dec8 0, transparent 28%), linear-gradient(135deg, #eff4ee 0%, #dae8e0 100%);
    font-family: 'DM Sans', sans-serif;
}
.shell { width: min(980px, calc(100% - 40px)); margin: 0 auto; padding: 11vh 0; }
.intro { max-width: 680px; margin-bottom: 42px; }
.eyebrow { margin: 0 0 13px; color: var(--accent-dark); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
h1, h2 { font-family: 'Space Grotesk', sans-serif; letter-spacing: 0; }
h1 { max-width: 660px; margin: 0; font-size: clamp(2.8rem, 7vw, 5.8rem); line-height: 0.98; }
h2 { margin: 0; font-size: 1.7rem; }
.lede { max-width: 510px; margin: 25px 0 0; color: var(--muted); font-size: 1.1rem; line-height: 1.6; }
.panel { width: 100%; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 8px; background: var(--panel); box-shadow: 0 24px 60px rgba(47, 74, 62, 0.13); backdrop-filter: blur(16px); }
.login-panel { max-width: 470px; padding: 42px; }
.panel-mark { display: grid; width: 46px; height: 46px; place-items: center; margin-bottom: 24px; border-radius: 50%; color: #fff; background: var(--accent); font-family: 'Space Grotesk', sans-serif; font-size: 1.4rem; font-weight: 700; }
.muted { margin: 10px 0 28px; color: var(--muted); line-height: 1.5; }
.google-button { min-height: 44px; }
.status { min-height: 20px; margin: 20px 0 0; color: var(--accent-dark); font-size: 0.9rem; }
.profile-panel { max-width: 760px; padding: 38px; }
.profile-header { display: flex; align-items: center; gap: 20px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.avatar { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; }
.avatar-fallback { display: grid; place-items: center; color: #fff; background: var(--accent-dark); font-family: 'Space Grotesk', sans-serif; font-size: 2rem; }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 28px 0; overflow: hidden; border: 1px solid var(--line); background: var(--line); }
.profile-grid div { min-width: 0; padding: 18px; background: rgba(255, 255, 255, 0.62); }
dt { margin-bottom: 7px; color: var(--muted); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
dd { margin: 0; overflow-wrap: anywhere; }
.breakable { font-size: 0.83rem; }
.sign-out { display: inline-block; padding: 11px 18px; border: 1px solid var(--accent-dark); color: var(--accent-dark); text-decoration: none; font-weight: 700; }
.sign-out:hover { color: #fff; background: var(--accent-dark); }
@media (max-width: 600px) {
    .shell { width: min(100% - 28px, 980px); padding: 9vh 0 40px; }
    .intro { margin-bottom: 30px; }
    h1 { font-size: 3.2rem; }
    .login-panel, .profile-panel { padding: 26px 22px; }
    .profile-grid { grid-template-columns: 1fr; }
}