:root{color-scheme:dark;--bg:#080b16;--panel:#12182a;--text:#f6f7fb;--muted:#aab3ca;--accent:#a78bfa;--line:#28314b}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 20% 0,#202657 0,transparent 38%),var(--bg);color:var(--text);font:16px/1.55 system-ui,sans-serif;min-height:100vh}.account-shell{width:min(760px,calc(100% - 32px));margin:0 auto;padding:24px 0 64px}.account-nav{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:40px}.account-nav a{color:var(--text);text-decoration:none}.account-links{display:flex;gap:14px;flex-wrap:wrap}.account-card{background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,5vw,42px);box-shadow:0 24px 70px #0006}/* A paragraph can carry the visitor's own address (the greeting, the pending-address
   notice). A 41-character address is one unbreakable token, so it has to be allowed to
   break anywhere; on a wide viewport nothing re-wraps, the word simply fits. */
h1{font-size:clamp(2rem,8vw,3.5rem);line-height:1.02;margin:0 0 16px}p{color:var(--muted);overflow-wrap:anywhere}label{display:grid;gap:7px;margin:16px 0;font-weight:650}input,button{font:inherit;border-radius:12px;padding:12px 14px}input{width:100%;border:1px solid var(--line);background:#0b1020;color:var(--text)}button,.button{display:inline-block;border:0;background:var(--accent);color:#130d28;font-weight:800;text-decoration:none;cursor:pointer}.button.secondary{background:transparent;color:var(--text);border:1px solid var(--line);padding:10px 13px}.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:22px}.favorite{padding:16px 0;border-top:1px solid var(--line)}.status{border-left:3px solid var(--accent);padding-left:12px}
/* Auth fields: the label rests inside the control and lifts when the control has
   focus or a value, so the example placeholder is only painted while the label is
   already up and the two can never overlap (no inline styling: style-src 'self'). */
.field{position:relative;margin:18px 0}
.field input{width:100%;padding:24px 14px 9px;border:1px solid var(--line);background:#0b1020;color:var(--text);border-radius:12px}
.field input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.field label{position:absolute;left:15px;top:0;display:block;margin:0;color:var(--muted);font-weight:600;line-height:1.2;pointer-events:none;transform:translateY(17px);transform-origin:left top;transition:transform .15s ease,color .15s ease}
.field input:focus+label,.field input:not(:placeholder-shown)+label{transform:translateY(4px) scale(.78);color:var(--accent)}
/* An autofilled control has a value without a keystroke, so it lifts the label too;
   the inset shadow keeps Chrome's autofill background from fighting the dark theme. */
.field input:-webkit-autofill+label{transform:translateY(4px) scale(.78);color:var(--accent)}
.field input:autofill+label{transform:translateY(4px) scale(.78);color:var(--accent)}
.field input:-webkit-autofill{box-shadow:inset 0 0 0 60px #0b1020}
.field input::placeholder{color:transparent}
.field input:focus::placeholder{color:#7d879e}
.field input[aria-invalid="true"]{border-color:#f87171}
.field input[aria-invalid="true"]+label{color:#f87171}
.field input[aria-invalid="true"]:-webkit-autofill+label{color:#f87171}
.field input:disabled{opacity:.65;cursor:not-allowed}
.field input:disabled+label{color:#6b7488}
.field-error{margin:6px 0 0;color:#fca5a5;font-size:.875rem}
.form-error{margin:0 0 14px;padding:10px 12px;border:1px solid #f87171;border-radius:12px;color:#fca5a5;font-size:.9rem}
.checkbox{display:flex;align-items:flex-start;gap:10px;margin:18px 0;font-weight:500;font-size:.95rem}
.checkbox input{flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;padding:0;accent-color:var(--accent)}
.social-auth{margin-top:26px}
.divider{display:flex;align-items:center;gap:12px;margin:0 0 14px;color:var(--muted);font-size:.875rem}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.social-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.social-button{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;color:var(--text);font-weight:650;font-size:.95rem;text-decoration:none}
.social-button:hover,.social-button:focus{border-color:var(--accent);color:var(--accent)}
.social-icon{display:block;width:18px;height:18px;flex:0 0 auto}
@media(max-width:520px){.account-nav{align-items:flex-start;flex-direction:column}.account-links{gap:10px}.account-card{border-radius:16px}.social-buttons{grid-template-columns:1fr}}.account-layout{display:grid;grid-template-columns:minmax(0,264px) minmax(0,1fr);gap:clamp(18px,3vw,36px);align-items:start;width:min(1180px,calc(100% - 32px));margin:0 auto;padding:24px 0 64px}.account-sidebar{display:grid;gap:18px;align-content:start;min-width:0;background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);border-radius:20px;padding:22px;position:sticky;top:24px}.account-brand{display:flex;gap:10px;align-items:center;color:var(--text);text-decoration:none;min-width:0}.account-brand-mark{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:11px;background:var(--accent);color:#130d28;font-weight:800;font-size:.82rem;letter-spacing:.04em}.account-brand-text{display:grid;min-width:0}.account-brand-text small{color:var(--muted);font-size:.75rem}.account-identity{display:flex;gap:12px;align-items:center;min-width:0}.account-avatar{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:#232b45;color:var(--text);font-weight:800;object-fit:cover}.account-identity-text{display:grid;min-width:0}.account-identity-text span{color:var(--muted);font-size:.82rem;overflow-wrap:anywhere}.account-tabs{display:flex;flex-wrap:wrap;gap:6px}.account-tabs a{color:var(--muted);text-decoration:none;padding:9px 12px;border-radius:11px}.account-tabs a[aria-current=page]{background:#1c2440;color:var(--text);font-weight:700}.account-signout{justify-self:start}/* One explicit track with a 0 minimum: a card that contains a long unbreakable token
   must stay inside the column and let the token wrap, instead of the implicit auto
   track growing to the token's min-content and pushing the page sideways. */
.account-main{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-content:start;min-width:0}.account-notice{border-left:3px solid var(--accent);padding-left:12px;margin:0}.account-alert{border-left:3px solid #f0857c;padding-left:12px;margin:0;color:#ffd9d4}.favourites-table{width:100%;border-collapse:collapse}.favourites-table th,.favourites-table td{text-align:left;vertical-align:top;padding:12px 10px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.favourites-table thead th{color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.06em}.favourites-poster{width:60px}.favourites-poster img{display:block;width:44px;height:64px;object-fit:cover;border-radius:8px}.favourites-badge{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:.75rem;color:var(--muted)}.favourites-sort{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 14px}.session{display:grid;gap:8px;padding:16px 0;border-top:1px solid var(--line)}.session dl{display:grid;gap:4px;margin:0}.session dl div{display:flex;gap:10px;flex-wrap:wrap}.session dt{color:var(--muted);min-width:96px}.session dd{margin:0}@media(max-width:860px){.account-layout{grid-template-columns:minmax(0,1fr)}.account-sidebar{position:static}}@media(max-width:760px){.favourites-table thead{display:none}.favourites-table,.favourites-table tbody,.favourites-table tr,.favourites-table td{display:block;width:100%}.favourites-table tr{padding:14px 0;border-top:1px solid var(--line)}.favourites-table td{border:0;padding:3px 0}.favourites-table td::before{content:attr(data-label);display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}.favourites-poster{width:auto}}