:root{color:#1f2937;background:#f8fafc;font-family:Segoe UI,sans-serif}*{box-sizing:border-box}body{background:linear-gradient(#fff7ed 0%,#f8fafc 220px);min-height:100vh;margin:0}.app{max-width:800px;margin:0 auto;padding:30px 20px 48px}.back-button{color:#fff;cursor:pointer;background:#f97316;border:none;border-radius:8px;margin-bottom:24px;padding:8px 16px;font-size:14px;font-weight:600;transition:background-color .2s}.back-button:hover{background:#ea580c}.converter-container{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:28px;box-shadow:0 8px 24px #0f172a0a}.converter-container h1{color:#0f172a;margin:0 0 8px;font-size:28px}.converter-container p{color:#64748b;margin:0 0 24px;font-size:16px;line-height:1.5}.tabs{border-bottom:1px solid #e2e8f0;gap:8px;margin-bottom:24px;display:flex}.tab-button{color:#64748b;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:12px 16px;font-size:14px;font-weight:600;transition:all .2s}.tab-button:hover{color:#374151;background:#f8fafc}.tab-button.active{color:#f97316;background:#fff7ed;border-bottom-color:#f97316}.currency-converter{flex-direction:column;gap:16px;display:flex}.currency-select{color:#0f172a;background:#fff;border:1px solid #cbd5e1;border-radius:8px;width:100%;padding:10px;font-size:14px}.currency-select:focus{border-color:#fb923c;outline:2px solid #fdba74}.rate-actions{align-items:center;gap:8px;display:flex}.refresh-rates-button{color:#0369a1;cursor:pointer;background:#f0f9ff;border:1px solid #bae6fd;border-radius:6px;padding:6px 12px;font-size:12px;font-weight:500;transition:all .2s}.refresh-rates-button:hover:not(:disabled){color:#075985;background:#e0f2fe;border-color:#7dd3fc}.refresh-rates-button:disabled{opacity:.6;cursor:not-allowed}.converter-form{flex-direction:column;gap:20px;display:flex}.input-group{flex-direction:column;gap:8px;display:flex}.input-group label{color:#374151;font-size:14px;font-weight:600}.amount-input{color:#0f172a;border:1px solid #cbd5e1;border-radius:8px;width:100%;padding:12px;font-size:16px}.amount-input:focus{border-color:#fb923c;outline:2px solid #fdba74}.units-row{grid-template-columns:1fr auto 1fr;align-items:end;gap:16px;display:grid}.unit-selector{flex-direction:column;gap:8px;display:flex}.unit-selector label{color:#374151;font-size:14px;font-weight:600}.unit-type-select,.unit-scale-select{color:#0f172a;background:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:10px;font-size:14px}.unit-type-select:focus,.unit-scale-select:focus{border-color:#fb923c;outline:2px solid #fdba74}.swap-button{cursor:pointer;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:8px;align-self:end;margin-bottom:10px;padding:10px;font-size:18px;transition:all .2s}.swap-button:hover{background:#e2e8f0;border-color:#94a3b8}.convert-button{color:#fff;cursor:pointer;background:linear-gradient(140deg,#f97316,#fb7185);border:none;border-radius:8px;padding:14px 24px;font-size:16px;font-weight:600;transition:transform .2s,box-shadow .2s}.convert-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #f973164d}.convert-button:active{transform:translateY(0)}.result{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;margin-top:8px;padding:16px}.result h3{color:#374151;margin:0 0 8px;font-size:16px}.result p{color:#0f172a;word-break:break-word;margin:0;font-size:18px;font-weight:600}.result-sections{flex-direction:column;gap:12px;display:flex}.result-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px}.result-item h4{color:#374151;margin:0 0 8px;font-size:14px;font-weight:600}.result-item p{color:#0f172a;margin:0;font-size:16px;line-height:1.4}.rates-section{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;margin-top:16px;padding:16px}.rates-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.rates-header h3{color:#374151;margin:0;font-size:16px}.edit-rates-button{color:#475569;cursor:pointer;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:6px;padding:6px 12px;font-size:12px;font-weight:500;transition:all .2s}.edit-rates-button:hover{color:#334155;background:#e2e8f0;border-color:#94a3b8}.rates-display{gap:8px;display:grid}.rate-item{background:#fff;border:1px solid #e2e8f0;border-radius:6px;justify-content:space-between;align-items:center;padding:8px 12px;font-size:14px;display:flex}.rate-item span:first-child{color:#64748b}.rate-value{color:#0f172a;font-weight:600}.rate-editor{border-top:1px solid #e2e8f0;flex-direction:column;gap:12px;margin-top:16px;padding-top:16px;display:flex}.rate-input-group{grid-template-columns:auto 1fr auto;align-items:center;gap:8px;display:grid}.rate-input-group label{color:#374151;white-space:nowrap;font-size:14px;font-weight:500}.rate-input{color:#0f172a;background:#fff;border:1px solid #cbd5e1;border-radius:6px;padding:8px;font-size:14px}.rate-input:focus{border-color:#fb923c;outline:2px solid #fdba74}.rate-input-group span:last-child{color:#64748b;white-space:nowrap;font-size:14px}.reset-button{color:#dc2626;cursor:pointer;background:#fef2f2;border:1px solid #fecaca;border-radius:6px;align-self:flex-start;padding:8px 16px;font-size:14px;font-weight:500;transition:all .2s}.reset-button:hover{color:#b91c1c;background:#fee2e2;border-color:#fca5a5}.quick-examples{border-top:1px solid #e2e8f0;margin-top:32px;padding-top:24px}.quick-examples h3{color:#374151;margin:0 0 16px;font-size:18px}.example-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;display:grid}.example{color:#475569;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;padding:12px;font-size:14px}.example strong{color:#1e293b;margin-bottom:4px;display:block}@media (width<=640px){.app{padding:20px 14px 40px}.converter-container{padding:20px}.tabs{gap:4px}.tab-button{padding:10px 12px;font-size:13px}.units-row{grid-template-columns:1fr;gap:12px}.swap-button{align-self:center;margin-bottom:0}.rates-header{flex-direction:column;align-items:flex-start;gap:8px}.rate-actions{flex-direction:column;align-items:flex-start;width:100%}.rate-input-group{grid-template-columns:1fr;gap:6px}.rate-input-group label{font-size:13px}.example-grid{grid-template-columns:1fr}}