/* ===================================================================
   RENTALS HUB — ACCOUNT
   Pixel truth: rental-design-zip/rental-hub/Account.dc.html.
   Tokens + base + bottom nav + bottom sheet come from app.css.
   =================================================================== */

.vm-account {
    background: var(--vm-canvas);
    padding-bottom: 96px;
}

/* ---- Green header ---- */
.vm-acc-header {
    background: linear-gradient(135deg, var(--vm-primary) 0%, var(--vm-primary-dark) 100%);
    padding: 20px 20px 52px;
}
.vm-acc-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.vm-acc-header-row h1 {
    margin: 0;
    font-family: var(--vm-font-display);
    font-weight: 700;
    font-size: 22px;
    color: #fff;
}
.vm-acc-gear {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Profile card ---- */
.vm-acc-profile-card {
    margin: -36px 16px 0;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    overflow: hidden;
}
.vm-acc-profile-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px;
}
.vm-acc-avatar-slot img,
.vm-acc-avatar-slot .vm-acc-avatar-fallback {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}
.vm-acc-avatar-slot .vm-acc-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
}
.vm-acc-profile-main { flex: 1; min-width: 0; }
.vm-acc-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.vm-acc-name {
    font-family: var(--vm-font-display);
    font-weight: 700;
    font-size: 16.5px;
    color: var(--vm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vm-acc-name-row .vm-verified { font-size: 13px; }
.vm-acc-sub {
    font-size: 12.5px;
    color: var(--vm-muted);
    margin-top: 2px;
}
.vm-acc-stats {
    display: flex;
    border-top: 1px solid #f2f4f6;
}
.vm-acc-stat {
    flex: 1;
    text-align: center;
    padding: 12px 0;
}
.vm-acc-stat + .vm-acc-stat { border-left: 1px solid #f2f4f6; }
.vm-acc-stat-n {
    font-family: var(--vm-font-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--vm-text);
}
.vm-acc-stat-label {
    font-size: 11px;
    color: var(--vm-muted-2);
    margin-top: 1px;
}

/* ---- Verified agent CTA ---- */
.vm-acc-agent-card {
    margin: 16px 16px 0;
    background: linear-gradient(120deg, var(--vm-tint) 0%, var(--vm-tint-soft) 100%);
    border: 1px solid #cfe9cd;
    border-radius: 18px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 13px;
}
.vm-acc-agent-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--vm-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}
.vm-acc-agent-main { flex: 1; min-width: 0; }
.vm-acc-agent-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--vm-text);
}
.vm-acc-agent-sub {
    font-size: 11.5px;
    color: #4b7a48;
    margin-top: 2px;
    line-height: 1.35;
}
.vm-acc-agent-apply {
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    background: var(--vm-primary);
    padding: 9px 15px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}
.vm-acc-agent-apply:disabled { opacity: .55; cursor: default; }

/* ---- Row groups ---- */
.vm-acc-group-label {
    margin: 24px 20px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vm-muted-2);
}
.vm-acc-group {
    margin: 0 16px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 8px 22px rgba(16, 24, 40, .06);
}
.vm-acc-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 15px;
    background: none;
    text-align: left;
    color: inherit;
    border-bottom: 1px solid #f4f6f7;
    cursor: pointer;
}
.vm-acc-row:hover { color: inherit; }
.vm-acc-group > :last-child { border-bottom: none; }
.vm-acc-row-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #f1f3f5;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.vm-acc-row-icon--green {
    background: var(--vm-tint);
    color: var(--vm-primary);
}
.vm-acc-row-text {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--vm-text);
}
.vm-acc-row-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--vm-primary-dark);
    background: var(--vm-tint);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}
.vm-acc-row-value { font-size: 12.5px; color: var(--vm-muted-2); }
.vm-acc-row-chev { color: #c7ccd1; font-size: 12px; }

/* Dimmed "Soon" rows (Saved items / My reviews — no destination in v1) */
.vm-acc-row.is-soon { cursor: default; }
.vm-acc-row.is-soon .vm-acc-row-text,
.vm-acc-row.is-soon .vm-acc-row-icon { opacity: .45; }
.vm-acc-soon {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vm-muted-2);
    background: #f1f3f5;
    border-radius: 999px;
    padding: 3px 8px;
}

