/* Dashboard: a two-column grid of blue-outlined cards, sitting on the
           standard site shell (navbar + footer). Each column stacks its cards
           vertically; the whole grid collapses to one column on mobile. */
        /* White text on the black shell (like the site's c-white pages), and
           enough top clearance so the fixed navbar never covers the heading /
           logout. Both were dropped when this page moved onto the site shell. */
        .account-wrap { color: #fff; padding: 7.5rem 0 1rem; }
        @media (max-width: 767px) { .account-wrap { padding-top: 4.5rem; } }
        .account-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
        .account-header h1 { color: #fff; margin: 0; }
        .network-status-line { margin: 10px 0 0; }

        .account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-top: 16px; }
        .account-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
        @media (max-width: 767px) { .account-grid { grid-template-columns: 1fr; gap: 20px; } }

        .account-card { background: #0d0d0d; border: 1px solid #1f2a44; border-radius: 12px; padding: 22px; margin: 0; }
        .account-card h2 { color: #fff; }
        .account-card label { display: block; margin-top: 12px; color: #fff; font-weight: 500; }
        .account-field { width: 100%; padding: 11px; margin: 6px 0; border-radius: 8px; border: 1px solid #2a3550; background: #000; color: #fff; }
        .account-field::placeholder { color: #8a93a6; }
        .account-field:focus { outline: none; border-color: #165df5; }
        .account-btn { padding: 11px 18px; margin-top: 8px; border-radius: 8px; border: 0; background: #165df5; color: #fff; font-weight: 600; cursor: pointer; }
        .account-btn:hover { background: #1351d8; }
        .account-link { background: none; border: 0; color: #4f8cff; cursor: pointer; text-decoration: underline; }
        .account-error { color: #ff6b6b; min-height: 1.2em; }
        .account-ok { color: #2ecc71; min-height: 1.2em; }
        .account-hint { color: #cdd4e0; font-size: .9em; }
        .account-table { width: 100%; border-collapse: collapse; color: #fff; }
        .account-table th, .account-table td { text-align: left; padding: 8px; border-bottom: 1px solid #1f2a44; }
        /* Retention date under the product name; quiet by design, it is a reassurance
           rather than an action. Absent entirely when the server sends no date. */
        .account-deletion { font-size: 12px; color: #9aa4b8; margin-top: 3px; }
        /* Warranty end date, same quiet weight as the retention line above it but
           in the brand blue: this one is an entitlement the customer HAS, not a
           notice about data going away. */
        .account-warranty { font-size: 12px; color: #4d8bf5; margin-top: 3px; }
        .confirm-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.8); align-items: center; justify-content: center; z-index: 1100; }
        .confirm-overlay.is-open { display: flex; }
        .confirm-box { background: #0d0d0d; border: 1px solid #1f2a44; border-radius: 12px; padding: 24px; max-width: 360px; width: 90%; }
        .account-btn--danger { background: #b3261e; }
        .account-btn--danger:hover { background: #9a2019; }
        .twofa-view { margin-top: 8px; }
        .twofa-qr { display: block; margin: 12px auto; width: 200px; height: 200px; background: #fff; border-radius: 8px; }
        .twofa-manual { font-family: monospace; word-break: break-all; background: #000; border: 1px dashed #2a3550; padding: 10px; border-radius: 8px; color: #fff; }
        .recovery-list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
        .recovery-list li { font-family: monospace; background: #000; border: 1px solid #1f2a44; border-radius: 6px; padding: 8px; text-align: center; color: #fff; }