@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&family=DM+Serif+Display&display=swap');
:root{--bg:#0d0d0e;--surface:#161618;--surface2:#1c1c1f;--border:rgba(255,255,255,.08);--text:#f0ede8;--muted:#6b6a67;--accent:#c8a96e}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh;position:relative}
body::before{content:'';position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:48px 48px;opacity:.35}
body::after{content:'';position:fixed;top:-20%;left:50%;width:70vw;height:60vh;transform:translateX(-50%);pointer-events:none;background:radial-gradient(closest-side,rgba(200,169,110,.10),transparent)}
h1,h2{font-family:'DM Serif Display',serif;font-weight:400}
.mono{font-family:'DM Mono',monospace}
.muted{color:var(--muted)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:24px;padding:14px 24px;background:rgba(13,13,14,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.brand{font-family:'DM Serif Display',serif;font-size:1.25rem}
.links{display:flex;gap:4px;flex:1;overflow-x:auto}
.links a{padding:8px 14px;border-radius:8px;color:var(--muted);font-size:.95rem;white-space:nowrap;transition:color .15s,background .15s}
.links a:hover{color:var(--text)}
.links a.active{color:var(--accent);background:var(--surface2)}
.logout{background:none;border:1px solid var(--border);color:var(--muted);padding:7px 14px;border-radius:8px;font:inherit;font-size:.9rem;cursor:pointer}
.logout:hover{color:var(--text);border-color:var(--accent)}

main{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:40px 24px 120px}
main h1{font-size:2.2rem;margin-bottom:8px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;margin-top:24px;transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-2px);border-color:rgba(200,169,110,.35)}
.btn{background:var(--accent);color:var(--bg);border:0;border-radius:10px;padding:12px 20px;font:600 1rem 'DM Sans',sans-serif;cursor:pointer}
.btn:disabled{opacity:.5;cursor:default}

.james-fab{position:fixed;right:20px;bottom:20px;z-index:20;width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--bg);border:0;font:400 1.5rem 'DM Serif Display',serif;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.james-panel{position:fixed;right:20px;bottom:88px;z-index:20;width:min(360px,calc(100vw - 40px));background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;display:none}
.james-panel.open{display:block}
.james-panel p{color:var(--muted);font-size:.9rem;margin-top:6px}
@media(max-width:640px){.topbar{padding:12px 14px;gap:10px}.brand{display:none}.james-panel{inset:0;width:auto;border-radius:0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}