/* Client portal styles (also login and public pages), on top of app.css.
   Loaded for clients and guests by base.html. The shared pages (history, help, account, reveal, the portal preview)
   link it themselves when an admin or reseller opens them. Every selector is namespaced (nc-, mv-, auth-) so it
   cannot leak into the other shells. */

/* ---------- Page frames ---------- */
.nc-home, .nc-history, .nc-account, .nc-help { max-width: 1120px; margin: 0 auto; width: 100%; }
.nc-account { max-width: 760px; }
body.role-client .nc-history { max-width: 960px; }
.nc-help { max-width: 860px; }
body.role-client main.content { display: flex; flex-direction: column; }
body.role-client #live-status { order: 9; margin: 22px 0 0; text-align: center; }
.nc-home .page-head, .nc-history .page-head, .nc-account .page-head, .nc-help .page-head { margin-bottom: 22px; }
.nc-home > .sheet + .sheet, .nc-home > .sheet + section { margin-top: 16px; }
.nc-home .section-head { margin: 30px 0 12px; }
.nc-home .hint, .nc-account .hint, .nc-reveal .hint { font-size: 11px; }
.nc-home small, .nc-history small { color: var(--faint); font-weight: 550; }

/* ---------- Notices ---------- */
.nc-preview { align-items: center; flex-wrap: wrap; }
.nc-preview > span { flex: 1 1 260px; }
#card-change-notice > span, .nc-install p { flex: 1; }
#card-change-notice .link { font-size: inherit; }
#live-fresh .notice { margin-bottom: 16px; }
.nc-install { align-items: center; flex-wrap: wrap; margin: 24px 0 0; }
.nc-install:not([hidden]) { display: flex; }
.nc-install p { margin: 0; min-width: 200px; }
.nc-install [data-ios-install] { flex-basis: 100%; font-size: 11px; color: var(--muted); }

/* ---------- Balance hero ---------- */
.nc-hero { overflow: hidden; }
.nc-hero .balance-value { font-weight: 600; }
.nc-hero .balance-code { font-weight: 600; }
.nc-hero .favor { display: inline-flex; margin-top: 12px; }
.nc-hero .favor .status-dot { margin-right: 1px; }
.nc-zero { margin-top: 12px; font-size: 12px; color: var(--warning); line-height: 1.6; max-width: 46ch; }
.nc-scope { margin-top: 16px; max-width: 46ch; }
.period-summary .summary-line b small { font-size: 10px; color: var(--faint); font-weight: 550; }
.period-summary .meter { margin: 0 0 2px; }
.nc-hero .freshness { background: var(--hover); }
.nc-hero .balance-actions .btn { min-height: 38px; }

/* ---------- Cards ---------- */
.nc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.nc-cards > .sheet { margin-top: 0; }
.nc-cards.one { grid-template-columns: minmax(0, 1fr); }
.nc-card { display: flex; flex-direction: column; gap: 14px; padding: 14px; min-width: 0; }
.nc-card .vwrap { gap: 14px; }
.nc-card .vstage { order: 1; display: grid; place-items: center; padding: 22px 14px; background: var(--inset); border-radius: 11px; }
.nc-card .vcard { max-width: 340px; }
.nc-card .reveal { order: 2; }
.nc-card .nc-money { order: 3; }
.reveal .hint { margin-top: 8px; }
.reveal [data-reveal-code] label.f { margin-bottom: 4px; }
.reveal [data-reveal-code] .row { margin-top: 12px; }
.reveal [data-reveal-shown] { align-items: center; margin-top: 0; }
.reveal [data-reveal-msg]:empty { display: none; }
.reveal [data-reveal-msg] { color: var(--muted); }
.nc-money { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--rule-soft); }
.nc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nc-k { font-size: 11px; font-weight: 550; color: var(--muted); }
.nc-v { margin-top: 3px; font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.nc-v small { font-size: 11px; letter-spacing: 0; }
.nc-money .meter { margin: 0; }
.nc-money dl.kv { border-top: 1px solid var(--rule-soft); margin-top: -2px; }
.nc-money dl.kv > div { padding: 8px 0; font-size: 12px; }
.nc-money dl.kv dd small { font-size: 10px; color: var(--faint); }
.nc-money .hint { margin: 0; }
.nc-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--rule-soft); }
.nc-card-controls { display: contents; }
.nc-card-reason { order: -1; flex: 1 0 100%; display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 12px; background: var(--warning-soft); color: var(--warning); border-radius: 9px; font-size: 11px; line-height: 1.6; }
.nc-card-reason .icon { width: 14px; height: 14px; margin-top: 2px; }
article > .nc-card-reason { order: 0; }
.nc-card-name > summary { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 13px; border-radius: 9px; font-size: 11px; font-weight: 600; color: var(--muted); cursor: pointer; list-style: none; }
.nc-card-name > summary::-webkit-details-marker { display: none; }
.nc-card-name > summary:hover { background: var(--inset); color: var(--ink); }
.nc-card-name[open] { flex: 1 0 100%; order: 5; }
.nc-name-form { display: flex; gap: 8px; margin-top: 4px; }
.nc-name-form input { flex: 1; width: auto; }
.nc-lost { margin-left: auto; font-size: 11px; font-weight: 550; color: var(--muted); padding: 8px 4px; }
.nc-lost:hover { color: var(--danger); }
.nc-empty { padding: 44px 20px; }
.nc-empty .icon { display: block; margin: 0 auto 10px; }

