.content{padding:20px;display:grid;grid-template-columns:1fr 360px;gap:18px}.content label,.outer label{font-weight:700;display:block;margin-bottom:6px}.content button,.content input[type=number],.content select{width:100%;padding:10px;border-radius:6px;border:1px solid #ccc;box-sizing:border-box;font-size:14px}.controls{display:flex;gap:20px;align-items:center;margin-bottom:15px}.controls .small{flex:1}.content .btn{background:#0a3d62;color:#fff;border:none;padding:10px 12px;border-radius:6px;cursor:pointer}.content .btn.secondary{background:#666}.preview-wrap{display:flex;gap:10px;align-items:center;margin-top:10px}.preview-box{width:100%;height:200px;border:1px solid #ddd;border-radius:6px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#fff,#f7f7f7);position:relative;overflow:hidden}.preview-label{position:absolute;font-size:13px;font-weight:700;background:rgba(0,0,0,.55);color:#fff;padding:6px 10px;border-radius:6px;text-align:center;pointer-events:none}.preview-inner{background:#0a3d62;opacity:.08;border-radius:4px;width:100%;height:100%}.results{background:#fff;border-radius:8px;padding:18px 20px;border:1px solid #e4e6eb;box-shadow:0 6px 18px rgba(0,0,0,.08);font-size:14px;color:#333}.results p{font-size:14px;margin:6px 0;display:flex;justify-content:space-between;border-bottom:1px dashed #eee;padding-bottom:4px}.results td,.results th{padding:10px;font-size:13px}.results strong{color:#0a3d62;font-weight:600}.results span{font-weight:500;color:#444}.info-list{margin-top:14px;padding-top:10px;border-top:1px solid #e9ecef}.info-list strong{color:#0a3d62}.results table{width:100%;border-collapse:collapse;border-radius:6px;overflow:hidden;margin-top:10px}.results thead{background:#0a3d62;color:#fff}.results th{text-align:left;letter-spacing:.3px}.results td{border-bottom:1px solid #eee}.results tbody tr:hover{background:#f6f9fc;transition:.2s}.results tbody tr:last-child td{border-bottom:none}.outer{margin:20px}.common-ratios{display:flex;gap:8px;flex-wrap:wrap;overflow-x:auto;margin-top:8px;scrollbar-width:none;border:1px solid #eee;border-radius:4px;padding:8px;background-color:#fafafa}.ratio-chip{padding:6px 10px;background:#eee;border-radius:2px;cursor:pointer;font-weight:600;white-space:nowrap;transition:.2s}.ratio-chip:hover{background:#ddd}@media (max-width:900px){.content{grid-template-columns:1fr}.preview-box{width:100%;height:200px}}