/* =========================
   MY ACCOUNT / PANEL PAGES
   (extracted from the loksewastore.com/design/ myaccount.php reference,
   which had this inline - kept verbatim, plus a small addition at the
   bottom for real <a> nav links instead of the reference's JS-only
   <button> tabs, since each tab here is its own page/route.)
========================= */

.account-page {
    padding: 60px 0;
    background: #f5f8ff;
    min-height: 600px;
}

.account-wrapper {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}


/* =========================
   SIDEBAR / TABS
========================= */

.account-sidebar {
    width: 260px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    flex-shrink: 0;
}

.account-user {
    background: #00288e;
    padding: 25px 20px;
    color: #ffffff;
}

.account-user h3 {
    margin: 0 0 5px;
    font-size: 20px;
}

.account-user p {
    margin: 0;
    font-size: 14px;
    opacity: 0.8;
}

.account-tabs {
    list-style: none;
    padding: 10px 0;
    margin: 0;
}

.account-tabs li {
    margin: 0;
}

.account-tabs button {
    width: 100%;
    border: none;
    background: transparent;
    padding: 15px 20px;
    text-align: left;
    cursor: pointer;
    font-size: 15px;
    color: #333;
    transition: 0.3s;
    border-left: 4px solid transparent;
}

.account-tabs button:hover {
    background: #f2f6ff;
    color: #00288e;
}

.account-tabs button.active {
    background: #f2f6ff;
    color: #00288e;
    font-weight: 600;
    border-left-color: #00288e;
}


/* =========================
   CONTENT
========================= */