@media (min-width: 901px) {
  .nc-cards.one .nc-card { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); grid-template-areas: "stage money" "reveal money" "ctrl ctrl"; grid-template-rows: auto 1fr auto; column-gap: 32px; row-gap: 14px; padding: 18px; }
  .nc-cards.one .nc-card .vwrap { display: contents; }
  .nc-cards.one .vstage { grid-area: stage; }
  .nc-cards.one .reveal { grid-area: reveal; align-self: start; }
  .nc-cards.one .nc-money { grid-area: money; align-self: center; padding-top: 0; border-top: 0; }
  .nc-cards.one .nc-ctrl { grid-area: ctrl; }
  .nc-cards.one .nc-card > .nc-card-reason { grid-column: 1 / -1; }
  .nc-cards.one .nc-v { font-size: 28px; }
}
@media (max-width: 900px) { .nc-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .nc-card { padding: 12px; } .nc-card .vstage { padding: 16px 10px; } .nc-v { font-size: 20px; } }
@media (max-width: 400px) { .vpan { font-size: 15px; letter-spacing: .06em; } .vcard { padding: 14px 16px; } }

/* ---------- Lower area: activity left, requests and settings right ---------- */
.nc-lower { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 30px; }
.nc-lower.solo { grid-template-columns: minmax(0, 1fr); }
.nc-col { display: grid; gap: 16px; min-width: 0; }
.nc-more { display: grid; gap: 10px; }
.nc-more details.disclosure + details.disclosure { margin-top: 0; }
.nc-more summary h2 { font-size: 12px; letter-spacing: 0; line-height: 1.5; }
.nc-moves, .nc-ask { overflow: hidden; }
@media (max-width: 1000px) {
  .nc-lower { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .nc-col { display: contents; }
  .nc-ask { order: 1; } .nc-moves { order: 2; } .nc-chart { order: 3; } .nc-more { order: 4; }
}

/* Ask for balance */
.nc-ask-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px; }
.nc-ask-form input, .nc-ask-form select { width: 100%; min-height: 40px; }
.nc-ask-form button { grid-column: 1 / -1; }
.nc-ask .sheet-body > .hint { margin-top: 12px; }
.nc-ask-alt { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-soft); }
.nc-ask-alt .btn { width: 100%; }
.nc-requests { padding: 16px 20px 8px; border-top: 1px solid var(--rule); }
.nc-requests h3 { font-size: 12px; margin-bottom: 4px; }
.nc-reqs { list-style: none; margin: 0; padding: 0; }
.nc-reqs > li, .nc-reqs ul > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule-soft); }
.nc-reqs > li:first-child { border-top: 0; }
.nc-reqs ul { list-style: none; margin: 0; padding: 0; }
.nc-reqs .empty { display: block; padding: 18px 0; text-align: left; }
.rq { display: grid; gap: 2px; min-width: 0; }
.rq b { font-size: 15px; font-weight: 650; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.rq span, .rq small { font-size: 11px; color: var(--muted); font-weight: 450; }
.rq small { color: var(--faint); }
.rq-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.nc-reqs-more { display: block !important; padding: 6px 0 4px !important; }
.nc-reqs-more summary { cursor: pointer; font-size: 11px; font-weight: 550; color: var(--blue); }

/* Disclosure bodies */
.nc-lost-form { display: grid; gap: 12px; margin: 14px 0 10px; }
.nc-lost-form select { width: 100%; }
.nc-lost-form button { width: 100%; min-height: 40px; }
.nc-settings { display: grid; gap: 12px; }
.nc-settings input[type=number] { width: 100%; }
.nc-prefs { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.nc-prefs legend { padding: 0; margin-bottom: 8px; font-size: 11px; font-weight: 550; color: var(--muted); }
.nc-settings > button.primary { justify-self: start; }
.disclosure-body.faq > details { border-top: 1px solid var(--rule-soft); padding: 0; }
.disclosure-body.faq > details:first-child { border-top: 0; }
.disclosure-body.faq > details > summary { padding: 11px 0; }
.disclosure-body.faq .steps { margin-bottom: 12px; }
.nc-list { list-style: none; margin: 10px 0 0; padding: 0; }
.nc-list > li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule-soft); font-size: 12px; }
.nc-list > li > div { display: grid; gap: 2px; }
.nc-list span { color: var(--muted); font-size: 11px; }
.nc-list code { font-family: var(--mono); }

