/* Qupi component tokens: one definition per semantic role. See ops/account/DESIGN.md. */
:root {
    --q-space-1: 4px; --q-space-2: 8px; --q-space-3: 12px; --q-space-4: 16px;
    --q-space-5: 20px; --q-space-6: 24px; --q-space-8: 32px;
    --q-radius-control: 12px; --q-radius-panel: 24px;
    --q-type-label: .875rem; --q-type-body: 1rem; --q-type-title: 1.5rem;
    --q-control-height: 48px; --q-focus: var(--focus); --q-surface: var(--panel);
    --q-field: var(--field); --q-text: var(--text); --q-muted: var(--secondary);
    --q-border: var(--line); --q-border-control: var(--control-border); --q-error: var(--negative);
}
.q-modal-open { overflow: hidden; }
#modal.q-dialog { width: min(520px, calc(100% - 40px)); max-height: calc(100dvh - 48px); margin: auto; overflow: hidden; border: 1px solid var(--q-border); border-radius: var(--q-radius-panel); box-shadow: 0 24px 90px #0005; }
#modal.q-dialog::backdrop { background: #0008; backdrop-filter: none; }
.q-dialog #modal-content { display: flex; flex-direction: column; max-height: calc(100dvh - 50px); }
.q-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--q-space-4); padding: var(--q-space-8) var(--q-space-8) var(--q-space-6); flex-shrink: 0; }
.q-dialog-header h2 { font-family: var(--sans); font-size: var(--q-type-title); font-weight: 600; line-height: 1.25; letter-spacing: -.6px; outline: none; }
.q-dialog-header p { color: var(--q-muted); font-size: var(--q-type-label); line-height: 1.55; margin-top: var(--q-space-2); }
.q-dialog-close { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; margin: -10px -12px 0 0; padding: 0; background: transparent; border: 0; border-radius: var(--q-radius-control); color: var(--secondary); }
.q-dialog-close:hover { background: var(--hover); color: var(--text); }
.q-dialog-close svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.75; fill: none; }
.q-dialog-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--q-space-8) var(--q-space-8); scroll-padding-block: var(--q-space-4); }
.q-dialog-footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--q-space-3); padding: var(--q-space-5) var(--q-space-8) var(--q-space-6); border-top: 1px solid var(--q-border); flex-shrink: 0; background: var(--q-surface); }
.q-dialog-footer > .q-button--primary { flex: 1; }
.q-dialog-footer > .q-button--secondary { flex: 0 1 110px; }
.q-dialog-footer .q-footer-note { flex-basis: 100%; color: var(--muted); font-size: .8125rem; text-align: center; line-height: 1.5; }
.q-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--q-space-2); min-height: var(--q-control-height); padding: 12px 20px; border-radius: var(--q-radius-control); border: 1px solid transparent; font: 500 .9375rem/1.4 var(--sans); text-align: center; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.q-button--primary { background: var(--bg-inverse); color: var(--text-inverse); }
.q-button--primary:hover:not(:disabled) { background: var(--text-secondary); }
.q-button--secondary { background: transparent; color: var(--text); border-color: var(--strong); }
.q-button--secondary:hover:not(:disabled) { background: var(--hover); }
.q-button:disabled { opacity: .55; cursor: default; }
.q-button[aria-busy=true] { opacity: .8; cursor: progress; }
.q-button[aria-busy=true]::before { content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: q-spin .8s linear infinite; }
.q-dialog :is(button,a,input,select,summary):focus-visible { outline: 2px solid var(--q-focus); outline-offset: 3px; }
.q-dialog form { margin: 0; }
.q-field, .q-amount { display: grid; gap: var(--q-space-2); min-width: 0; }
.q-field > label, .q-amount > label { font-size: var(--q-type-label); font-weight: 500; line-height: 1.5; color: var(--q-text); }
.q-field input { min-height: var(--q-control-height); width: 100%; min-width: 0; background: var(--q-field); border: 1px solid var(--q-border-control); border-radius: var(--q-radius-control); color: var(--q-text); padding: 12px 14px; font-size: var(--q-type-body); }
.q-hint { font-size: .8125rem; color: var(--q-muted); line-height: 1.5; }
.q-hint:empty, .q-field-error:empty, .q-dialog .q-feedback:empty { display: none; }
.q-field-error { font-size: .875rem; color: var(--q-error); margin: 0; line-height: 1.5; }
.q-money-input { display: flex; align-items: center; gap: var(--q-space-3); padding: 14px 18px; border: 1px solid var(--q-border-control); border-radius: var(--q-radius-control); background: var(--q-field); }
.q-money-input > span { color: var(--muted); font-size: 1.75rem; }
.q-money-input input { background: transparent; border: 0; padding: 0; width: 100%; min-width: 0; color: var(--text); font-size: 2rem; font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; }
.q-money-input:focus-within { outline: 2px solid var(--q-focus); outline-offset: 3px; }
.q-money-input input:focus-visible { outline: none; }
.q-money-input:has([aria-invalid=true]), .q-field input[aria-invalid=true] { border-color: var(--q-error); }
.q-amount-presets { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--q-space-2); margin-top: var(--q-space-2); }
.q-amount-presets button { min-height: 44px; border: 1px solid var(--q-border); border-radius: 10px; background: transparent; font-size: .9375rem; font-weight: 500; }
.q-amount-presets button:hover { background: var(--hover); border-color: var(--strong); }
.q-amount-presets [aria-pressed=true] { border-color: var(--text); background: var(--text); color: var(--bg); }
.q-card-context { display: flex; align-items: center; gap: var(--q-space-4); padding-bottom: var(--q-space-6); border-bottom: 1px solid var(--q-border); margin-bottom: var(--q-space-6); }
.q-card-context img { width: 88px; height: auto; aspect-ratio:1424/848; object-fit: contain; border-radius: 7px; }
.q-card-context > div { min-width: 0; display: grid; gap: var(--q-space-1); }
.q-card-context strong { font-size: .9375rem; font-weight: 500; }
.q-card-context p { font-size: .8125rem; color: var(--q-muted); line-height: 1.5; }
.q-disclosure { margin-top: var(--q-space-5); }
.q-disclosure summary { display: flex; align-items: center; justify-content: space-between; gap: var(--q-space-2); min-height:44px; cursor:pointer; font-size:.875rem; color:var(--q-muted); list-style:none; border-radius:8px; }
.q-disclosure summary::-webkit-details-marker { display:none; }
.q-disclosure summary::after { content:'+'; font-size:20px; }
.q-disclosure[open] summary::after { content:'−'; }
.q-disclosure[open] .q-field { margin-top:var(--q-space-2); }
.q-summary { margin:0; font-size:.9375rem; }
.q-summary > div { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--q-space-6); padding:var(--q-space-4) 0; border-bottom:1px solid var(--q-border); }
.q-summary > div:first-child { padding-top:0; }
.q-summary dt { color:var(--q-muted); min-width:0; }
.q-summary dt small { display:block; font-size:.8125rem; margin-top:var(--q-space-1); }
.q-summary dd { text-align:right; margin:0; font-weight:500; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.q-summary > .q-summary-total { border-bottom:0; padding-bottom:0; padding-top:var(--q-space-6); align-items:center; }
.q-summary-total dt { color:var(--text); font-weight:500; }
.q-summary-total dd { font-size:1.75rem; font-weight:600; letter-spacing:-.7px; }
.q-dialog .q-feedback { border:0; border-radius:var(--q-radius-control); padding:var(--q-space-3) var(--q-space-4); margin:var(--q-space-5) 0 0; font-size:.875rem; line-height:1.5; background:var(--q-field); }
.q-feedback--status { color:var(--q-muted); }
.q-terms { display:flex; flex-wrap:wrap; gap:var(--q-space-2) var(--q-space-5); margin-top:var(--q-space-6); color:var(--q-muted); font-size:.8125rem; }
.q-dialog .account-form > .primary-button { min-height:var(--q-control-height); border-radius:var(--q-radius-control); margin-top:var(--q-space-4); }
.q-dialog .notice { font-size:.875rem; line-height:1.55; }
.q-dialog .modal-body > .quiet-button { display:flex; width:100%; margin-top:var(--q-space-2); }
@keyframes q-spin { to { transform:rotate(360deg); } }
@media(max-width:600px) {
    #modal.q-dialog { width:100%; max-width:none; max-height:calc(100dvh - 20px); margin:auto 0 0; border-radius:24px 24px 0 0; border-bottom:0; }
    .q-dialog #modal-content { max-height:calc(100dvh - 22px); }
    .q-dialog-header { padding:24px 24px 20px; }
    .q-dialog-body { padding:0 24px 24px; }
    .q-dialog-footer { padding:16px 24px max(20px,env(safe-area-inset-bottom)); }
    .q-dialog-header h2 { font-size:1.375rem; }
    .q-dialog-close { margin-top:-10px; }
}
@media(max-width:360px) { .q-dialog-header{padding:20px}.q-dialog-body{padding:0 20px 20px}.q-dialog-footer{padding-inline:20px}.q-summary-total dd{font-size:1.5rem} }
@media(prefers-reduced-motion:reduce) { .q-button{transition:none}.q-button[aria-busy=true]::before{animation:none}#modal.q-dialog[open]{animation:none} }

/* Account surfaces: use these shared roles instead of page-specific control copies. */
.q-settings { max-width:720px; overflow:hidden; }
.q-settings-identity { display:flex; align-items:center; gap:16px; padding:28px; }
.q-settings-identity > div { display:grid; gap:6px; min-width:0; }
.q-settings-identity span { color:var(--secondary); font-size:13px; }
.q-settings-identity strong { font-size:16px; font-weight:500; overflow-wrap:anywhere; }
.q-settings-row { display:flex; align-items:center; gap:16px; width:100%; min-height:84px; padding:20px 28px; text-align:left; border:0; border-top:1px solid var(--line); background:transparent; color:var(--text); }
.q-settings-row:hover { background:var(--field); }
.q-settings-row > span { flex:1; min-width:0; display:grid; gap:5px; }
.q-settings-row strong { font-size:15px; font-weight:500; }
.q-settings-row small { font-size:13px; color:var(--secondary); line-height:1.5; }
.q-settings-row .icon { flex-shrink:0; }
.q-card-picker { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:24px; font-size:14px; color:var(--secondary); }
.q-card-picker select { min-height:48px; max-width:100%; color:var(--text); background:var(--panel); border:1px solid var(--strong); border-radius:12px; font:inherit; padding:10px 14px; }
.q-card-picker--mobile { display:none; }
.account-form input { font-size:16px; }
#main .page-title-row { gap:16px; flex-wrap:wrap; }
.account-section > h2 { margin-bottom:16px; }
.order-row > div { display:grid; gap:8px; text-align:right; justify-items:end; }
.order-row .text-button { min-height:44px; }
.billing-label { font-size:12px; }.billing-value { font-size:14px; }
.billing-field > .icon { width:16px; height:16px; }
.account-support-frame { border:1px solid var(--line); background:var(--panel); }
.q-payment-status { font-size:14px; line-height:1.6; color:var(--secondary); margin-top:20px; }
.q-dialog .sbp-amount { font-size:32px; font-weight:600; letter-spacing:-.7px; text-align:center; margin:0 0 20px; }
.q-dialog .sbp-code { margin:0 auto; }.q-dialog .sbp-code img { max-width:100%; height:auto; }
.q-dialog-footer:has([data-action="check-payment"]) { flex-direction:column; }
.q-dialog-footer:has([data-action="check-payment"]) > .q-button { flex:auto; }
.q-dialog .sbp-code .notice { text-align:center; padding:12px 0 0; margin:0; background:transparent; }

/* Chat controls and text share the account's spacing, focus and target sizes. */
.ai-heading > div:first-child { min-width:0; flex:1; }
.ai-heading h1 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.ai-heading .soft-badge { display:none; }
.ai-header-actions { flex-shrink:0; }
.ai-header-actions button, .ai-selection-bar button, .ai-answer-actions .text-button { min-height:44px; }
.ai-attach, .ai-send { min-width:44px; min-height:44px; }
.ai-model, .ai-task-options select, .ai-task-options input, .ai-task-options textarea { min-height:44px; font-size:16px; }
.ai-model { max-width:260px; }
.ai-composer textarea#ai-prompt { font-size:16px; }
.ai-hint, .ai-disclaimer, .ai-answer-actions small { font-size:12px; }
.ai-select-message { width:32px; height:44px; left:-24px; top:4px; }
.ai-file > button[data-file] { min-width:44px; min-height:44px; }
.ai-output { font-size:16px; line-height:1.7; }
.ai-layout dialog { border-radius:var(--q-radius-panel); border-color:var(--q-border); padding:var(--q-space-8); }
.ai-layout dialog::backdrop { background:#0008; backdrop-filter:none; }
.ai-layout dialog header button { width:44px; height:44px; }
.ai-layout dialog h2 { font-size:22px; letter-spacing:-.5px; }
.ai-layout dialog>p, .ai-fork-review>div, .ai-fork-model { font-size:14px; }
.ai-fork-model select { font-size:16px; }
.ai-layout dialog footer button { min-height:48px; border-radius:12px; }
body[data-page=chat] .app-footer { display:none; }
@media(min-width:641px) and (max-width:900px) {
 body[data-page=chat] #ai-sidebar-history { display:none; }
 body[data-page=chat] .app-shell { margin-left:72px; }
 body[data-page=chat] .ai-header-actions>[data-ai=history] { display:inline-flex; }
 body[data-page=chat] .mobile-ai-profile { display:flex; }
}
@media(max-width:760px) {
 .mobile-ai-profile { min-height:44px; }
 .mobile-ai-profile > .mobile-token-meter { width:auto; height:auto; border:0; border-radius:0; min-width:90px; }
 .mobile-ai-profile small { font-size:12px; }
 .ai-model { max-width:200px; }.ai-composer .ai-model { max-width:200px; }
 .ai-send { width:44px; min-height:44px; }
 .ai-attach { width:44px; min-height:44px; }
 .ai-select-message { opacity:1; width:32px; height:44px; }
 .ai-starters .prompt-card { font-size:14px; min-height:48px; }
 .ai-welcome.chat-welcome>p { font-size:14px; }
 .ai-answer { padding-left:8px; }.ai-answer::before { display:none; }
 .ai-user-message { font-size:15px; }
 .ai-layout dialog { padding:24px; max-height:calc(100dvh - 32px); }
 .ai-selection-bar .quiet-button,.ai-selection-bar>.text-button { font-size:12px; min-height:44px; }
}
@media(max-width:640px) {
 .q-card-picker--mobile { display:flex; }
 .card-art-wrap { max-width:280px; margin-inline:auto; width:100%; }
 .card-hero-grid { gap:24px; }.card-art { max-width:100%; }
 .balance-section { padding-top:24px; }
 .merchant-caption, .transaction-amount > span { font-size:12px; }
 .merchant-name, .transaction-amount strong { font-size:14px; }
 .history-top .text-button { font-size:13px; min-height:44px; }
 .card-start small { font-size:12px; }
 .q-settings-identity { padding:24px 20px; }.q-settings-row { padding:20px; }
 .order-row > div { min-width:0; }.order-row strong { white-space:nowrap; }
 body[data-page=chat] main#main { padding-top:18px; padding-bottom:16px; }
 .ai-workspace { height:calc(100dvh - 175px - env(safe-area-inset-bottom,0px)); min-height:360px; }
 .ai-layout { min-height:0; }.ai-messages { min-height:90px; }
 .ai-heading { padding-bottom:12px; }.ai-heading h1 { font-size:20px; }
 .ai-welcome.chat-welcome>img { display:none; }
 .ai-welcome.chat-welcome { padding:12px 0 20px; }
 .ai-welcome.chat-welcome h2 { font-size:26px; }
 .ai-disclaimer { font-size:12px; }
 .ai-layout dialog { width:100%; max-width:none; margin:auto 0 0; border-radius:24px 24px 0 0; max-height:calc(100dvh - 20px); }
 .account-support-frame { height:calc(100dvh - 235px); min-height:350px; border-radius:20px; }
 body[data-page=support] .app-footer { display:none; }
}
@media(prefers-reduced-motion:reduce) { .q-dialog * { scroll-behavior:auto; } }

.ai-composer .select-control { min-height:44px; font-size:16px; }
.ai-header-actions .text-button { min-height:44px; font-size:14px; }

#main .filter, #main .details-heading .text-button { min-height:44px; }
#main .icon-button.small { min-width:44px; width:44px; height:44px; }
.mobile-ai-profile { align-items:center; gap:8px; }
@media(min-width:761px) and (max-width:900px) {
 .mobile-ai-profile > span:first-child { width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-size:12px; }
 .mobile-ai-profile small { font-size:12px; }
}
@media(max-width:640px) {
 .ai-composer-bottom { flex-wrap:nowrap; gap:8px; align-items:flex-end; }
 .ai-composer-bottom>div { flex:1; min-width:0; gap:8px; }
 .ai-composer .ai-model-label { min-width:0; flex:1; }
 .ai-composer .ai-model { width:100%; max-width:100%; }
 .ai-send,.ai-attach { flex-shrink:0; }
}

.ai-layout dialog h2:focus { outline:none; }

/* The small token meter retains its product color; actions are neutral. */
meter[data-ai-meter], meter[data-ai-meter]::-webkit-meter-bar { background:var(--ink-700); }
[data-theme=light] meter[data-ai-meter], [data-theme=light] meter[data-ai-meter]::-webkit-meter-bar { background:var(--ink-900); }
.q-field input[aria-invalid=true], .q-money-input:has([aria-invalid=true]) { border-color:var(--coral); }

.nav-link[data-page=home][aria-current=page] > :is(.icon,[data-icon]) { color:var(--text); }