:root { --q-primary: #2563eb; --q-success: #16a34a; --q-bg: #f8fafc; }
.q-page { background: var(--q-bg); min-height: 80vh; }
.q-hero { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); color: white; padding: 40px 0; text-align: center; }
.q-hero h1 { font-size: 2.2rem; font-weight: 700; }
.q-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); padding: 24px; margin-bottom: 20px; }
.q-form label { font-weight: 600; font-size: 0.9rem; }
.q-form .form-control, .q-form select { border: 1px solid #ddd; border-radius: 8px; padding: 10px 12px; }
.q-form .form-control:focus { border-color: var(--q-primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.q-btn-primary { background: var(--q-primary); color: white; border: none; padding: 12px 32px; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; }
.q-btn-primary:hover { background: #1d4ed8; }
.q-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.q-tabs { display: flex; gap: 0; margin-bottom: 20px; border-radius: 8px; overflow: hidden; border: 1px solid #ddd; }
.q-tab { flex: 1; padding: 12px; text-align: center; cursor: pointer; background: #f1f5f9; font-weight: 600; }
.q-tab.active { background: var(--q-primary); color: white; }
.q-result { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; padding: 24px; margin-top: 20px; }
.q-result h2 { color: var(--q-success); font-size: 1.8rem; font-weight: 700; }
.q-detail-table { width: 100%; font-size: 0.9rem; }
.q-detail-table td { padding: 6px 8px; border-bottom: 1px solid #e5e7eb; }
.q-detail-table td:last-child { text-align: right; font-weight: 600; }
.process-bar { height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.process-bar-fill { height: 100%; background: linear-gradient(90deg, #60a5fa, #3b82f6); border-radius: 4px; }
.quote-slider { display: flex; gap: 12px; overflow-x: auto; padding: 8px 0; }
.quote-slide { min-width: 200px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; text-decoration: none; color: inherit; }
.quote-slide:hover { border-color: var(--q-primary); }