/* ---------- Movements list (client home, history, admin/reseller history) ---------- */
.mv-list { list-style: none; margin: 0; padding: 0; }
.mv-day { padding: 8px 20px; background: var(--inset); }
.mv-day h3 { margin: 0; font-size: 11px; font-weight: 650; letter-spacing: 0; color: var(--ink); }
.mv-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 12px 20px; border-top: 1px solid var(--rule-soft); }
.mv-row > .mv-icon, .mv-row > .mv-copy { grid-row: 1 / span 2; }
.mv-day + .mv-row { border-top: 0; }
.mv-row:hover { background: var(--hover); }
.mv-copy { min-width: 0; display: grid; gap: 2px; }
.mv-title { font-size: 12.5px; font-weight: 650; letter-spacing: -.1px; line-height: 1.4; }
.mv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 12px; color: var(--faint); }
.mv-meta .mv-pending { padding: 1px 6px; border-radius: 5px; background: var(--warning-soft); color: var(--warning); font-weight: 600; }
.mv-reason { font-size: 12px; font-weight: 550; color: var(--danger); }
.mv-details .mv-next { color: var(--ink); font-weight: 550; }
.mv-fees { font-size: 10px; color: var(--faint); }
.mv-amount { grid-column: 3; grid-row: 1 / span 2; text-align: right; white-space: nowrap; font-size: 13px; font-variant-numeric: tabular-nums; }
.mv-row:has(> .mv-details) .mv-amount { grid-row: 1; align-self: end; }
.mv-amount b { font-weight: 600; }
.mv-amount .pos { color: var(--green); }
.mv-amount small { margin-left: 4px; font-size: 10px; font-weight: 550; color: var(--faint); }
.mv-amount .muted { font-size: 13px; color: var(--faint); }
.mv-declined .mv-title { color: var(--muted); font-weight: 600; }
.mv-pending .mv-icon { background: var(--warning-soft); color: var(--warning); }
.mv-details { grid-column: 3; grid-row: 2; justify-self: end; font-size: 12px; }
.mv-details[open] { grid-column: 2 / -1; grid-row: 3; justify-self: stretch; margin-top: 8px; }
.mv-details summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 32px; padding: 0 4px; font-weight: 550; color: var(--blue); }
.mv-details p { margin: 6px 0 0; color: var(--muted); line-height: 1.6; }
.mv-details a { display: inline-block; margin-top: 6px; font-weight: 550; }
.mv-empty { display: grid; justify-items: center; gap: 6px; padding: 40px 20px; text-align: center; color: var(--muted); font-size: 12px; }
.mv-empty .icon { width: 24px; height: 24px; color: var(--faint); }
.mv-empty p { max-width: 36ch; }
@media (max-width: 520px) {
  .mv-day { padding: 8px 16px; }
  .mv-row { padding: 12px 16px; column-gap: 10px; }
  .mv-amount small { display: none; }
}

