:root { color-scheme: light; --account-bg:#0d2024; --account-ink:#f8f8f6; --account-muted:#b1d7ce; --account-accent:#ed3f61; --account-field:#f8f8f6; }
.account-tapthebell { --account-bg:#26166f; --account-muted:#e1d9ff; --account-accent:#ffcd54; }
.account-inkthedate { --account-bg:#141c33; --account-muted:#c1cbed; --account-accent:#8ce0ce; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--account-bg); color:var(--account-ink); font-family:system-ui,sans-serif; }
.account-shell { width:min(100% - 40px, 580px); margin:0 auto; padding:clamp(48px,9vh,120px) 0 90px; }
.account-back { color:var(--account-muted); text-decoration:none; font-size:.9rem; }
.account-back:hover { text-decoration:underline; }
[data-spider-account] { padding-top:clamp(50px,8vh,94px); }
.account-eyebrow { margin:0 0 24px; color:var(--account-muted); font-size:.75rem; font-weight:800; letter-spacing:.17em; text-transform:uppercase; }
h1 { margin:0 0 22px; font-size:clamp(2.8rem,8vw,5.6rem); line-height:.98; letter-spacing:-.055em; }
p { max-width:35rem; line-height:1.6; }
.account-intro { color:var(--account-muted); font-size:1.1rem; }
.account-form { display:grid; gap:20px; margin-top:38px; }
.account-form label:not(.account-privacy) { display:grid; gap:9px; font-size:.9rem; }
.account-form input:not([type=checkbox]) { width:100%; padding:16px; border:1px solid transparent; border-radius:5px; background:var(--account-field); color:#112227; font:inherit; }
.account-form input:focus { outline:3px solid var(--account-accent); outline-offset:3px; }
.account-privacy { display:flex; gap:12px; align-items:start; color:var(--account-muted); font-size:.82rem; line-height:1.5; }
.account-privacy input { margin-top:3px; accent-color:var(--account-accent); }
a { color:inherit; }
.account-message { margin:0; color:#ffb5bf; font-size:.9rem; }
.account-message:empty { display:none; }
button { display:inline-flex; align-items:center; justify-content:space-between; gap:50px; width:fit-content; min-width:220px; padding:17px 22px; border:0; border-radius:5px; background:var(--account-accent); color:#102025; font:inherit; font-weight:800; cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }
.account-actions { display:flex; flex-wrap:wrap; gap:16px; margin:34px 0 56px; }
.account-actions a { display:inline-flex; align-items:center; padding:17px 22px; border-radius:5px; background:var(--account-accent); color:#102025; font-weight:800; text-decoration:none; }
.account-appointments { border-top:1px solid color-mix(in srgb,var(--account-muted),transparent 45%); padding-top:30px; }
.account-appointments h2 { margin:0; font-size:clamp(1.7rem,4vw,2.8rem); letter-spacing:-.04em; }
.account-appointments__list { display:grid; gap:14px; margin-top:26px; }
.account-appointment { border:1px solid color-mix(in srgb,var(--account-muted),transparent 55%); padding:22px; }
.account-appointment h3 { margin:8px 0; font-size:1.25rem; }
.account-appointment p { margin:0; }
.account-appointment__when { color:var(--account-muted); font-size:.9rem; }
.account-appointment__cancel { min-width:0; margin-top:18px; padding:11px 14px; background:transparent; color:var(--account-ink); border:1px solid var(--account-muted); font-size:.85rem; }
.account-logout { margin-top:50px; background:transparent; border:1px solid var(--account-muted); color:var(--account-ink); }
.account-sites { display:grid; gap:14px; margin:34px 0 24px; }
.account-sites article { border:1px solid color-mix(in srgb,var(--account-muted),transparent 55%); padding:22px; }
.account-sites h2 { margin:0 0 8px; font-size:1.3rem; }
.account-sites a { color:var(--account-muted); overflow-wrap:anywhere; }
.account-sites p { margin:16px 0 0; font-size:.85rem; }
.account-site-service { display:inline-block; margin-top:18px; color:var(--account-accent) !important; font-weight:800; }
.account-site-proof__status { color:var(--account-muted); }
.account-site-proof { display:grid; gap:11px; margin-top:16px; }
.account-site-proof p { margin:0; }
.account-site-proof code { display:block; padding:10px 12px; border:1px solid color-mix(in srgb,var(--account-muted),transparent 50%); overflow-wrap:anywhere; user-select:all; }
.account-chats { margin-top:58px; }
.account-chats > .account-appointment__cancel { margin-top:8px; }
.account-chat-messages { display:grid; gap:12px; margin:22px 0; }
.account-chat-message { justify-self:start; max-width:90%; margin:0; padding:14px 17px; background:color-mix(in srgb,var(--account-muted),transparent 82%); line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.account-chat-message[data-sender="visitor"] { justify-self:end; background:color-mix(in srgb,var(--account-accent),transparent 78%); }
.account-chat-reply { display:grid; gap:12px; }
.account-chat-reply textarea { width:100%; padding:14px; border:1px solid var(--account-muted); border-radius:5px; font:inherit; resize:vertical; }
@media(max-width:560px) { .account-shell { width:min(100% - 32px, 580px); padding-top:32px; } button { width:100%; } }