.account-content {
    flex: 1;
    background: #ffffff;
    border-radius: 12px;
    padding: 35px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    min-height: 500px;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.tab-content h2 {
    margin-top: 0;
    color: #00288e;
    font-size: 26px;
    margin-bottom: 10px;
}

.tab-content > p {
    color: #666;
    margin-bottom: 25px;
}


/* =========================
   INFO CARD
========================= */

.account-card {
    background: #f8faff;
    border: 1px solid #e4eaff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
}

.account-card h4 {
    margin: 0 0 8px;
    color: #00288e;
}

.account-card p {
    margin: 0;
    color: #666;
    font-size: 14px;
}


/* =========================
   TABLE
========================= */

.account-table {
    width: 100%;
    border-collapse: collapse;
}

.account-table th {
    background: #00288e;
    color: #ffffff;
    padding: 13px;
    text-align: left;
    font-size: 14px;
}

.account-table td {
    padding: 13px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #555;
}

.account-table tr:hover td {
    background: #f8faff;
}


/* =========================
   STATUS
========================= */

.status {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-success {
    background: #e8f7ee;
    color: #198754;
}

.status-pending {
    background: #fff5d6;
    color: #b58105;
}

/* Addition: the reference only defined success/pending - rejected
   submissions need a third state, same visual language (pill, muted bg). */
.status-danger {
    background: #fde8e8;
    color: #dc3545;
}

/* Addition: a neutral state (draft, archived, inactive) distinct from the
   amber "pending" pill - those mean "waiting on something", this means
   "not currently live", different enough to warrant its own color. */
.status-muted {
    background: #eef1f5;
    color: #667;
}


/* =========================
   REFERRAL
========================= */

.referral-box {
    background: #f2f6ff;
    border: 2px dashed #00288e;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
}

.referral-code {
    display: inline-block;
    margin: 20px 0;
    padding: 15px 30px;
    background: #ffffff;
    border: 1px solid #ccd7ff;
    border-radius: 8px;
    color: #00288e;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 2px;
}


/* =========================
   BUTTON
========================= */

.account-btn {
    display: inline-block;
    padding: 11px 22px;
    background: #00288e;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
}

.account-btn:hover {
    opacity: 0.9;
}


/* =========================
   RESPONSIVE
========================= */

@media(max-width: 768px) {

    .account-wrapper {
        flex-direction: column;
    }

    .account-sidebar {
        width: 100%;
    }

    .account-tabs {
        display: flex;
        overflow-x: auto;
        padding: 0;
    }

    .account-tabs li {
        flex-shrink: 0;
    }

    .account-tabs button {
        border-left: none;
        border-bottom: 3px solid transparent;
    }

    .account-tabs button.active {
        border-left: none;
        border-bottom-color: #00288e;
    }

    .account-content {
        width: 100%;
        padding: 20px;
    }

    .account-table {
        min-width: 600px;
    }

}


/* =========================
   SIDEBAR NAV LINKS
   (addition: the reference's tabs are JS-only <button data-tab>
   elements switching hidden divs on one page. Every tab here is a real
   route/page instead - same look, driven by <a>, active state set by
   the current route rather than JS.)
========================= */

.account-tabs a.tab-btn {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    padding: 15px 20px;
    text-align: left;
    cursor: pointer;
    font-size: 15px;
    color: #333;
    text-decoration: none;
    transition: 0.3s;
    border-left: 4px solid transparent;
}

.account-tabs a.tab-btn:hover {
    background: #f2f6ff;
    color: #00288e;
}

.account-tabs a.tab-btn.active {
    background: #f2f6ff;
    color: #00288e;
    font-weight: 600;
    border-left-color: #00288e;
}

@media (max-width: 768px) {
    .account-tabs a.tab-btn {
        border-left: none;
        border-bottom: 3px solid transparent;
    }

    .account-tabs a.tab-btn.active {
        border-left: none;
        border-bottom-color: #00288e;
    }
}


/* =========================
   TUTOR / ADMIN ADDITIONS
   (small extras the reference page never needed - CRUD toolbars, compact
   row-action buttons, an inline add/edit form box. Same visual language
   as .account-btn / .account-card / .status, not a new design system.)
========================= */

.panel-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.panel-toolbar .form-group {
    margin-bottom: 0;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 13px;
}

.btn-secondary {
    background: #eef1f8;
    color: #333;
}

.btn-danger {
    background: #dc3545;
}

.btn-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.inline-form {
    background: #f8faff;
    border: 1px solid #e4eaff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.inline-form .form-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.inline-form .form-row .form-group {
    flex: 1;
    min-width: 180px;
}

.field-error {
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
}

.panel-error {
    background: #fde8e8;
    color: #dc3545;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 15px;
    font-size: 14px;
}

.panel-success {
    background: #e8f7ee;
    color: #198754;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 15px;
    font-size: 14px;
}

.panel-empty {
    color: #888;
    padding: 20px 0;
}

.pagination-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    font-size: 14px;
    color: #555;
}


/* =========================
   DASHBOARD STAT CARDS
========================= */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin: 20px 0 25px;
}

.stat-card {
    background: #f8faff;
    border: 1px solid #e4eaff;
    border-radius: 10px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stat-label {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #00288e;
}

.stat-sub {
    font-size: 12px;
    color: #888;
}

/* Cards that double as links through to the matching section. */
a.stat-link {
    text-decoration: none;
    transition: 0.2s;
}

a.stat-link:hover {
    border-color: #00288e;
    box-shadow: 0 4px 12px rgba(0, 40, 142, 0.10);
    transform: translateY(-2px);
}

.dash-heading {
    color: #00288e;
    margin: 28px 0 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e4eaff;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}


/* =========================
   MOBILE / NARROW VIEWPORT
   The panel shell already stacks below 768px (see the earlier media
   query). These are the pieces that still broke at phone width.
========================= */

@media (max-width: 768px) {
    .account-page {
        padding: 25px 0;
    }

    .account-content {
        padding: 18px;
    }

    .account-content h2 {
        font-size: 21px;
    }

    /* Toolbars and form rows were laying out side-by-side and overflowing;
       stack them and let every control use the full width. */
    .panel-toolbar,
    .panel-toolbar .form-row,
    .inline-form .form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .panel-toolbar .form-group,
    .inline-form .form-row .form-group {
        min-width: 0;
        width: 100%;
    }

    .stat-grid {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 10px;
    }

    .stat-card {
        padding: 14px;
    }

    .stat-value {
        font-size: 20px;
    }

    /* Row-action buttons wrapped awkwardly mid-word at narrow widths. */
    .btn-row .account-btn {
        flex: 1 1 auto;
        text-align: center;
        white-space: nowrap;
    }

    .pagination-bar {
        gap: 10px;
        flex-wrap: wrap;
    }
}

/* Phone width: turn the wide data tables into stacked cards instead of
   forcing a horizontal scroll through 6 columns. Each cell's header comes
   from the data-label attribute on the <td>. */
@media (max-width: 560px) {
    .account-table,
    .account-table thead,
    .account-table tbody,
    .account-table tr,
    .account-table td {
        display: block;
        width: 100%;
    }

    .account-table thead {
        display: none;
    }

    .account-table {
        min-width: 0;
    }

    .account-table tr {
        background: #fff;
        border: 1px solid #e4eaff;
        border-radius: 10px;
        margin-bottom: 12px;
        padding: 6px 0;
    }

    .account-table td {
        border-bottom: none;
        padding: 8px 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        text-align: right;
    }

    .account-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #00288e;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        text-align: left;
        flex-shrink: 0;
    }

    /* An empty data-label (action cells) shouldn't reserve header space. */
    .account-table td[data-label=""]::before {
        content: none;
    }

    .account-table td[data-label=""] {
        justify-content: flex-start;
    }

    .account-table tr:hover td {
        background: transparent;
    }
}


