/* calc-studio.css — layout of the calculators (assets/js/calc-studio.js); uses .ps-box / .ps-btn / .ps-chk from pdf-studio.css */
#studio.ps{display:block}
.cs{text-align:left;color:var(--text,#1e2635)}
.cs-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px;margin-bottom:12px;background:var(--panel,#fff);border:1px solid var(--border,#e4e9f2);border-radius:14px}
.cs-bar .grow{flex:1}
.cs-title{font-size:14px;padding:0 6px}
.cs .ts-b{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px;border:1px solid transparent;border-radius:9px;background:none;color:var(--text,#1e2635);font:600 13px/1 inherit;font-family:inherit;cursor:pointer;white-space:nowrap}
.cs .ts-b:hover{background:var(--field,#f4f6fb);border-color:var(--border,#e4e9f2)}
.cs .ts-b.sm{height:28px;padding:0 9px;font-size:12px}
.cs .ts-b svg,.cs-actions svg{width:16px;height:16px;flex:none}
.cs-modes{display:flex;flex-wrap:wrap;gap:4px;background:var(--field,#f4f6fb);padding:4px;border-radius:11px}
.cs-modes button{border:0;background:none;padding:8px 13px;border-radius:8px;font:600 13px inherit;font-family:inherit;color:var(--muted,#5a6377);cursor:pointer}
.cs-modes button.on{background:var(--panel,#fff);color:var(--accent-dark,#3a52c4);box-shadow:0 1px 4px rgba(15,23,42,.1)}
.cs-cur select{height:34px;padding:0 8px;border:1px solid var(--border-2,#dfe4ee);border-radius:9px;background:var(--panel,#fff);color:inherit;font:600 13px inherit;font-family:inherit}
.cs-hist{margin:-4px 0 12px;padding:12px;background:var(--panel,#fff);border:1px solid var(--border,#e4e9f2);border-radius:14px}
.cs-hist[hidden]{display:none}
.cs-hist p{margin:0;font-size:13px;color:var(--muted,#5a6377)}
.cs-hl{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px;margin-bottom:8px}
.cs-hl button{display:flex;flex-direction:column;gap:2px;text-align:left;padding:8px 10px;border:1px solid var(--border,#e4e9f2);border-radius:9px;background:var(--field,#f8fafc);cursor:pointer;font:inherit;color:inherit}
.cs-hl b{font-size:13px}.cs-hl small{font-size:11px;color:var(--faint,#8a94a7)}
.cs-body{display:grid;grid-template-columns:minmax(290px,370px) minmax(0,1fr);gap:16px;align-items:start}
.cs-in{position:sticky;top:calc(var(--ps-top,0px) + 12px)}
.cs-grid{display:flex;flex-wrap:wrap;gap:0 12px}
.cs-f{flex:1 1 100%;margin-bottom:13px;min-width:0}
.cs-f.half{flex:1 1 calc(50% - 6px)}
/* side-by-side fields: if one label wraps to two lines, both inputs still line up */
.cs-f.half{display:flex;flex-direction:column}.cs-f.half>label{flex:1 0 auto}
.cs-f>label{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:700;margin-bottom:6px}
.cs-help{display:inline-flex;color:var(--faint,#8a94a7);cursor:help}.cs-help svg{width:14px;height:14px}
.cs-iw{display:flex;align-items:stretch;border:1px solid var(--border-2,#dfe4ee);border-radius:10px;background:var(--panel,#fff);overflow:hidden}
.cs-iw:focus-within{border-color:var(--accent,#4f6ef7);box-shadow:0 0 0 3px rgba(79,110,247,.15)}
.cs-iw input{flex:1;min-width:0;border:0;outline:0;padding:10px 11px;font:600 15px inherit;font-family:inherit;background:transparent;color:inherit;font-variant-numeric:tabular-nums}
.cs-pre,.cs-suf{display:flex;align-items:center;padding:0 10px;background:var(--field,#f4f6fb);color:var(--muted,#5a6377);font-size:13px;font-weight:700;white-space:nowrap}
.cs-unit{border:0;border-left:1px solid var(--border-2,#dfe4ee);background:var(--field,#f4f6fb);padding:0 8px;font:600 13px inherit;font-family:inherit;color:inherit;outline:0}
.cs-f select:not(.cs-unit),.cs-f textarea{width:100%;box-sizing:border-box;padding:10px 11px;border:1px solid var(--border-2,#dfe4ee);border-radius:10px;background:var(--panel,#fff);color:inherit;font:14px inherit;font-family:inherit}
.cs-f textarea{resize:vertical;font-variant-numeric:tabular-nums}
.cs-range{width:100%;margin:8px 0 0;accent-color:var(--accent,#4f6ef7)}
.cs-seg{display:flex;flex-wrap:wrap;gap:4px;background:var(--field,#f4f6fb);padding:4px;border-radius:10px}
.cs-seg button{flex:1;border:0;background:none;padding:8px 6px;border-radius:7px;font:600 12.5px inherit;font-family:inherit;color:var(--muted,#5a6377);cursor:pointer;white-space:nowrap}
.cs-seg button.on{background:var(--panel,#fff);color:var(--accent-dark,#3a52c4);box-shadow:0 1px 3px rgba(15,23,42,.12)}
.cs-err{display:block;color:var(--danger,#e5484d);font-size:12px;font-weight:600;min-height:0}
.cs-err:empty{display:none}
.cs-foot{font-size:12px;color:var(--faint,#8a94a7);margin:4px 0 0}
.cs-out{display:flex;flex-direction:column;gap:12px;min-width:0}
.cs-out .ps-box{margin:0}
.cs-out h3{margin:0 0 10px!important;font-size:13px!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.05em;color:var(--faint,#8a94a7)!important}
.cs-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.cs-card{background:var(--panel,#fff);border:1px solid var(--border,#e4e9f2);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:3px;min-width:0}
.cs-card span{font-size:12.5px;font-weight:700;color:var(--muted,#5a6377)}
.cs-card b{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.cs-card small{font-size:12px;color:var(--faint,#8a94a7)}
.cs-card.big{grid-column:1/-1;background:linear-gradient(135deg,var(--accent,#4f6ef7),#7c5cf0);border:0;color:#fff}
.cs-card.big span,.cs-card.big small{color:rgba(255,255,255,.85)}
.cs-card.big b{font-size:34px}
.cs-card.good b{color:#16a34a}.cs-card.warn b{color:#d97706}.cs-card.bad b{color:#dc2626}
.cs-split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cs-split.one{grid-template-columns:1fr}
.cs-rows{display:grid;grid-template-columns:1fr auto;gap:8px 14px;margin:0;font-size:13.5px}
.cs-rows dt{color:var(--muted,#5a6377)}
.cs-rows dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.cs-rows dd.hl{color:var(--accent-dark,#3a52c4)}.cs-rows dd.neg{color:#dc2626}.cs-rows dd.pos{color:#16a34a}
.cs-chart{width:100%;display:block;color:var(--text,#1e2635)}
.cs-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:12.5px}
.cs-legend span{display:inline-flex;align-items:center;gap:6px}
.cs-legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
.cs-legend em{font-style:normal;color:var(--faint,#8a94a7)}
.cs-table summary,.cs-explain summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;font-size:14px}
.cs-table summary::-webkit-details-marker,.cs-explain summary::-webkit-details-marker{display:none}
.cs-table summary::before,.cs-explain summary::before{content:"▸";color:var(--faint,#8a94a7);transition:transform .15s}
.cs-table[open] summary::before,.cs-explain[open] summary::before{transform:rotate(90deg)}
.cs-table summary span{color:var(--faint,#8a94a7);font-size:12px;flex:1}
.cs-tw{max-height:440px;overflow:auto;margin-top:10px;border:1px solid var(--border,#e4e9f2);border-radius:10px}
.cs-tw table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.cs-tw th{position:sticky;top:0;background:var(--field,#f4f6fb);text-align:right;padding:8px 10px;font-size:12px;color:var(--muted,#5a6377);white-space:nowrap}
.cs-tw td{padding:6px 10px;text-align:right;border-top:1px solid var(--border,#eef1f6);white-space:nowrap}
.cs-tw th:first-child,.cs-tw td:first-child{text-align:left}
.cs-tw tr.sub td{font-weight:700;background:rgba(79,110,247,.05)}
.cs-explain div{margin-top:10px;font-size:13.5px;line-height:1.7}
.cs-explain code,.cs-explain .f{display:block;padding:8px 12px;margin:6px 0;background:var(--field,#f4f6fb);border-radius:8px;font:13px ui-monospace,Consolas,monospace;overflow-x:auto;white-space:pre-wrap}
.cs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cs-actions .ps-btn{display:inline-flex;align-items:center;gap:6px}
.cs-note{flex:1 1 100%;margin:0;font-size:12.5px;color:var(--muted,#5a6377)}
.cs-actions .ps-msg{margin:0}
.cs-empty{color:var(--muted,#5a6377);font-size:14px}
@media (max-width:980px){.cs-body{grid-template-columns:1fr}.cs-in{position:static}}
@media (max-width:640px){.cs-split{grid-template-columns:1fr}.cs-bar .ts-b span{display:none}.cs-card.big b{font-size:28px}}
@media print{body *{visibility:hidden}.cs-out,.cs-out *{visibility:visible}.cs-out{position:absolute;left:0;top:0;width:100%}.cs-actions{display:none}.cs-table .cs-tw{max-height:none}}
.cs-color{display:flex;gap:8px;align-items:center}.cs-color input[type=color]{width:44px;height:38px;padding:2px;border:1px solid var(--border-2,#dfe4ee);border-radius:9px;background:var(--panel,#fff);cursor:pointer}.cs-color input[type=text]{flex:1;min-width:0;padding:9px 10px;border:1px solid var(--border-2,#dfe4ee);border-radius:9px;font:13px ui-monospace,Consolas,monospace;background:var(--panel,#fff);color:inherit}
.cs-img{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.cs-img img{width:38px;height:38px;object-fit:contain;border:1px solid var(--border,#e4e9f2);border-radius:8px;background:#fff}
.cs-file{display:flex;justify-content:flex-end;margin-top:6px}
.cs-filebtn{border:1px dashed var(--border-2,#cfd6e4);background:none;color:var(--accent,#4f6ef7);font:600 12.5px inherit;font-family:inherit;padding:5px 10px;border-radius:8px;cursor:pointer;width:auto;min-width:0}
.cs-filebtn:hover{background:var(--accent-soft,#eef1fe)}