:root{--bg:#fff;--fg:#14171a;--mut:#5b6670;--line:#e3e7eb;--acc:#0a66c2;--warn:#b42318;--soft:#f3f7fb}
@media(prefers-color-scheme:dark){:root{--bg:#111418;--fg:#eef1f4;--mut:#9aa6b2;--line:#2a3036;--acc:#70b5f9;--warn:#ff8a7a;--soft:#1a2026}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:1rem/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.top,main{max-width:900px;margin:0 auto;padding:0 18px}
.top{padding-top:22px}
h1{font-size:1.55rem;line-height:1.25;margin:.2em 0 .5em}
.lede{font-size:1.04rem}.sub{color:var(--mut)}
.card{border:1px solid var(--line);border-radius:12px;padding:18px;margin:0 0 18px;background:var(--bg)}
h2{font-size:1.1rem;margin:0 0 12px}h3{font-size:1rem;margin:18px 0 8px}h4{margin:0 0 6px;font-size:.98rem}h4 span{color:var(--mut);font-weight:400}
.res{padding:16px 16px 10px}
.big{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
.big div{background:var(--soft);border-radius:10px;padding:10px 12px}
.big b{display:block;font-size:2.1rem;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--acc)}
.big span{font-size:.86rem;color:var(--mut)}
.loss{border-left:4px solid var(--warn);padding:6px 10px;margin:0 0 10px;font-size:.95rem}.loss b{color:var(--warn)}
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.93rem}
td,th{padding:6px 6px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
td:first-child,th:first-child{text-align:left}
th{font-weight:600;color:var(--mut);font-size:.82rem}
table.sum td:last-child{font-weight:700;white-space:nowrap}
details summary{cursor:pointer;margin:10px 0;color:var(--acc)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px 16px}
label{display:flex;flex-direction:column;gap:4px;font-size:.9rem}
input,select,textarea{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);width:100%;font-size:max(1rem,1em)}
textarea{resize:vertical}
.btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{display:inline-block;padding:9px 16px;border:1px solid var(--acc);border-radius:8px;background:var(--acc);color:#fff;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;color:var(--acc)}.btn.sm{padding:4px 10px;font-size:.85rem}
.file input{display:none}
.hint{color:var(--mut);font-size:.86rem}
.next{max-width:900px;margin:-6px auto 18px;padding:0 18px;font-size:.95rem}
.pro ul li{margin:4px 0}.price{font-weight:700}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:10px 0}.row label{flex:1;min-width:200px}
#proarea{display:none}.is-pro #proarea{display:block}
.tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.cnt{font-size:.8125rem;color:var(--mut)}.cnt.over{color:var(--warn);font-weight:700}
.qb{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0}
.qb ul{list-style:none;margin:0;padding:0}.qb li{border-top:1px solid var(--line);padding:8px 0}
.msg{background:var(--soft);border-radius:8px;padding:6px 8px;margin:6px 0;font-size:.9rem}
.src li{margin:6px 0;font-size:.9rem}
@media(max-width:600px){.big b{font-size:1.6rem}.big{gap:6px}}