/* Mobia2Z — accounts, trade prices, orders and the help pages. Uses the shop's tokens (shop.css + look-caja.css). */
.lock { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--r-m); background: var(--sunk); color: var(--ink-2); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background-color 150ms ease, color 150ms ease }
@media (hover: hover) { .lock:hover { background: var(--action); color: var(--action-ink) } }
.opt-lock { grid-column: 3 / -1; justify-self: end }
.badge-out { background: #fdecec; color: #a3261d }
.stock { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600 }
.stock.in { color: var(--ok) }
.stock.out { color: var(--bad) }
.bb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.bb-lock b { display: block; font-size: 18px; font-family: var(--font-display); letter-spacing: -0.01em }
.bb-lock p { color: var(--ink-2); margin-top: 6px; font-size: 14.5px }
.bb-off { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2) }
.notice { background: #fff6e0; color: #6b4a00; border-bottom: 1px solid #f1dfae; font-size: 14px }
.notice .wrap { display: flex; align-items: center; gap: 10px; min-height: 40px; padding-block: 8px }
.empty-a { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px }
.empty-a .btn { margin-top: 0 }
.oline.off { opacity: .62 }
.oline .warn { display: block; color: var(--bad); font-weight: 600; font-size: 12.5px }
.oline .qty { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2); min-width: 44px; text-align: right }
.form-err { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-m); background: #fdecec; color: #8f2219; font-size: 14px }
.form-err[hidden] { display: none }
.form-ok { color: var(--ok); font-weight: 600; font-size: 14px }
.sent { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px; margin-bottom: 22px; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-1), 0 0 0 1px var(--line) }
.sent h1 { font-size: clamp(24px, 2.6vw, 34px) }
.sent p { color: var(--ink-2); margin-top: 6px }
.sent .done-mark { margin: 0 }
.sent-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px }
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 4px 0 26px; padding: 18px 20px; border-radius: var(--r-l); background: var(--surface); box-shadow: 0 0 0 1px var(--line); list-style: none }
.steps li { position: relative; display: grid; grid-template-rows: 28px auto auto; gap: 6px; padding-right: 12px; color: var(--ink-3) }
.steps li::after { content: ""; position: absolute; left: 34px; right: 6px; top: 13px; height: 2px; background: var(--line) }
.steps li:last-child::after { display: none }
.steps li.is-done::after { background: var(--action) }
.steps i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--sunk); color: #fff; box-shadow: inset 0 0 0 2px var(--line-2) }
.steps li.is-done i { background: var(--action); box-shadow: none }
.steps li.is-cur i { box-shadow: 0 0 0 4px color-mix(in oklab, var(--action) 22%, transparent) }
.steps b { font-size: 14px; color: var(--ink); font-weight: 600 }
.steps li:not(.is-done) b { color: var(--ink-3); font-weight: 500 }
.steps small { font-size: 12.5px }
.notice-off { display: flex; gap: 10px; align-items: center; padding: 14px 16px; margin-bottom: 18px; color: var(--bad); font-weight: 600 }
.od .oline { grid-template-columns: 56px minmax(0, 1fr) auto auto 0 }
.od-k { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px }
.od-k b { display: block; margin-bottom: 2px }
.od-k span { color: var(--ink-2) }
.st { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 5px; font-size: 12.5px; font-weight: 650; white-space: nowrap; vertical-align: middle }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50% }
.st-new { background: #e8edff; color: #1d33a8 }
.st-new::before { background: #2f4bdb }
.st-work { background: #fff3d6; color: #7a5200 }
.st-work::before { background: #d99400 }
.st-go { background: #e3f4ec; color: #0e6a3f }
.st-go::before { background: #17955a }
.st-done { background: #eceef2; color: #3f4552 }
.st-done::before { background: #7c8392 }
.st-off { background: #fdecec; color: #8f2219 }
.st-off::before { background: #d23b30 }
.acct-grid, .info-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; align-items: start }
.acct-nav, .info-nav { position: sticky; top: calc(var(--head-h) + var(--nav-h) + 20px); display: flex; flex-direction: column; gap: 2px }
.acct-nav a, .info-nav a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: var(--r-m); color: var(--ink-2); font-weight: 500; font-size: 14.5px; transition: background-color 150ms ease, color 150ms ease }
.acct-nav a[aria-current="page"], .info-nav a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1), 0 0 0 1px var(--line) }
@media (hover: hover) { .acct-nav a:hover, .info-nav a:hover { color: var(--ink); background: var(--sunk) } }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.kpi { padding: 16px 18px; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-1), 0 0 0 1px var(--line) }
.kpi small { display: block; color: var(--ink-2); font-size: 13.5px }
.kpi b { display: block; margin-top: 4px; font: 700 26px/1.1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums }
.notice-wait { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 16px 18px; margin-bottom: 16px; background: #fff8e6; box-shadow: 0 0 0 1px #f1dfae }
.notice-wait p { color: #6b4a00; font-size: 14px; margin-top: 4px }
.otable { border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); overflow: hidden }
.otr { display: grid; grid-template-columns: 1.2fr 1fr .7fr 1.2fr 1fr; gap: 12px; align-items: center; min-height: 54px; padding: 8px 18px; border-top: 1px solid var(--line); font-size: 14.5px; transition: background-color 150ms ease }
.otr:first-child { border-top: 0 }
.oth { min-height: 40px; background: var(--surface-2); color: var(--ink-3); font-size: 13px; font-weight: 600 }
.otr > :last-child { text-align: right }
@media (hover: hover) { a.otr:hover { background: var(--surface-2) } }
.form h2 { font-size: 18px; margin-bottom: 14px }
.card.form { padding: 20px }
.form-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px }
.fld { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink) }
.fld input, .fld select, .fld textarea { height: 44px; padding: 0 12px; border-radius: var(--r-m); border: 1px solid var(--line-2); background: var(--surface); font: 400 16px var(--font-ui); color: var(--ink); transition: border-color 150ms ease, box-shadow 150ms ease }
.fld textarea { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 0; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus) 20%, transparent) }
.fld small { font-weight: 400; color: var(--ink-3); font-size: 12.5px }
.form-a { display: flex; align-items: center; gap: 14px; margin-top: 18px }
.check { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 16px; font-size: 14px; color: var(--ink-2); cursor: pointer }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--action) }
.auth { display: grid; place-items: start center }
.auth-card { width: min(460px, 100%); padding: 28px; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-2), 0 0 0 1px var(--line) }
.auth-card.wide { width: min(760px, 100%) }
.auth-card h1 { font-size: clamp(26px, 2.6vw, 34px) }
.auth-card > .muted { margin-top: 6px }
.auth-card .form { margin-top: 22px; display: grid; gap: 14px }
.auth-card .form-g + .check { margin-top: 0 }
.auth-alt { margin-top: 16px; font-size: 14px; color: var(--ink-2) }
.demo-box { margin-top: 22px; padding: 16px; border-radius: var(--r-m); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line) }
.demo-box b { font-size: 14.5px }
.demo-box > p { color: var(--ink-2); font-size: 13.5px; margin-top: 2px }
.demo-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px }
.demo-k { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); line-height: 1.7 }
.prose { max-width: 72ch; font-size: 16px; line-height: 1.65; color: var(--ink) }
.prose h2 { font-size: 21px; margin: 28px 0 8px }
.prose h2:first-child { margin-top: 0 }
.prose h2 small { font: 400 14px var(--font-ui); color: var(--ink-3); letter-spacing: 0; margin-left: 8px }
.prose ul, .prose ol { padding-left: 1.2em; list-style: revert; display: grid; gap: 6px }
.prose p + p { margin-top: 12px }
.prose .note { margin-top: 14px; padding: 10px 12px; border-radius: var(--r-m); background: #fff6e0; color: #6b4a00; font-size: 14px }
.qguide { display: grid; gap: 4px; margin: 0 0 18px }
.qguide dt { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-weight: 700; font-size: 17px }
.qguide dd { margin: 4px 0 0 30px; color: var(--ink-2) }
.faq { border-top: 1px solid var(--line); padding: 4px 0 }
.faq:last-child { border-bottom: 1px solid var(--line) }
.faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; font-weight: 400; color: var(--ink-3); font-size: 20px; line-height: 1; transition: transform 200ms var(--ease-out) }
.faq[open] summary::after { transform: rotate(45deg) }
.faq p { padding: 0 0 14px; color: var(--ink-2) }
.prose .contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: none }
.info .prose:has(.contact) { max-width: none }
.contact .card { padding: 18px }
.contact h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 16px }
.contact .big { font: 650 19px/1.3 var(--font-display); letter-spacing: -0.01em; margin-bottom: 12px; overflow-wrap: anywhere }
.credits { padding-left: 1.1em; font-size: 13.5px; color: var(--ink-2); display: block; columns: 2; column-gap: 28px }
.credits li { break-inside: avoid; margin-bottom: 4px }
@media (max-width: 900px) {
  .acct-grid, .info-grid { grid-template-columns: minmax(0, 1fr) }
  .acct-nav, .info-nav { position: static; flex-direction: row; overflow-x: auto; gap: 4px; scrollbar-width: none }
  .acct-nav a, .info-nav a { white-space: nowrap; background: var(--surface); box-shadow: 0 0 0 1px var(--line) }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 12px }
  .steps li { grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; padding: 0 }
  .steps li i { grid-row: 1 / 3 }
  .steps li::after { left: 13px; right: auto; top: 32px; width: 2px; height: calc(100% - 20px) }
  .kpis { grid-template-columns: minmax(0, 1fr) }
  .form-g { grid-template-columns: minmax(0, 1fr) }
  .otr { grid-template-columns: 1fr auto; row-gap: 2px }
  .oth { display: none }
  .otr > :nth-child(2), .otr > :nth-child(3) { font-size: 13px; color: var(--ink-2) }
  .prose .contact { grid-template-columns: minmax(0, 1fr) }
  .credits { columns: 1 }
  .sent { grid-template-columns: minmax(0, 1fr) }
  .od .oline { grid-template-columns: 48px minmax(0, 1fr) auto }
}

.ln-m { display: block }