:root { --green-900:#0B3D2E; --green-800:#124F3B; --green-700:#1A6B52; --gold:#C9A961; --gold-light:#E0C47E; --gold-pale:#FAF5E6; --white:#FFFFFF; --gray-100:#F4F5F7; --gray-200:#E5E7EB; --gray-500:#6B7280; --gray-700:#374151; --radius:16px; --shadow:0 8px 32px rgba(11,61,46,0.18); --shadow-soft:0 2px 8px rgba(11,61,46,0.08); }
* { box-sizing:border-box; margin:0; padding:0; }
html,body { font-family:'Inter',sans-serif; background:var(--green-900); min-height:100dvh; color:var(--gray-700); -webkit-font-smoothing:antialiased; }
body { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:14px 16px 20px; overflow-x:hidden; }
body::before { content:''; position:fixed; top:-20%; left:50%; transform:translateX(-50%); width:600px; height:600px; border-radius:50%; background:radial-gradient(circle,rgba(201,169,97,0.12) 0%,transparent 60%); pointer-events:none; z-index:0; }
.card { background:var(--white); border-radius:var(--radius); width:100%; max-width:400px; box-shadow:var(--shadow); overflow:hidden; position:relative; z-index:10; border-top:4px solid var(--gold); }
.id-wrap { background:linear-gradient(160deg,var(--green-800) 0%,var(--green-900) 100%); padding:20px 24px 38px; text-align:center; position:relative; overflow:hidden; }
.id-wrap::before { content:''; position:absolute; top:-40px; right:-40px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle,rgba(201,169,97,0.22) 0%,transparent 70%); pointer-events:none; }
.brand-strip { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:14px; position:relative; z-index:2; }
.brand-badge { width:26px; height:26px; background:var(--gold); border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:15px; font-weight:800; color:var(--green-900); letter-spacing:-0.5px; }
.brand-label { font-family:'Playfair Display',serif; font-size:13px; font-weight:700; color:var(--white); letter-spacing:0.4px; }
.avatar { width:76px; height:76px; border-radius:50%; background:var(--gold); color:var(--green-900); display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:36px; font-weight:800; margin:0 auto 12px; border:3px solid var(--gold-light); box-shadow:0 4px 14px rgba(0,0,0,0.25); position:relative; z-index:2; overflow:hidden; background-size:cover; background-position:center; }
.name { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; color:var(--white); letter-spacing:0.3px; margin-bottom:2px; position:relative; z-index:2; }
.title { font-size:12px; color:var(--gold-light); font-weight:500; letter-spacing:0.5px; position:relative; z-index:2; }
.company { font-size:10px; color:rgba(255,255,255,0.55); margin-top:3px; letter-spacing:1px; text-transform:uppercase; font-weight:500; position:relative; z-index:2; }
.bio-strip { margin:-24px 16px 0; background:var(--white); border:1px solid var(--gray-200); border-radius:12px; padding:10px 14px; box-shadow:var(--shadow-soft); position:relative; z-index:5; text-align:center; }
.bio-text { font-size:12px; color:var(--gray-700); line-height:1.5; }
.bio-text strong { color:var(--green-900); font-weight:600; }
.primary-action { padding:14px 16px 0; }
.btn-primary { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:13px 20px; background:var(--gold); color:var(--green-900); border:none; border-radius:10px; font-family:'Inter',sans-serif; font-size:15px; font-weight:700; cursor:pointer; text-decoration:none; transition:all 0.18s ease; letter-spacing:0.2px; box-shadow:0 4px 14px rgba(201,169,97,0.35); }
.btn-primary:hover { background:var(--gold-light); }
.btn-primary:active { transform:scale(0.98); }
.btn-primary svg { width:20px; height:20px; }
.actions { padding:10px 16px 14px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.action-tile { display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 8px; background:var(--white); border:1.5px solid var(--gray-200); border-radius:10px; color:var(--green-900); text-decoration:none; font-size:13px; font-weight:600; cursor:pointer; transition:all 0.15s ease; text-align:center; }
.action-tile:hover { border-color:var(--gold); background:var(--gold-pale); }
.action-tile:active { transform:scale(0.97); }
.action-tile svg { width:18px; height:18px; flex-shrink:0; }
.action-tile.wide { grid-column:1 / -1; }
.action-tile.book { background:var(--green-900); color:var(--white); border-color:var(--green-900); }
.action-tile.book:hover { background:var(--green-800); border-color:var(--green-800); }
.foot { background:var(--gray-100); padding:10px 16px; text-align:center; font-size:10px; color:var(--gray-500); border-top:1px solid var(--gray-200); }
.foot a { color:var(--green-700); text-decoration:none; font-weight:600; }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(100px); background:var(--green-900); color:var(--white); padding:12px 20px; border-radius:30px; font-size:13px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,0.3); transition:transform 0.3s ease; z-index:100; display:flex; align-items:center; gap:8px; }
.toast.show { transform:translateX(-50%) translateY(0); }
.toast svg { width:16px; height:16px; }
@media (prefers-reduced-motion:reduce) { .toast,.btn-primary,.action-tile { transition:none; } }