/* RECATOOLS — Volume + Surface Area Calculator (mirrors area/perimeter look) */
.vs-wrap { padding: 1.25rem; }
.vs-solid-row { margin-bottom: 1.1rem; }
.vs-solid-row label { display: block; font-size: .8rem; font-weight: 600; color: #1a1814; margin-bottom: .35rem; text-align: center; }
.vs-solid-row select { width: 100%; max-width: 320px; margin: 0 auto; display: block; padding: .65rem .9rem; border: 1px solid #ebebeb; border-radius: 10px; font-size: 1rem; background: #fff; }
.vs-solid-row select:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
.ap-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
.ap-field { display: flex; flex-direction: column; gap: .25rem; }
.ap-field label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #9b968d; }
.ap-field input { padding: .6rem .7rem; border: 1px solid #ebebeb; border-radius: 10px; font-size: 1.05rem; text-align: center; font-variant-numeric: tabular-nums; }
.ap-field input:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
.ap-error { margin: 1rem 0 0; padding: .8rem 1rem; background: #fef2f2; border-left: 4px solid #ef4444; border-radius: 10px; color: #991b1b; font-size: .9rem; }
.ap-result { margin-top: 1.5rem; }
.ap-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.ap-card { background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 14px; padding: 1.1rem; text-align: center; }
.ap-card span { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #7c3aed; margin-bottom: .3rem; }
.ap-card b { font-size: 1.6rem; color: #4338ca; font-variant-numeric: tabular-nums; }