/* ---------- History ---------- */
.mv-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 12px; align-items: end; padding: 16px 20px; }
.mv-filters .mv-search { grid-column: span 2; }
.mv-filters input, .mv-filters select { width: 100%; min-height: 38px; }
.mv-filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; grid-column: 1 / -1; }
.mv-filter-actions .btn, .mv-filter-actions button { min-height: 38px; }
.mv-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0 20px 14px; }
.mv-chips .chip-tag { min-height: 32px; padding: 4px 10px; font-size: 12px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.mv-chips .chip-tag:hover { border-color: var(--blue); color: var(--blue); }
.mv-page { align-self: center; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mv-results { overflow: hidden; margin-top: 16px; }
.mv-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--rule); }
.mv-pagination .btn:only-child { margin-left: auto; }
@media (max-width: 640px) {
  .mv-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 16px; }
  .mv-filters .mv-search, .mv-filter-actions { grid-column: 1 / -1; }
  .mv-filter-actions button { flex: 1; }
  .mv-chips { padding: 0 16px 12px; }
}
@media (max-width: 360px) {
  .mv-filters { grid-template-columns: minmax(0, 1fr); }
  .mv-pagination { flex-direction: column; align-items: stretch; }
  .mv-pagination .btn:only-child { margin-left: 0; }
}
@media (pointer: coarse) {
  .mv-filters input, .mv-filters select, .mv-filter-actions .btn, .mv-filter-actions button, .mv-chips .chip-tag, .mv-chips .btn, .mv-details summary { min-height: 44px; }
  .mv-meta, .mv-reason, .mv-details, .mv-page, .cl-card-money span, .nc-list span, .nc-k, .nc-list > li, .nc-card-reason { font-size: 14px; }
  .cl-name > summary, .nc-card-name > summary, .nc-lost, .nc-reqs-more summary { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
}

/* ---------- Help ---------- */
.nc-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 22px 24px; margin-bottom: 16px; }
.nc-contact .nc-k { margin-bottom: 4px; }
.nc-contact-v { font-size: 20px; font-weight: 600; letter-spacing: -.6px; line-height: 1.3; }
.nc-contact .hint { margin-top: 4px; }
.nc-faq { overflow: hidden; }
.nc-faq + .nc-faq { margin-top: 16px; }
.nc-faq > h2 { padding: 16px 20px 6px; font-size: 13px; letter-spacing: -.2px; }
.nc-faq > details { border-top: 1px solid var(--rule-soft); }
.nc-faq > h2 + details { border-top: 0; }
.nc-faq > details > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; font-size: 12.5px; font-weight: 650; cursor: pointer; list-style: none; }
.nc-faq > details > summary::-webkit-details-marker { display: none; }
.nc-faq > details > summary::after { content: ""; flex: none; width: 14px; height: 14px; background: var(--muted); -webkit-mask: var(--i-chevron) center / contain no-repeat; mask: var(--i-chevron) center / contain no-repeat; transition: transform .15s; }
.nc-faq > details[open] > summary::after { transform: rotate(180deg); }
.nc-faq > details > summary:hover { background: var(--hover); }
.nc-faq > details > p, .nc-faq > details > ul { margin: 0 20px 16px; color: var(--muted); font-size: 12.5px; line-height: 1.75; max-width: 70ch; }
.nc-faq > details > p + ul { margin-top: -6px; }
.nc-faq > details > ul { padding-left: 18px; display: grid; gap: 8px; }
.nc-faq > p { margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--rule-soft); }

