/* Approved accordion Account. Existing header, modal and billing owners are retained. */
/* Keep both accordion content and its footer out of browser scroll anchoring. */
.account-experience {--account-surface:#f2f2f3;--account-ease:cubic-bezier(.2,.8,.2,1);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.45;color:var(--text-primary);position:relative;overflow-anchor:none}
html[data-theme=dark] .account-experience {--account-surface:#232325}
.account-experience *,#accountCompareModal * {box-sizing:border-box}
html body.account-visual.account-immersive-view .account-page-scroll {max-width:none;padding:0;overflow:visible}
/* The header stays outside the page scroller, so its scrollbar begins below the header. */
html:has(body.account-visual) {height:100%;overflow:hidden;scrollbar-gutter:auto}
html body.account-visual {height:100dvh;min-height:0;overflow:hidden;-webkit-tap-highlight-color:transparent}
html body.account-visual #app.app-container {width:100%;height:100dvh!important;min-height:0;overflow:hidden!important}
html body.account-visual .main-content {flex:1 1 0;min-height:0;overflow-y:auto;scrollbar-gutter:stable}
html body.account-visual:is(.modal-overlay-open,.settings-overlay-open) .main-content {overflow-y:hidden}
html body.account-visual.account-immersive-view .page-header {display:none}
html body.account-visual.account-immersive-view .web-balance-dashboard {margin:0;width:100%;max-width:none}
body.account-immersive-view #globalError:not(.hidden) {margin:12px 24px}
.account-layout {--account-preview-height:714px;display:grid;grid-template-columns:1.02fr 1fr;gap:40px;max-width:1440px;margin:auto;padding:28px 32px 48px;align-items:start}
.account-content {display:flex;flex-direction:column;min-width:0}
.account-overview {display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--account-surface);border-radius:16px;padding:18px 20px;margin-bottom:20px;font-size:14px;min-height:64px}
.account-overview>span:first-child {font-weight:600;min-width:0}
.account-overview>span:last-child {display:inline-flex;align-items:center;justify-content:flex-end;gap:8px;color:var(--text-secondary);line-height:1.3;text-align:right}
.account-overview strong {font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.035em;color:var(--text-primary)}
.account-workspace {min-width:0;flex:0 0 auto}
.account-experience :is(h1,h2,p),#accountCompareModal .app-modal-body p {margin:0}
.account-experience h1 {font-size:28px;font-weight:650;letter-spacing:-.035em;line-height:1.3}
.account-experience h2 {font-size:20px;font-weight:650;letter-spacing:-.035em;line-height:1.3}
.account-experience :is(button,a),#accountCompareModal :is(button,a) {font-family:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.account-experience button {cursor:pointer}
.account-experience button:disabled {cursor:default;opacity:.55}
.account-experience :is(button,a):focus,#accountCompareModal :focus {outline:none!important;box-shadow:none}
.account-section-heading {display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px;padding:12px 0 20px;border-bottom:1px solid var(--border-color)}
.account-segment {position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(var(--count),minmax(0,1fr));width:200px;min-height:44px;padding:4px;border:1px solid var(--border-color);border-radius:16px;background:var(--account-surface);flex-shrink:0}
.account-segment-thumb {position:absolute;z-index:-1;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/var(--count));background:var(--bg-color);border-radius:12px;transform:translateX(calc(var(--selected)*100%))}
.account-segment button {display:flex;align-items:center;justify-content:center;padding:6px;border:0;border-radius:12px;background:transparent;font-size:14px;font-weight:650;line-height:1.3;color:var(--text-secondary)}
.account-segment button[aria-pressed=true] {color:var(--text-primary)}
.account-plan-row {border-bottom:1px solid var(--border-color);background:transparent}
.account-plan-row:has(+ .account-plan-row[data-open=true]) {border-bottom-color:transparent}
.account-plan-row[data-open=true] {background:var(--account-surface);border-color:transparent;border-radius:20px}
.account-plan-heading {display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:96px;padding:22px}
.account-plan-select {display:flex;align-items:center;gap:28px;flex:1;min-width:0;min-height:44px;text-align:left;border:0;background:transparent;padding:0;color:var(--text-primary)}
.account-selection-circle {display:flex;align-items:center;justify-content:center;width:26px;height:26px;border:1.5px solid #85858a;border-radius:50%;flex-shrink:0;color:transparent}
.account-selection-circle svg {width:17px;height:17px;stroke-width:3}
.account-plan-select[aria-pressed=true] .account-selection-circle {background:var(--text-primary);border-color:var(--text-primary);color:var(--bg-color)}
.account-plan-label {display:flex;flex-direction:column;gap:2px;min-width:0}
.account-plan-label strong {font-size:20px;font-weight:650;letter-spacing:-.035em;line-height:1.3}
.account-plan-label>span {font-size:16px;color:var(--text-secondary);line-height:1.45}
.account-expand {display:grid;grid-template-rows:0fr;overflow:hidden}
.account-expand[data-open=true] {grid-template-rows:1fr}
.account-expand-inner {min-height:0;overflow:hidden}
.account-offer-details {padding:16px 30px 28px 76px}
.account-benefits {display:flex;flex-direction:column;gap:20px;margin:0 0 28px;padding:0;list-style:none}
.account-benefits li {display:flex;align-items:center;gap:16px;min-width:0}
.account-benefits svg {width:20px;height:20px;flex-shrink:0}
html body.account-visual .account-primary {display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;padding:14px 18px;background:var(--text-primary);color:var(--bg-color);border:0;border-radius:12px;font-size:20px;font-weight:600;letter-spacing:-.035em;line-height:1.3;text-align:center;text-decoration:none;cursor:pointer}
.account-primary:hover:not(:disabled) {opacity:.9}
.account-primary:disabled {opacity:.55;cursor:default}
.account-primary svg {width:20px;height:20px;flex-shrink:0}
.account-terms {margin:20px 0 0!important;font-size:12px;line-height:1.5;text-align:left;color:var(--text-secondary)}
.account-content-footer {padding-top:24px;margin-top:24px;border-top:1px solid var(--border-color)}
.account-offer-actions {display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.account-text-link {display:flex;align-items:center;gap:10px;background:none;border:0;padding:8px 0;min-height:44px;font-size:16px;color:var(--text-primary);text-decoration:underline;text-underline-offset:3px}
.account-text-link svg {width:20px;height:20px;flex-shrink:0}
.account-text-link:hover {color:var(--text-secondary)}
.account-action-divider {height:26px;width:1px;background:var(--border-color)}
.account-membership-heading {padding:28px 0}
.account-membership-heading p {margin-top:8px;color:var(--text-secondary)}
.account-workspace>.account-benefits {padding-bottom:28px;border-bottom:1px solid var(--border-color)}
.account-renewal {padding:4px 0 24px}
.account-renewal p {margin-top:8px;color:var(--text-secondary)}
.account-secondary-actions {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:16px -12px}
.account-content-footer>.quiet-action,.account-workspace>.quiet-action {margin-left:-12px}
.account-status-note {padding:18px 0!important;color:var(--text-secondary);border-bottom:1px solid var(--border-color);font-size:14px}
.account-state-message {display:flex;flex-direction:column;gap:20px;padding-top:60px;max-width:500px}
.account-state-message>svg {width:30px;height:30px}
.account-state-message>svg[data-lucide="loader-circle"] {animation:spin 1s linear infinite;transform-origin:center;transform-box:fill-box}
@media(prefers-reduced-motion:reduce){.account-state-message>svg[data-lucide="loader-circle"]{animation:none}}
.account-state-message>p {color:var(--text-secondary)}
.account-inline-error {margin-top:18px!important;font-size:14px;line-height:1.5;color:var(--text-primary)}
/* Preview is 70% of its former full-column height, independent of Account state. */
.account-preview {position:relative;overflow:hidden;min-width:0;min-height:0;height:var(--account-preview-height);border-radius:14px;background:var(--account-surface);overflow-anchor:none}
#accountCompareModal .app-modal-card {display:flex;flex-direction:column;max-width:none;max-height:calc(100dvh - 32px);padding:0;border-radius:16px;overflow:hidden}
#accountCompareModal .account-compare-card {width:min(860px,calc(100vw - 32px))}
#accountCompareModal .account-topup-card {width:min(680px,calc(100vw - 32px))}
#accountCompareModal .account-topup-card .app-modal-subtitle:not([hidden]) {display:block}
#accountCompareModal .app-modal-body {min-height:0;padding:24px;overflow-y:auto;overscroll-behavior:contain}
#accountCompareModal[data-kind=compare] .app-modal-body {padding-top:0}
#accountCompareModal .app-modal-subtitle {display:none}
#accountCompareModal .app-modal-footer {padding:12px 24px;border-top:1px solid var(--border-color);flex:none;display:none}
.account-comparison-controls {display:flex;align-items:center;justify-content:space-between;gap:12px}
.account-compare-table {overflow:auto;scrollbar-width:none;-ms-overflow-style:none}
.account-compare-table::-webkit-scrollbar {display:none}
.account-compare-table table {table-layout:fixed;width:100%;min-width:800px;border-collapse:collapse;text-align:left}
html body.account-visual .account-compare-table :is(th,td) {width:20%;padding:16px 12px;border-bottom:1px solid var(--border-color);font-size:13px;letter-spacing:normal;text-transform:none;color:var(--text-primary);white-space:normal;vertical-align:middle;line-height:1.5}
.account-compare-table th {font-weight:600}
.account-compare-table th:first-child {position:sticky;left:0;z-index:1;background:var(--card-bg)}
.account-compare-table tfoot :is(th,td) {border-bottom:0;padding-top:18px;padding-bottom:0}
html body.account-visual .account-compare-table tfoot :is(th,td) {border-bottom:0}
.account-compare-table .quiet-action {margin-inline:-12px;white-space:nowrap}
.account-credit-line {display:block;white-space:nowrap}
.account-availability svg {width:16px;height:16px;stroke-width:2;color:var(--text-secondary);vertical-align:middle}
.account-availability.is-included svg {stroke-width:3;color:var(--text-primary)}
.account-pack-choices {display:flex;flex-direction:column;gap:10px;margin:0 0 22px}
.account-pack-choices button {display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;min-height:80px;border:1px solid var(--border-color);border-radius:12px;background:transparent;color:var(--text-primary);text-align:left;font-size:14px}
.account-pack-choices button>svg {width:22px;height:22px;flex-shrink:0}
.account-pack-choices button>span {display:flex;flex-direction:column;gap:4px;min-width:0}
.account-pack-choices .account-pack-credits {font-size:14px;line-height:normal}
.account-pack-choices button span span {color:var(--text-secondary)}
.account-pack-choices button[aria-pressed=true] {background:var(--input-bg);border-color:var(--text-primary)}
.account-pack-choices button:hover {background:var(--input-bg)}
@media(max-width:1050px){.account-section-heading{flex-wrap:wrap}.account-segment{width:100%}.account-layout{--account-preview-height:812px}}
@media(max-width:850px){.account-layout{padding:24px;gap:24px}.account-plan-heading{padding:18px 14px;min-height:90px}.account-plan-select{gap:16px}.account-offer-details{padding:14px 20px 24px 58px}.account-benefits{gap:18px;margin-bottom:24px}}
@media(min-width:701px) and (max-width:764px){.account-layout{--account-preview-height:882px}}
@media(max-width:700px),(max-width:950px) and (max-height:500px) and (pointer:coarse){.account-experience{font-size:14px}.account-layout{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:20px 20px 24px}.account-preview{display:none}.account-content{min-height:0}.account-workspace{flex:none}.account-overview{padding:16px;margin-bottom:16px;gap:10px}.account-overview>span:last-child{flex-wrap:wrap;gap:2px 6px}.account-overview strong{font-size:18px}.account-experience h1{font-size:24px}.account-experience h2,.account-plan-label strong{font-size:18px}.account-plan-label>span{font-size:14px}.account-plan-heading{padding:16px 14px;min-height:80px}.account-offer-details{padding:12px 20px 22px}.account-benefits{gap:16px;margin-bottom:20px}.account-benefits svg{width:18px;height:18px}html body.account-visual .account-primary{font-size:18px;min-height:50px;padding:13px 16px}.account-terms{margin-top:16px!important;text-align:center}.account-section-heading{gap:12px}.account-text-link{font-size:14px}.account-offer-actions{gap:10px 20px;justify-content:center}.account-action-divider{display:none}.account-content-footer{padding-top:20px;margin-top:20px}.account-membership-heading{padding:22px 0}.account-state-message{padding-top:28px}#accountCompareModal .app-modal-card{width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}#accountCompareModal .app-modal-body{padding:20px}#accountCompareModal .app-modal-footer{padding:10px 20px}}
@media(prefers-reduced-motion:reduce){.account-experience *,#accountCompareModal *{transition:none!important}}
/* Account has no bottom navigation to reserve space for. Fixed toasts follow the viewport. */
@media(max-width:764px),(max-width:950px) and (max-height:500px) and (pointer:coarse){
    html body.account-visual #toastContainer {right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 28px)}
    html body.account-visual #toastContainer .toast {box-sizing:border-box;min-width:min(260px,calc(100vw - 28px));max-width:min(360px,calc(100vw - 28px));overflow-wrap:anywhere}
}
/* Compact header retains the production profile/menu component. */
html body.account-visual #sharedSidebarMount {position:sticky;top:0;z-index:10}
body.account-visual .account-shell-header {position:relative;z-index:5;border-bottom:1px solid var(--border-color)}
body.account-visual .account-shell-context {display:none}
body.account-visual .account-app-actions{display:flex;align-items:center;gap:12px;margin-left:auto;flex-shrink:0}
body.account-visual .account-app-link{margin-left:0}
body.account-visual .account-shell-tools{margin-left:0}
/* BEGIN shared quiet-action */
/* Canonical quiet action. Distributed by sync-quiet-action.py; do not edit generated copies. */
html body .action-btn.action-btn--quiet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    width: auto;
    min-height: 33px;
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #626262;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    appearance: none;
    transition: background-color 180ms ease, color 180ms ease;
}
html body .action-btn.action-btn--quiet:hover:not(:disabled) { background: rgb(18 18 18 / .055); color: #121212; transform: none; }
html[data-theme="dark"] body .action-btn.action-btn--quiet { color: #b8b8b8; }
html[data-theme="dark"] body .action-btn.action-btn--quiet:hover:not(:disabled) { background: rgb(249 249 249 / .08); color: #f9f9f9; }
html body .action-btn.action-btn--quiet:disabled { opacity: .55; cursor: not-allowed; }
html body .action-btn.action-btn--quiet:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html body .action-btn.action-btn--quiet { transition: none; } }
/* END shared quiet-action */
/* Web App composer.css preview rules. Shell geometry remains owned by Account. */
.composer-empty-preview { position: absolute; inset: 0; z-index: 3; overflow: hidden; border-radius: inherit; background: var(--input-bg); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 300ms ease, visibility 0s linear 300ms; }
.studio-split-right.preview > .composer-empty-preview { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.composer-empty-preview-media { position: absolute; inset: 0; overflow: hidden; }
.composer-empty-preview-media::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgb(0 0 0 / .38)); pointer-events: none; }
.composer-empty-preview-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.composer-empty-preview-navigation { position: absolute; z-index: 1; right: 28px; bottom: 22px; left: 28px; }
.composer-empty-preview-caption { margin: 0 0 6px; color: #fff; font-size: clamp(16px, 1.6vw, 20px); font-weight: 550; line-height: 1.3; text-shadow: 0 1px 8px rgb(0 0 0 / .55); }
.composer-empty-preview-controls { display: grid; grid-template-columns: repeat(var(--composer-preview-count, 8), minmax(0, 1fr)); gap: 5px; }
.composer-empty-preview-dot { position: relative; display: block; min-width: 0; height: 40px; padding: 0; border: 0; border-radius: 5px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.composer-empty-preview-dot[role="progressbar"] { cursor: default; }
.composer-empty-preview.has-media-error .composer-empty-preview-media { background: #191919; }
.composer-empty-preview.has-media-error .composer-empty-preview-frame { visibility: hidden; }
.composer-empty-preview-dot::before, .composer-empty-preview-dot > span { position: absolute; content: ""; top: 18px; left: 0; width: 100%; height: 4px; border-radius: 99px; background: rgb(255 255 255 / .44); }
.composer-empty-preview-dot > span { width: 0; background: #fff; }
.composer-empty-preview-dot[aria-pressed="true"] > span { width: 100%; }
.composer-empty-preview.is-playing .composer-empty-preview-dot[aria-pressed="true"] > span { animation: composer-empty-preview-progress var(--composer-preview-duration, 3600ms) linear forwards; }
.composer-empty-preview-dot:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
@keyframes composer-empty-preview-progress { from { width: 4px; } to { width: 100%; } }


.account-preview>.composer-empty-preview{opacity:1;visibility:visible;pointer-events:auto;transition:none}
.account-preview .composer-empty-preview-caption{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.16px}
@media(max-width:764px){.account-preview .composer-empty-preview-navigation{right:18px;bottom:12px;left:18px}.account-preview .composer-empty-preview-caption{font-size:16px}}
@media(prefers-reduced-motion:reduce){.composer-empty-preview{transition:none}.composer-empty-preview.is-playing .composer-empty-preview-dot[aria-pressed=true]>span{animation:none}}

#accountCompareModal[data-kind=compare].has-overflow .app-modal-subtitle:not([hidden]),#accountCompareModal[data-kind=compare].has-overflow .app-modal-footer:not([hidden]){display:block}

.account-workspace[data-view=management]{display:flex;flex-direction:column}.account-workspace[data-view=management] .account-renewal{margin-top:auto}

.account-section-heading:has(~ .account-plan-list),.account-plan-list>.account-plan-row:last-child{border-bottom-color:transparent}

/* BEGIN shared shell-disclosure */
/* Generated from Web App app-shell.css by sync-account-shell-disclosure.py. */
html body.account-visual #sharedSidebarMount .new-shell-disclosure { position: relative; }
html body.account-visual #sharedSidebarMount .new-shell summary {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 7px 10px;
    border-radius: var(--new-shell-pill-radius, 999px);
    color: inherit;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 150ms ease;
}
html body.account-visual #sharedSidebarMount .new-shell summary > * { pointer-events: none; }
html body.account-visual #sharedSidebarMount .new-shell summary::-webkit-details-marker { display: none; }
html body.account-visual #sharedSidebarMount .new-shell summary > svg { width: 16px; height: 16px; flex-shrink: 0; }
html body.account-visual #sharedSidebarMount .new-shell details[open] > summary { background: var(--accent-dim); }
@media (hover: hover) and (pointer: fine) {
    html body.account-visual #sharedSidebarMount .new-shell summary:hover { background: var(--accent-dim); }
}
html body.account-visual #sharedSidebarMount .new-shell :where(summary, button):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}
html body.account-visual #sharedSidebarMount .new-shell-workflow { min-width: 0; border-left: 1px solid var(--new-shell-line); padding-left: 18px; }
html body.account-visual #sharedSidebarMount .new-shell-workflow > summary { padding-left: 16px; }
html body.account-visual #sharedSidebarMount .new-shell-workflow-label { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body.account-visual #sharedSidebarMount .new-shell-popover {
    position: absolute;
    top: calc(100% + 12px);
    left: 18px;
    width: 280px;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid var(--new-shell-line);
    border-radius: 22px;
    background: var(--panel-bg, rgb(249 249 249 / 94%));
    box-shadow: 0 16px 50px rgb(18 18 18 / 10%), 0 1px 3px rgb(18 18 18 / 5%);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transform-origin: top right;
}
html body.account-visual #sharedSidebarMount .new-shell .nav-menu {
    display: flex;
    flex-direction: column;
    max-height: min(650px, calc(100dvh - 120px));
    overflow: auto;
    scrollbar-width: thin;
    gap: 2px;
    margin: 0;
    padding: 0;
}
html body.account-visual #sharedSidebarMount .new-shell :where(.nav-item, .user-actions .icon-btn, #sidebarSecondaryActionBtn, .new-shell-account-link) {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 44px;
    height: auto;
    margin: 0;
    padding: var(--new-shell-item-padding, 11px 12px) !important;
    border: 0;
    border-radius: 12px;
    gap: var(--new-shell-item-gap, 12px) !important;
    background: transparent;
    color: var(--new-shell-ink);
    box-shadow: none;
    transform: none;
    transition: none;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
}
html body.account-visual #sharedSidebarMount .new-shell .nav-item .nav-label {
    display: block !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}
html body.account-visual #sharedSidebarMount .new-shell :where(.nav-item, .user-actions .icon-btn, #sidebarSecondaryActionBtn, .new-shell-account-link) svg { width: var(--new-shell-item-icon-size, 18px); height: var(--new-shell-item-icon-size, 18px); flex-shrink: 0; }
html body.account-visual #sharedSidebarMount .new-shell :where(.nav-item, .user-actions .icon-btn, #sidebarSecondaryActionBtn, .new-shell-account-link):not(.is-loading) svg { opacity: .65; }
html body.account-visual #sharedSidebarMount .new-shell :where(.nav-item, .user-actions .icon-btn, #sidebarSecondaryActionBtn, .new-shell-account-link):focus-visible { outline-offset: -3px; }
html body.account-visual #sharedSidebarMount .new-shell :where(.nav-item, .user-actions .icon-btn, #sidebarSecondaryActionBtn, .new-shell-account-link):hover { background: var(--accent-dim); }
html body.account-visual #sharedSidebarMount .new-shell .nav-item.active { background: var(--new-shell-ink); color: var(--new-shell-paper); }
html body.account-visual #sharedSidebarMount .new-shell .nav-item.active svg { opacity: 1; }
html body.account-visual #sharedSidebarMount .new-shell .nav-item[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
html body.account-visual #sharedSidebarMount .new-shell .nav-section-title {
    display: block !important;
    text-align: left !important;
    padding: 15px 12px 5px;
    margin: 0;
    color: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1.4;
    text-transform: none;
}
html body.account-visual #sharedSidebarMount .new-shell .nav-section-title-full { display: block !important; }
html body.account-visual #sharedSidebarMount .new-shell .nav-section-title-compact { display: none !important; }
html body.account-visual #sharedSidebarMount .new-shell-account .new-shell-popover { left: auto; right: 0; width: 240px; }
@media(min-width:765px) {
    html[dir="rtl"] body.account-visual #sharedSidebarMount .new-shell-account .new-shell-popover { left: 0; right: auto; transform-origin: top left; }
}

html body.account-visual #sharedSidebarMount .new-shell-disclosure[open] > .new-shell-popover { animation: new-shell-appear 180ms cubic-bezier(.22,.61,.36,1) both; }
html body.account-visual #sharedSidebarMount .new-shell-disclosure.is-closing .new-shell-popover { animation: new-shell-disappear 180ms ease both; pointer-events: none; }
@keyframes new-shell-appear {
    from { opacity: 0; transform: translate3d(0,-6px,0) scale(.98); }
    to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes new-shell-disappear {
    from { opacity: 1; transform: translate3d(0,0,0) scale(1); }
    to { opacity: 0; transform: translate3d(0,-6px,0) scale(.98); }
}
/* END shared shell-disclosure */

/* Account host geometry for the shared disclosure component. */
html body.account-visual .account-shell-topbar {
    display:flex; height:76px; min-height:76px;
    --new-shell-ink: var(--text-primary);
    --new-shell-paper: var(--bg-color);
    --new-shell-line: var(--border-color);
}
html body.account-visual #sharedSidebarMount .new-shell-account > summary {padding:4px 10px 4px 4px}
html body.account-visual #sharedSidebarMount .new-shell-account .new-shell-popover {display:flex;flex-direction:column;gap:2px;max-height:calc(100dvh - 112px);overflow-y:auto;overscroll-behavior:contain}
html body.account-visual #sharedSidebarMount .new-shell-workflow .nav-item.active {background:var(--new-shell-ink)!important;color:var(--new-shell-paper)!important}
html body.account-visual #sharedSidebarMount .new-shell :is(summary,button):focus-visible {outline:none!important;box-shadow:none}
@media(min-width:765px) and (max-width:850px) {
    html body.account-visual #accountHeaderLoading {font-size:0;gap:0}
}
/* Same single-row mobile geometry as the Web App shell. */
@media(max-width:764px) {
    html body.account-visual .account-shell-topbar {display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-rows:44px;align-content:center;height:68px;min-height:68px;gap:8px;padding:8px 16px}
    html body.account-visual .account-shell-brand {grid-column:1;grid-row:1;min-width:0}
    html body.account-visual .account-shell-brand .logo-text {font-size:18px;white-space:nowrap}
    html body.account-visual .account-shell-tools {grid-column:4;grid-row:1;margin:0}
    html body.account-visual #sharedSidebarMount .new-shell-workflow {grid-column:2;grid-row:1;width:100%;min-width:0;padding:0;border:0}
    html body.account-visual #sharedSidebarMount .new-shell-workflow > summary {justify-content:center;width:fit-content;max-width:100%;min-width:0;padding:7px 8px 7px 14px}
    html body.account-visual #sharedSidebarMount .new-shell-workflow-label {min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
    html body.account-visual .account-app-actions {grid-column:3;grid-row:1;margin:0;gap:0}
    html body.account-visual .account-app-actions:has(#accountHeaderLoading.hidden) {display:none}
    html body.account-visual #accountHeaderLoading {font-size:0;gap:0}
    html body.account-visual .account-app-link {display:none}
    html body.account-visual #sharedSidebarMount .new-shell-popover {position:fixed;top:72px;max-height:calc(100dvh - 88px);overflow-y:auto;overscroll-behavior:contain}
    html body.account-visual #sharedSidebarMount .new-shell-workflow .new-shell-popover {left:16px;width:min(320px,calc(100vw - 32px))}
    html body.account-visual #sharedSidebarMount .new-shell-account .new-shell-popover {left:auto;right:16px;top:72px;width:min(260px,calc(100vw - 32px));max-height:calc(100dvh - 88px)}
    html[dir="rtl"] body.account-visual #sharedSidebarMount .new-shell-account .new-shell-popover {left:16px;right:auto;transform-origin:top left}
}
@media(max-width:359px) {
    html body.account-visual .account-shell-topbar {gap:4px}
    html body.account-visual .account-shell-brand .logo-text {font-size:16px}
    html body.account-visual #sharedSidebarMount .new-shell-workflow > summary {gap:6px;padding-inline:4px}
}
@media(prefers-reduced-motion:reduce) {
    html body.account-visual #sharedSidebarMount .new-shell-disclosure > .new-shell-popover {animation:none!important}
    html body.account-visual #sharedSidebarMount .new-shell summary {transition:none}
}


/* Loading locks clicks without changing the visual offer. Real unavailable states still dim. */
html body.account-visual .account-primary[data-loading-lock="true"]:disabled {opacity:1;cursor:default}
/* Thin scrollbars wherever Account exposes scrolling. Comparison keeps its hidden bar. */
html body.account-visual * {scrollbar-width:thin;scrollbar-color:var(--accent-color) transparent}
html body.account-visual *::-webkit-scrollbar {display:block;width:6px;height:6px}
html body.account-visual *::-webkit-scrollbar-track {background:transparent}
html body.account-visual *::-webkit-scrollbar-thumb {background:var(--accent-color);border-radius:6px}
html body.account-visual .account-compare-table {scrollbar-width:none}
html body.account-visual .account-compare-table::-webkit-scrollbar {display:none}

/* Integrations supplies content to the shared app-modal structure. */
html body.account-visual #pluginExploreModal .app-modal-card {width:min(640px,100%)}
html body.account-visual #pluginExploreModal :is(.app-modal-header,.app-modal-footer) {flex:0 0 auto}
html body.account-visual #pluginExploreModal .app-modal-heading-copy {min-width:0}
html body.account-visual #pluginExploreModal .app-modal-header .icon-btn {flex:0 0 44px}
html body.account-visual #pluginExploreModal .app-modal-body {min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px}
html body.account-visual #pluginExploreModal .app-modal-footer {display:flex;justify-content:flex-end}
html body.account-visual #pluginExploreModal .app-modal-footer .action-btn {width:auto;min-width:120px;min-height:44px;height:auto;border-radius:12px;font-size:14px}


/* Account modal headers share Settings' natural title and compact subtitle metrics. */
html body.account-visual .app-modal-header {
    display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
    padding:24px;border-bottom:1px solid var(--border-color);flex:0 0 auto;
}
html body.account-visual .app-modal-title {
    margin:0;min-height:0;display:block;
}
html body.account-visual .app-modal-subtitle {
    margin:6px 0 0!important;font-size:13px!important;font-weight:400;
    line-height:1.35!important;color:var(--text-secondary);letter-spacing:normal;
}
html body.account-visual .app-modal-header > div {min-width:0}
html body.account-visual .app-modal-header .icon-btn {
    width:44px;height:44px;min-height:44px;padding:0;border-radius:12px;flex:0 0 44px;
}
@media(max-width:764px) {
    html body.account-visual .app-modal-header {padding:20px}
}

#accountCompareModal .account-modal-status {font-size:14px;line-height:1.5;color:var(--text-secondary)}