/* Log in page (profile-code login). Loaded after market.css. */

.pl-page {
    display: flex;
    justify-content: center;
    padding: 56px 18px 80px;
    min-height: calc(100vh - 260px);
}

.pl-card {
    width: 100%;
    max-width: 520px;
    height: fit-content;
    padding: 30px 28px 26px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.pl-card h1 { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.pl-sub { color: var(--text-dim); font-size: 14px; line-height: 1.6; margin-bottom: 22px; }
.pl-sub strong { color: var(--text); }
.pl-loading { color: var(--text-muted); text-align: center; padding: 30px 0; }
.pl-note { color: var(--text-dim); }

.pl-label { display: block; margin-bottom: 7px; font-size: 12.5px; font-weight: 700; color: var(--text-dim); }

.pl-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    color: var(--text);
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.pl-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.pl-btn { width: 100%; margin-top: 16px; padding: 13px 18px; font-size: 14.5px; }
.pl-btn:disabled { opacity: 0.7; cursor: wait; }

.pl-msg {
    margin-top: 14px;
    padding: 10px 13px;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 10px;
    color: var(--text-dim);
    background: var(--bg-2);
    border: 1px solid var(--border);
}
.pl-msg.is-bad { color: #ff9b9b; background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); }
.pl-msg.is-warn { color: #ffc65a; background: rgba(245, 166, 35, 0.1); border-color: rgba(245, 166, 35, 0.32); }

.pl-fine { margin-top: 16px; text-align: center; font-size: 12px; color: var(--text-muted); }

.pl-link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.pl-link:hover { text-decoration: underline; }

.pl-steps { list-style: none; counter-reset: pl; display: grid; gap: 16px; margin: 0 0 4px; padding: 0; }
.pl-steps li { position: relative; display: grid; gap: 10px; padding-left: 40px; font-size: 13.5px; line-height: 1.55; color: var(--text-dim); }
.pl-steps li::before {
    counter-increment: pl;
    content: counter(pl);
    position: absolute;
    left: 0;
    top: -1px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--accent);
    background: var(--accent-soft);
}
.pl-steps strong { color: var(--text); }

.pl-code-row { display: flex; align-items: stretch; gap: 8px; }
.pl-code {
    flex: 1;
    min-width: 0;
    padding: 11px 13px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--text);
    background: var(--bg-2);
    border: 1px dashed var(--accent);
    border-radius: 10px;
    overflow-wrap: anywhere;
    user-select: all;
}
.pl-copy { flex-shrink: 0; }
.pl-open { justify-self: start; }

.pl-done { text-align: center; padding: 10px 0 4px; }
.pl-done > i { font-size: 44px; color: var(--green); margin-bottom: 14px; }
.pl-done .pl-sub { margin-bottom: 0; }
.pl-actions { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }

@media (max-width: 520px) {
    .pl-page { padding-top: 28px; }
    .pl-card { padding: 22px 18px; }
    .pl-code-row { flex-direction: column; }
}