/* =========================================================================
   DESIGN REFRESH — PANEL SURFACES

   panel.css is loaded after style.css on every page, so these rules live
   here rather than in the style.css refresh block: put in style.css they
   would be overridden by the older declarations above.
========================================================================= */


/* -------------------------------------------------------------------------
   STATUS PILLS
------------------------------------------------------------------------- */

.status {
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.status-success { background: var(--success-soft); color: var(--success); }
.status-pending { background: var(--warning-soft); color: var(--warning); }
.status-danger  { background: var(--danger-soft);  color: var(--danger); }
.status-muted   { background: #eef1f7;             color: var(--text-light); }


/* -------------------------------------------------------------------------
   TABLES
   A dark-blue header bar on every panel table made the data compete with
   its own column labels. Quiet header, readable rows, hover doing the work.
------------------------------------------------------------------------- */

.account-table {
    border-collapse: separate;
    border-spacing: 0;
}

.account-table th {
    background: var(--surface-sunken);
    color: var(--text-light);
    padding: 11px 14px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.account-table th:first-child { border-top-left-radius: var(--radius-sm); }
.account-table th:last-child  { border-top-right-radius: var(--radius-sm); }

.account-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    color: var(--text-body);
    vertical-align: middle;
}

.account-table tr:hover td {
    background: var(--surface-sunken);
}

.account-table tbody tr:last-child td {
    border-bottom: none;
}


/* -------------------------------------------------------------------------
   PANEL SHELL
------------------------------------------------------------------------- */

.account-page {
    background: var(--sky-light);
}

.account-sidebar,
.account-content {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.account-user {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    padding: 24px 20px;
}

.account-user h3 {
    color: var(--white);
    font-size: 17px;
}

.account-user p {
    font-size: 13px;
    opacity: 0.75;
}

.account-tabs {
    padding: 8px;
}

.account-tabs a.tab-btn {
    padding: 10px 14px;
    margin-bottom: 2px;
    border-left: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-body);
    transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

.account-tabs a.tab-btn:hover {
    background: var(--surface-sunken);
    color: var(--primary-color);
}

.account-tabs a.tab-btn.active {
    background: var(--primary-light);
    color: var(--primary-color);
    font-weight: 600;
    border-left: none;
}

.account-content h2 {
    font-size: 23px;
    margin-bottom: 6px;
}

.account-card {
    background: var(--surface-sunken);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    margin-bottom: 14px;
}

.account-card h4 {
    color: var(--primary-color);
    font-size: 15px;
    margin-bottom: 6px;
}


/* -------------------------------------------------------------------------
   DASHBOARD STAT CARDS
------------------------------------------------------------------------- */

.stat-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    padding: 18px 20px;
    transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease),
        border-color var(--speed) var(--ease);
}

.stat-label {
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: var(--text-light);
    font-weight: 600;
}

.stat-value {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-dark);
}