/* ---- Inline my-listings panel ---- */
.vm-acc-listings { border-bottom: 1px solid #f4f6f7; }
.vm-acc-listings-body {
    background: #fafbfc;
    padding: 10px 15px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vm-acc-listings-note {
    font-size: 12.5px;
    color: var(--vm-muted-2);
    text-align: center;
    padding: 8px 0;
}
.vm-acc-listings-note a { font-weight: 600; }

.vm-acc-listing-card {
    background: #fff;
    border: 1px solid var(--vm-border-2);
    border-radius: 14px;
    padding: 10px;
}
.vm-acc-listing-top {
    display: flex;
    align-items: center;
    gap: 11px;
}
.vm-acc-listing-thumb img,
.vm-acc-listing-thumb .vm-acc-listing-ph {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}
.vm-acc-listing-thumb .vm-acc-listing-ph {
    background: var(--vm-border-2);
    color: var(--vm-muted-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.vm-acc-listing-main { flex: 1; min-width: 0; }
.vm-acc-listing-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--vm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vm-acc-listing-meta {
    font-size: 11.5px;
    color: var(--vm-muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.vm-acc-status {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 2px 7px;
    flex-shrink: 0;
}
.vm-acc-status--active {
    color: var(--vm-primary-dark);
    background: var(--vm-tint);
}
.vm-acc-status--hidden {
    color: var(--vm-muted);
    background: #f1f3f5;
}
.vm-acc-listing-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.vm-acc-listing-actions a,
.vm-acc-listing-actions button {
    flex: 1;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 0;
    border-radius: 999px;
    border: 1px solid var(--vm-chip-border);
    background: #fff;
    color: var(--vm-text-2);
}
.vm-acc-listing-actions .vm-acc-act-edit {
    color: var(--vm-primary);
    border-color: var(--vm-primary);
}
.vm-acc-listing-actions .vm-acc-act-delete {
    color: var(--vm-red);
    border-color: #f1d5d5;
}

/* ---- Log out ---- */
.vm-acc-logout-wrap { margin: 16px 16px 0; }
.vm-acc-logout {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px;
    background: #fff;
    border: 1px solid #f1d5d5;
    border-radius: 16px;
    color: var(--vm-red);
    font-size: 14px;
    font-weight: 600;
}
.vm-acc-version {
    text-align: center;
    font-size: 11px;
    color: #c0c6cc;
    margin: 14px 0 0;
}

/* ---- Apply sheet fields ---- */
.vm-acc-apply-copy {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--vm-muted);
}
.vm-acc-field-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--vm-text);
    margin: 0 0 8px;
}
.vm-acc-field-label span { font-weight: 500; color: var(--vm-muted-2); }
.vm-acc-input {
    width: 100%;
    border: 1.5px solid var(--vm-border);
    border-radius: 13px;
    padding: 13px 14px;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--vm-text);
    outline: none;
    margin-bottom: 18px;
    background: #fff;
}
.vm-acc-input:focus { border-color: var(--vm-primary); }
.vm-acc-textarea { resize: vertical; }

/* ---- Toast (page-local) ---- */
.vm-toast {
    position: fixed;
    left: 50%;
    bottom: 84px;
    transform: translateX(-50%);
    background: #111827;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 18px;
    border-radius: 999px;
    z-index: 90;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    max-width: 86%;
    text-align: center;
}
.vm-toast--error { background: var(--vm-red); }


/* ===================================================================
   DESKTOP LAYER  (see css/rentals/desktop.css sections 1-7 for the
   architecture contract: load order, the 901/1120/1240 tiers, the
   z-index ladder and the class-not-`hidden` gating rule).

   WHAT THIS IS — AND IS NOT
   -------------------------
   The design draws Account as a seven-pane SPA behind a left rail. That is
   not what ships. Four of those panes are already their own live pages
   (saved.html, my-reviews.html, bookings.html) or inline sections, and two
   (Payment details, Settings) have no backend at all. Rebuilding them as
   panes would duplicate live destinations and invent storage. So this is a
   desktop RE-LAYOUT of the page we actually have: the design's rail is the
   shipped navigation groups restyled, and every row still navigates.

   DELIBERATE OMISSIONS from the design (RENTALS_HUB.md 2.7):
     - "Response time" stat            -> no response-time signal exists
     - "4.9 as an owner" in the meta   -> no per-owner rating aggregate
     - "14 views this week" /
       "2 enquiries" on listing cards  -> no views or enquiries tracking
     - "Edit profile" button           -> there is no profile-edit screen
   The stat strip therefore ships the shipped THREE (Listings / Rentals /
   Saved), 3-up, not the design's 4-up. Badge copy stays "Active"/"Hidden"
   (the real status values) rather than the design's "Live"/"Paused".

   Everything below is inside a min-width query or is a base `display:none`
   for markup only the desktop layer reveals, so the <=900px page is
   byte-frozen. Selectors are scoped to #vm-account.
   =================================================================== */

/* Desktop-only markup, invisible on a phone. Class gating only: this page
   uses the `hidden` ATTRIBUTE for state (sheet, panel, verified flag) and
   app.css hard-guards it with [hidden]{display:none!important}. */
.vm-acc-listings-head { display: none; }

/* The two column wrappers are inert below 1120px: display:contents keeps the
   shipped source order (profile card -> agent CTA -> Activity -> ... ->
   log out) with no extra box in the layout. */
.vm-acc-dt-rail,
.vm-acc-dt-main { display: contents; }


/* ================================================================
   >= 901px — one column, desktop chrome
   ================================================================ */
@media (min-width: 901px) {

/* Page canvas: the design's alt background for Account/Bookings/Messages.
   The ID beats desktop.css's `body:has(.vm-app.vm-dt-shell)` regardless of
   load order. Content is centred at 1080px (.vm-dt-wrap--narrow's width)
   with the max() padding trick rather than a wrapper element — inserting a
   block wrapper around the whole page would sit between the green header and
   the profile card's -36px pull-up margin and perturb the mobile layout. */
#vm-account.vm-dt-shell {
    background: var(--vm-dt-canvas-alt);
    padding: 30px max(var(--vm-dt-pad), calc((100% - 1080px) / 2)) 56px;
}
body:has(#vm-account.vm-dt-shell) { background: var(--vm-dt-canvas-alt); }

/* The mobile green title bar is replaced by the site header. */
#vm-account .vm-acc-header { display: none; }

/* Toast clears the (now absent) bottom nav. */
.vm-toast { bottom: 32px; }


/* --- profile banner ---------------------------------------------- */
#vm-account .vm-acc-profile-card {
    margin: 0 0 24px;
    border: 1px solid var(--vm-border-2);
    border-radius: 18px;
    box-shadow: var(--vm-dt-shadow-raised);
    padding: 24px 26px;
}
#vm-account .vm-acc-profile-row {
    gap: 20px;
    padding: 0;
    flex-wrap: wrap;
}
#vm-account .vm-acc-avatar-slot img,
#vm-account .vm-acc-avatar-slot .vm-acc-avatar-fallback {
    width: 88px;
    height: 88px;
}
#vm-account .vm-acc-avatar-slot .vm-acc-avatar-fallback { font-size: 34px; }