/* ---------- Account ---------- */
.nc-account .sheet + .sheet { margin-top: 16px; }
.nc-account .sheet-body form { display: grid; gap: 14px; }
.nc-account .sheet-body input:not([type=checkbox]):not([type=radio]) { width: 100%; min-height: 40px; }
.nc-account .sheet-body .form-actions { margin-top: 2px; justify-content: flex-start; }
.nc-account dl.kv dd { max-width: 60%; overflow-wrap: anywhere; }
.sess li { gap: 12px; }
.sess .mvw b { font-size: 12.5px; font-weight: 650; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sess .mvw .muted { font-size: 11px; }
.sess form { flex: none; }

/* ---------- Reveal pages ---------- */
.nc-reveal { max-width: 460px; margin: 28px auto; padding: 22px; }
.nc-reveal h1 { font-size: 20px; letter-spacing: -.6px; }
.nc-reveal .subheading { margin-bottom: 16px; }
.nc-reveal form { display: grid; gap: 14px; margin-top: 14px; }
.nc-reveal .vcard { max-width: none; margin: 16px 0; }
.nc-reveal .note, .nc-reveal .notice { margin: 0 0 16px; }
.nc-reveal input.otp { max-width: none; min-height: 48px; }
.nc-reveal .nc-reveal-back { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 550; }

/* ---------- Offline ---------- */
.nc-offline { max-width: 520px; margin: 32px auto; padding: 30px 26px; text-align: center; }
.nc-offline .auth-symbol { margin: 0 auto 18px; }
.nc-offline h1 { margin-bottom: 8px; }
.nc-offline h2 { margin: 22px 0 6px; font-size: 14px; }
.nc-offline p { color: var(--muted); font-size: 12.5px; line-height: 1.75; }
.nc-offline .nc-offline-help { text-align: left; padding: 16px 18px; margin-top: 22px; background: var(--inset); border-radius: 12px; }
.nc-offline .nc-offline-help h2 { margin-top: 0; }
.nc-offline .btn { margin-top: 20px; }
.nc-offline p + p, .nc-offline-help p + p { margin-top: 10px; }

/* ---------- Sign-in pages ---------- */
body.bare main.content:has(> .auth) { max-width: none; padding: 0; }
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
.auth-card { width: min(380px, 100%); margin: auto; padding: 40px 24px; }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 36px; color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: -.5px; }
.auth-brand:hover { color: var(--ink); }
.auth-card h1 { font-size: 28px; letter-spacing: -1.1px; }
.auth-card .eyebrow { margin-bottom: 12px; }
.auth-card .subheading { margin-bottom: 4px; }
.auth-card .notice { margin: 22px 0 0; }
.auth-form { display: grid; gap: 16px; margin-top: 26px; }
.auth-form input:not([type=checkbox]) { width: 100%; min-height: 44px; }
.auth-form button.primary { width: 100%; min-height: 44px; font-size: 12px; }
.auth-form .chk { align-items: flex-start; font-size: 12px; color: var(--muted); line-height: 1.5; }
.auth-form .chk input { margin-top: 2px; flex: none; }
.auth-form .code-input { font-size: 26px; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; padding-left: .4em; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 22px; font-size: 12px; font-weight: 550; }
.auth-note { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 11px; color: var(--faint); line-height: 1.7; }
.auth .auth-symbol, .nc-offline .auth-symbol { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); margin-bottom: 20px; }
.auth .auth-symbol .icon, .nc-offline .auth-symbol .icon { width: 22px; height: 22px; }
.auth-story { display: none; }
@media (min-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .auth-story { order: -1; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 44px 56px; background: var(--inset); border-right: 1px solid var(--rule); }
  .auth-story .auth-brand { margin: 0; }
  .auth-hero { max-width: 420px; display: grid; gap: 28px; margin: auto 0; }
  .auth-hero h2 { font-size: 30px; line-height: 1.25; letter-spacing: -1.2px; }
  .auth-hero ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
  .auth-hero li { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.6; color: var(--muted); }
  .auth-hero li .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--blue); }
  .auth-story .vcard { max-width: 300px; transform: rotate(-3deg); box-shadow: 0 2px 4px #0000001a, 0 24px 48px #1d1e2433; }
  .auth-foot { font-size: 11px; color: var(--faint); }
  .auth-card .auth-brand { display: none; }
}
@media (max-width: 899px) {
  .auth-card { padding: 28px 20px 40px; }
  .auth-brand { margin-bottom: 28px; }
  .auth-card h1 { font-size: 25px; }
}