.stat-sub {
    font-size: 12px;
    color: var(--text-light);
}

a.stat-link:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
}

.dash-heading {
    color: var(--text-light);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    margin: 22px 0 0;
}


/* -------------------------------------------------------------------------
   PANEL MESSAGES + TOOLBAR
------------------------------------------------------------------------- */

.panel-error,
.panel-success {
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    padding: 11px 15px;
    font-size: 14px;
    font-weight: 500;
}

.panel-error {
    background: var(--danger-soft);
    border-color: rgba(198, 40, 63, 0.18);
    color: var(--danger);
}

.panel-success {
    background: var(--success-soft);
    border-color: rgba(18, 138, 90, 0.18);
    color: var(--success);
}

.panel-empty {
    color: var(--text-light);
    font-size: 14.5px;
}

.inline-form {
    background: var(--surface-sunken);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 22px;
}

.pagination-bar {
    gap: 12px;
    font-size: 13.5px;
    color: var(--text-light);
}


/* -------------------------------------------------------------------------
   PANEL TABS ON A PHONE
   The sidebar becomes a horizontal tab strip below 768px. It scrolls, but
   the native scrollbar sat under the tabs and read as a stray grey bar.
   Hide the bar, keep the scrolling, and snap so a tab never half-shows.
------------------------------------------------------------------------- */

/* The toggle only exists on phones. */
.panel-nav-toggle {
    display: none;
}

@media (max-width: 768px) {
    .account-sidebar {
        overflow: hidden;
    }

    .panel-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 13px 18px;
        border: none;
        border-top: 1px solid var(--border-color);
        background: var(--white);
        color: var(--primary-color);
        font-family: inherit;
        font-size: 14.5px;
        font-weight: 600;
        cursor: pointer;
    }

    .panel-nav-chevron {
        width: 18px;
        height: 18px;
        transition: transform var(--speed) var(--ease);
    }

    .panel-nav-chevron.is-open {
        transform: rotate(180deg);
    }

    /* The wrapper dissolves so the identity block and the tab list become
       direct flex children of the sidebar, and `order` can put the toggle
       between them - the name stays visible while the links collapse. */
    .panel-nav-body {
        display: contents;
    }

    .account-user     { order: 0; }
    .panel-nav-toggle { order: 1; }
    .account-tabs     { order: 2; }

    /* Collapsed by default: twelve admin links stacked above the content
       would push the page itself most of a screen down. */
    .account-tabs {
        display: block;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
        transition: max-height 0.25s var(--ease), padding 0.25s var(--ease);
    }

    .account-sidebar.nav-expanded .account-tabs {
        /* Comfortably clears the longest rail (12 items); the list is never
           this tall, so it reads as "to content height". */
        max-height: 680px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .account-tabs li {
        flex-shrink: 1;
    }

    .account-tabs a.tab-btn {
        white-space: normal;
        border-bottom: none;
        border-radius: var(--radius-sm);
        padding: 11px 14px;
    }

    .account-tabs a.tab-btn.active {
        border-bottom: none;
    }
}


/* -------------------------------------------------------------------------
   PANEL WIDTH

   Panels were capped at the same 1200px .container the marketing pages use,
   with a 260px sidebar eating into it. That left the working area around
   900px, which pushed dashboard cards into two-line labels and turned every
   admin table into a scroll. Panels get the screen; marketing pages keep
   their reading measure.
------------------------------------------------------------------------- */

.account-page > .container {
    width: 94%;
    max-width: 1560px;
}

/* Fill the window. A short page (four sidebar links, one small table) used
   to leave the panel cards floating in the top third with dead space down to
   the footer. Both columns now run from under the header to just above it. */
.account-page {
    padding: 28px 0 40px;
    min-height: calc(100vh - var(--header-h));
    display: flex;
}

.account-page > .container {
    display: flex;
}