#vm-account .vm-acc-name-row {
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 6px;
}
#vm-account .vm-acc-name {
    font-size: clamp(21px, 2.2vw, 27px);
    letter-spacing: -.6px;
    white-space: normal;
    overflow: visible;
}
/* The pill below carries the verified signal at this width. */
#vm-account .vm-acc-name-row .vm-verified { display: none; }
/* Two-class/ID specificity so desktop.css's `.vm-dt-only{display:revert}`
   (loaded later) cannot flatten these back to inline. */
#vm-account .vm-acc-vpill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--vm-primary-dark);
    background: var(--vm-tint);
    border: 1px solid #cfe9cd;
    border-radius: 999px;
    padding: 4px 11px;
}
#vm-account .vm-acc-vpill i { font-size: 11px; }

/* Meta row: city + "Member since <year>". Both are painted from the profile;
   the design's third item (a rating "as an owner") has no aggregate behind
   it and is not here. The pin is a pseudo-element so [data-sub]'s text
   content stays exactly what the API produced. */
#vm-account .vm-acc-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    font-size: 13.5px;
}
#vm-account .vm-acc-sub::before {
    content: "\f3c5";                 /* fa-location-dot */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    color: var(--vm-muted-2);
}
#vm-account .vm-acc-sub:empty::before { content: none; }

#vm-account .vm-acc-dt-listbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    background: var(--vm-primary);
    padding: 11px 20px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(26, 137, 23, .3);
    transition: background .2s ease;
}
#vm-account .vm-acc-dt-listbtn:hover { background: var(--vm-primary-dark); color: #fff; }
#vm-account .vm-acc-dt-listbtn i { font-size: 12px; }

/* Stat strip — THREE real stats, left-aligned with 1px dividers. */
#vm-account .vm-acc-stats {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #f0f2f4;
}
#vm-account .vm-acc-stat {
    text-align: left;
    padding: 0 0 0 20px;
}
#vm-account .vm-acc-stat:first-child { padding-left: 0; }
#vm-account .vm-acc-stat + .vm-acc-stat { border-left: 1px solid #f0f2f4; }
#vm-account .vm-acc-stat-n { font-size: 24px; }
#vm-account .vm-acc-stat-label { font-size: 12px; margin-top: 2px; }