body.bare .toasts { top: 16px; bottom: auto; right: auto; left: 50%; transform: translateX(-50%); }

/* ===== Client home, task-first (same language as the reseller view) =====
   One dark block with the number that matters, the cards with their two actions, ask for balance, activity. */
.cl { max-width: 760px; margin: 0 auto; width: 100%; display: grid; gap: 18px; }
.cl > * { min-width: 0; }
.cl .notice { margin: 0; }
.cl-title { font-size: clamp(26px, 2.6vw, 32px); margin-bottom: -4px; }
.cl-hero { background: var(--ink); color: var(--sheet); border-radius: 18px; padding: 24px 26px; }
.cl-label { font-size: 13px; font-weight: 600; opacity: .72; }
.cl-value { margin-top: 4px; font-size: 44px; line-height: 1.1; font-weight: 650; letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.cl-value small { font-size: 15px; font-weight: 600; opacity: .6; letter-spacing: 0; }
.cl-sub { margin-top: 8px; font-size: 14px; opacity: .85; }
.cl-hero .cl-warn { color: var(--warning-soft); font-weight: 650; }
.cl-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.cl-actions .btn { min-height: 42px; padding: 10px 18px; font-size: 13px; }
.cl-hero .btn:not(.primary) { background: transparent; color: var(--sheet); border-color: color-mix(in srgb, var(--sheet) 30%, transparent); box-shadow: none; }
.cl-hero .btn:not(.primary):hover { background: color-mix(in srgb, var(--sheet) 10%, transparent); }
.cl-hero .btn.primary { background: var(--sheet); color: var(--ink); border-color: var(--sheet); }
.cl-hero .btn.primary:hover { background: var(--inset); border-color: var(--inset); color: var(--ink); }
.cl-sheet { background: var(--sheet); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow); padding: 20px 22px; }
.cl-sheet h2, .cl-head h2 { font-size: 17px; letter-spacing: -.4px; }
.cl-empty { display: grid; gap: 4px; text-align: center; justify-items: center; padding: 34px 22px; font-size: 13px; color: var(--muted); }
.cl-empty b { color: var(--ink); font-size: 15px; }
.cl-empty .icon { width: 26px; height: 26px; color: var(--faint); margin-bottom: 6px; }

/* Cards */
.cl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cl-caption { font-size: 12px; color: var(--muted); }
.cl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cl-cards.one { grid-template-columns: minmax(0, 1fr); }
.cl-card { background: var(--sheet); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow); padding: 16px; display: grid; gap: 14px; min-width: 0; }
.cl-card .vwrap { display: flex; flex-direction: column; gap: 12px; }
.cl-card .vstage { order: 1; display: grid; place-items: center; }
.cl-card .vcard { max-width: 360px; }
.cl-card .reveal { order: 2; }
.cl-card .cl-card-money { order: 3; }
.cl-card .reveal [data-reveal-req] button { width: 100%; min-height: 44px; font-size: 13px; }
.cl-card .reveal .hint { text-align: center; font-size: 11px; margin-top: 6px; }
.cl-card .reveal [data-reveal-msg]:empty { display: none; }
.cl-card-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; padding-top: 12px; border-top: 1px solid var(--rule-soft); }
.cl-card-money > div { display: grid; gap: 2px; }
.cl-card-money span { font-size: 12px; color: var(--muted); font-weight: 550; }
.cl-card-money b { font-size: 18px; font-weight: 650; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.cl-card-money > div:first-child b { font-size: 22px; }
.cl-card-money b small { font-size: 11px; color: var(--faint); font-weight: 550; letter-spacing: 0; }
.cl-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--rule-soft); }
.cl-ctrl-live { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; }
.cl-ctrl-live form { margin: 0; }
.cl-reason { flex: 1 0 100%; display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 9px 12px; background: var(--warning-soft); color: var(--warning); border-radius: 9px; font-size: 12px; line-height: 1.5; }
.cl-reason .icon { width: 14px; height: 14px; margin-top: 2px; }
.cl-name > summary { list-style: none; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 4px; }
.cl-name > summary::-webkit-details-marker { display: none; }
.cl-name > summary:hover { color: var(--ink); }
.cl-name[open] { flex: 1 0 100%; }
.cl-name-form { display: flex; gap: 8px; margin-top: 4px; }
.cl-name-form input { flex: 1; width: auto; }