.account-wrapper {
    gap: 22px;
    flex: 1;
    align-items: stretch;
}

.account-sidebar {
    width: 236px;
    /* Stretches to match the content column, so the two cards end level.
       The nav inside it is what sticks, not the card - a rail that scrolls
       away on a long table is worse than one that stays. */
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.account-tabs {
    position: sticky;
    top: calc(var(--header-h) + 14px);
}

.account-content {
    display: flex;
    flex-direction: column;
}

.account-content {
    padding: 28px 30px;
    min-height: auto;
}


/* -------------------------------------------------------------------------
   STAT CARDS

   150px columns wrapped "Rs. 2010.00" onto two lines and stacked the label
   above it. Wider floor, tabular figures so columns of numbers line up, and
   the label on one line.
------------------------------------------------------------------------- */

/* Six across instead of four, so each group is one row rather than two and
   the whole dashboard fits without scrolling on a laptop. */
.stat-grid {
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 14px;
    margin: 14px 0 4px;
}

.stat-card {
    gap: 3px;
    padding: 15px 16px;
    min-width: 0;
}

/* Labels wrap to a second line rather than truncating - "Payouts Awaiting
   Review" should stay readable. The reserved height keeps every value in a
   row on the same baseline whether its label wrapped or not. */
.stat-label {
    line-height: 1.3;
    min-height: 30px;
}

.stat-value {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}


/* -------------------------------------------------------------------------
   SIDEBAR ICONS
   Emoji rendered at whatever size and colour the OS felt like, so the rail
   read as a row of mismatched stickers. Replaced with inline SVG, sized and
   coloured by the tab itself.
------------------------------------------------------------------------- */

.account-tabs a.tab-btn {
    display: flex;
    align-items: center;
    gap: 11px;
}

.tab-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    opacity: 0.75;
    transition: opacity var(--speed) var(--ease);
}

.account-tabs a.tab-btn.active .tab-icon,
.account-tabs a.tab-btn:hover .tab-icon {
    opacity: 1;
}


@media (max-width: 992px) {
    .account-sidebar {
        position: static;
    }

    .account-tabs {
        position: static;
    }
}


/* -------------------------------------------------------------------------
   FILTER TOOLBARS

   .form-row only received `display: flex` when nested inside .inline-form,
   so the same markup used in a .panel-toolbar fell back to block and stacked
   every filter onto its own full-width row - three selects and a button
   eating ~150px of vertical space before the table even started.
------------------------------------------------------------------------- */

.form-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.form-row > .form-group {
    flex: 1 1 170px;
    min-width: 0;
    margin-bottom: 0;
}

.panel-toolbar {
    align-items: flex-end;
    margin-bottom: 18px;
}

.panel-toolbar .form-group {
    margin-bottom: 0;
}

/* Toolbar controls are self-evident from their placeholder or first option;
   a label above each one would add another line for nothing. */
.panel-toolbar .form-group label {
    font-size: 12px;
    color: var(--text-light);
}

@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .form-row > .form-group {
        flex: 1 1 auto;
        width: 100%;
    }
}


/* -------------------------------------------------------------------------
   CONFIRM DIALOG

   Replaces native confirm(), which blocked the whole page, could not be
   styled, and was the one piece of UI that still looked like the browser
   rather than the product.
------------------------------------------------------------------------- */

.confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(20, 28, 51, 0.5);
}

.confirm-box {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 26px 26px 20px;
}

.confirm-box h3 {
    font-size: 18px;
    letter-spacing: -0.02em;
    margin: 0;
}

.confirm-box p {
    margin: 10px 0 0;
    color: var(--text-light);
    font-size: 14.5px;
    line-height: 1.65;
}

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

/* Scale-in rather than a plain fade: the box should feel like it came from
   the button that opened it. */
.confirm-enter {
    animation: confirm-in 0.16s var(--ease);
}

@keyframes confirm-in {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
    .confirm-actions {
        flex-direction: column-reverse;
    }

    .confirm-actions .account-btn {
        width: 100%;
    }
}