.fig{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow-lg);position:relative}
  .fig svg{width:100%;height:auto;display:block}
  .fig-cap{font-size:12.5px;color:var(--muted);margin-top:10px;text-align:center}
  .notes p{color:var(--ink-2);margin-bottom:14px;font-size:16.5px}
  .notes h2{margin-top:6px}
  .flow{display:flex;align-items:stretch;margin-top:44px}
  .flow .st{flex:1;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 14px;text-align:center}
  .flow .st .n{width:46px;height:46px;border-radius:12px;background:#eef2ff;color:var(--brand);display:grid;place-items:center;margin:0 auto 10px;position:relative}
  .flow .st .n i{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:var(--brand);color:#fff;font:700 11px/20px Inter,sans-serif;font-style:normal}
  .flow .st b{display:block;font-size:15px;margin-bottom:4px}
  .flow .st p{font-size:13px;color:var(--muted);line-height:1.5}
  .flow .ar{flex:0 0 30px;display:grid;place-items:center;color:#a5b4fc}
  .out{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:44px;align-items:start}
  .out.one{grid-template-columns:1fr;max-width:860px;margin-inline:auto}
  .scr{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden}
  .scr .app-body{padding:12px}
  .tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;font-size:12.5px}
  .tbl th{background:#26304f;color:#fff;font-weight:600;text-align:left;padding:7px 9px;white-space:nowrap}
  .tbl td{padding:7px 9px;border-bottom:1px solid #edf0f5;white-space:nowrap}
  .tbl td.r,.tbl th.r{text-align:right}
  .tbl tr.tot td{font-weight:800;background:#fdf3ea}
  .tbl-wrap{overflow-x:auto;border-radius:8px}
  .bdg{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700}
  .bdg.low{background:#fee2e2;color:#b91c1c}.bdg.ok{background:#dcfce7;color:#047857}.bdg.warn{background:#fef3c7;color:#92400e}.bdg.info{background:#e0e7ff;color:#3730a3}
  .doc{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:26px;font-size:13.5px}
  .doc h4{font-size:18px;letter-spacing:.04em}
  .doc .meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:12.5px;margin:6px 0 16px}
  .receipt{max-width:300px;margin:0 auto;background:#fff;padding:22px 20px 26px;font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:#111;box-shadow:var(--shadow-lg);border-radius:6px 6px 0 0;
    -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,radial-gradient(circle 6px at 8px 100%,#0000 98%,#000) bottom/16px 12px repeat-x;
    mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,radial-gradient(circle 6px at 8px 100%,#0000 98%,#000) bottom/16px 12px repeat-x}
  .receipt .c{text-align:center}.receipt .row{display:flex;justify-content:space-between;gap:10px}
  .receipt hr{border:0;border-top:1px dashed #999;margin:8px 0}
  .receipt .big{font-size:15px;font-weight:800}
  .hw{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
  .hw div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;text-align:center}
  .hw svg{width:100%;height:auto;max-width:200px;margin:0 auto 8px;display:block}
  .hw b{display:block;font-size:16px;margin-bottom:4px}
  .hw p{font-size:13.5px;color:var(--muted);text-align:left}
  .tips{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
  .tips div{background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand-2,#06b6d4);border-radius:12px;padding:16px 18px}
  .tips b{display:block;margin-bottom:3px}
  .tips p{font-size:14.5px;color:var(--muted)}
  .float-card{position:absolute;right:-14px;bottom:-18px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:12px 14px;display:flex;gap:10px;align-items:center;font-size:13px;max-width:260px}
  .float-card .ico{width:36px;height:36px;margin:0;flex:none}
  .float-card.warn .ico{background:#fee2e2;color:#b91c1c}
  .grid-4.g3{grid-template-columns:repeat(3,1fr)}
  .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .tile{background:#fff;border-radius:8px;padding:10px;border-top:4px solid;font-size:12px;display:grid;gap:2px}
  .tile b{font-size:13px}
  .tile small{color:#495057;font-size:11.5px}
  .feat-nav a{display:block}
  .feat-nav a.on{border-color:var(--brand);box-shadow:var(--shadow)}
  .feat-nav .more{display:inline-block;margin-top:8px;font-size:13.5px;font-weight:700;color:var(--brand)}
  @media (max-width:980px){
    .flow{flex-direction:column}
    .flow .ar{transform:rotate(90deg);height:30px}
    .out,.hw,.tips{grid-template-columns:1fr 1fr}
    .out{grid-template-columns:1fr}
    .grid-4.g3{grid-template-columns:1fr 1fr}
    .float-card{position:static;margin-top:12px;max-width:none}
  }
  .hero-grid>*,.two>*,.out>*{min-width:0}
  @media (max-width:640px){
    .tiles{grid-template-columns:1fr 1fr}
    .hw,.tips,.grid-4.g3{grid-template-columns:1fr}
    .chart-card div[style*="200px 1fr"]{grid-template-columns:1fr!important}
    .chart-card div[style*="200px 1fr"] svg{max-width:200px;margin:0 auto}
  }