:root{--primary-color: #2c3e50;--accent-color: #3498db;--success-color: #27ae60;--error-color: #e74c3c;--bg-color: #f9f9f9;--text-color: #333;--border-color: #ddd;--border-radius: 8px;--spacing-unit: 1rem;--max-width: 700px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:var(--text-color);background-color:var(--bg-color);padding:var(--spacing-unit)}.container{max-width:var(--max-width);margin:0 auto;padding:calc(var(--spacing-unit) * 2) var(--spacing-unit)}header{text-align:center;margin-bottom:calc(var(--spacing-unit) * 2)}h1{color:var(--primary-color);font-size:2rem;margin-bottom:.5rem}.subtitle{color:#666;font-size:1.1rem}.instructions{background:#fff;padding:calc(var(--spacing-unit) * 1.5);border-radius:var(--border-radius);margin-bottom:calc(var(--spacing-unit) * 2);border:1px solid var(--border-color)}.instructions h2{font-size:1.2rem;color:var(--primary-color);margin-bottom:var(--spacing-unit)}.instructions ol{padding-left:calc(var(--spacing-unit) * 1.5);color:#555}.instructions li{margin-bottom:.5rem}.instructions code{background:#f4f4f4;padding:2px 6px;border-radius:4px;font-size:.9em;word-break:break-all}.converter{background:#fff;padding:calc(var(--spacing-unit) * 1.5);border-radius:var(--border-radius);margin-bottom:calc(var(--spacing-unit) * 2);border:1px solid var(--border-color)}.form-group{margin-bottom:var(--spacing-unit)}label{display:block;margin-bottom:.5rem;font-weight:600;color:var(--primary-color)}input[type=url],input[type=text]{width:100%;padding:12px;border:2px solid var(--border-color);border-radius:var(--border-radius);font-size:16px;font-family:inherit;transition:border-color .3s ease}input[type=url]:focus,input[type=text]:focus{outline:none;border-color:var(--accent-color)}button{width:100%;padding:12px 24px;background-color:var(--accent-color);color:#fff;border:none;border-radius:var(--border-radius);font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .3s ease,opacity .3s ease}button:hover:not(:disabled){background-color:#2980b9}button:disabled{opacity:.6;cursor:not-allowed}button.loading:after{content:"...";animation:dots 1s infinite}@keyframes dots{0%,20%{content:"."}40%{content:".."}60%,to{content:"..."}}.error{margin-top:var(--spacing-unit);padding:var(--spacing-unit);background-color:#fee;border:1px solid var(--error-color);border-radius:var(--border-radius);color:var(--error-color)}.result{margin-top:calc(var(--spacing-unit) * 2);padding-top:calc(var(--spacing-unit) * 2);border-top:2px solid var(--border-color)}.result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-unit);flex-wrap:wrap;gap:var(--spacing-unit)}.result-header h3{color:var(--primary-color);margin:0}.rating-control{display:flex;align-items:center;gap:.5rem}.rating-control label{margin:0;font-weight:400;font-size:.95rem}.rating-control input{width:50px;padding:6px;text-align:center;font-size:1rem;font-weight:600}pre{background:#f4f4f4;padding:var(--spacing-unit);border-radius:var(--border-radius);overflow-x:auto;border:1px solid var(--border-color);font-family:Monaco,Courier New,monospace;font-size:.9rem;line-height:1.8;white-space:pre-wrap;word-wrap:break-word}.result-actions{margin-top:var(--spacing-unit);display:flex;align-items:center;gap:var(--spacing-unit)}.copy-button{width:auto;flex-shrink:0;background-color:var(--success-color)}.copy-button:hover:not(:disabled){background-color:#229954}.copied-feedback{color:var(--success-color);font-weight:600;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.hidden{display:none!important}footer{text-align:center;color:#888;font-size:.9rem;padding-top:calc(var(--spacing-unit) * 2);border-top:1px solid var(--border-color)}@media (min-width: 768px){.container{padding:calc(var(--spacing-unit) * 3) var(--spacing-unit)}h1{font-size:2.5rem}.subtitle{font-size:1.2rem}button{width:auto;min-width:200px}.result-header{flex-wrap:nowrap}.result-actions{justify-content:flex-start}}@media (max-width: 767px){.rating-control{width:100%;justify-content:space-between}.result-actions{flex-direction:column;align-items:stretch}.copy-button{width:100%}}