/* Feature landing page sales-finance only (its mock UI from src/features/sales-finance.ts).
   Split from the former site.css; rules keep their original order. Page types and files: Base.astro. */
.mwin__seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-1); font-size: 13px; }
.mwin__seg span { padding: 6px 14px; border-radius: 999px; color: var(--ink-450); }
.mwin__seg span.is-on { background: #fff; color: var(--ink-900); box-shadow: var(--shadow-soft); }
.sf-dash__body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; padding: 20px 22px 26px; }
.sf-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sf-kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 16px; background: var(--surface-0); }
.sf-kpi small { font-size: 12.5px; color: var(--ink-450); }
.sf-kpi b { font-size: 28px; font-weight: 400; letter-spacing: -0.04em; }
.sf-chart { margin-top: 12px; padding: 16px; border-radius: 16px; background: var(--surface-0); }
.sf-chart > small { font-size: 12.5px; color: var(--ink-450); }
.sf-chart__bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; height: 170px; margin-top: 12px; }
.sf-chart__bars span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.sf-chart__bars i { width: 100%; height: calc(var(--h) * 100%); border-radius: 10px; background: linear-gradient(180deg, var(--blue-380), var(--blue-500)); }
.sf-chart__bars span:nth-child(6) i { background: var(--ink-950); }
.sf-chart__bars small { font-size: 11.5px; color: var(--ink-400); }
.sf-dash__side { display: flex; flex-direction: column; gap: 8px; }
.sf-sale { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-0); font-size: 13.5px; }
.sf-sale > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.sf-sale b { font-weight: 500; }
.sf-sale small { font-size: 12px; color: var(--ink-450); }
.sf-alert { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 12px 14px; border-radius: 14px; background: var(--pink-150); color: #b9587b; }
.sf-alert > span { display: flex; flex-direction: column; font-size: 13.5px; }
.sf-alert small { font-size: 12px; color: #b9587b; opacity: .85; }
.sf-tx, .sf-stock, .sf-budget, .sf-perf, .sf-link { max-width: 480px; }
.sf-inv { max-width: 520px; }
.sf-tx__line { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: var(--surface-0); font-size: 14.5px; }
.sf-tx__line > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.sf-tx__line small { font-size: 12px; color: var(--ink-450); }
.sf-tx__line b { font-weight: 500; }
.sf-tx__line .mex-thumb { width: 40px; height: 40px; }
.sf-tx__total { display: flex; justify-content: space-between; margin: 14px 4px 10px; font-size: 16px; }
.sf-tx__total b { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.sf-tx__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sf-tx__meta > span { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid var(--line-100); }
.sf-tx__meta small { font-size: 11.5px; color: var(--ink-450); }
.sf-tx__meta b { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.sf-tx__meta .mk-av { width: 22px; height: 22px; font-size: 9px; }
.sf-tx__btn { gap: 6px; width: max-content; margin-top: 14px; }
.sf-stock__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 8px; padding: 12px 14px; border-radius: 14px; background: var(--surface-0); }
.sf-stock__row > span:first-child { display: flex; flex-direction: column; font-size: 14px; }
.sf-stock__row b { font-weight: 500; }
.sf-stock__row small { font-size: 12px; color: var(--ink-450); }
.sf-stock__row.is-low small { color: #b9587b; }
.sf-stock__row.is-low .fin-bar i { background: var(--pink-400); }
.sf-stock__price { font-size: 14px; }
.sf-stock .fin-bar i, .sf-budget .fin-bar i, .sf-perf .fin-bar i { scale: 1 1; }
.sf-budget__row { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.sf-budget__row > span { display: flex; justify-content: space-between; align-items: baseline; font-size: 14.5px; }
.sf-budget__row b { font-weight: 500; }
.sf-budget__row small { font-size: 12.5px; color: var(--ink-450); }
.fin-bar--3 i { background: var(--ink-950); }
.sf-perf__chart { display: block; width: 100%; height: 130px; margin-top: 4px; overflow: visible; }
.sf-perf__line { fill: none; stroke: var(--blue-500); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--ease-out); }
.sf-perf.is-in .sf-perf__line, .reduce-motion .sf-perf__line { stroke-dashoffset: 0; }
.sf-perf__row { display: flex; align-items: center; gap: 22px; margin-top: 16px; }
.sf-perf__donut { width: 110px; height: 110px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--blue-500) 0 62%, var(--lavender-300) 62% 86%, var(--pink-400) 86% 100%); }
.sf-perf__donut span { width: 78px; height: 78px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; }
.sf-perf__donut b { font-size: 19px; font-weight: 500; }
.sf-perf__donut small { font-size: 11px; color: var(--ink-450); }
.sf-perf__legend { flex: 1; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.sf-perf__legend small { font-size: 12.5px; color: var(--ink-450); }
.sf-perf__legend span { display: flex; align-items: center; gap: 8px; }
.sf-perf__legend b { margin-left: auto; font-weight: 500; }
.sf-dot { width: 10px; height: 10px; border-radius: 3px; }
.sf-dot--0 { background: var(--blue-500); }
.sf-dot--1 { background: var(--lavender-300); }
.sf-dot--2 { background: var(--pink-400); }
.sf-link__item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--surface-0); }
.sf-link__item > span:last-child { display: flex; flex-direction: column; font-size: 15px; }
.sf-link__item b { font-weight: 500; }
.sf-link__item small { font-size: 13px; color: var(--ink-450); }
.sf-link__url { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 8px 8px 14px; border-radius: 12px; border: 1px solid var(--line-200); font-size: 14px; color: var(--ink-700); }
.sf-link__url > span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-link__qr { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.sf-link__qr .ev-qr { width: 80px; height: 80px; }
.sf-link__qr > span:last-child { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sf-link__qr small { font-size: 12.5px; color: var(--ink-450); }
.sf-inv__row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 14px; }
.sf-inv__row:nth-child(even) { background: var(--surface-0); }
.sf-inv__row--head { font-size: 12px; color: var(--ink-450); text-transform: uppercase; letter-spacing: .04em; }
.sf-inv__row b { font-weight: 500; }
.sf-inv__low { color: #b9587b; font-weight: 500; }
.sf-inv__margin { color: var(--blue-600); font-weight: 500; }
@media (max-width: 1100px) {
  .sf-dash__body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .mwin__seg { display: none; }
  .sf-dash__body { padding: 14px; }
  .sf-kpi b { font-size: 22px; }
  .sf-chart__bars { height: 120px; gap: 8px; }
  .sf-tx__meta { grid-template-columns: minmax(0, 1fr); }
  .sf-inv__row { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px; font-size: 12.5px; }
  .sf-inv__row > :nth-child(3) { display: none; }
  .sf-kpis { grid-template-columns: repeat(3, minmax(max-content, 1fr)); gap: 8px; }
  .sf-kpi { padding: 12px; }
}