/* ================= Grand Lux: выбор магазина, надписи, размеры, долги ================= */

/* Надпись магазина (вместо логотипа) — цвет по теме */
.brand { font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; font-weight: 700; font-size: 22px; letter-spacing: 1px; white-space: nowrap;
  background: linear-gradient(180deg, var(--accent2), var(--accent) 55%, var(--accent3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand.mid { font-size: 30px; }
.brand.big { font-size: 40px; letter-spacing: 1.5px; display: block; }
[data-theme="graphite"] .brand { background: linear-gradient(180deg, #fff, #a1a1aa); -webkit-background-clip: text; background-clip: text; }
.drawer-head .brand { font-size: 26px; }
.watermark { font-family: "Palatino Linotype", Georgia, serif; letter-spacing: 2px; }

/* ================= Выбор магазина ================= */
body.logged-out .topbar, body.logged-out main, body.logged-out .watermark { visibility: hidden; }
.chooser { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; overflow-y: auto; padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  background: radial-gradient(900px 520px at 50% 0%, rgba(212, 175, 55, .10), transparent 65%), radial-gradient(600px 400px at 50% 110%, rgba(212, 175, 55, .06), transparent 70%), var(--bg); }
.chooser[hidden] { display: none; }
.ch-box { width: min(900px, 100%); text-align: center; }
.ch-title { color: var(--muted); letter-spacing: 6px; text-transform: uppercase; font-size: 13px; margin-bottom: 26px; animation: rise .6s ease both; }
.ch-shops { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ch-shop { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 18px 22px; border-radius: 22px; border: 1px solid transparent; transition: transform .2s, border-color .2s, background .2s; animation: coin .7s cubic-bezier(.2, .9, .3, 1.2) both; }
.ch-shop img { width: min(300px, 100%); aspect-ratio: 1; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); transition: transform .25s, filter .25s; user-select: none; }
.ch-shop:hover { border-color: var(--border); background: var(--hover); }
.ch-shop:hover img { transform: scale(1.04) rotate(-2deg); filter: drop-shadow(0 22px 40px rgba(212, 175, 55, .25)); }
.ch-shop:active img { transform: scale(.98); }
.ch-name { font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif; font-size: 26px; font-weight: 700; letter-spacing: 1px;
  background: linear-gradient(180deg, #f6dc8c, #d4af37 55%, #a8841f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ch-who { color: var(--muted); font-size: 13px; min-height: 18px; }
.ch-general { margin: 26px auto 0; width: min(560px, 100%); display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 18px; text-align: left;
  background: var(--surface); border: 1px solid var(--border2); transition: .2s; animation: rise .7s .35s ease both; }
.ch-general > svg { width: 30px; height: 30px; color: var(--accent); flex: none; }
.ch-general > svg:last-child { width: 20px; height: 20px; margin-left: auto; color: var(--faint); }
.ch-general b { display: block; font-size: 19px; font-family: "Palatino Linotype", Georgia, serif; }
.ch-general small { color: var(--muted); font-size: 13px; }
.ch-general:hover { border-color: var(--accent); transform: translateY(-2px); }
.chooser .login-server { margin-top: 18px; }
@keyframes coin { from { opacity: 0; transform: translateY(30px) scale(.85); } to { opacity: 1; transform: none; } }

/* Вход */
.unlock-links { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.unlock-links .login-back { margin-top: 0; }
.login-box > .brand { margin-bottom: 8px; }
.login-sub { color: var(--muted); margin-bottom: 24px; font-size: 14px; }
.login-name .adm-badge { margin-left: auto; }
.adm-badge { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .5px; color: var(--accent); background: var(--accent-soft); padding: 3px 8px; border-radius: 10px; vertical-align: 1px; }
.lock-card .brand { margin-bottom: 18px; display: block; }
.about .brand { display: block; margin-bottom: 8px; }

/* ================= Главная ================= */
.sale-grid { grid-template-columns: 40px 150px 1fr 150px 110px 130px 40px; }
.size-wrap .inp { padding: 0 10px; color-scheme: var(--scheme); font-weight: 600; }
.size-wrap .inp:disabled { opacity: .55; }
.size-wrap .inp.need { border-color: var(--warn); color: var(--warn); box-shadow: 0 0 0 3px rgba(245, 158, 11, .12); }
.sale-card + .sale-card, .sale-card + .debt-form { margin-top: 16px; }
.sale-card-title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; padding: 14px 0 2px; }
.sale-card-title svg { width: 20px; height: 20px; color: var(--accent); }
.back-card .sale-card-title svg { color: var(--red); }
.back-card { border-color: rgba(239, 68, 68, .35); }
.sale-row.back .sum-cell { color: var(--red); }
.mode-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; font-size: 14px; background: var(--accent-soft); color: var(--accent); }
.mode-banner svg { width: 20px; height: 20px; }
.mode-banner.return { background: var(--red-soft); color: var(--red); }
.mode-banner.exchange { background: rgba(96, 165, 250, .12); color: var(--blue); }
.mode-banner.debt { background: rgba(245, 158, 11, .12); color: var(--warn); }
.debt-form { margin-top: 16px; padding: 18px 22px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.debt-form .field { margin: 0; }

.sale-footer { flex-wrap: wrap; align-items: stretch; }
.sum-block { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; flex: 1; }
.sum-line span, .disc-line > span:first-child { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; }
.sum-line b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sum-line small { color: var(--muted); font-size: 12.5px; margin-left: 8px; }
.disc-line .price-wrap { display: block; width: 150px; }
.disc-line .inp { height: 42px; font-size: 16px; }
.disc-line .price-wrap .cur { top: 11px; }
.inp.bad { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.total.ret b { color: var(--red); }
.total.pay b { color: var(--green); }
.sold-wrap { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.btn.sold { margin-left: 0; }
.btn.sold.debt { background: linear-gradient(180deg, #fbbf24, #d97706); box-shadow: 0 10px 28px rgba(245, 158, 11, .3); color: #261500; }
.btn.sold.ret { background: linear-gradient(180deg, #f87171, #dc2626); box-shadow: 0 10px 28px rgba(239, 68, 68, .3); }
.btn.sold.swap { background: linear-gradient(180deg, #60a5fa, #2563eb); box-shadow: 0 10px 28px rgba(59, 130, 246, .3); }
.other-btn { height: 44px; padding: 0 14px; font-size: 14px; }
.other-btn svg { width: 18px; height: 18px; }
.other-wrap { position: relative; }
.other-menu { position: absolute; right: 0; bottom: calc(100% + 8px); min-width: 190px; padding: 6px; z-index: 30; background: var(--surface2); border: 1px solid var(--border2); border-radius: 12px; box-shadow: var(--shadow); animation: pop .14s ease; }
.other-menu[hidden] { display: none; }
.other-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 9px; font-size: 15px; font-weight: 600; text-align: left; }
.other-menu button svg { width: 20px; height: 20px; color: var(--accent); }
.other-menu button:hover { background: var(--accent-soft); }

.kind { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 10px; white-space: nowrap; letter-spacing: .3px; }
.k-sale { background: rgba(34, 197, 94, .13); color: var(--green); }
.k-debt { background: rgba(245, 158, 11, .14); color: var(--warn); }
.k-ret { background: var(--red-soft); color: var(--red); }
.k-swap { background: rgba(96, 165, 250, .13); color: var(--blue); }
.today-item .names .minus { color: var(--red); }
.today-item .names .sz { color: var(--accent); font-weight: 600; }
.today-item .s.neg { color: var(--red); }
.shop-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9px; background: var(--surface3); color: var(--muted); white-space: nowrap; }
.shop-tag.men { background: rgba(96, 165, 250, .12); color: var(--blue); }
.shop-tag.lux { background: var(--accent-soft); color: var(--accent); }
.shop-seg { margin-bottom: 18px; }

/* ================= Остатки ================= */
.cat-title h2 { font-size: 22px; padding: 6px 0; }
.cat-sizes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--border); font-size: 14px; }
.cs-label { color: var(--muted); margin-right: 4px; }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 11px; border-radius: 15px; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.chip button { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; line-height: 1; color: inherit; opacity: .7; }
.chip button:hover { background: var(--red); color: #fff; opacity: 1; }
[data-theme="graphite"] .chip { color: var(--text); }
.cs-add { width: 190px; height: 32px; border-radius: 16px; font-size: 13.5px; }
.stock-tbl .w-size { width: 190px; }
.stock-tbl td.tot { font-weight: 700; }
.stock-tbl tr.ro td { padding: 11px 8px; }
.stock-tbl tr.ro.empty .q { color: var(--red); }
.stock-tbl tr.ro.low .q { color: var(--warn); }
.size-btn { width: 100%; min-height: 40px; padding: 6px 10px; border-radius: 10px; border: 1px dashed var(--border2); color: var(--faint); font-size: 13px; display: flex; align-items: center; justify-content: space-between; gap: 6px; text-align: left; transition: .15s; }
.size-btn svg { width: 15px; height: 15px; flex: none; }
.size-btn.has { color: var(--text); font-weight: 600; border-style: solid; background: var(--bg2); }
.size-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.viewing .size-btn { border-color: transparent; background: var(--surface2); }
.stock-wrap { overflow-x: auto; }
.stock-tbl td:nth-child(2) { min-width: 210px; }
.stock-tbl .w-num { width: 120px; }
.stock-tbl .w-sm { width: 96px; }

/* окошко размеров */
.pop { position: fixed; z-index: 85; padding: 14px; background: var(--surface2); border: 1px solid var(--border2); box-shadow: var(--shadow), 0 0 0 1px rgba(0, 0, 0, .1); animation: pop .14s ease; }
.pop-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pop-head b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-head span { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.pop-head .icon-btn { margin-left: auto; width: 32px; height: 32px; flex: none; }
.pop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; max-height: 50vh; overflow-y: auto; }
.pop-cell { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--border); }
.pop-cell span { font-size: 12.5px; font-weight: 700; color: var(--accent); text-align: center; }
.pop-cell.extra span { color: var(--faint); }
.pop-cell .inp { height: 38px; text-align: center; font-weight: 700; padding: 0 4px; }
.pop-cell b { text-align: center; font-size: 18px; padding: 6px 0; }
.pop-empty { color: var(--muted); font-size: 14px; line-height: 1.5; padding: 6px 2px; }
.pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; color: var(--muted); font-size: 13.5px; }
.pop-foot b { color: var(--text); }

/* ================= Долги ================= */
.debt-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.debt-search { flex: 1; min-width: 220px; }
.debt-list { display: flex; flex-direction: column; gap: 10px; }
.debt { display: grid; grid-template-columns: 1.3fr 1.4fr auto; gap: 18px; align-items: center; padding: 16px 20px; border-left: 4px solid var(--warn); }
.debt.paid { border-left-color: var(--green); }
.debt-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.debt-who > b { font-size: 17px; }
.debt-who .shop-tag { align-self: flex-start; }
.debt-phone { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); text-decoration: none; font-size: 14px; }
.debt-phone svg { width: 15px; height: 15px; }
.debt-when { color: var(--muted); font-size: 12.5px; }
.debt-money { display: flex; gap: 10px; flex-wrap: wrap; }
.debt-sum, .debt-paid { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 14px; border-radius: 11px; background: var(--surface2); border: 1px solid var(--border); text-align: left; transition: .15s; }
.debt-sum { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.debt-paid { font-size: 14px; color: var(--muted); }
.debt-paid b { color: var(--text); }
.debt-sum small, .debt-paid small { font-size: 11.5px; font-weight: 400; color: var(--faint); }
.debt-sum:hover, .debt-paid:hover:not(:disabled) { border-color: var(--accent); }
.debt-paid:disabled { cursor: default; opacity: .7; }
.debt-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; padding: 6px 12px; border-radius: 16px; white-space: nowrap; }
.status svg { width: 16px; height: 16px; }
.status.ok { background: rgba(34, 197, 94, .14); color: var(--green); }
.status.wait { background: rgba(245, 158, 11, .14); color: var(--warn); }
.modal.wide { width: 640px; max-width: calc(100vw - 24px); }
.modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.modal-head h3 { margin: 0; flex: 1; }
.modal-head .icon-btn { width: 34px; height: 34px; }
.modal .tbl td { padding: 9px 8px; font-size: 14px; }
.small { font-size: 12px; }
.pay-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.pay-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; background: var(--surface); border: 1px solid var(--border); }
.pay-row > div { flex: 1; }
.pay-row b { display: block; font-size: 16px; }
.pay-row small { color: var(--muted); font-size: 12.5px; }
.pay-n { width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.pay-total { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: 14px; }
.pay-total b { color: var(--text); }
.warnc { color: var(--warn) !important; }
.okc { color: var(--green) !important; }
.price-wrap.big .inp { height: 56px; font-size: 22px; font-weight: 700; }
.price-wrap.big .cur { top: 18px; }
.all-btn { margin-top: 10px; }
.pw-inp { text-align: center; font-size: 20px; letter-spacing: 6px; height: 52px; }
.modal .err { color: var(--red); font-size: 13px; min-height: 18px; margin: 8px 0 4px; }
.clr-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.clr-opts .btn { width: 100%; }

/* ================= Отчёты ================= */
.tiles.six { grid-template-columns: repeat(3, 1fr); }
.tile.warnt { --c: var(--warn); }
.tile.cash { --c: var(--accent); }
.tile.cash b { color: var(--accent); }
.receipt-head { flex-wrap: wrap; }
.receipt-head .who.debtor { color: var(--warn); background: rgba(245, 158, 11, .13); }
.receipt .tbl tr.minus-row td { color: var(--red); }
.receipt .tbl tr.minus-row td.muted { color: var(--red); opacity: .7; }
.pays-card .receipt-head svg { width: 18px; height: 18px; color: var(--accent); }

/* Настройки */
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin-top: 12px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.emp-row.editing .check { margin: 0; }
.gen-shop .field { margin-top: 10px; }

/* ================= Телефон ================= */
@media (max-width: 760px) {
  .topbar .brand { font-size: 18px; }
  .brand.big { font-size: 32px; }
  .ch-title { margin-bottom: 10px; letter-spacing: 4px; }
  .ch-shops { gap: 8px; }
  .ch-shop { padding: 12px 4px; gap: 8px; }
  .ch-name { font-size: 17px; }
  .ch-who { font-size: 11.5px; }
  .ch-general { margin-top: 16px; padding: 14px 16px; }
  .ch-general b { font-size: 17px; }

  .sale-row { grid-template-columns: 1fr 1fr 40px; grid-template-areas: "prod prod del" "price size size" "qty qty qty" "sum sum sum"; }
  .sale-row .size-wrap { grid-area: size; }
  .sale-card-title { padding: 4px 4px 10px; }
  .back-card { padding: 10px; border: 1px solid rgba(239, 68, 68, .35); background: transparent; }
  .debt-form { grid-template-columns: 1fr; padding: 14px; }
  .sale-footer { position: static; flex-direction: column; gap: 12px; }
  .sum-block { gap: 12px 18px; }
  .disc-line .price-wrap { width: 130px; }
  .sold-wrap { margin: 0; width: 100%; }
  .btn.sold { flex: 1; max-width: none; }
  .other-btn { height: 56px; }

  .stock-tbl tr { grid-template-columns: 1fr 1fr 40px; grid-template-areas: "name name del" "cost price price" "sizes sizes sizes" "qty tot tot"; }
  .stock-tbl tr.ro { grid-template-areas: "name name name" "cost price price" "sizes sizes sizes" "qty tot tot"; }
  .stock-tbl td:nth-child(5) { grid-area: sizes; }
  .stock-tbl td:nth-child(6) { grid-area: qty; }
  .stock-tbl td:nth-child(7) { grid-area: tot; display: block; text-align: left; }
  .stock-tbl td:nth-child(8) { grid-area: del; }
  .stock-tbl tr.ro td:nth-child(8) { display: none; }
  .stock-tbl tr.ro td { padding: 0; }
  .stock-tbl tr.ro td.num { text-align: left; }
  .stock-tbl td.tot { font-size: 17px; padding-top: 2px; }
  .stock-tbl tr.no-items td { display: block; }
  .cs-add { width: 100%; }
  .pop { left: 8px !important; right: 8px; width: auto !important; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom)); }

  .debt { grid-template-columns: 1fr; gap: 10px; padding: 14px; }
  .debt-side { flex-direction: row; align-items: center; justify-content: space-between; }
  .debt-money > * { flex: 1; }
  .tiles.six { grid-template-columns: 1fr 1fr; }
  .tiles.six .tile.profit { grid-column: auto; }
  .shop-seg { width: 100%; }
  .shop-seg button { flex: 1; padding: 0 6px; font-size: 13px; }
}

/* ================= Печать этикеток ================= */
.stock-tbl td.acts { white-space: nowrap; text-align: right; }
.stock-tbl td.acts .icon-btn { display: inline-grid; }
.stock-tbl tr.draft [data-print] { visibility: hidden; }
.print-pop .pr-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.pr-row { display: grid; grid-template-columns: 74px 1fr 84px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--border); }
.pr-size { font-weight: 800; color: var(--accent); font-size: 15px; }
.pr-code { font-family: Consolas, monospace; font-size: 13px; color: var(--text); display: flex; flex-direction: column; }
.pr-code small { font-family: inherit; font-size: 11.5px; color: var(--faint); font-family: "Segoe UI", sans-serif; }
.pr-row .inp { height: 38px; text-align: center; font-weight: 700; padding: 0 4px; }

/* обмен: блок, куда попадает пик сканера */
.sale-card.scan-here { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sale-card.scan-here .sale-card-title::after { content: "← пик сканера сюда"; margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--accent); }

/* ================= Не продающиеся ================= */
.stale-seg { margin-bottom: 18px; flex-wrap: wrap; }
.stale-seg button { display: inline-flex; align-items: center; gap: 8px; }
.stale-seg em { font-style: normal; font-size: 12px; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--surface3); color: var(--muted); display: inline-grid; place-items: center; }
.stale-seg button.on em { background: rgba(0, 0, 0, .2); color: inherit; }
.stale-tbl td { padding: 11px 8px; font-size: 14px; vertical-align: top; }
.days { display: inline-block; font-weight: 700; color: var(--warn); background: rgba(245, 158, 11, .12); padding: 3px 9px; border-radius: 10px; white-space: nowrap; }
@media (max-width: 760px) {
  .stale-tbl { min-width: 640px; }
  .stale-seg button { flex: 1 1 30%; padding: 0 8px; font-size: 13px; }
  .pr-row { grid-template-columns: 60px 1fr 70px; }
}

/* ================= Долг вручную, товар в остатке ================= */
.md-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.md-grid .field { margin-bottom: 12px; }
.md-grid .inp { color-scheme: var(--scheme); }
.md-btns { margin-top: 6px; }
#mdErr:not(:empty) { margin-bottom: 8px; }
.debt-note { font-size: 12.5px; color: var(--text); opacity: .8; font-style: italic; }
.note-box { padding: 14px 16px; background: var(--surface); line-height: 1.5; }
.stock-value { margin-bottom: 20px; }
.stock-value h3 { display: flex; align-items: center; gap: 8px; }
.stock-value h3 svg { width: 18px; height: 18px; color: var(--accent); }
.stock-value .pos { color: var(--green); }
.stock-value tr.sum-row td { border-top: 2px solid var(--border2); font-size: 15px; font-weight: 700; color: var(--accent); }
.stock-value tr.sum-row td.pos { color: var(--green); }
@media (max-width: 760px) { .md-grid { grid-template-columns: 1fr; } .stock-value .tbl { min-width: 560px; } }

/* ================= Расходы, прибыль ================= */
.exp-form { display: grid; grid-template-columns: 1.6fr 1fr 170px auto; gap: 12px; align-items: end; padding: 16px 20px; margin-bottom: 18px; }
.exp-form .field { margin: 0; }
.exp-form .inp { color-scheme: var(--scheme); }
.exp-form .btn { height: 46px; }
.exp-sum { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; margin-bottom: 20px; }
.exp-sum .chip { height: auto; padding: 6px 12px; font-weight: 600; }
.exp-sum .chip b { margin-left: 6px; color: var(--text); }
.exp-tbl td { padding: 10px 8px; font-size: 14px; }
.exps-card .receipt-head svg { width: 18px; height: 18px; color: var(--red); }
.receipt .tbl .negv, .top-card .negv { color: var(--red); }
.flow { display: flex; align-items: stretch; gap: 8px; margin-bottom: 12px; }
.flow .tile { flex: 1; min-width: 0; }
.flow .tile b { font-size: 21px; }
.flow > i { font-style: normal; align-self: center; font-size: 22px; font-weight: 800; color: var(--faint); }
.tile.net { border-color: var(--green); }
.tile.net.neg { border-color: var(--red); }
.tiles.mini { grid-template-columns: repeat(3, 1fr); }
.tiles.mini .tile { padding: 12px 16px; }
.tiles.mini .tile b { font-size: 18px; }
.tiles.eight { grid-template-columns: repeat(4, 1fr); }
.tiles.eight .tile b { font-size: 21px; }
@media (max-width: 1100px) { .flow { flex-wrap: wrap; } .flow > i { display: none; } .flow .tile { flex: 1 1 30%; } }
@media (max-width: 760px) {
  .exp-form { grid-template-columns: 1fr 1fr; padding: 14px; }
  .exp-form .field:first-child { grid-column: 1 / -1; }
  .exp-form .btn { grid-column: 1 / -1; }
  .flow .tile { flex: 1 1 45%; }
  .flow .tile.net { flex-basis: 100%; }
  .tiles.eight { grid-template-columns: 1fr 1fr; }
  .tiles.eight .tile.profit { grid-column: auto; }
  .exp-tbl { min-width: 520px; }
}