.account-auth { padding-bottom: 36px; box-sizing: border-box; }







.account-form-card { width: 390px; max-width: 100%; }







.account-form-card > .header { padding: 22px; }







.account-form-card > .body { padding: 22px; }







.account-form-card form { width: 100%; gap: 10px; }







.account-form-card label, .account-password-panel label { font-size: 13px; font-weight: 700; color: #bac5dc; }







.account-form-card input, .account-password-panel input { width: 100%; min-height: 43px; border-radius: 8px; }







.account-form-card .simple-btn, .account-password-panel .simple-btn { min-height: 43px; font: 700 14px Nunito,sans-serif; margin-top: 8px; cursor: pointer; }







.account-form-card small, .account-password-panel small { color: #8592ab; font-size: 12px; line-height: 1.6; }







.account-message { margin: 0; color: #f3a3b2; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }







.account-message:empty { display: none; }







.account-message.is-success { color: #94dbbc; }







.account-muted { margin: 0 0 12px; color: #9aa5ba; line-height: 1.7; }







.account-back { color: #a9baff; text-decoration: none; }







.account-dashboard { padding-bottom: 60px; }







.account-content[hidden] { display: none; }







.account-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }







.account-heading .hero-eyebrow { justify-content: flex-start; }







.account-heading h1 { margin: 10px 0 0; font-size: clamp(28px,4vw,42px); letter-spacing: -1px; overflow-wrap: anywhere; }







.account-logout { padding: 10px 20px; color: #c2cce1; background: #ffffff06; border: 1px solid #ffffff17; border-radius: 999px; font: 700 13px Nunito,sans-serif; cursor: pointer; }







.account-logout:hover { background: #ffffff10; color: white; }







.account-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }







.account-panel { min-width: 0; padding: 26px; background: linear-gradient(130deg,#ffffff04,transparent),#131722; border: 1px solid #ffffff12; border-radius: 16px; }







.account-panel h2 { font-size: 20px; margin: 0 0 22px; letter-spacing: -.4px; }







.account-details { margin: 0; }







.account-details > div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid #ffffff08; }







.account-details > div:last-child { border: 0; }







.account-details dt { font-size: 14px; color: #8c99b1; }







.account-details dd { margin: 0; color: #dce3f3; font-size: 14px; text-align: right; overflow-wrap: anywhere; }







.account-empty p { margin: 0 0 8px; font-weight: 700; }







.account-empty span { color: #8c99b1; font-size: 14px; }







.account-empty a { display: block; width: fit-content; margin-top: 24px; color: #b5c3ff; text-decoration: none; }







.account-password-panel { grid-column: auto; }







.account-loader-panel { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease; }

.account-loader-panel:hover { transform: translateY(-4px); border-color: rgba(99, 123, 245, 0.38); box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45), 0 0 20px rgba(99, 123, 245, 0.15); }

.unused { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: radial-gradient(ellipse at top right,#637bf51a,transparent 70%),#131722; }







.loader-symbol { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: rgba(99, 123, 245, 0.12); border: 1px solid rgba(99, 123, 245, 0.28); color: #8fa2ff; margin-bottom: 20px; box-shadow: 0 4px 18px rgba(99, 123, 245, 0.15); transition: all 0.25s ease; }







.loader-symbol svg { display: block; width: 24px; height: 24px; stroke: #8fa2ff; filter: drop-shadow(0 2px 8px rgba(99, 123, 245, 0.45)); transition: transform 0.25s ease, stroke 0.25s ease; }







.account-loader-panel:hover .loader-symbol { background: rgba(99, 123, 245, 0.22); border-color: rgba(99, 123, 245, 0.45); transform: translateY(-2px); }







.account-loader-panel:hover .loader-symbol svg { stroke: #c0ccff; transform: translateY(-3px); }







.account-loader-panel h2 { margin-bottom: 12px; }







.loader-download { display: inline-flex; align-items: center; justify-content: center; min-height: 43px; padding: 0 28px; margin-top: 14px; text-decoration: none; font-weight: 700; }







.loader-download[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }







.loader-status { margin: 14px 0 0; font-size: 12px; }







.account-password-panel form { max-width: 440px; }







.account-logout:disabled, .simple-btn:disabled { opacity: .6; cursor: wait; }















/* Subscriptions list */







.subscriptions-list { display: flex; flex-direction: column; gap: 14px; }







.subscriptions-list[hidden] { display: none; }







.sub-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }







.sub-card-header { display: flex; justify-content: space-between; align-items: center; }







.sub-card-title { font-weight: 800; font-size: 16px; color: #fff; }







.sub-card-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(90, 230, 150, 0.12); color: #5ae696; border: 1px solid rgba(90, 230, 150, 0.25); }







.sub-card-details { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13px; color: #8c99b1; }







.sub-card-details span { color: #dce3f3; font-weight: 600; }







.sub-card-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.05); }







.sub-btn-hwid { padding: 6px 14px; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; color: #cbd5e1; cursor: pointer; transition: all .2s; }







.sub-btn-hwid:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }















@media(max-width:700px) {







    .account-grid { grid-template-columns: 1fr; }







    .account-panel { padding: 20px; }







    .account-heading { align-items: flex-start; }







    .account-heading h1 { font-size: 28px; }







    .sub-card-details { grid-template-columns: 1fr; }







}















.account-activation-panel { grid-column: 1/-1; }







.account-activation-panel label { display:block; color:#bac5dc; font-size:13px; margin-bottom:10px; }







.activation-controls { display:flex; gap:12px; max-width:620px; margin-bottom:14px; }







.activation-controls input { flex:1; min-width:0; min-height:44px; border-radius:8px; text-transform:uppercase; letter-spacing:2px; }







.activation-controls button { padding:0 26px; cursor:pointer; }







@media(max-width:500px) { .activation-controls { flex-direction:column; } .activation-controls button { min-height:44px; } }

.account-heading-actions { display: flex; align-items: center; gap: 12px; }
.admin-panel-btn {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(168, 85, 247, 0.25));
    border: 1px solid rgba(99, 102, 241, 0.5);
    color: #c7d2fe !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 12px;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.admin-panel-btn:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.45), rgba(168, 85, 247, 0.45));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);
    color: #fff !important;
}
@media(max-width:600px) {
    .account-heading { flex-direction: column; align-items: flex-start; gap: 14px; }
    .account-heading-actions { width: 100%; justify-content: space-between; }
}