:root{font-family:Manrope,Nunito Sans,Helvetica Neue,sans-serif;line-height:1.5;color:#10233d;background:radial-gradient(circle at 15% 0%,#e3efff,#f5f9ff 35%,#f7f8fc)}*{box-sizing:border-box}body{margin:0;min-height:100vh}h1,h2,h3,p{margin:0}.app-shell{max-width:1180px;margin:0 auto;padding:26px 18px 40px}.page-header{margin-bottom:18px}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#3559a8;margin-bottom:6px;font-weight:700}.page-header h1{font-size:clamp(26px,3vw,34px);color:#0d1f3a}.subtext{margin-top:6px;color:#3f4f68;max-width:760px}.panel,.results{background:#fff;border:1px solid #d7e3f4;border-radius:16px;padding:18px;margin-bottom:16px;box-shadow:0 10px 28px #1622420f}.panel h2,.results h2{margin-bottom:14px;color:#0d2344}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}label{display:flex;flex-direction:column;gap:7px;font-weight:600;font-size:14px;color:#233653}input,select,textarea{border:1px solid #bfd0e8;border-radius:10px;padding:11px;font:inherit;color:#0d203d;background:#fff}input:focus,select:focus,textarea:focus{outline:none;border-color:#2667d1;box-shadow:0 0 0 3px #2667d126}textarea{resize:vertical;min-height:120px}.api-card{border:1px solid #d7e3f4;border-radius:14px;padding:14px;margin-bottom:12px;background:linear-gradient(180deg,#fcfdff,#f8fbff)}.api-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.api-card-header h3{color:#10294d}.api-actions{display:flex;gap:8px}.json-grid{margin-top:10px}.primary-btn,.secondary-btn,.danger-btn,.ghost-btn{border:none;border-radius:10px;padding:10px 16px;cursor:pointer;font-weight:700;font-size:14px}.primary-btn{background:linear-gradient(135deg,#225ce2,#1544b0);color:#fff}.primary-btn:disabled{background:#8eabdf;cursor:not-allowed}.secondary-btn{background:#0f7b72;color:#fff}.danger-btn{background:#de3c43;color:#fff}.ghost-btn{background:#e8f0ff;color:#18408f}.label-row{display:inline-flex;align-items:center;gap:6px}.info-dot{width:16px;height:16px;border-radius:50%;background:#dbeafe;color:#1e3a8a;font-size:11px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;cursor:help}.field-help{color:#577197;font-size:12px;font-weight:500}.run-row{display:flex;align-items:center;gap:12px;margin:2px 0 8px}.running-text{color:#214886;font-weight:600}.error-text{color:#b61f2b;font-weight:700;margin:6px 0 10px}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:16px}.metric-card{border:1px solid #d9e5f5;border-radius:12px;padding:12px;background:#fdfefe}.metric-label{color:#40506b;font-size:13px}.metric-value{margin-top:4px;color:#0d2142;font-size:27px;line-height:1.1;font-weight:800}.metric-hint{margin-top:5px;font-size:12px;color:#59708f}.insight-panel{border:1px solid #cfe2ff;background:linear-gradient(135deg,#edf4ff,#f6fbff);border-radius:12px;padding:12px;margin-bottom:12px}.insight-title{font-weight:800;color:#143564;margin-bottom:4px}.insight-text{color:#314b71;font-size:14px}.breakdown-card{border:1px solid #d9e5f5;border-radius:12px;background:#fdfefe;padding:12px;margin-bottom:14px}.breakdown-card h3{margin-bottom:8px;color:#102848}.table-wrap{overflow-x:auto}.breakdown-table{width:100%;border-collapse:collapse;min-width:980px}.breakdown-table th,.breakdown-table td{border-bottom:1px solid #e5edf8;padding:10px;text-align:left;font-size:14px}.breakdown-table th{background:#f4f8ff;color:#203454;font-weight:700}.breakdown-table tbody tr:hover{background:#f8fbff}.url-cell{max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.method-pill{display:inline-block;border-radius:999px;font-size:12px;padding:3px 8px;font-weight:800}.method-get{color:#1e5d2f;background:#e7f8eb}.method-post{color:#165ea8;background:#e7f2ff}.method-put{color:#825d0f;background:#fff6dd}.method-delete{color:#a31f1f;background:#ffe8e8}.text-success{color:#14763f;font-weight:700}.text-fail{color:#b12727;font-weight:700}.charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}.chart-card{border:1px solid #d9e5f5;border-radius:12px;padding:10px;background:#fff}.chart-card h3{margin:2px 0 10px;color:#102848}.full-width{grid-column:1 / -1}@media (max-width: 700px){.app-shell{padding:18px 12px 28px}.panel,.results{padding:14px;border-radius:12px}.metric-value{font-size:23px}.run-row{flex-direction:column;align-items:flex-start}}
