:root { --bg:#0f172a; --surface:#172033; --surface-2:#1e293b; --border:rgba(148,163,184,.18); --border-strong:rgba(148,163,184,.3); --ink:#f8fafc; --muted:#94a3b8; --accent:#3b82f6; --accent-hover:#2563eb; --good:#34d399; --bad:#f87171; }
* { box-sizing:border-box; }
body { position:relative; min-height:100vh; margin:0; background:var(--bg); color:var(--ink); }
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button:disabled { opacity:.48; cursor:not-allowed !important; }
.account-header { position:sticky; top:0; z-index:20; min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:10px clamp(16px,4vw,54px); border-bottom:1px solid var(--border); background:rgba(15,23,42,.92); backdrop-filter:blur(16px); }
.account-header.public-header { width:min(1180px,calc(100% - 32px)); min-height:80px; margin-inline:auto; padding-inline:0; border-bottom:0; }
.account-brand { display:flex; align-items:center; gap:9px; color:var(--ink); font-weight:850; text-decoration:none; }
.account-brand svg { width:28px; height:28px; }
.account-brand small { padding-left:9px; border-left:1px solid var(--border-strong); color:#93c5fd; font-size:12px; font-weight:750; }
.account-header nav { display:flex; align-items:center; gap:4px; }
.account-header nav a,.account-header nav button { min-height:38px; padding:8px 11px; border:0; border-radius:9px; background:transparent; color:#c4d1e1; font-size:13px; font-weight:750; text-decoration:none; cursor:pointer; }
.account-header nav a:hover,.account-header nav button:hover { background:rgba(59,130,246,.11); color:#fff; }
main { width:min(1180px,calc(100% - 32px)); min-height:calc(100vh - 164px); margin:0 auto; padding:clamp(28px,6vw,72px) 0; }
.eyebrow { color:#60a5fa; font-size:12px; font-weight:850; letter-spacing:1px; text-transform:uppercase; }
.auth-shell { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.75fr); align-items:center; gap:clamp(36px,7vw,90px); min-height:calc(100vh - 210px); }
.auth-intro h1 { max-width:690px; margin:12px 0 16px; font-size:clamp(38px,6vw,68px); line-height:1.02; letter-spacing:-2.5px; }
.auth-intro>p { max-width:610px; margin:0; color:#b4c2d4; font-size:clamp(16px,2vw,20px); line-height:1.65; }
.benefit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:34px; }
.benefit-grid article { min-height:126px; padding:17px; border:1px solid var(--border); border-radius:14px; background:rgba(30,41,59,.52); }
.benefit-grid strong,.benefit-grid span { display:block; }
.benefit-grid strong { margin-bottom:8px; font-size:14px; }
.benefit-grid span { color:var(--muted); font-size:12.5px; line-height:1.55; }
.auth-card { padding:26px; border:1px solid var(--border-strong); border-radius:20px; background:linear-gradient(155deg,rgba(30,41,59,.98),rgba(20,31,50,.98)); box-shadow:0 28px 70px rgba(0,0,0,.34); }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:18px; padding:4px; border-radius:11px; background:#0f172a; }
.auth-tabs button { min-height:40px; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:13px; font-weight:800; cursor:pointer; }
.auth-tabs button[aria-selected="true"] { background:#24324a; color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.18); }
.google-button { width:100%; min-height:46px; display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid var(--border-strong); border-radius:10px; background:#fff; color:#172033; font-weight:800; cursor:pointer; }
.google-button svg { width:19px; height:19px; }
.auth-divider { display:flex; align-items:center; gap:10px; margin:17px 0; color:#71839a; font-size:10px; font-weight:750; text-transform:uppercase; }
.auth-divider::before,.auth-divider::after { content:""; flex:1; height:1px; background:var(--border); }
.auth-card form { display:grid; gap:12px; }
.auth-card label,.profile-card label,.dive-grid label { display:grid; gap:6px; color:#b9c7d8; font-size:12px; font-weight:750; }
.auth-card input,.profile-card input,.dive-grid input,.dive-grid select,.dive-grid textarea { width:100%; min-height:44px; padding:9px 11px; border:1px solid var(--border-strong); border-radius:9px; background:#101a2a; color:var(--ink); outline:none; }
.auth-card input:focus,.profile-card input:focus,.dive-grid input:focus,.dive-grid select:focus,.dive-grid textarea:focus { border-color:#60a5fa; box-shadow:0 0 0 3px rgba(59,130,246,.13); }
.primary-action,.primary-link { min-height:var(--btn-height); display:inline-flex; align-items:center; justify-content:center; padding:9px 15px; border:1px solid rgba(96,165,250,.5); border-radius:var(--btn-radius); background:var(--accent); color:#fff; font-weight:var(--btn-weight); text-decoration:none; cursor:pointer; }
.primary-action:hover,.primary-link:hover { background:var(--accent-hover); }
.text-action { margin-top:13px; padding:4px 0; border:0; background:transparent; color:#93c5fd; font-size:11.5px; font-weight:750; cursor:pointer; }
.auth-status,.dialog-status,.profile-status { min-height:19px; margin-top:12px; color:#aebdd0; font-size:12px; line-height:1.5; }
.auth-status.error,.dialog-status.error,.profile-status.error { color:#fecaca; }
.auth-status.success,.dialog-status.success,.profile-status.success { color:#a7f3d0; }
.auth-notice { margin-bottom:14px; padding:10px 12px; border:1px solid rgba(96,165,250,.3); border-radius:9px; background:rgba(37,99,235,.1); color:#bfdbfe; font-size:12px; }
.auth-legal { margin:15px 0 0; color:#71839a; font-size:11px; line-height:1.5; text-align:center; }
.auth-legal a { color:#9fb9d8; }
.reset-form { margin-top:14px; padding:13px; border:1px solid var(--border); border-radius:10px; background:rgba(15,23,42,.55); }
.reset-form p { margin:0; color:var(--muted); font-size:11.5px; }
.reset-form div { display:flex; justify-content:flex-end; gap:7px; }
.reset-form button { min-height:36px; padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:#1e293b; color:#dbeafe; cursor:pointer; }
.profile-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; }
.profile-heading h1 { margin:7px 0 4px; font-size:clamp(30px,4vw,48px); letter-spacing:-1.4px; }
.profile-heading p { margin:0; color:var(--muted); }
.profile-heading-actions { display:flex; gap:8px; }
.profile-heading-actions button,.section-heading button,.section-heading .section-heading-action { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:9px 14px; border:1px solid var(--border-strong); border-radius:10px; background:#1e293b; color:#dbeafe; font-size:13px; font-weight:800; line-height:1; text-decoration:none; cursor:pointer; white-space:nowrap; }
.section-heading .section-heading-action:hover { border-color:#60a5fa; background:#24324a; color:#fff; }
.profile-heading-actions .primary-action { border-color:rgba(96,165,250,.5); background:#2563eb; color:#fff; }
.stats-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:11px; margin:14px 0 22px; }
.stats-grid article { padding:16px 18px; border:1px solid var(--border); border-radius:13px; background:rgba(30,41,59,.58); }
.stats-grid span,.stats-grid strong { display:block; }
.stats-grid span { color:var(--muted); font-size:12px; font-weight:750; }
.stats-grid strong { margin-top:7px; font-size:22px; }
.profile-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; align-items:start; gap:18px; }
.library-column { display:grid; gap:18px; }
.library-card,.profile-card { padding:19px; border:1px solid var(--border); border-radius:15px; background:rgba(23,32,51,.85); }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }
.section-heading h2,.profile-card h2 { margin:0; font-size:17px; }
.section-heading p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.library-list { display:grid; gap:9px; }
.library-card-footer { display:flex; justify-content:flex-end; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.library-card-footer a { min-height:40px; display:inline-flex; align-items:center; justify-content:center; padding:8px 14px; border:1px solid rgba(96,165,250,.42); border-radius:9px; background:rgba(37,99,235,.16); color:#bfdbfe; font-size:12px; font-weight:800; text-decoration:none; }
.library-card-footer a:hover { border-color:#60a5fa; background:rgba(37,99,235,.26); color:#fff; }
.library-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 14px; padding:14px; border:1px solid var(--border); border-radius:11px; background:#111c2e; }
.library-item h3 { margin:0 0 5px; overflow-wrap:anywhere; font-size:13.5px; }
.library-item p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.library-meta { display:flex; flex-wrap:wrap; gap:5px 11px; margin-top:8px; color:#b8c7d9; font-size:11.5px; }
.library-actions { display:flex; align-items:flex-start; gap:5px; }
.library-actions button,.library-actions .plan-open { min-height:36px; padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:#1e293b; color:#bfdbfe; font-size:12px; font-weight:750; cursor:pointer; }
.library-actions button.danger { color:#fda4af; }
.loading-card,.empty-library { padding:22px; border:1px dashed var(--border-strong); border-radius:10px; color:#8396ad; font-size:12px; text-align:center; }
.profile-card { position:sticky; top:84px; overflow:hidden; }
.avatar { width:64px; height:64px; flex:0 0 auto; display:grid; place-items:center; border:2px solid rgba(147,197,253,.34); border-radius:50%; background:linear-gradient(145deg,#2563eb,#38bdf8); color:#fff; font-size:22px; font-weight:900; box-shadow:0 8px 24px rgba(2,6,23,.3); }
.avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.profile-photo-placeholder { aspect-ratio:4/3; background:linear-gradient(135deg,#18263d,#0b1425); }
.profile-identity { display:flex; align-items:center; gap:13px; }
.profile-identity h2 { margin:4px 0 3px; overflow-wrap:anywhere; font-size:17px; }
.profile-identity p { margin:0; overflow-wrap:anywhere; color:var(--muted); font-size:11px; }
.profile-bio { margin:15px 0 0; padding:13px 14px; border:1px solid var(--border); border-radius:10px; background:rgba(15,23,42,.45); color:#aebdd0; font-size:12px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.profile-card-label { color:#60a5fa; font-size:9px; font-weight:850; letter-spacing:.8px; text-transform:uppercase; }
.settings-button { width:100%; margin-top:15px; }
.profile-certifications { margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
.profile-card-subhead { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.profile-card-subhead strong { font-size:12.5px; }
.profile-card-subhead span { color:#71839a; font-size:10.5px; }
.certification-summary { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.certification-badge { padding:5px 8px; border:1px solid rgba(96,165,250,.28); border-radius:999px; background:rgba(37,99,235,.12); color:#bfdbfe; font-size:10.5px; font-weight:750; }
.certification-empty { color:var(--muted); font-size:11.5px; line-height:1.5; }
.profile-photo-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-auto-rows:1fr; gap:14px; align-items:stretch; }
.profile-photo { min-width:0; height:100%; overflow:hidden; display:grid; grid-template-rows:142px minmax(0,1fr); border:1px solid var(--border); border-radius:13px; background:linear-gradient(160deg,#142138,#0f192a); box-shadow:0 8px 22px rgba(2,6,23,.16); transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease; }
.profile-photo:hover { transform:translateY(-2px); border-color:rgba(96,165,250,.4); box-shadow:0 14px 30px rgba(2,6,23,.26); }
.profile-photo-media { min-width:0; overflow:hidden; border-bottom:1px solid var(--border); background:#0b1425; }
.profile-photo-placeholder,.profile-photo img { width:100%; height:100%; display:block; object-fit:cover; background:linear-gradient(135deg,#18263d,#0b1425); }
.profile-photo img { cursor:zoom-in; transition:transform .22s ease; }
.profile-photo:hover img { transform:scale(1.025); }
.profile-photo-content { min-width:0; min-height:232px; display:flex; flex-direction:column; padding:12px; }
.profile-photo-heading { min-height:42px; display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.profile-photo strong,.profile-photo span { overflow-wrap:anywhere; }
.profile-photo strong { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:12px; line-height:1.35; }
.profile-photo-status { flex:0 0 auto; max-width:82px; padding:3px 6px; border-radius:999px; background:rgba(59,130,246,.13); color:#93c5fd !important; font-size:8.5px !important; font-weight:800; line-height:1.25; text-align:center; text-transform:capitalize; }
.profile-photo-status.is-approved { background:rgba(52,211,153,.1); color:#86efac !important; }
.profile-photo-description { min-height:48px; margin:8px 0 7px; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3; color:#b7c5d7; font-size:10.5px; line-height:1.5; }
.profile-photo-description.is-empty { color:#687b94; font-style:italic; }
.profile-photo-credit { display:block; color:#8295ad; font-size:9.5px; line-height:1.4; }
.profile-photo.is-hidden { opacity:.7; }
.profile-photo-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:auto; padding-top:11px; border-top:1px solid rgba(148,163,184,.12); }
.profile-photo-actions button,.profile-photo-actions a { width:100%; min-width:0; min-height:34px; display:inline-flex; align-items:center; justify-content:flex-start; gap:5px; padding:6px 7px; border:1px solid var(--border-strong); border-radius:8px; background:#1e293b; color:#cbd5e1; font-size:9.5px; font-weight:750; line-height:1; cursor:pointer; text-decoration:none; transition:.14s ease; }
.profile-photo-actions button span,.profile-photo-actions a span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-photo-actions button:hover,.profile-photo-actions a:hover { border-color:#60a5fa; color:#fff; }
.profile-photo-actions button svg,.profile-photo-actions a svg { width:14px; height:14px; flex:0 0 auto; }
.profile-photo-actions button.danger { border-color:rgba(248,113,113,.4); background:rgba(127,29,29,.25); color:#fecaca; }
.profile-photo-actions button.danger:hover { border-color:#f87171; color:#fff; }
@media (max-width:1100px) { .profile-photo-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:700px) { .profile-photo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:520px) { .profile-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .profile-photo { grid-template-rows:118px minmax(0,1fr); } .profile-photo-content { min-height:226px; padding:10px; } .profile-photo-actions button,.profile-photo-actions a { padding-inline:6px; font-size:9px; } }
.profile-card button { min-height:40px; border:1px solid rgba(96,165,250,.42); border-radius:9px; background:rgba(37,99,235,.16); color:#bfdbfe; font-weight:800; cursor:pointer; }
.email-account-actions { display:grid; gap:7px; margin-top:10px; }
.email-account-actions button { min-height:36px; background:#17243a; font-size:12px; }
.account-details { display:grid; gap:10px; margin-top:18px; padding-top:14px; border-top:1px solid var(--border); color:var(--muted); font-size:11.5px; line-height:1.45; }
.account-details div { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.account-details strong { color:#cbd5e1; font-size:11.5px; text-align:right; }
.account-details p { margin:0; }
.choice-dialog,.account-settings-dialog { padding:0; border:1px solid var(--border-strong); border-radius:18px; background:#172033; color:var(--ink); box-shadow:0 28px 80px rgba(0,0,0,.6); }
.choice-dialog::backdrop,.account-settings-dialog::backdrop { background:rgba(2,6,23,.78); backdrop-filter:blur(5px); }
.choice-dialog { width:min(620px,calc(100vw - 24px)); }
.choice-dialog-card { padding:22px; }
.choice-dialog-card>p { margin:-5px 0 18px; color:var(--muted); font-size:13px; line-height:1.55; }
.plan-choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.plan-choice { min-height:132px; display:flex; flex-direction:column; justify-content:flex-end; padding:17px; border:1px solid var(--border-strong); border-radius:13px; background:linear-gradient(145deg,rgba(37,99,235,.16),rgba(15,23,42,.52)); color:#fff; text-decoration:none; transition:border-color .18s ease,transform .18s ease; }
.plan-choice:hover { border-color:#60a5fa; transform:translateY(-2px); }
.plan-choice strong { font-size:15px; }
.plan-choice span { margin-top:7px; color:#aebdd0; font-size:11.5px; line-height:1.45; }
.account-settings-dialog { width:min(760px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; }
.settings-dialog-card { padding:22px; }
.settings-section { margin-top:12px; padding:16px; border:1px solid var(--border); border-radius:13px; background:rgba(15,23,42,.42); }
.settings-section h3 { margin:0; font-size:14px; }
.settings-section p { margin:5px 0 0; color:var(--muted); font-size:11.5px; line-height:1.5; }
.profile-photo-settings { display:flex; align-items:center; gap:15px; }
.settings-avatar { width:74px; height:74px; }
.photo-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.photo-actions button,.file-action,.settings-actions button,.security-settings button { min-height:38px; display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border:1px solid var(--border-strong); border-radius:9px; background:#1e293b; color:#dbeafe; font-size:12px; font-weight:800; cursor:pointer; }
.file-action { border-color:rgba(96,165,250,.45); background:rgba(37,99,235,.17); color:#bfdbfe; }
.settings-fields { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:13px; }
.settings-fields label { display:grid; gap:6px; color:#b9c7d8; font-size:12px; font-weight:750; }
.settings-fields input,.settings-fields textarea { width:100%; min-height:44px; padding:9px 11px; border:1px solid var(--border-strong); border-radius:9px; background:#101a2a; color:var(--ink); outline:none; }
.settings-fields textarea { min-height:108px; resize:vertical; line-height:1.5; }
.settings-fields input:focus,.settings-fields textarea:focus { border-color:#60a5fa; box-shadow:0 0 0 3px rgba(59,130,246,.13); }
.settings-fields input:disabled { color:var(--muted); background:#111827; }
.settings-fields small { color:#71839a; font-size:10.5px; font-weight:550; line-height:1.4; }
.profile-public-fields { grid-template-columns:minmax(220px,.75fr) minmax(280px,1.25fr); align-items:start; }
.certification-groups { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:13px; }
.certification-fields { margin:0; padding:11px; display:flex; flex-wrap:wrap; align-content:flex-start; gap:7px; border:1px solid var(--border); border-radius:10px; }
.certification-fields legend { padding:0 5px; color:#9fb0c5; font-size:10.5px; font-weight:800; }
.certification-fields label { position:relative; cursor:pointer; }
.certification-fields input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }
.certification-fields label span { min-height:32px; display:inline-flex; align-items:center; padding:6px 9px; border:1px solid var(--border-strong); border-radius:999px; background:#111c2e; color:#aebdd0; font-size:10.5px; font-weight:750; transition:.16s ease; }
.certification-fields input:checked+span { border-color:rgba(96,165,250,.6); background:rgba(37,99,235,.22); color:#dbeafe; box-shadow:inset 0 0 0 1px rgba(96,165,250,.13); }
.certification-fields input:focus-visible+span { outline:2px solid #60a5fa; outline-offset:2px; }
.settings-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.settings-actions .primary-action { background:#2563eb; color:#fff; }
.security-settings { margin-top:16px; }
.password-fields { grid-template-columns:repeat(3,minmax(0,1fr)); }
.security-settings>form>button { margin-top:11px; }
.account-settings-dialog .email-account-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
.crop-dialog { width:min(420px,calc(100vw - 24px)); padding:0; border:1px solid var(--border-strong); border-radius:17px; background:#172033; color:var(--ink); box-shadow:0 28px 80px rgba(0,0,0,.6); }
.crop-dialog::backdrop { background:rgba(2,6,23,.82); backdrop-filter:blur(5px); }
.crop-dialog-card { padding:21px; }
.crop-hint { margin:-4px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.crop-stage { position:relative; width:min(320px,72vw); height:min(320px,72vw); margin:15px auto; overflow:hidden; border-radius:12px; background:#0b1220; touch-action:none; cursor:grab; }
.crop-stage.dragging { cursor:grabbing; }
.crop-stage img { position:absolute; top:0; left:0; transform-origin:0 0; max-width:none; user-select:none; -webkit-user-drag:none; will-change:transform; }
.crop-overlay { position:absolute; inset:0; pointer-events:none; border:2px dashed rgba(255,255,255,.5); border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.35); }
.crop-zoom { display:flex; align-items:center; gap:10px; color:#b9c7d8; font-size:12px; font-weight:750; }
.crop-zoom input { flex:1; }
.dive-dialog { width:min(1040px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:0; overflow:auto; border:1px solid var(--border-strong); border-radius:17px; background:#172033; color:var(--ink); box-shadow:0 28px 80px rgba(0,0,0,.6); }
.dive-dialog::backdrop { background:rgba(2,6,23,.78); backdrop-filter:blur(5px); }
.dive-form-columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.dive-form-col { display:grid; gap:11px; align-content:start; }
.dive-dialog form { padding:21px; }
.dialog-heading { display:flex; justify-content:space-between; gap:12px; margin-bottom:17px; }
.dialog-heading h2 { margin:5px 0 0; font-size:21px; }
.dialog-close { width:40px; height:40px; border:0; border-radius:50%; background:rgba(255,255,255,.04); color:#cbd5e1; font-size:25px; cursor:pointer; }
.dive-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.dive-grid .wide { grid-column:1/-1; }
.dive-grid textarea { min-height:110px; resize:vertical; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.dialog-actions button { min-height:40px; padding:8px 13px; border:1px solid var(--border); border-radius:9px; background:#1e293b; color:#dbeafe; font-weight:800; cursor:pointer; }
.dialog-actions .primary-action { background:#2563eb; color:#fff; }
.profile-overview { position:static; overflow:visible; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:22px; padding:22px; }
.profile-overview .profile-identity { min-width:230px; gap:18px; }
.profile-overview .avatar { width:96px; height:96px; font-size:34px; }
.profile-overview .profile-identity h2 { font-size:24px; }
.profile-overview-copy { min-width:0; }
.profile-overview .profile-bio { margin:0; padding:0; border:0; background:transparent; }
.profile-overview .profile-certifications { margin-top:12px; padding-top:12px; }
.profile-overview-actions { min-width:170px; display:grid; justify-items:stretch; gap:7px; }
.profile-overview-actions .settings-button { width:auto; margin:0; }
.profile-overview-actions a,.profile-overview-actions button { min-height:38px; display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border:1px solid var(--border-strong); border-radius:9px; background:#1e293b; color:#dbeafe; font-size:11.5px; font-weight:800; text-decoration:none; cursor:pointer; }
.profile-overview-actions small { color:#71839a; font-size:10.5px; text-align:center; }
.you-destination-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.you-destination-grid>a { min-width:0; min-height:82px; padding:15px 16px; border:1px solid rgba(148,163,184,.18); border-radius:14px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:13px; background:linear-gradient(145deg,rgba(30,41,59,.72),rgba(15,23,42,.58)); color:#e2e8f0; text-decoration:none; transition:border-color .18s ease,background .18s ease,transform .18s ease; }
.you-destination-grid>a:hover,.you-destination-grid>a:focus-visible { border-color:rgba(96,165,250,.5); background:linear-gradient(145deg,rgba(37,99,235,.18),rgba(30,41,59,.72)); outline:none; transform:translateY(-1px); }
.you-destination-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:rgba(59,130,246,.14); color:#93c5fd; }
.you-destination-icon svg { width:22px; height:22px; }
.you-destination-grid>a>span:nth-child(2) { min-width:0; display:grid; gap:4px; }
.you-destination-grid strong { color:#f8fafc; font-size:13.5px; }
.you-destination-grid small { color:var(--muted); font-size:11px; line-height:1.4; }
.you-destination-grid b { color:#60a5fa; font-size:24px; font-weight:400; }
.public-profile-state { padding:6px 9px; border:1px solid var(--border); border-radius:999px; color:#94a3b8; font-size:10.5px; font-weight:800; text-align:center; }
.public-profile-state.is-public { border-color:rgba(52,211,153,.34); background:rgba(16,185,129,.1); color:#a7f3d0; }
.stats-grid .stat-primary { border-color:rgba(96,165,250,.34); background:linear-gradient(145deg,rgba(37,99,235,.2),rgba(30,41,59,.58)); }
.library-tabs { display:flex; gap:6px; margin:22px 0 12px; padding:5px; border:1px solid var(--border); border-radius:13px; background:rgba(15,23,42,.62); }
.library-tabs button { min-height:42px; flex:1; padding:8px 12px; border:0; border-radius:9px; background:transparent; color:var(--muted); font-size:12px; font-weight:800; cursor:pointer; }
.library-tabs button[aria-selected="true"] { background:#24324a; color:#fff; box-shadow:0 5px 16px rgba(0,0,0,.2); }
.library-tabs button span { margin-left:5px; padding:2px 6px; border-radius:999px; background:rgba(148,163,184,.12); color:#bfdbfe; font-size:10px; }
.library-panel { min-height:250px; }
.dive-timeline { display:grid; gap:20px; }
.dive-month { display:grid; grid-template-columns:118px minmax(0,1fr); gap:16px; }
.dive-month>h3 { margin:13px 0 0; color:#7f93ac; font-size:11px; font-weight:850; letter-spacing:.45px; text-transform:uppercase; }
.dive-month>div { min-width:0; display:grid; gap:9px; padding-left:16px; border-left:1px solid rgba(96,165,250,.25); }
.dive-entry { position:relative; border:1px solid var(--border); border-radius:13px; background:#111c2e; }
.dive-entry::before { content:""; position:absolute; top:22px; left:-22px; width:9px; height:9px; border:3px solid #172033; border-radius:50%; background:#60a5fa; box-shadow:0 0 0 1px rgba(96,165,250,.35); }
.dive-entry summary { min-height:74px; display:grid; grid-template-columns:92px minmax(0,1fr) auto; align-items:center; gap:14px; padding:13px 16px; list-style:none; cursor:pointer; }
.dive-entry summary::-webkit-details-marker { display:none; }
.dive-entry summary::after { content:"+"; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:rgba(148,163,184,.1); color:#93c5fd; font-size:16px; }
.dive-entry[open] summary::after { content:"−"; }
.dive-date { color:#93c5fd; font-size:11px; font-weight:800; }
.dive-summary-copy { min-width:0; }
.dive-summary-copy.has-thumb { display:flex; align-items:center; gap:11px; }
.dive-summary-text { min-width:0; }
.dive-summary-thumb { flex:0 0 auto; width:44px; height:44px; border:1px solid var(--border-strong); border-radius:9px; background:#0b1220 center/cover no-repeat; }
.dive-summary-copy strong,.dive-summary-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dive-summary-copy strong { font-size:14px; }
.dive-summary-copy small { margin-top:4px; color:var(--muted); font-size:11px; }
.dive-summary-metrics { display:flex; align-items:center; justify-content:flex-end; gap:7px; }
.dive-summary-metrics b { padding:5px 8px; border-radius:7px; background:rgba(148,163,184,.08); color:#dbeafe; font-size:10.5px; white-space:nowrap; }
.public-dive-badge { padding:5px 8px; border:1px solid rgba(251,191,36,.25); border-radius:999px; color:#fcd34d; font-size:9.5px; font-style:normal; font-weight:800; white-space:nowrap; }
.public-dive-badge.is-live { border-color:rgba(52,211,153,.3); color:#a7f3d0; }
.dive-entry-details { padding:15px 16px 16px; border-top:1px solid var(--border); }
.dive-entry-details dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:0; }
.dive-entry-details dl div { padding:10px; border-radius:9px; background:rgba(15,23,42,.48); }
.dive-entry-details dt { color:#71839a; font-size:9.5px; font-weight:800; text-transform:uppercase; }
.dive-entry-details dd { margin:4px 0 0; color:#dbeafe; font-size:11.5px; }
.dive-private-notes { margin-top:10px; padding:12px; border-left:3px solid rgba(96,165,250,.4); border-radius:8px; background:rgba(15,23,42,.38); }
.dive-private-notes strong { color:#93c5fd; font-size:10px; text-transform:uppercase; }
.dive-private-notes p { margin:5px 0 0; color:#aebdd0; font-size:12px; line-height:1.6; white-space:pre-wrap; }
.dive-entry-details .library-actions { justify-content:flex-end; margin-top:12px; }
.settings-switch { display:flex; align-items:center; gap:9px; color:#dbeafe; font-size:11.5px; cursor:pointer; }
.settings-switch input { position:absolute; opacity:0; pointer-events:none; }
.settings-switch span { width:42px; height:23px; position:relative; border:1px solid var(--border-strong); border-radius:999px; background:#0f172a; transition:.18s ease; }
.settings-switch span::after { content:""; position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%; background:#94a3b8; transition:.18s ease; }
.settings-switch input:checked+span { border-color:#34d399; background:rgba(16,185,129,.22); }
.settings-switch input:checked+span::after { left:22px; background:#6ee7b7; }
.settings-switch input:focus-visible+span { outline:2px solid #60a5fa; outline-offset:3px; }
.privacy-note { margin-top:12px !important; padding:10px 12px; border-radius:9px; background:rgba(15,23,42,.5); }
.dive-form-section { margin:12px 0 0; padding:14px; border:1px solid var(--border); border-radius:12px; }
.dive-form-section { margin:0; padding:12px; }
.dive-form-section legend { padding:0 7px; color:#93c5fd; font-size:11px; font-weight:850; text-transform:uppercase; }
.dive-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.dive-grid label { gap:4px; font-size:11.5px; }
.dive-grid input,.dive-grid select,.dive-grid textarea { min-height:38px; padding:7px 10px; }
.dive-grid textarea { min-height:66px; }
.dive-endgroup { padding:9px 12px; }
.dive-endgroup strong { min-width:40px; font-size:23px; }
.dive-endgroup small { font-size:10px; }
.equipment-fields { gap:6px; }
.equipment-fields label span { min-height:29px; padding:5px 9px; font-size:10.5px; }
.dive-photos { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-start; gap:8px; }
.dive-photos-grid { display:flex; flex-wrap:wrap; gap:8px; }
.dive-photo-thumb { position:relative; width:58px; height:58px; border-radius:9px; overflow:hidden; border:1px solid var(--border-strong); background:#0b1220; }
.dive-photo-thumb img { width:100%; height:100%; object-fit:cover; }
.dive-photo-thumb.is-uploading { opacity:.55; }
.dive-photo-thumb button { position:absolute; top:2px; right:2px; width:20px; height:20px; display:flex; align-items:center; justify-content:center; border:0; border-radius:50%; background:rgba(2,6,23,.72); color:#fff; font-size:13px; line-height:1; cursor:pointer; }
.dive-photos-add { min-height:36px; width:fit-content; align-self:flex-start; display:inline-flex; align-items:center; justify-content:flex-start; padding:7px 11px; border:1px dashed rgba(96,165,250,.5); border-radius:9px; background:rgba(37,99,235,.1); color:#bfdbfe; font-size:12px; font-weight:800; cursor:pointer; }
.dive-photos-add:hover { border-color:#60a5fa; background:rgba(37,99,235,.2); color:#fff; }
@media (max-width:860px) { .dive-form-columns { grid-template-columns:1fr; } }
.dive-photo-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; margin:4px 0 12px; }
.dive-gallery-thumb { width:100%; aspect-ratio:1; border:1px solid var(--border-strong); border-radius:10px; background:#0b1220 center/cover no-repeat; cursor:zoom-in; transition:border-color .16s ease,transform .16s ease; }
.dive-gallery-thumb:hover { border-color:#60a5fa; transform:translateY(-1px); }
.public-dive-entry .dive-photo-gallery { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
/* Shared full-image lightbox (dive photos, community photos) */
.photo-lightbox { width:fit-content; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); padding:0; border:none; background:transparent; overflow:visible; }
.photo-lightbox::backdrop { background:rgba(2,6,23,.86); backdrop-filter:blur(4px); }
.photo-lightbox img { display:block; max-width:min(92vw,1100px); max-height:calc(100dvh - 60px); object-fit:contain; border-radius:12px; background:#0b1220; box-shadow:0 24px 60px rgba(0,0,0,.6); }
.photo-lightbox-close { position:absolute; top:-14px; right:-14px; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:none; border-radius:50%; background:#0f172a; color:#e2e8f0; font-size:22px; line-height:1; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.5); z-index:2; }
.photo-lightbox-close:hover { background:#1e293b; color:#fff; }
.photo-lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:none; border-radius:50%; background:rgba(15,23,42,.72); color:#e2e8f0; font-size:26px; line-height:1; cursor:pointer; }
.photo-lightbox-nav:hover { background:#1e293b; color:#fff; }
.photo-lightbox-nav.prev { left:-16px; }
.photo-lightbox-nav.next { right:-16px; }
@media (max-width:640px) { .photo-lightbox-nav.prev { left:6px; } .photo-lightbox-nav.next { right:6px; } }
/* Owner badge + certification agency pill */
.owner-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border:1px solid rgba(251,191,36,.4); border-radius:999px; background:rgba(251,191,36,.14); color:#fcd34d; font-size:10.5px; font-weight:850; letter-spacing:.3px; text-transform:uppercase; vertical-align:middle; }
.agency-badge { padding:5px 9px; border:1px solid rgba(52,211,153,.32); border-radius:999px; background:rgba(16,185,129,.12); color:#a7f3d0; font-size:10.5px; font-weight:800; }
/* Buddy avatar links on dive entries */
.dive-entry-buddies { margin-top:12px; }
.dive-entry-buddies dt { margin-bottom:7px; color:#71839a; font-size:9.5px; font-weight:800; text-transform:uppercase; }
.dive-buddy-links { display:flex; flex-wrap:wrap; gap:6px; }
.dive-buddy-link { display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 3px; border:1px solid var(--border-strong); border-radius:999px; background:#111c2e; color:#dbeafe; font-size:11px; font-weight:750; text-decoration:none; }
.dive-buddy-link.linked { border-color:rgba(96,165,250,.55); background:rgba(37,99,235,.2); }
.dive-buddy-link:hover.linked { border-color:#60a5fa; }
.dive-buddy-avatar { width:22px; height:22px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border-radius:50%; overflow:hidden; background:linear-gradient(145deg,#1d4ed8,#0ea5e9); color:#fff; font-size:10px; font-weight:800; }
.dive-buddy-avatar img { width:100%; height:100%; object-fit:cover; }
.dive-publish-option { margin-top:14px; padding:13px; display:flex; align-items:flex-start; gap:10px; border:1px solid rgba(96,165,250,.28); border-radius:11px; background:rgba(37,99,235,.08); color:#dbeafe; cursor:pointer; }
.dive-publish-option input { width:18px; height:18px; flex:0 0 auto; margin-top:2px; accent-color:#3b82f6; }
.dive-publish-option strong,.dive-publish-option small { display:block; }
.dive-publish-option strong { font-size:12px; }
.dive-publish-option small { margin-top:4px; color:var(--muted); font-size:10.5px; line-height:1.45; }
.dive-endgroup { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px; border:1px solid rgba(96,165,250,.3); border-radius:10px; background:rgba(37,99,235,.1); }
.dive-endgroup-label { display:block; color:#dbeafe; font-size:12px; font-weight:800; }
.dive-endgroup small { display:block; margin-top:3px; color:var(--muted); font-size:10.5px; line-height:1.4; }
.dive-endgroup strong { min-width:46px; font-size:26px; color:#fff; text-align:center; }
.equipment-fields { display:flex; flex-wrap:wrap; gap:7px; }
.equipment-fields label { position:relative; cursor:pointer; }
.equipment-fields input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }
.equipment-fields label span { min-height:32px; display:inline-flex; align-items:center; padding:6px 11px; border:1px solid var(--border-strong); border-radius:999px; background:#111c2e; color:#aebdd0; font-size:11px; font-weight:750; transition:.16s ease; }
.equipment-fields input:checked+span { border-color:rgba(96,165,250,.6); background:rgba(37,99,235,.22); color:#dbeafe; box-shadow:inset 0 0 0 1px rgba(96,165,250,.13); }
.equipment-fields input:focus-visible+span { outline:2px solid #60a5fa; outline-offset:2px; }
.buddy-field { position:relative; }
.buddy-field input { width:100%; min-height:44px; padding:9px 11px; border:1px solid var(--border-strong); border-radius:9px; background:#101a2a; color:var(--ink); outline:none; }
.buddy-field input:focus { border-color:#60a5fa; box-shadow:0 0 0 3px rgba(59,130,246,.13); }
.buddy-suggestions { position:absolute; z-index:5; top:calc(100% + 4px); left:0; right:0; max-height:210px; overflow:auto; border:1px solid var(--border-strong); border-radius:10px; background:#0f1a2c; box-shadow:0 18px 40px rgba(0,0,0,.5); }
.buddy-suggestion { display:flex; align-items:center; gap:10px; width:100%; padding:9px 11px; border:0; background:transparent; color:#dbeafe; font-size:12px; font-weight:700; text-align:left; cursor:pointer; }
.buddy-suggestion:hover,.buddy-suggestion.active { background:rgba(37,99,235,.22); }
.buddy-suggestion .buddy-suggestion-avatar { width:26px; height:26px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border-radius:50%; overflow:hidden; background:linear-gradient(145deg,#1d4ed8,#0ea5e9); color:#fff; font-size:12px; font-weight:800; }
.buddy-suggestion .buddy-suggestion-avatar img { width:100%; height:100%; object-fit:cover; }
.buddy-suggestion small { color:var(--muted); font-weight:600; }
.buddy-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.buddy-chip { display:inline-flex; align-items:center; gap:7px; padding:5px 6px 5px 11px; border:1px solid var(--border-strong); border-radius:999px; background:#111c2e; color:#dbeafe; font-size:11.5px; font-weight:750; }
.buddy-chip.linked { border-color:rgba(96,165,250,.55); background:rgba(37,99,235,.2); }
.buddy-chip .buddy-chip-badge { color:#93c5fd; font-size:10px; font-weight:800; }
.buddy-chip button { width:20px; height:20px; display:flex; align-items:center; justify-content:center; border:0; border-radius:50%; background:rgba(255,255,255,.08); color:#cbd5e1; font-size:14px; line-height:1; cursor:pointer; }
.buddy-chip button:hover { background:rgba(255,255,255,.16); color:#fff; }
.site-footer { width:min(1180px,calc(100% - 32px)); display:flex; justify-content:space-between; gap:20px; margin:0 auto; padding:26px 0; border-top:1px solid var(--border); color:#71839a; font-size:12px; }
.footer-links { display:flex; flex-wrap:wrap; gap:14px; }
.footer-links a { color:#9fb0c5; text-decoration:none; }
[hidden] { display:none !important; }
@media (max-width:850px) { .auth-shell { grid-template-columns:1fr; } .auth-intro { text-align:center; } .auth-intro>p { margin-inline:auto; } .auth-intro h1 { margin-inline:auto; } .profile-layout { grid-template-columns:1fr; } .profile-card { position:static; grid-row:1; } }
@media (max-width:1100px) { .stats-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:851px) { body:has(#signed_out_view:not([hidden])) main { min-height:calc(100dvh - 160px); padding:14px 0; } .auth-shell { min-height:calc(100dvh - 188px); gap:clamp(28px,5vw,68px); } .auth-intro h1 { margin-block:9px 12px; font-size:clamp(38px,5vw,58px); } .auth-intro>p { font-size:clamp(15px,1.5vw,18px); line-height:1.5; } .benefit-grid { margin-top:22px; } .benefit-grid article { min-height:102px; padding:14px; } .auth-card { padding:21px 23px; } }
@media (max-width:640px) { .account-header { padding-inline:12px; } .account-header nav>a:first-child { display:none; } .account-header nav a,.account-header nav button { padding-inline:7px; font-size:11px; } .account-brand small { display:none; } main { width:min(100% - 20px,1180px); padding-top:25px; } .auth-intro h1 { font-size:38px; letter-spacing:-1.5px; } .benefit-grid { grid-template-columns:1fr; } .benefit-grid article { min-height:auto; } .auth-card { padding:18px; } .profile-heading { align-items:flex-start; flex-direction:column; } .profile-heading-actions { width:100%; } .profile-heading-actions>* { flex:1; } .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .library-item { grid-template-columns:1fr; } .library-actions { justify-content:flex-end; } .dive-grid { grid-template-columns:1fr 1fr; } .dive-grid .wide { grid-column:1/-1; } .site-footer { flex-direction:column; } }
@media (max-width:640px) { .account-header.public-header { width:min(100% - 20px,1180px); padding-inline:0; } }
@media (max-width:640px) {
  .profile-heading-actions button { min-height:44px; font-size:13px; }
  .profile-layout { gap:12px; }
  .profile-card,.library-card { padding:16px; }
  .plan-choice-grid,.certification-groups,.settings-fields,.password-fields { grid-template-columns:1fr; }
  .plan-choice { min-height:108px; }
  .settings-dialog-card,.choice-dialog-card { padding:17px; }
  .profile-photo-settings { align-items:flex-start; }
  .settings-avatar { width:64px; height:64px; }
  .account-settings-dialog .email-account-actions { grid-template-columns:1fr; }
  .library-card-footer a { width:100%; }
  .profile-overview { grid-template-columns:1fr; gap:15px; }
  .profile-overview .profile-identity { min-width:0; }
  .profile-overview .avatar { width:82px; height:82px; font-size:30px; }
  .profile-overview .profile-identity h2 { font-size:21px; }
  .profile-overview-actions { min-width:0; grid-template-columns:1fr 1fr; }
  .profile-overview-actions .public-profile-state,.profile-overview-actions small { grid-column:1/-1; }
  .profile-overview-actions .settings-button { grid-column:1/-1; }
  .library-tabs { overflow-x:auto; }
  .library-tabs button { min-width:max-content; }
  .dive-month { grid-template-columns:1fr; gap:6px; }
  .dive-month>h3 { margin-top:0; }
  .dive-month>div { padding-left:10px; }
  .dive-entry::before { left:-16px; }
  .dive-entry summary { grid-template-columns:1fr auto; gap:8px; }
  .dive-date { grid-column:1; }
  .dive-summary-copy { grid-column:1; }
  .dive-summary-metrics { grid-column:1; justify-content:flex-start; flex-wrap:wrap; }
  .dive-entry summary::after { grid-column:2; grid-row:1/4; }
  .dive-entry-details dl { grid-template-columns:1fr; }
}
.you-route-panel { margin-top:18px; padding:24px; }
.badge-route-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.badge-route-card { min-height:110px; padding:18px; border:1px solid rgba(148,163,184,.16); border-radius:15px; display:flex; flex-direction:column; justify-content:center; background:rgba(15,23,42,.45); }
.badge-route-card strong { color:#cbd5e1; }
.badge-route-card span { margin-top:7px; color:#64748b; font-size:12px; }
.badge-route-card.earned { border-color:rgba(52,211,153,.35); background:rgba(16,185,129,.08); }
.badge-route-card.earned strong { color:#a7f3d0; }
.connections-columns { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.connections-columns h3 { color:#f8fafc; }
.connection-card { padding:12px; border:1px solid rgba(148,163,184,.15); border-radius:12px; display:flex; align-items:center; gap:10px; background:rgba(15,23,42,.42); }
.connection-avatar { width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#334155;color:#fff;font-weight:800; }
.connection-card a { min-width:0; flex:1; display:grid; color:#fff; text-decoration:none; }
.connection-card small { color:#7890aa; }
.connection-card button { border:1px solid rgba(248,113,113,.28);border-radius:8px;padding:7px 9px;background:transparent;color:#fca5a5;cursor:pointer; }
@media (max-width:700px) { .badge-route-grid,.connections-columns,.you-destination-grid { grid-template-columns:1fr; } }

/* 2026 account center visual system */
.profile-shell { position:relative; }
.profile-heading { position:relative; isolation:isolate; min-height:180px; align-items:center; margin-bottom:18px; padding:30px 32px; overflow:hidden; border:1px solid rgba(96,165,250,.22); border-radius:22px; background:linear-gradient(125deg,rgba(30,64,175,.28),rgba(15,23,42,.88) 58%,rgba(8,47,73,.7)); box-shadow:0 22px 55px rgba(2,6,23,.22); }
.profile-heading::before,.profile-heading::after { content:none; }
.profile-heading-copy { max-width:710px; }
.profile-heading h1 { margin-top:10px; font-size:clamp(34px,5vw,56px); line-height:1; letter-spacing:-2px; }
.profile-heading-copy>p { max-width:590px; color:#a9bdd3; font-size:14px; line-height:1.55; }
.profile-heading-actions { position:relative; z-index:1; padding:0; border:0; background:none; backdrop-filter:none; }
.profile-heading-actions button { min-height:44px; border-radius:9px; }
.profile-overview { position:relative; top:auto; isolation:isolate; overflow:hidden; padding:25px 27px; border-color:rgba(148,163,184,.2); border-radius:18px; background:linear-gradient(145deg,rgba(30,41,59,.92),rgba(15,23,42,.88)); box-shadow:0 16px 42px rgba(2,6,23,.18); }
.profile-overview>* { min-width:0; }
.profile-overview .profile-identity { min-width:0; }
.profile-overview::after { content:""; position:absolute; z-index:-1; right:-80px; top:-110px; width:270px; height:270px; border-radius:50%; background:radial-gradient(circle,rgba(14,165,233,.13),transparent 68%); }
.profile-overview .avatar { border-width:3px; box-shadow:0 0 0 6px rgba(59,130,246,.08),0 16px 32px rgba(2,6,23,.34); }
.profile-username,.public-profile-username { margin:3px 0 0 !important; color:#7dd3fc !important; font-size:12px !important; font-weight:750; }
.profile-overview-actions a,.profile-overview-actions button { transition:transform .16s ease,border-color .16s ease,background .16s ease; }
.profile-overview-actions a:hover,.profile-overview-actions button:hover { transform:translateY(-1px); border-color:rgba(96,165,250,.62); background:rgba(37,99,235,.2); }
.stats-grid article { position:relative; min-height:104px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; border-radius:15px; background:linear-gradient(150deg,rgba(30,41,59,.82),rgba(15,23,42,.76)); transition:transform .16s ease,border-color .16s ease; }
.stats-grid article:hover { transform:translateY(-2px); border-color:rgba(96,165,250,.34); }
.stats-grid strong { font-size:24px; letter-spacing:-.5px; }
.you-destination-grid>a { min-height:94px; padding:18px; box-shadow:0 10px 28px rgba(2,6,23,.12); }
.library-tabs { padding:6px; border-radius:15px; background:rgba(2,6,23,.38); }
.library-tabs button { min-height:46px; font-size:12.5px; }
.library-tabs button[aria-selected="true"] { background:linear-gradient(145deg,#293a57,#1e2c45); box-shadow:0 8px 22px rgba(2,6,23,.28); }
.library-card { border-radius:18px; background:linear-gradient(150deg,rgba(23,32,51,.94),rgba(15,23,42,.82)); box-shadow:0 16px 38px rgba(2,6,23,.12); }

.account-settings-dialog { width:min(940px,calc(100vw - 24px)); max-width:calc(100vw - 24px); min-width:0; max-height:calc(100dvh - 24px); overflow-x:hidden; border-color:rgba(96,165,250,.27); border-radius:22px; background:linear-gradient(155deg,#17233a,#101a2c 70%); contain:layout paint style; scrollbar-gutter:stable; }
.account-settings-dialog::backdrop { background:rgba(2,6,23,.9); backdrop-filter:none; }
.settings-dialog-card { min-width:0; padding:0 24px 24px; }
.settings-dialog-card>.dialog-heading { position:sticky; top:0; z-index:8; align-items:center; margin:0 -24px 18px; padding:20px 24px 17px; border-bottom:1px solid rgba(148,163,184,.14); background:#101a2c; backdrop-filter:none; }
.settings-dialog-card>.dialog-heading h2 { font-size:24px; letter-spacing:-.6px; }
#profile_form { min-width:0; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:13px; }
#profile_form>.settings-section,#profile_form>.settings-actions { grid-column:1/-1; margin:0; }
#profile_form>.settings-username-section { grid-column:1; grid-row:2; }
#profile_form>.profile-photo-settings { grid-column:2; grid-row:2; }
.settings-hero { grid-column:1/-1; min-height:124px; display:flex; align-items:center; gap:18px; padding:22px 24px; overflow:hidden; border:1px solid rgba(96,165,250,.26); border-radius:17px; background:radial-gradient(circle at 90% 20%,rgba(56,189,248,.17),transparent 27%),linear-gradient(125deg,rgba(37,99,235,.24),rgba(15,23,42,.5)); }
.settings-hero-icon { width:64px; height:64px; flex:0 0 auto; display:grid; place-items:center; border:1px solid rgba(125,211,252,.34); border-radius:18px; background:rgba(37,99,235,.18); color:#7dd3fc; font-size:34px; box-shadow:inset 0 0 22px rgba(56,189,248,.08); }
.settings-hero h3 { margin:4px 0 5px; font-size:21px; letter-spacing:-.4px; }
.settings-hero p { margin:0; color:#9eb0c7; font-size:12.5px; line-height:1.55; }
.settings-kicker { color:#7dd3fc; font-size:9.5px; font-weight:850; letter-spacing:.9px; text-transform:uppercase; }
.settings-section { min-width:0; padding:19px; border-color:rgba(148,163,184,.18); border-radius:15px; background:linear-gradient(150deg,rgba(23,34,55,.8),rgba(15,23,42,.56)); }
.settings-section h3 { font-size:15px; }
.settings-section p { font-size:12px; }
.settings-username-section .settings-fields { grid-template-columns:1fr; }
.profile-photo-settings { min-height:164px; padding-inline:22px; background:linear-gradient(140deg,rgba(30,64,175,.13),rgba(15,23,42,.52)); }
.settings-avatar { width:84px; height:84px; box-shadow:0 0 0 6px rgba(59,130,246,.08),0 14px 30px rgba(2,6,23,.3); }
.username-input { min-height:46px; display:flex; align-items:center; overflow:hidden; border:1px solid var(--border-strong); border-radius:10px; background:#0d1727; transition:border-color .16s ease,box-shadow .16s ease; }
.username-input:focus-within { border-color:#60a5fa; box-shadow:0 0 0 3px rgba(59,130,246,.13); }
.username-input>span { padding-left:12px; color:#7dd3fc; font-weight:850; }
.username-input input { min-width:0; border:0 !important; background:transparent !important; box-shadow:none !important; }
#profile_username_hint.is-valid { color:#86efac; }
.settings-fields input,.settings-fields textarea,.settings-fields select { min-height:46px; border-radius:10px; background:#0d1727; }
.settings-fields select { width:100%; padding:9px 11px; border:1px solid var(--border-strong); color:var(--ink); outline:none; }
.settings-fields small { font-size:11px; }
.settings-switch { padding:6px 8px 6px 6px; border:1px solid rgba(148,163,184,.14); border-radius:999px; background:rgba(2,6,23,.24); }
.privacy-note { padding:13px 14px; border:1px solid rgba(96,165,250,.12); line-height:1.55 !important; }
.certification-fields { padding:14px; border-radius:12px; background:rgba(2,6,23,.17); }
.certification-fields label span { min-height:35px; padding:7px 11px; }
.settings-actions { position:static; z-index:auto; margin:2px 0 0 !important; padding:15px 0 0; border-top:1px solid rgba(148,163,184,.15); background:transparent; backdrop-filter:none; }
.settings-actions button { min-width:120px; min-height:42px; }
.security-settings { margin-top:14px; padding:20px; border-color:rgba(52,211,153,.17); background:linear-gradient(145deg,rgba(16,185,129,.06),rgba(15,23,42,.5)); }
.security-settings .settings-section-heading::after { content:"✓"; width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(52,211,153,.28); border-radius:10px; background:rgba(16,185,129,.1); color:#86efac; font-weight:900; }

@media (max-width:760px) {
  .profile-heading { min-height:0; align-items:flex-start; padding:24px 20px; }
  .profile-heading h1 { font-size:36px; }
  .profile-heading-actions { width:100%; }
  .profile-overview { padding:20px; }
  #profile_form { grid-template-columns:1fr; }
  #profile_form>.settings-username-section,#profile_form>.profile-photo-settings { grid-column:1; grid-row:auto; }
  .settings-hero { padding:18px; }
  .settings-hero-icon { width:50px; height:50px; font-size:28px; }
  .settings-dialog-card { padding-inline:16px; }
  .settings-dialog-card>.dialog-heading { margin-inline:-16px; padding-inline:16px; }
  .settings-actions { margin-inline:0 !important; padding-inline:0; }
}
@media (max-width:640px) { .settings-actions { position:static; margin:2px 0 0 !important; padding:14px 0 0; border-top:1px solid rgba(148,163,184,.15); background:transparent; backdrop-filter:none; } }
@media (max-width:640px) { .account-settings-dialog { width:calc(100vw - 16px); max-width:calc(100vw - 16px); } .certification-groups,.certification-fields { min-width:0; max-width:100%; } }

/* Account and Logbook use the shared page chrome without a floating dark slab. */
.account-header.public-header { position:relative; top:auto; background:transparent; backdrop-filter:none; }
@media (max-width:980px) and (min-width:641px) {
  .profile-overview { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
  .profile-overview-actions { grid-column:1/-1; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .profile-overview-actions small { align-self:center; }
}

/* Calm, task-focused profile summary. Identity appears once and account details
   stay in Settings instead of competing with the public-facing profile. */
#profile_status:empty { display:none; }
.profile-overview {
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"identity actions" "details details";
  align-items:start;
  gap:22px 30px;
  padding:27px 29px;
}
.profile-overview .profile-identity { grid-area:identity; align-items:center; gap:17px; }
.profile-overview .avatar { width:82px; height:82px; font-size:30px; }
.profile-overview .profile-identity h2 { margin:5px 0 4px; font-size:23px; line-height:1.15; letter-spacing:-.35px; }
.profile-overview .profile-identity #profile_summary_email { display:none; }
.profile-overview-copy {
  grid-area:details;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px 28px;
  padding-top:20px;
  border-top:1px solid rgba(148,163,184,.16);
}
.profile-bio-block { min-width:0; }
.profile-bio-block:has(.profile-bio[hidden]) { display:none; }
.profile-overview .profile-bio { margin:8px 0 0; padding:0; border:0; background:transparent; color:#b7c5d8; font-size:13px; line-height:1.65; }
.profile-overview .profile-certifications { min-width:0; margin:0; padding:0; border:0; }
.profile-overview .profile-card-subhead { margin-bottom:10px; }
.profile-overview .profile-card-subhead strong { color:#dbeafe; font-size:11px; letter-spacing:.35px; text-transform:uppercase; }
.profile-overview-actions {
  grid-area:actions;
  min-width:0;
  width:min(100%,430px);
  display:grid;
  grid-template-columns:repeat(3,max-content);
  justify-content:end;
  align-items:center;
  gap:8px;
}
.profile-overview-actions .public-profile-state { grid-column:1/-1; justify-self:end; }
.profile-overview-actions a,.profile-overview-actions button { min-height:40px; padding-inline:13px; font-size:11.5px; }
.profile-overview-actions .settings-button { grid-column:auto; }
.profile-overview-actions small { display:none; }
@media (max-width:820px) {
  .profile-overview { grid-template-columns:1fr; grid-template-areas:"identity" "details" "actions"; gap:19px; padding:22px; }
  .profile-overview-actions { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:stretch; }
  .profile-overview-actions .public-profile-state { grid-column:1/-1; justify-self:start; }
  .profile-overview-actions .settings-button { grid-column:1/-1; }
}
@media (max-width:480px) {
  .profile-overview .profile-identity { align-items:flex-start; }
  .profile-overview .avatar { width:68px; height:68px; font-size:25px; }
  .profile-overview .profile-identity h2 { font-size:20px; }
  .profile-overview-copy { grid-template-columns:1fr; padding-top:17px; }
}

/* Background theme picker (Account settings → Background) */
.bg-options { display:flex; flex-wrap:wrap; gap:10px; }
.bg-option { display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px 6px 8px; border:1px solid var(--border); border-radius:12px; background:transparent; color:var(--muted); font:inherit; font-size:11px; font-weight:750; cursor:pointer; transition:border-color .16s ease,color .16s ease; }
.bg-option:hover { border-color:var(--border-strong); color:var(--ink); }
.bg-option.is-active { border-color:rgba(96,165,250,.7); color:#fff; box-shadow:0 0 0 1px rgba(96,165,250,.4); }
.bg-swatch { width:58px; height:40px; border-radius:8px; border:1px solid rgba(148,163,184,.2); background:#0f172a; }
.bg-swatch-ocean { background:radial-gradient(60px 60px at 50% -8px, rgba(59,130,246,.6), transparent 70%), #0f172a; }
.bg-swatch-aurora { background:radial-gradient(46px 44px at 12% -6px, rgba(37,99,235,.75), transparent 60%), radial-gradient(44px 42px at 92% 0, rgba(14,165,233,.6), transparent 60%), #0f172a; }
.bg-swatch-emerald { background:radial-gradient(60px 60px at 50% -8px, rgba(16,185,129,.6), transparent 68%), #0f172a; }
.bg-swatch-violet { background:radial-gradient(56px 52px at 22% -6px, rgba(139,92,246,.75), transparent 64%), radial-gradient(44px 42px at 90% 4%, rgba(59,130,246,.5), transparent 62%), #0f172a; }
.bg-swatch-sunset { background:radial-gradient(56px 52px at 16% -6px, rgba(244,114,182,.6), transparent 62%), radial-gradient(48px 46px at 92% 0, rgba(251,146,60,.55), transparent 60%), #0f172a; }
.bg-swatch-flat { background:#0f172a; }