/* --- navigation groups -------------------------------------------
   At this tier they keep the shipped white grouped-card look (there is no
   rail until 1120px); only the page-padding-driven margins change. */
#vm-account .vm-acc-group-label { margin: 22px 0 8px; }
#vm-account .vm-acc-group { margin: 0; }
#vm-account .vm-acc-row { transition: background .2s ease, color .2s ease; }
#vm-account .vm-acc-row:not(.is-soon):hover { background: #fafbfc; }
/* Rows still navigate, so the chevrons stay. The one exception is the
   my-listings row, which is a disclosure control: point it down when open. */
#vm-account .vm-acc-row.is-open .vm-acc-row-chev { transform: rotate(90deg); }
#vm-account .vm-acc-logout-wrap { margin: 22px 0 0; }


/* --- "Become a verified agent" panel ------------------------------ */
#vm-account .vm-acc-agent-card {
    margin: 0 0 20px;
    border-radius: 16px;
    padding: 18px 20px;
    gap: 16px;
}
#vm-account .vm-acc-agent-icon { width: 46px; height: 46px; }
#vm-account .vm-acc-agent-title { font-size: 15px; }
#vm-account .vm-acc-agent-sub { font-size: 13px; margin-top: 3px; line-height: 1.45; }
#vm-account .vm-acc-agent-apply { font-size: 13.5px; padding: 11px 20px; }


/* --- my listings -------------------------------------------------- */
#vm-account .vm-acc-listings { border-bottom: none; }
#vm-account .vm-acc-listings-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    background: none;
    padding: 0;
}
#vm-account .vm-acc-listings-note {
    grid-column: 1 / -1;
    text-align: left;
    font-size: 13.5px;
    padding: 0;
}

/* Card: 78px thumb spanning the full height, then badge / title+price /
   actions. `display:contents` on the shipped .vm-acc-listing-top row lifts
   its three children into this grid without touching the mobile markup.
   NOTE what is NOT on this card: the design's "14 views this week" and
   "2 enquiries" have no signal anywhere in the schema. */
#vm-account .vm-acc-listing-card {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    /* the 1fr action row lets cards of unequal title length still line their
       buttons up along the bottom of a stretched grid row */
    grid-template-rows: auto auto 1fr;
    column-gap: 14px;
    row-gap: 6px;
    padding: 14px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
#vm-account .vm-acc-listing-top { display: contents; }
#vm-account .vm-acc-listing-thumb {
    grid-column: 1;
    grid-row: 1 / span 3;
}
#vm-account .vm-acc-listing-thumb img,
#vm-account .vm-acc-listing-thumb .vm-acc-listing-ph {
    width: 78px;
    height: 78px;
    border-radius: 12px;
    font-size: 24px;
}
#vm-account .vm-acc-status {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    font-size: 10px;
    padding: 3px 8px;
}
#vm-account .vm-acc-listing-main {
    grid-column: 2;
    grid-row: 2;
}
#vm-account .vm-acc-listing-title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
    white-space: normal;
    overflow: visible;
}
#vm-account .vm-acc-listing-meta { font-size: 12.5px; margin-top: 4px; }
#vm-account .vm-acc-listing-actions {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    margin-top: 6px;
}
#vm-account .vm-acc-listing-actions a,
#vm-account .vm-acc-listing-actions button {
    font-size: 12.5px;
    padding: 8px 0;
    transition: background .2s ease;
}
#vm-account .vm-acc-listing-actions a:hover,
#vm-account .vm-acc-listing-actions button:hover { background: var(--vm-canvas); }

} /* end >= 901px */


/* ================================================================
   901px - 1119px — still one column
   The design turns the rail into a horizontal scrolling chip row here. We
   keep the shipped stacked GROUPS instead, for two reasons. First, these
   rows are not pane switchers: they are links to five separate pages plus
   four disabled "Later"/value rows, and a chip strip would have to drop the
   icons, the "N active" badge and the "Later" chips that make that state
   readable. Second, desktop.css's own contract puts rails at >=1120px
   (section 5) — below that there is no rail to turn into anything. What
   this tier gets instead is a narrower measure, so 44px rows are not
   stretched across 1080px.
   ================================================================ */
