/* Platform account pages (profile, change password) — themed via --pp-* tokens
   so they match the rest of the console in light, dark, dracula, gruvbox. */
.acct-body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--pp-app-bg, #f4f7fb) !important;
    color: var(--pp-text, #172033);
    position: relative;
    overflow-x: hidden;
}
/* soft brand aurora, kept subtle */
.acct-body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(60% 55% at 15% -5%, color-mix(in srgb, var(--pp-accent, #6366f1) 16%, transparent), transparent 70%),
        radial-gradient(55% 50% at 100% 0%, color-mix(in srgb, #8b5cf6 14%, transparent), transparent 68%);
    opacity: .8;
}

.acct-main { position: relative; z-index: 1; }
/* Keep the top bar (and its theme-picker dropdown) above the card below it. */
.acct-top { position: relative; z-index: 50; }
.acct-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
}
.acct-brand-min { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; letter-spacing: -.01em; color: var(--pp-text, #172033); text-decoration: none; }
.acct-top-actions { display: inline-flex; align-items: center; gap: .5rem; }
.acct-back {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .4rem .8rem; border-radius: 10px;
    border: 1px solid var(--pp-border, #e3e9f1);
    background: var(--pp-surface, #fff); color: var(--pp-text, #334155);
    font-size: .82rem; font-weight: 600; text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}
.acct-back:hover { border-color: var(--pp-accent, #6366f1); color: var(--pp-text, #172033); }

.acct-main { flex: 1; display: grid; place-items: start center; padding: 1.5rem 1.25rem 3rem; }

.acct-card {
    width: min(480px, 100%);
    background: var(--pp-surface, #fff);
    border: 1px solid var(--pp-border, #e3e9f1);
    border-radius: 20px;
    box-shadow: 0 24px 50px color-mix(in srgb, var(--pp-shadow-color, rgba(15,23,42,.16)) 90%, transparent);
    padding: 1.8rem;
    animation: acct-rise .5s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes acct-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.acct-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.4rem; }
.acct-avatar {
    flex: 0 0 auto;
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--pp-accent, #6366f1), #8b5cf6);
    color: #fff; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--pp-accent, #6366f1) 35%, transparent);
}
.acct-avatar.is-key { font-size: 1.4rem; }
.acct-head-copy { min-width: 0; }
.acct-eyebrow { color: var(--pp-accent, #4f46e5); font-size: .66rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.acct-title { margin: .15rem 0 0; font-size: 1.35rem; font-weight: 850; letter-spacing: -.02em; line-height: 1.1; color: var(--pp-text, #172033); }
.acct-sub { margin: .25rem 0 0; color: var(--pp-text-muted, #64748b); font-size: .84rem; line-height: 1.45; }

.acct-alert {
    display: flex; align-items: flex-start; gap: .55rem;
    padding: .7rem .85rem; margin-bottom: 1.1rem;
    border-radius: 12px; font-size: .85rem; line-height: 1.45;
    border: 1px solid transparent;
}
.acct-alert i { flex: 0 0 auto; margin-top: .1rem; }
.acct-alert.is-success { background: color-mix(in srgb, #10b981 14%, var(--pp-surface, #fff)); border-color: color-mix(in srgb, #10b981 40%, transparent); color: color-mix(in srgb, #047857 80%, var(--pp-text)); }
.acct-alert.is-error { background: color-mix(in srgb, #ef4444 12%, var(--pp-surface, #fff)); border-color: color-mix(in srgb, #ef4444 40%, transparent); color: color-mix(in srgb, #b91c1c 80%, var(--pp-text)); }
.acct-alert.is-info { background: color-mix(in srgb, var(--pp-accent, #4f46e5) 10%, var(--pp-surface, #fff)); border-color: color-mix(in srgb, var(--pp-accent, #4f46e5) 34%, transparent); color: var(--pp-text, #172033); }
/* native select styled as an acct-input */
select.acct-input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6l3.5 3.5L11.5 6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2.2rem; cursor: pointer; }

.acct-field { margin-bottom: 1.05rem; }
.acct-label { display: block; margin-bottom: .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--pp-text-muted, #64748b); }
.acct-inputwrap { position: relative; }
.acct-input {
    width: 100%;
    height: 44px;
    padding: 0 .9rem;
    border: 1px solid var(--pp-border, #e3e9f1);
    border-radius: 11px;
    background: var(--pp-input-bg, #fff);
    color: var(--pp-text, #172033);
    font: inherit; font-size: .9rem;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.acct-inputwrap .acct-input { padding-right: 2.6rem; }
.acct-input::placeholder { color: var(--pp-text-muted, #94a3b8); }
.acct-input:focus { outline: none; border-color: var(--pp-accent, #6366f1); box-shadow: 0 0 0 3px var(--pp-accent-soft, #eef2ff); }
.acct-input:disabled { background: var(--pp-surface-muted, #f1f5f9); color: var(--pp-text-muted, #64748b); cursor: not-allowed; }
.acct-eye {
    position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; display: grid; place-items: center;
    border: 0; border-radius: 8px; background: transparent;
    color: var(--pp-text-muted, #94a3b8); cursor: pointer; font-size: 1rem;
    transition: color .15s ease, background .15s ease;
}
.acct-eye:hover { color: var(--pp-accent, #6366f1); background: var(--pp-surface-muted, #f1f5f9); }
.acct-hint { display: flex; align-items: center; gap: .3rem; margin-top: .35rem; font-size: .74rem; color: var(--pp-text-muted, #94a3b8); }

/* password strength meter */
.acct-strength { margin-top: .55rem; }
.acct-strength-track { height: 6px; border-radius: 999px; background: var(--pp-surface-muted, #eef1f6); overflow: hidden; }
.acct-strength-bar { height: 100%; width: 0; border-radius: 999px; background: #ef4444; transition: width .25s ease, background .25s ease; }
.acct-strength-label { margin-top: .3rem; font-size: .74rem; font-weight: 600; color: var(--pp-text-muted, #94a3b8); }
.acct-match { display: none; align-items: center; gap: .3rem; margin-top: .35rem; font-size: .74rem; font-weight: 600; }
.acct-match.show { display: flex; }
.acct-match.ok { color: #10b981; }
.acct-match.bad { color: #ef4444; }

.acct-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.35rem; }
.acct-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    height: 44px; padding: 0 1.15rem;
    border-radius: 11px; border: 1px solid transparent;
    font: inherit; font-size: .88rem; font-weight: 700; text-decoration: none; cursor: pointer;
    transition: transform .12s ease, filter .15s ease, background .15s ease, border-color .15s ease;
}
.acct-btn:active { transform: translateY(1px); }
.acct-btn-primary { background: linear-gradient(135deg, var(--pp-accent, #4f46e5), #8b5cf6); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--pp-accent, #4f46e5) 30%, transparent); }
.acct-btn-primary:hover { filter: brightness(1.05); }
.acct-btn-ghost { background: var(--pp-surface, #fff); border-color: var(--pp-border, #e3e9f1); color: var(--pp-text, #334155); }
.acct-btn-ghost:hover { border-color: var(--pp-accent, #6366f1); color: var(--pp-text, #172033); }

.acct-foot { position: relative; z-index: 1; text-align: center; padding: 0 1.25rem 1.5rem; color: var(--pp-text-muted, #94a3b8); font-size: .74rem; }

@media (max-width: 520px) {
    .acct-card { padding: 1.35rem; border-radius: 16px; }
    .acct-actions .acct-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .acct-card { animation: none; }
    .acct-input, .acct-btn, .acct-back, .acct-eye, .acct-strength-bar { transition: none; }
}
