:root { --navy:#0d1b2a; --navy2:#142b42; --gold:#c2a878; --gold2:#e2d3b4; --bg:#f5f6f7; --ink:#172331; --muted:#596879; --line:#dce2e8; --white:#ffffff; --green:#146b4f; --red:#a83939; }
    * { box-sizing:border-box; }
    body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; background:var(--bg); color:var(--ink); line-height:1.5; }
    button,input,select { font:inherit; }
    button { cursor:pointer; }
    .shell { max-width:1020px; margin:auto; padding:0 18px 56px; }
    header { background:var(--navy); color:var(--white); }
    .headerinner { max-width:1020px; margin:auto; padding:28px 18px 31px; }
    .brand { font-size:13px; font-weight:800; letter-spacing:.19em; color:var(--gold); }
    h1 { margin:8px 0 4px; font-weight:750; font-size:clamp(28px,5vw,39px); line-height:1.12; }
    .headerinner p { margin:8px 0 0; color:#d1dbe5; max-width:670px; }
    .meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
    .chip { border:1px solid #4a5b6c; padding:5px 10px; border-radius:999px; color:#e2ebf1; font-size:12px; }
    nav { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:22px; }
    .tab { background:#fff; border:1px solid var(--line); border-radius:13px; padding:13px 9px; text-align:center; color:#334557; font-weight:700; box-shadow:0 2px 12px #0d1b2a08; }
    .tab[aria-selected="true"] { color:var(--navy); border-color:var(--gold); background:#fff8eb; box-shadow:inset 0 0 0 1px var(--gold); }
    .tab:focus-visible, input:focus-visible, select:focus-visible, button:focus-visible { outline:3px solid #a3cafa; outline-offset:2px; }
    .panel { display:none; margin-top:18px; }
    .panel.active { display:block; }
    .workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:17px; align-items:start; }
    .card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:0 4px 18px #0d1b2a09; min-width:0; }
    h2 { margin:0 0 6px; font-size:21px; }
    .sub { color:var(--muted); font-size:13px; margin:0 0 22px; }
    label { display:block; font-weight:700; margin:16px 0 7px; font-size:14px; }
    .field { width:100%; border:1px solid #bdc8d3; border-radius:10px; background:#fff; padding:12px 13px; color:var(--ink); min-height:47px; }
    .hint { color:var(--muted); font-size:12px; margin:8px 0 0; }
    .result { background:#fbf9f4; border-color:#e4d8c2; }
    .result h2 { font-size:18px; }
    .metric { display:flex; align-items:baseline; justify-content:space-between; gap:9px; border-bottom:1px solid #e7e0d4; padding:13px 0; }
    .metric:last-child { border-bottom:0; }
    .metric .name { color:#526274; font-size:13px; }
    .metric .amount { font-size:clamp(17px,2.8vw,23px); font-weight:750; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
    .metric.strong .name, .metric.strong .amount { color:var(--navy); font-weight:800; }
    .inline-info { padding:12px 13px; background:#edf3f8; border-radius:10px; font-size:13px; color:#32485c; margin-top:18px; }
    .status { font-weight:700; padding:11px 13px; border-radius:10px; margin-top:18px; font-size:14px; }
    .status.ok { background:#e9f5ef; color:var(--green); }
    .status.bad { background:#fcecec; color:var(--red); }
    .actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
    .primary { color:var(--navy); background:var(--gold2); border:1px solid #c6ac79; border-radius:10px; padding:10px 14px; font-weight:700; }
    .secondary { color:var(--ink); background:white; border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-weight:600; }
    .foot { margin-top:23px; border-top:1px solid var(--line); padding-top:17px; color:var(--muted); font-size:13px; }
    .foot a { color:#275f88; }
    .error { color:var(--red); font-size:12px; min-height:18px; margin-top:5px; }
    .notice { background:#eef1f4; color:#465767; border-radius:12px; font-size:13px; padding:15px 18px; margin-top:16px; }
    [hidden] { display:none !important; }
    .optional-box { border:1px solid var(--line); background:#f8fafb; padding:14px; border-radius:12px; margin-top:18px; }
    .optional-box label { margin:0; }
    .check-row { display:flex; align-items:center; gap:10px; cursor:pointer; font-weight:650; font-size:14px; }
    .check-row input { width:18px; height:18px; accent-color:var(--navy); flex:none; }
    .status.neutral { background:#edf3f8; color:#32485c; }
    .oc-formula { font-size:12px; margin-top:13px; padding:12px 13px; border:1px dashed #d3c7b0; border-radius:10px; color:#526274; }
    .oc-action-note { font-size:12px; color:var(--muted); margin-top:14px; }
    .oc-example { padding:12px 13px; border-radius:10px; background:#f4f7fa; color:#45566a; font-size:13px; margin-top:16px; }
    .invoice-heading { font-size:14px; font-weight:750; margin:23px 0 6px; }
    .invoice-list { display:grid; gap:10px; margin-top:13px; }
    .invoice-item { border:1px solid #dce2e8; background:#f8fafb; border-radius:12px; padding:13px; }
    .invoice-item-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:9px; }
    .invoice-item-head label { margin:0; font-weight:700; }
    .invoice-remove { color:var(--red); background:transparent; border:1px solid #ebcece; padding:5px 9px; border-radius:8px; font-size:12px; font-weight:700; }
    .invoice-item .field { background:white; }
    .invoice-list-actions { margin-top:12px; }
    .invoice-list-actions .secondary { width:100%; border-style:dashed; border-color:#adbbca; }
    .oc-input-note { margin-top:14px; }

    @media (max-width:750px) { .workspace { grid-template-columns:1fr; } .card { padding:20px; } }
    @media (max-width:430px) { .tab { font-size:12px; padding:13px 4px; } .shell { padding-left:12px; padding-right:12px; } .metric .amount { font-size:19px; } }