@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--bg-color:#f8faf9;--text-main:#334155;--text-muted:#64748b;--primary:#10b981;--primary-hover:#059669;--card-bg:#fff;--border:#e2e8f0;background-color:var(--bg-color);color:var(--text-main);box-sizing:border-box;font-family:Inter,system-ui,-apple-system,sans-serif;font-weight:400;line-height:1.6}*,:before,:after{box-sizing:inherit}body{min-height:100vh;margin:0;padding:0}.container{max-width:768px;margin:0 auto;padding:3rem 1.5rem}.header{text-align:center;margin-bottom:2.5rem}.title{color:var(--primary);letter-spacing:-.025em;margin-bottom:.75rem;font-size:2.25rem;font-weight:700}.subtitle{color:var(--text-muted);font-size:1.1rem}.card{background-color:var(--card-bg);border:1px solid #e2e8f0cc;border-radius:16px;margin-bottom:2rem;padding:2rem;box-shadow:0 4px 6px -1px #0000000d,0 2px 4px -2px #0000000d}.section-title{color:var(--text-main);border-bottom:2px solid var(--bg-color);align-items:center;gap:.75rem;margin-bottom:1.5rem;padding-bottom:.75rem;font-size:1.25rem;font-weight:600;display:flex}.item-group{margin-bottom:1.5rem}.item-group:last-child{margin-bottom:0}.item-header{justify-content:space-between;margin-bottom:.75rem;display:flex}.item-label{font-size:.95rem;font-weight:500}.item-score{color:var(--primary);background:#10b9811a;border-radius:12px;padding:2px 8px;font-size:.85rem;font-weight:700}.slider{appearance:none;background:var(--border);border-radius:4px;outline:none;width:100%;height:8px;transition:background .2s}.slider:hover{background:#cbd5e1}.slider::-webkit-slider-thumb{appearance:none;background:var(--primary);cursor:pointer;border-radius:50%;width:20px;height:20px;transition:transform .1s,box-shadow .1s;box-shadow:0 2px 4px #0000001a}.slider::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 4px 6px #00000026}.input-wrapper{margin-bottom:1rem;position:relative}.input-field{border:2px solid var(--border);border-radius:12px;width:100%;padding:1rem 3rem 1rem 1rem;font-family:inherit;font-size:1rem;transition:all .2s}.input-field:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #10b9811a}.eye-button{cursor:pointer;color:var(--text-muted);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:4px;transition:background-color .2s;display:flex;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.eye-button:hover{background-color:var(--bg-color);color:var(--text-main)}.api-notice{color:var(--text-muted);background:var(--bg-color);border-radius:8px;margin-bottom:1.5rem;padding:1rem;font-size:.9rem}.button{background-color:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:1rem 1.5rem;font-size:1.1rem;font-weight:600;transition:all .2s;display:inline-flex;box-shadow:0 4px 6px #10b98133}.button:hover:not(:disabled){background-color:var(--primary-hover);transform:translateY(-1px);box-shadow:0 6px 8px #10b9814d}.button:active:not(:disabled){transform:translateY(1px);box-shadow:0 2px 4px #10b98133}.button:disabled{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}.error-message{color:#dc2626;background-color:#fef2f2;border:1px solid #fecaca;border-radius:12px;margin-bottom:1.5rem;padding:1rem;font-size:.95rem}.result-section{border-top:2px dashed var(--border);margin-top:2rem;padding-top:2rem}.result-title{color:var(--text-main);align-items:center;gap:.5rem;margin-bottom:1.5rem;font-size:1.5rem;font-weight:700;display:flex}.result-text{color:var(--text-main);background-color:var(--bg-color);border:1px solid var(--border);border-radius:12px;padding:1.5rem}.result-text h3{color:var(--primary);border-bottom:1px solid var(--border);margin-top:2rem;margin-bottom:1rem;padding-bottom:.5rem;font-size:1.25rem}.result-text h3:first-child{margin-top:0}.result-text p{margin-bottom:1.25rem}.result-text p:last-child{margin-bottom:0}.result-text ul,.result-text ol{margin-bottom:1.25rem;margin-left:1.5rem}.result-text li{margin-bottom:.5rem}.result-text strong{color:#0f766e;background-color:#10b9811a;border-radius:4px;padding:2px 6px;font-weight:600}.loader{border:3px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:20px;height:20px;animation:1s linear infinite spin;display:inline-block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.4s ease-out forwards fadeIn}