/* Ask for balance */
.cl-ask { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-top: 14px; }
.cl-ask label.f { grid-column: 1 / -1; }
.cl-ask label.f select { width: 100%; min-height: 40px; }
.cl-amount { display: flex; align-items: center; gap: 8px; background: var(--inset); border-radius: 12px; padding: 4px 16px 4px 4px; border: 1px solid transparent; }
.cl-amount:focus-within { border-color: var(--blue); background: var(--sheet); }
.cl-amount input { flex: 1; min-width: 0; width: auto; font-size: 24px; font-weight: 650; letter-spacing: -.8px; padding: 8px 12px; background: transparent; border: 0; font-variant-numeric: tabular-nums; }
.cl-amount input:focus-visible { outline: 0; background: transparent; }
.cl-amount span { font-size: 13px; font-weight: 600; color: var(--faint); }
.cl-ask button.lg { width: auto; min-width: 120px; min-height: 52px; font-size: 14px; }
#pedir-saldo > .hint { margin-top: 10px; font-size: 12px; }
.cl-alt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.cl-alt .hint { margin: 0; font-size: 12px; }
.cl-reqs { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule-soft); }
.cl-reqs h3 { font-size: 13px; color: var(--muted); margin-bottom: 4px; }

/* Activity and footer */
.cl #movimientos { margin: 0; }
.cl #movimientos .sheet-head h2 { font-size: 17px; letter-spacing: -.4px; }
.cl-lost > summary span { display: inline-flex; align-items: center; gap: 8px; }
.cl-lost > summary .icon { width: 16px; height: 16px; color: var(--danger); }
.cl-lost-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.cl-links { display: flex; justify-content: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--faint); padding: 4px 0 8px; }
.cl-links a { color: var(--muted); }
.cl-links a:hover { color: var(--ink); }

@media (max-width: 700px) {
  .cl-cards { grid-template-columns: minmax(0, 1fr); }
  .cl-hero { padding: 22px 20px; border-radius: 16px; }
  .cl-value { font-size: 40px; }
  .cl-actions .btn { flex: 1 1 0; }
  .cl-sheet { padding: 18px 16px; }
  .cl-card { padding: 14px; }
  .cl-ask { grid-template-columns: minmax(0, 1fr); }
  .cl-ask button.lg { width: 100%; }
}

/* Bloque 6: checklist de inicio, tope y pedidos */
.cl-steps { margin: 0 0 14px; }
.cl-steps-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.cl-steps-list li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.cl-steps-list li.done { color: var(--muted); text-decoration: line-through; }
.cl-cap { font-size: 14px; color: var(--muted); margin-top: 4px; }
.cl-period { font-size: 12px; color: var(--muted); }
.cl-reqs-all summary { cursor: pointer; font-size: 14px; }
/* Bloque 9: texto operativo >=14px y toques >=44px en táctil; 320px no corta PAN ni acciones */
.cl-steps .btn { margin-top: 12px; }
@media (pointer: coarse) {
  .nc-home .hint, .nc-account .hint, .nc-reveal .hint, .rq span, .rq small, .nc-list span, .mv-meta, .mv-reason, .mv-details, .cl-period, .cl-caption, .cl-reason { font-size: 14px; }
  .mv-details summary, .cl-name > summary, details.cl-name summary, .cl-reqs-all summary, button.link, .cl-links a, .cl-links button { min-height: 44px; display: inline-flex; align-items: center; }
  .reveal .row > button { flex: 1 1 45%; }
}
@media (max-width: 360px) { .vpan { font-size: 14px; letter-spacing: .04em; } .reveal .row > button { flex: 1 1 100%; } .cl-ctrl-live form, .cl-ctrl-live form button { width: 100%; } }