@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:wght@400;500;600&display=swap");*{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#0a0a0a;--bg-secondary:#141414;--bg-tertiary:#1c1c1c;--text-primary:#f5f5f4;--text-secondary:#a8a29e;--accent-warm:#f97316;--accent-cool:#6366f1;--border-subtle:#292524;--success:#22c55e;--error:#ef4444}body{font-family:DM Sans,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;background-image:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(249,115,22,.08),transparent),radial-gradient(ellipse 60% 40% at 100% 100%,rgba(99,102,241,.06),transparent)}.container{max-width:640px;margin:0 auto;padding:80px 24px}.header{margin-bottom:64px}.title{font-family:"Instrument Serif",serif;font-size:3.5rem;font-weight:400;letter-spacing:-.02em;line-height:1.1;margin-bottom:16px}.title-accent{font-style:italic;background:linear-gradient(135deg,var(--accent-warm),var(--accent-cool));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:var(--text-secondary);font-size:1.125rem;line-height:1.6}.form-section{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:16px;padding:32px;margin-bottom:24px}.field{margin-bottom:28px}.field:last-child{margin-bottom:0}.label{display:flex;align-items:center;gap:10px;font-size:.875rem;font-weight:500;color:var(--text-secondary);margin-bottom:10px;text-transform:uppercase;letter-spacing:.05em}.label-icon{width:8px;height:8px;border-radius:50%}.label-icon.primary{background:var(--accent-warm)}.label-icon.secondary{background:var(--accent-cool)}.input{width:100%;background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:10px;padding:16px 18px;font-size:.9375rem;color:var(--text-primary);font-family:DM Sans,sans-serif;transition:border-color .2s,box-shadow .2s}.input::placeholder{color:#57534e}.input:focus{outline:none;border-color:var(--accent-warm);box-shadow:0 0 0 3px rgba(249,115,22,.1)}.button{width:100%;background:linear-gradient(135deg,var(--accent-warm),#ea580c);border:none;border-radius:10px;padding:16px 24px;font-size:1rem;font-weight:600;color:#fff;cursor:pointer;font-family:DM Sans,sans-serif;transition:transform .15s,box-shadow .15s}.button:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(249,115,22,.3)}.button:active{transform:translateY(0)}.button:disabled{opacity:.6;cursor:not-allowed;transform:none}.output-section{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:16px;padding:32px}.output-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}.output-title{font-family:"Instrument Serif",serif;font-size:1.5rem;font-weight:400}.subscription-url{background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:10px;padding:16px 18px;font-size:.875rem;color:var(--text-secondary);word-break:break-all;font-family:DM Sans,monospace;margin-bottom:16px}.copy-button{background:transparent;border:1px solid var(--border-subtle);border-radius:8px;padding:12px 20px;font-size:.875rem;font-weight:500;color:var(--text-primary);cursor:pointer;font-family:DM Sans,sans-serif;transition:background .15s,border-color .15s}.copy-button:hover{background:var(--bg-tertiary);border-color:var(--accent-warm)}.status{display:flex;align-items:center;gap:8px;margin-top:16px;padding:12px 16px;border-radius:8px;font-size:.875rem}.status.success{background:rgba(34,197,94,.1);color:var(--success)}.status.error{background:rgba(239,68,68,.1);color:var(--error)}.legend{display:flex;gap:32px;margin-top:40px;padding-top:32px;border-top:1px solid var(--border-subtle)}.legend-item{display:flex;align-items:center;gap:10px}.legend-badge{padding:6px 14px;border-radius:6px;font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}.legend-badge.aygo{background:rgba(99,102,241,.15);color:var(--accent-cool)}.legend-badge.octavia{background:rgba(249,115,22,.15);color:var(--accent-warm)}.legend-text{font-size:.875rem;color:var(--text-secondary)}@media (max-width:640px){.container{padding:48px 20px}.title{font-size:2.5rem}.legend{flex-direction:column;gap:16px}}