@media (min-width: 901px) and (max-width: 1119px) {
#vm-account.vm-dt-shell {
    padding-left: max(var(--vm-dt-pad), calc((100% - 760px) / 2));
    padding-right: max(var(--vm-dt-pad), calc((100% - 760px) / 2));
}
/* Still inline under its row inside the group card. */
#vm-account .vm-acc-listings-body { padding: 12px 15px 14px; background: #fafbfc; }
#vm-account .vm-acc-listings-note { text-align: center; padding: 6px 0; }
}


/* ================================================================
   >= 1120px — the two-column shell
   Left: the rail + log out. Right: the verified-agent panel and the
   my-listings panel (account.js moves the panel node in here and opens it
   through the normal expand path, since the space is there).
   ================================================================ */
@media (min-width: 1120px) {
#vm-account.vm-dt-shell {
    display: grid;
    /* The design's rail is 248px. Ours carries chevrons (the rows navigate
       rather than swap panes) plus the live "N active" badge and the two
       "Later" chips. Measured: "My rentals & bookings" needs 145px of label
       and only gets 133px at 248-268px, so it wrapped to two lines. 288px
       gives it 153px and keeps every row one line, and still leaves 760px
       for the listings column (two 300px cards). */
    grid-template-columns: 288px minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
}
/* The bottom sheet, its backdrop and the bottom nav are all position:fixed
   or display:none, so the grid only ever has these three items. */
#vm-account .vm-acc-profile-card {
    grid-column: 1 / -1;
    grid-row: 1;
}
#vm-account .vm-acc-dt-rail {
    display: block;
    grid-column: 1;
    grid-row: 2;
    /* The grid AREA is as tall as the row (i.e. as the taller right column),
       which is what gives a start-aligned sticky item room to travel. */
    position: sticky;
    top: calc(var(--vm-dt-header-h) + 24px);
}
#vm-account .vm-acc-dt-main {
    display: block;
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
}

/* --- the rail proper ---------------------------------------------
   The groups stop being cards here: transparent rows with a green-tint
   hover, exactly the design's rail, but the chevrons stay because these
   rows navigate to real pages rather than swapping panes. */
#vm-account .vm-acc-group-label {
    margin: 18px 0 8px;
    padding: 0 12px;
    letter-spacing: .07em;
}
#vm-account .vm-acc-dt-rail > .vm-acc-group-label:first-child { margin-top: 0; }
#vm-account .vm-acc-group {
    background: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
#vm-account .vm-acc-row {
    gap: 11px;
    padding: 10px 12px;
    border-bottom: none;
    border-radius: 12px;
}
#vm-account .vm-acc-row-icon {
    width: 17px;
    height: auto;
    border-radius: 0;
    background: none;
    font-size: 14px;
    color: var(--vm-muted);
}
#vm-account .vm-acc-row-icon--green { background: none; color: var(--vm-primary); }
#vm-account .vm-acc-row-text {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vm-dt-ink-2);
}
#vm-account .vm-acc-row-badge { padding: 2px 7px; }
#vm-account .vm-acc-row-chev { font-size: 11px; }
#vm-account .vm-acc-row:not(.is-soon):hover { background: var(--vm-tint); }
#vm-account .vm-acc-row:not(.is-soon):hover .vm-acc-row-text { color: var(--vm-primary-dark); }
#vm-account .vm-acc-row:not(.is-soon):hover .vm-acc-row-icon { color: var(--vm-primary-dark); }
#vm-account .vm-acc-row:not(.is-soon):hover .vm-acc-row-chev { color: var(--vm-primary); }

#vm-account .vm-acc-logout-wrap {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--vm-border);
}
#vm-account .vm-acc-logout {
    justify-content: flex-start;
    gap: 11px;
    padding: 10px 12px;
    background: none;
    border: none;
    border-radius: 12px;
    font-size: 13.5px;
    transition: background .2s ease;
}
#vm-account .vm-acc-logout:hover { background: #fdf2f2; }
#vm-account .vm-acc-version {
    text-align: left;
    margin: 8px 0 0 12px;
}

/* The panel is now its own column, not a strip inside the group. */
#vm-account .vm-acc-listings { margin: 0; }

#vm-account .vm-acc-listings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
#vm-account .vm-acc-listings-h2 {
    margin: 0;
    font-family: var(--vm-font-display);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -.4px;
    color: var(--vm-text);
}
#vm-account .vm-acc-listings-new {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--vm-primary-dark);
    background: var(--vm-tint);
    border: 1px solid #cfe9cd;
    padding: 10px 18px;
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none;
}
#vm-account .vm-acc-listings-new:hover { background: #dff0de; color: var(--vm-primary-dark); }
#vm-account .vm-acc-listings-new i { font-size: 11px; }
}