:root { --ink:#18212a; --muted:#60707a; --line:#d1dce3; --soft:#f1f5f7; --blue:#1793d1; --blue-dark:#0877b0; --green:#287b52; --shadow:0 14px 36px rgba(24,43,58,.10); }
html,body { min-width:0; }
body { margin:0; color:var(--ink); background:#fff; font:14px/1.55 Arial,Helvetica,sans-serif; text-align:left; }
*,*::before,*::after { box-sizing:border-box; }
.shell { width:min(calc(100% - 36px),1180px); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:50; color:#fff; background:#1b1f23; border-bottom:5px solid var(--blue); }
.nav { min-height:64px; display:flex; align-items:center; gap:18px; }
.brand { display:flex; align-items:center; gap:10px; margin-right:auto; color:#fff!important; }
.brand-mark { width:40px; height:40px; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--blue); font-weight:bold; }
.brand strong,.brand small { display:block; }.brand small { color:#aab6bd; font-size:9px; text-transform:uppercase; }
.nav-links { display:flex; }.nav-links a { padding:9px 8px; color:#d5dadd; font-size:12px; font-weight:bold; }.nav-links a:hover { color:#fff; background:#30363b; text-decoration:none; }
.nav-download { background:var(--blue); }.menu-button { display:none; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 14px; color:var(--ink); background:#fff; border:1px solid #afbdc6; }
.footer { color:#c5cdd2; background:#1b1f23; border-top:5px solid var(--blue); }.footer-grid { display:grid; grid-template-columns:1fr auto; gap:30px; padding-block:32px; }.footer-links { display:flex; gap:18px; align-items:center; }
@media(max-width:850px){.nav-links{display:none}.nav-links.open{position:absolute;top:64px;right:12px;display:grid;padding:8px;background:#1b1f23}.menu-button{display:block}}
.account-page { min-height: calc(100vh - 218px); display: grid; grid-template-columns: minmax(0,.9fr) minmax(460px,.72fr); gap: 90px; align-items: start; padding-block: 72px 90px; }
.account-intro { padding-top: 34px; }
.account-intro h1 { margin: 0; font-size: clamp(44px,5vw,66px); line-height: 1.04; letter-spacing: -.05em; }
.account-intro > p:not(.eyebrow) { max-width: 570px; color: var(--muted); font-size: 17px; }
.account-intro ul { margin: 30px 0 0; padding: 0; list-style: none; }
.account-intro li { position: relative; margin: 12px 0; padding-left: 27px; color: #4e5d68; }
.account-intro li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 900; }
.auth-panel,.profile-panel { padding: 30px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: -15px -15px 28px; padding: 5px; background: var(--soft); border-radius: 7px; }
.auth-tabs button { min-height: 39px; color: var(--muted); background: transparent; border: 0; border-radius: 5px; font-weight: 750; }
.auth-tabs button.active { color: var(--ink); background: #fff; box-shadow: 0 1px 5px rgba(20,40,58,.12); }
.auth-form header { margin-bottom: 23px; }
.auth-kicker { color: var(--blue-dark); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.auth-form h2 { margin: 4px 0; font-size: 28px; letter-spacing: -.025em; }
.auth-form header p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.auth-form label { display: block; margin: 14px 0; color: #3e4b56; font-size: 12px; font-weight: 750; }
.auth-form label small { float: right; color: #84919b; font-weight: 500; }
.auth-form input,.auth-form textarea { display: block; width: 100%; margin-top: 6px; }
.auth-form textarea { min-height: 90px; padding: 10px 11px; resize: vertical; border: 1px solid #bdc9d2; border-radius: 6px; font: inherit; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.auth-form .check-row { display: flex; align-items: start; gap: 9px; font-weight: 500; }
.check-row input { width: 17px; min-height: 17px; margin: 3px 0 0; }
.auth-form button.auth-submit { display:block; width:100%; min-height:48px; margin-top:12px; padding:0 18px; cursor:pointer; color:#fff!important; background:#1793d1!important; border:2px solid #0877b0!important; border-radius:6px; box-shadow:0 3px 10px rgba(8,119,176,.28); font-size:15px; font-weight:800; text-align:center; }
.auth-form button.auth-submit:hover,.auth-form button.auth-submit:focus-visible { color:#fff!important; background:#0877b0!important; outline:3px solid rgba(23,147,209,.25); outline-offset:2px; }
.auth-submit:disabled { cursor: not-allowed; opacity: .5; }
.auth-link { display: block; margin: 13px auto 0; color: var(--blue-dark); background: transparent; border: 0; font-size: 13px; }
.oauth-block { position: relative; margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
.oauth-block > span { position: absolute; top: -11px; left: 50%; padding: 0 10px; color: #8b98a2; background: #fff; transform: translateX(-50%); font-size: 11px; white-space: nowrap; }
.oauth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.oauth-grid button { min-height: 41px; color: var(--ink); background: #fff; border: 1px solid #bcc8d1; border-radius: 6px; font-weight: 700; }
.oauth-grid button:hover:not(:disabled) { border-color: var(--blue); }
.oauth-grid button.unavailable { color: #7b8790; background: var(--soft); border-style: dashed; }
.auth-status { min-height: 22px; margin: 18px 0 0; color: #4e5d68; font-size: 13px; text-align: center; }
.auth-status.error,.auth-notice.error { color: #a52c35; }
.auth-notice.warning { color: #74530a; }
.auth-status.success { color: var(--green); }
.auth-notice { margin-bottom: 18px; padding: 11px 13px; background: #fff6df; border: 1px solid #edd18a; border-radius: 6px; font-size: 12px; }
.turnstile-slot { min-height: 0; margin: 15px 0; }
.profile-panel { grid-column: 1/-1; width: min(760px,100%); margin-inline: auto; }
.profile-panel > header { display: grid; grid-template-columns: auto 1fr auto; gap: 17px; align-items: center; margin-bottom: 25px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.profile-panel h2 { margin: 0; }
.profile-panel p { margin: 2px 0; color: var(--muted); }
.avatar { width: 64px; height: 64px; display: grid; grid-template-columns: repeat(5,1fr); overflow: hidden; background: #edf3f6; border: 1px solid var(--line); border-radius: 10px; }
.avatar i { display: block; }
.avatar.has-image { display: block; background-position: center; background-size: cover; }
@media (max-width: 900px) { .account-page { grid-template-columns: 1fr; gap: 30px; padding-top: 42px; } .account-intro { padding-top: 0; } }
@media (max-width: 540px) { .account-page { padding-block: 30px 60px; } .account-intro h1 { font-size: 43px; } .auth-panel,.profile-panel { padding: 20px; } .field-pair { grid-template-columns: 1fr; gap: 0; } .profile-panel > header { grid-template-columns: auto 1fr; } .profile-panel > header .button { grid-column: 1/-1; } }