/* ════════════════════════════════════════════════════════════════
   TARA — Account & API Pages
   Shared styles for /register, /user_login, /account, /api_docs.
   Builds on css/tara.css variables.
   ════════════════════════════════════════════════════════════════ */

.acct-body {
    overflow: auto !important;     /* override tara.css body { overflow: hidden } */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* ─── Top bar ─────────────────────────────────────────────────── */
.acct-topbar {
    height: var(--header-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    gap: 10px;
}
.acct-toplink {
    color: var(--text-mute);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.acct-toplink:hover {
    background: var(--bg-elev-2);
    color: var(--text);
    text-decoration: none;
}

/* ─── Main area ───────────────────────────────────────────────── */
.acct-main {
    flex: 1;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 36px 20px 60px;
    position: relative;
    z-index: 1;
}

.acct-card {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 32px 28px;
    width: min(440px, 100%);
    margin: 0 auto;
}
.acct-card-wide { width: min(640px, 100%); }
.acct-card h1 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}
.acct-sub {
    color: var(--text-mute);
    font-size: 14px;
    margin-bottom: 22px;
    line-height: 1.55;
}

/* ─── Form fields ─────────────────────────────────────────────── */
.acct-form { display: flex; flex-direction: column; gap: 14px; }

.acct-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 520px) { .acct-row { grid-template-columns: 1fr; } }

.acct-field { display: flex; flex-direction: column; gap: 6px; }
.acct-field label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-mute);
}
.acct-field label .acct-hint {
    color: var(--text-faint);
    font-weight: 400;
}
.acct-field input,
.acct-field textarea,
.acct-field select {
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    padding: 11px 14px;
    outline: none;
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.acct-field textarea {
    resize: vertical;
    min-height: 110px;
    font-family: inherit;
    line-height: 1.55;
}
.acct-field input:focus,
.acct-field textarea:focus,
.acct-field select:focus {
    border-color: var(--border-strong);
    box-shadow: 0 0 0 3px rgba(232, 93, 58, 0.18);
}

/* ─── Buttons ─────────────────────────────────────────────────── */
.acct-btn,
.acct-btn-ghost {
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 18px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.1s var(--ease-out);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
}
.acct-btn          { background: var(--ember); color: #fff; }
.acct-btn:hover    { background: var(--ember-hover); }
.acct-btn:active   { transform: scale(0.98); }
.acct-btn-ghost    { background: transparent; color: var(--text); border-color: var(--border-strong); }
.acct-btn-ghost:hover { background: var(--bg-elev-2); }
.acct-btn-danger {
    background: rgba(248,113,113,0.12);
    color: var(--danger);
    border-color: rgba(248,113,113,0.30);
}
.acct-btn-danger:hover { background: rgba(248,113,113,0.20); }

/* ─── Status messages ─────────────────────────────────────────── */
.acct-err  { background: rgba(248, 113, 113, 0.10); border: 1px solid rgba(248, 113, 113, 0.25); color: var(--danger); border-radius: var(--r-md); padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.acct-info { background: rgba(59, 130, 246, 0.10);  border: 1px solid rgba(59, 130, 246, 0.25);  color: #93C5FD;     border-radius: var(--r-md); padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.acct-ok   { background: rgba(46, 205, 167, 0.10);  border: 1px solid rgba(46, 205, 167, 0.25);  color: #5BFFCF;     border-radius: var(--r-md); padding: 12px 14px; font-size: 14px; }
.acct-ok strong { color: #5BFFCF; }

.acct-tos {
    color: var(--text-faint);
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.5;
}
.acct-tos a { color: var(--text-mute); }
.acct-tos a:hover { color: var(--ember-hover); }

/* ─── Footer ──────────────────────────────────────────────────── */
.acct-footer {
    text-align: center;
    color: var(--text-faint);
    font-size: 11px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--bg);
}
.acct-footer a { color: var(--text-mute); }
.acct-footer a:hover { color: var(--ember-hover); }

/* ════════════════════════════════════════════════════════════════
   ACCOUNT DASHBOARD (account.php)
   ════════════════════════════════════════════════════════════════ */
.acct-dash {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.acct-dash h1   { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.acct-dash h2   { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.acct-dash .me  { color: var(--text-mute); font-size: 13px; }

.acct-panel {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 18px 20px;
}
.acct-panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.acct-panel-row > * { min-width: 0; }

.acct-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
@media (max-width: 640px) { .acct-stat-grid { grid-template-columns: repeat(2, 1fr); } }
.acct-stat {
    background: var(--bg-elev-2);
    border-radius: var(--r-md);
    padding: 12px 14px;
}
.acct-stat .v {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.acct-stat .l {
    color: var(--text-faint);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}

/* API key reveal banner — shown once on key creation */
.acct-key-reveal {
    background: rgba(46, 205, 167, 0.08);
    border: 1px solid rgba(46, 205, 167, 0.25);
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin-bottom: 14px;
}
.acct-key-reveal h3 {
    color: #5BFFCF;
    font-size: 14px;
    margin-bottom: 6px;
}
.acct-key-reveal p {
    color: var(--text-mute);
    font-size: 13px;
    margin-bottom: 10px;
}
.acct-key-box {
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    color: var(--text);
    word-break: break-all;
    user-select: all;
    margin-bottom: 8px;
}

/* Keys table */
.acct-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.acct-table th,
.acct-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.acct-table th {
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.acct-table tr:last-child td { border-bottom: none; }
.acct-table .keyfp {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--text);
}
.acct-table .muted   { color: var(--text-faint); }
.acct-table .revoked { color: var(--text-faint); text-decoration: line-through; }

/* ─── Danger zone (account deletion) ─────────────────────────── */
.acct-danger-panel {
    border: 1px solid rgba(248, 113, 113, 0.30) !important;
    background: rgba(248, 113, 113, 0.04) !important;
}
.acct-danger-panel h2 {
    margin-bottom: 6px;
}

/* ════════════════════════════════════════════════════════════════
   API DOCS (api_docs.php)
   ════════════════════════════════════════════════════════════════ */
.docs {
    max-width: 820px;
    margin: 0 auto;
    line-height: 1.65;
}
.docs h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.docs .lede { color: var(--text-mute); font-size: 16px; margin-bottom: 30px; }
.docs h2 { font-size: 18px; font-weight: 600; margin: 32px 0 10px; }
.docs h3 { font-size: 15px; font-weight: 600; margin: 22px 0 8px; }
.docs p, .docs li { color: var(--text); font-size: 14px; }
.docs ul { padding-left: 22px; margin-bottom: 12px; }
.docs li { margin: 4px 0; }
.docs code {
    background: var(--bg-elev-2);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.88em;
    color: #FFD4B8;
}
.docs pre {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    padding: 14px 16px;
    border-radius: var(--r-md);
    overflow-x: auto;
    font-size: 12.5px;
    line-height: 1.6;
    margin: 10px 0;
}
.docs pre code { background: transparent; color: var(--text); padding: 0; font-size: inherit; }
.docs .tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-faint);
    border: 1px solid var(--border);
    margin-right: 6px;
}
.docs .ember { color: var(--ember-hover); }
.docs hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }