:root { color-scheme: dark; }
[hidden] { display: none !important; }

.account-page { min-width: 320px; background: #071015; }
.account-hero { position: relative; min-height: 390px; overflow: hidden; isolation: isolate; display: grid; align-items: end; background: linear-gradient(#397fb5, #75b8d5 65%, #386b3b); }
.account-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(7,16,21,.82), rgba(7,16,21,.22) 72%), linear-gradient(0deg, rgba(7,16,21,.9), transparent 58%); }
.account-hero__sky { position: absolute; z-index: -2; inset: 0; overflow: hidden; }
.account-hero__sun { width: 82px; top: 12%; left: auto; right: 10%; }
.account-hero__cloud--one { top: 12%; left: 34%; animation: cloud-drift 38s linear infinite; }
.account-hero__cloud--two { top: 28%; right: 6%; transform: scale(.66); opacity: .65; animation: cloud-drift-reverse 44s linear infinite; }
.account-hero__ridge { position: absolute; inset: 30% -3% 0; background: #4c744e; clip-path: polygon(0 100%, 0 70%, 10% 56%, 20% 72%, 31% 39%, 39% 71%, 49% 48%, 61% 75%, 72% 43%, 83% 66%, 93% 45%, 100% 58%, 100% 100%); }
.account-hero__blocks { position: absolute; right: 8%; bottom: 9%; display: flex; align-items: end; gap: 7px; transform: skewY(-4deg); }
.account-hero__blocks i { display: block; width: 72px; height: 72px; background: #4f9b42; border: 5px solid #213d25; box-shadow: inset 0 -22px rgba(94,57,34,.85), 10px 10px rgba(7,16,21,.22); }
.account-hero__blocks i:nth-child(2) { width: 94px; height: 94px; background: #6cbf2d; }.account-hero__blocks i:nth-child(3) { background: #6e7275; box-shadow: inset 0 -22px rgba(52,57,60,.85), 10px 10px rgba(7,16,21,.22); }
.account-hero__content { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 58px 0 56px; display: grid; grid-template-columns: 330px minmax(0, 1fr); align-items: center; gap: 35px; }
.account-hero__content img { width: 330px; margin: -94px 0 -80px -28px; filter: drop-shadow(0 20px 30px rgba(0,0,0,.62)); }
.account-hero__content h1 { margin: 6px 0 7px; font: 900 clamp(2.7rem, 6vw, 5.8rem)/.95 var(--font-display); letter-spacing: -.06em; text-shadow: 0 7px 20px rgba(0,0,0,.48); }
.account-hero__content p:last-child { margin: 0; color: #d4e0e4; font-size: 1.05rem; }

.account-main { min-height: 700px; padding: 82px max(18px, calc((100vw - 1180px) / 2)) 110px; background: radial-gradient(circle at 18% 8%, rgba(112,190,34,.08), transparent 28%), radial-gradient(circle at 85% 18%, rgba(34,161,220,.08), transparent 27%), linear-gradient(#071015, #0b171d 48%, #071015); }
.account-status { position: fixed; z-index: 500; right: 22px; bottom: 22px; width: min(430px, calc(100vw - 44px)); padding: 15px 18px; color: #eaf3f5; background: rgba(12,25,31,.98); border: 1px solid rgba(112,190,34,.5); box-shadow: inset 5px 0 var(--green), 0 22px 60px rgba(0,0,0,.5); clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); font-weight: 700; }
.account-status.is-error { border-color: rgba(221,77,67,.58); box-shadow: inset 5px 0 #dd4d43, 0 22px 60px rgba(0,0,0,.5); }

.account-auth { display: grid; grid-template-columns: .9fr 1.1fr; overflow: hidden; background: rgba(13,26,32,.97); border: 1px solid rgba(238,194,43,.34); box-shadow: 0 35px 100px rgba(0,0,0,.38); clip-path: polygon(17px 0, 100% 0, 100% calc(100% - 17px), calc(100% - 17px) 100%, 0 100%, 0 17px); }
.account-auth__story { padding: clamp(34px, 5vw, 64px); background: linear-gradient(145deg, rgba(112,190,34,.12), rgba(34,161,220,.05)), rgba(7,16,21,.62); border-right: 1px solid rgba(255,255,255,.08); box-shadow: inset 6px 0 var(--green); }
.account-auth__story h2 { margin: 0 0 20px; font: 900 clamp(2.5rem, 5vw, 5rem)/.98 var(--font-display); letter-spacing: -.055em; }
.account-auth__story > p:not(.eyebrow) { color: #b9c6cc; font-size: 1.02rem; }
.account-auth__features { display: grid; gap: 12px; margin-top: 32px; }
.account-auth__features article { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 13px; padding: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.075); }
.account-auth__features article > span { color: var(--gold); font: 900 .78rem/1 var(--font-display); }
.account-auth__features strong, .account-auth__features small { display: block; }.account-auth__features small { margin-top: 2px; color: #8fa0a7; }
.account-auth__panel { padding: clamp(30px, 5vw, 58px); }
.account-auth__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 38px; padding: 5px; background: #071015; border: 1px solid rgba(255,255,255,.09); }
.account-auth__tabs button { padding: 13px 15px; color: #9dabb1; background: transparent; border: 0; font: 900 .86rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .07em; cursor: pointer; }
.account-auth__tabs button.is-active { color: #071015; background: var(--gold); }
.account-auth__form { max-width: 570px; margin: 0 auto; }
.account-auth__form h2 { margin: 0 0 24px; font: 900 clamp(2rem, 4vw, 3.4rem)/1 var(--font-display); }
.account-auth__form form { display: grid; gap: 9px; }
.account-auth__form label, .username-form > label { color: #e9eef0; font: 800 .82rem/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .055em; }
.account-auth__form input:not([type="checkbox"]), .username-form input { width: 100%; padding: 13px 14px; color: #fff; background: #071015; border: 1px solid #38505d; outline: none; }
.account-auth__form input:focus, .username-form input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(238,194,43,.13); }
.account-auth__form form > small { margin: -4px 0 5px; color: #85969d; }
.account-check { display: flex; align-items: center; gap: 9px; margin: 9px 0 5px; color: #aebbc0 !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; }
.account-check input { width: 18px; height: 18px; accent-color: var(--green); }

.account-action { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 4px; color: #fff; background: #071015; border: 2px solid var(--action-accent, #52636b); box-shadow: 0 7px 0 rgba(0,0,0,.27); clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); font: 900 .86rem/1 var(--font-display); text-decoration: none; text-transform: uppercase; letter-spacing: .045em; cursor: pointer; transition: transform 150ms ease, filter 150ms ease; }
.account-action > span { display: block; width: 100%; padding: 11px 18px; text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--action-accent, #52636b) 30%, #17252c), color-mix(in srgb, var(--action-accent, #52636b) 11%, #071015)); clip-path: inherit; }
.account-action:hover:not(:disabled), .account-action:focus-visible:not(:disabled) { transform: translateY(-2px); filter: brightness(1.14); outline: none; }
.account-action--green { --action-accent: var(--green); }.account-action--orange { --action-accent: var(--orange); }.account-action--blue { --action-accent: var(--blue); }.account-action--quiet { --action-accent: #53656d; }
.account-auth__form .account-action { width: 100%; margin-top: 12px; }

.account-dashboard { display: grid; gap: 25px; }
.account-dashboard__heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; padding: 0 4px 20px; border-bottom: 1px solid rgba(238,194,43,.22); }
.account-dashboard__heading h2 { margin: 0; font: 900 clamp(2.4rem, 5vw, 4.7rem)/1 var(--font-display); letter-spacing: -.05em; }.account-dashboard__heading h2 span { color: var(--gold); }
.account-dashboard__heading p:last-child { margin: 9px 0 0; color: #aebbc0; }
.account-dashboard__heading .account-action { flex: 0 0 150px; }
.account-dashboard__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 20px; }
.account-card { padding: clamp(24px, 3vw, 38px); background: rgba(15,28,34,.96); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 25px 70px rgba(0,0,0,.28); clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px); }
.account-card--license { box-shadow: inset 5px 0 var(--gold), 0 25px 70px rgba(0,0,0,.28); }.account-card--profile { box-shadow: inset 5px 0 var(--blue), 0 25px 70px rgba(0,0,0,.28); }.account-card--vault { grid-column: 1 / -1; box-shadow: inset 5px 0 var(--purple), 0 25px 70px rgba(0,0,0,.28); }.account-card--security { grid-column: 1 / -1; box-shadow: inset 5px 0 var(--orange), 0 25px 70px rgba(0,0,0,.28); }.account-card--skin { grid-column: 1 / -1; box-shadow: inset 5px 0 var(--green), 0 25px 70px rgba(0,0,0,.28); }
.account-card__title { display: flex; align-items: center; gap: 14px; padding-bottom: 19px; border-bottom: 1px solid rgba(255,255,255,.075); }
.account-card__title .eyebrow { margin-bottom: 5px; }.account-card__title h3 { margin: 0; font: 900 1.5rem/1 var(--font-display); }
.account-card__icon { position: relative; display: block; width: 48px; height: 48px; flex: 0 0 48px; background: #071015; border: 2px solid var(--gold); transform: rotate(45deg); }
.account-card__icon::before, .account-card__icon::after { content: ""; position: absolute; inset: 13px; border: 4px solid var(--gold); }
.account-card__icon--profile { border-color: var(--blue); }.account-card__icon--profile::before { inset: 9px 14px 21px; border-color: var(--blue); border-radius: 50%; }.account-card__icon--profile::after { inset: 23px 9px 8px; border-color: var(--blue); border-radius: 50% 50% 0 0; }
.account-card__icon--vault { border-color: var(--purple); }.account-card__icon--vault::before { inset: 10px 7px 20px; border-color: var(--purple); border-bottom-width: 8px; }.account-card__icon--vault::after { inset: 22px 10px 8px; border-color: var(--purple); border-top: 0; }
.account-card__icon--security { border-color: var(--orange); }.account-card__icon--security::before { inset: 8px 13px 19px; border-color: var(--orange); border-radius: 50% 50% 0 0; }.account-card__icon--security::after { inset: 22px 9px 8px; border-color: var(--orange); }
.account-card__icon--skin { border-color: var(--green); }.account-card__icon--skin::before { inset: 10px 14px; border-color: var(--green); }.account-card__icon--skin::after { inset: 17px 7px; border-color: var(--green); border-top: 0; border-bottom: 0; }
.license-state { margin: 26px 0; padding: 21px; background: rgba(7,16,21,.57); border: 1px solid rgba(255,255,255,.08); }
.license-state__badge { display: inline-block; padding: 5px 9px; color: #071015; background: var(--gold); font: 900 .72rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .075em; }
.license-state h4 { margin: 15px 0 7px; font: 900 1.75rem/1.1 var(--font-display); }.license-state p { margin: 0; color: #aebbc0; }
.license-state.is-owned .license-state__badge { background: var(--green-bright); }.license-state.is-unowned .license-state__badge { color: #fff; background: #a4433e; }
.account-card--license .account-action { width: 100%; }
.activation-form { display: grid; gap: 8px; margin: 0 0 18px; padding: 18px; background: rgba(238,194,43,.055); border: 1px solid rgba(238,194,43,.22); }
.activation-form > label, .password-form label { color: #f2f5f6; font: 800 .76rem/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .055em; }
.activation-form > p { margin: 0 0 5px; color: #97a7ad; font-size: .84rem; }
.activation-form > div { display: grid; grid-template-columns: 1fr auto; }
.activation-form input, .password-form input { min-width: 0; width: 100%; padding: 12px 13px; color: #fff; background: #071015; border: 1px solid #465a63; outline: none; }
.activation-form input:focus, .password-form input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(238,194,43,.12); }
.activation-form button { padding: 0 18px; color: #071015; background: var(--gold); border: 0; font-family: var(--font-display); font-weight: 900; cursor: pointer; }
.activation-form button:disabled { color: #829097; background: #33434b; cursor: not-allowed; }
.license-purchase-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.account-action--locked { width: 100%; flex-direction: column; --action-accent: #7e5f21; cursor: not-allowed; opacity: .86; }
.account-action--locked > span { padding-bottom: 5px; color: #ffe36b; }.account-action--locked > small { width: 100%; padding: 2px 10px 9px; color: #a99c79; background: #0b1215; text-transform: none; letter-spacing: 0; }
.account-details { display: grid; gap: 0; margin: 24px 0; }
.account-details div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.07); }.account-details dt { color: #819299; font-size: .83rem; font-weight: 700; }.account-details dd { margin: 0; color: #eef3f4; font-weight: 800; overflow-wrap: anywhere; }
.username-form { display: grid; gap: 9px; }.username-form > div { display: grid; grid-template-columns: 1fr auto; }.username-form button { padding: 0 17px; color: #071015; background: var(--blue); border: 0; font-weight: 900; cursor: pointer; }.username-form button:disabled { background: #40515a; color: #87969d; cursor: not-allowed; }.username-form small { color: #82949b; }

.account-card__intro { max-width: 850px; margin: 22px 0; color: #9fafb5; }
.key-vault { display: grid; gap: 11px; }
.key-vault__entry { display: grid; grid-template-columns: minmax(200px,1.3fr) minmax(160px,.8fr) minmax(180px,1fr) auto; align-items: center; gap: 17px; padding: 16px 17px; background: rgba(7,16,21,.63); border: 1px solid rgba(255,255,255,.085); }
.key-vault__identity strong, .key-vault__identity code, .key-vault__meta span, .key-vault__status strong, .key-vault__status small { display: block; }
.key-vault__identity strong { margin-bottom: 7px; font-family: var(--font-display); }.key-vault__identity code { color: #e5d6f3; font: 700 .82rem/1.3 Consolas, "Courier New", monospace; overflow-wrap: anywhere; }
.key-vault__meta span { color: #bd86e9; font: 900 .65rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .075em; }.key-vault__meta small { display: block; margin-top: 6px; color: #798b92; }
.key-vault__status strong { color: #dce5e8; font-size: .84rem; }.key-vault__status small { margin-top: 4px; color: #81939a; }
.key-vault__status.is-available strong { color: #bdf486; }.key-vault__status.is-revoked strong { color: #ff9b93; }
.key-vault__reveal { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 105px; padding: 10px 12px; color: #fff; background: #25363e; border: 1px solid #58707a; font-family: var(--font-display); font-weight: 900; cursor: pointer; }.key-vault__reveal:disabled { color: #697a81; background: #162229; border-color: #2f4149; cursor: not-allowed; }
.account-eye { position: relative; width: 20px; height: 12px; border: 2px solid currentColor; border-radius: 50% / 65%; }.account-eye::after { content: ""; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: currentColor; border-radius: 50%; transform: translate(-50%,-50%); }
.key-vault__empty { padding: 24px; color: #81939a; background: rgba(7,16,21,.5); border: 1px dashed rgba(255,255,255,.12); text-align: center; }
.key-vault__note { margin: 14px 0 0; color: #71838a; font-size: .78rem; }

.security-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px,6vw,80px); align-items: start; margin-top: 26px; }
.security-layout h4 { margin: 0 0 10px; font: 900 1.7rem/1.1 var(--font-display); }.security-layout > div p { color: #9fafb5; }
.password-form { display: grid; gap: 9px; }.password-form .account-action { width: 100%; margin-top: 8px; }

.skin-studio { display: grid; grid-template-columns: 360px 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; margin-top: 28px; }
.skin-preview { position: relative; display: grid; place-items: center; min-height: 500px; overflow: hidden; background: radial-gradient(circle, rgba(34,161,220,.13), transparent 57%), linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px), #071015; background-size: auto, 28px 28px, 28px 28px, auto; border: 1px solid rgba(34,161,220,.22); }
.skin-preview::after { content: ""; position: absolute; left: 50%; bottom: 55px; width: 175px; height: 28px; background: radial-gradient(ellipse, rgba(0,0,0,.75), transparent 70%); transform: translateX(-50%); }
.skin-preview canvas { position: relative; z-index: 2; width: 320px; max-width: 100%; height: auto; image-rendering: pixelated; }
.skin-preview > span { position: absolute; z-index: 3; left: 15px; right: 15px; bottom: 15px; padding: 8px; color: #dfe8eb; background: rgba(7,16,21,.82); border: 1px solid rgba(255,255,255,.09); text-align: center; font-size: .8rem; font-weight: 800; }
.skin-controls > p { color: #aebbc0; }.skin-controls form { display: grid; gap: 13px; margin: 24px 0 13px; }
.skin-controls input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.skin-picker { display: grid; gap: 4px; padding: 17px; color: #fff; background: rgba(34,161,220,.08); border: 1px dashed rgba(34,161,220,.58); cursor: pointer; }.skin-picker span { font-family: var(--font-display); font-weight: 900; }.skin-picker small { color: #8fa4ad; }
.skin-controls .account-action { width: 100%; }

@media (max-width: 1000px) {
    .account-hero__content { grid-template-columns: 245px 1fr; }.account-hero__content img { width: 245px; }
    .account-auth { grid-template-columns: 1fr; }.account-auth__story { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
    .account-dashboard__grid { grid-template-columns: 1fr; }.account-card--vault, .account-card--security, .account-card--skin { grid-column: auto; }
    .skin-studio { grid-template-columns: 320px 1fr; gap: 28px; }
}

@media (max-width: 760px) {
    .account-hero { min-height: 480px; }.account-hero__content { grid-template-columns: 1fr; padding-top: 150px; text-align: center; }.account-hero__content img { position: absolute; top: 25px; left: 50%; width: 235px; margin: -65px 0 -58px; transform: translateX(-50%); }.account-hero__blocks { opacity: .55; }
    .account-main { padding-top: 48px; }
    .account-dashboard__heading { align-items: stretch; flex-direction: column; }.account-dashboard__heading .account-action { flex: auto; align-self: start; }
    .skin-studio, .security-layout { grid-template-columns: 1fr; }.skin-preview { min-height: 470px; }
    .key-vault__entry { grid-template-columns: 1fr 1fr; }.key-vault__reveal { width: 100%; }
}

@media (max-width: 520px) {
    .account-auth__story, .account-auth__panel { padding: 27px 20px; }
    .account-auth__tabs { margin-bottom: 27px; }
    .account-card { padding: 24px 18px; }
    .account-details div { grid-template-columns: 1fr; gap: 3px; }
    .username-form > div { grid-template-columns: 1fr; gap: 8px; }.username-form button { min-height: 43px; }
    .activation-form > div, .license-purchase-actions, .key-vault__entry { grid-template-columns: 1fr; gap: 8px; }.activation-form button { min-height: 43px; }
    .skin-preview { min-height: 420px; }.skin-preview canvas { width: 275px; }
}

@media (prefers-reduced-motion: reduce) { .account-hero__cloud { animation: none; } }