:root{--primary: #6366f1;--primary-hover: #4f46e5;--secondary: #10b981;--secondary-hover: #059669;--bg: #0f172a;--card-bg: #1e293b;--text: #f8fafc;--text-muted: #94a3b8;--error: #ef4444;--border: #334155}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--bg);color:var(--text);display:flex;justify-content:center;align-items:center;min-height:100vh;height:100vh;overflow:hidden;line-height:1.5}#app{width:100%;max-width:1200px;padding:1.5rem;display:flex;flex-direction:column;height:100vh;margin:0 auto}header{text-align:center;margin-bottom:2rem;flex-shrink:0}header h1{font-size:2.5rem;font-weight:800;background:linear-gradient(to right,#818cf8,#34d399);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.25rem}header p{color:var(--text-muted);font-size:1rem}main{flex:1;display:flex;flex-direction:column;min-height:0}.card.wide{max-width:100%;width:100%;height:100%;display:flex;flex-direction:column}.card{background-color:var(--card-bg);padding:2rem;border-radius:1.5rem;box-shadow:0 25px 50px -12px #00000080;border:1px solid var(--border)}.converter-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:stretch;flex:1;min-height:0}.column{display:flex;flex-direction:column;gap:.75rem}.field-header{display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.controls{display:flex;align-items:center;justify-content:center}label{display:block;font-weight:600;color:var(--text-muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}select{background-color:var(--bg);border:1px solid var(--border);color:var(--text);padding:.25rem .5rem;border-radius:.5rem;font-size:.875rem;cursor:pointer;outline:none}select:focus{border-color:var(--primary)}textarea{width:100%;flex:1;background-color:var(--bg);border:1px solid var(--border);border-radius:.75rem;padding:1rem;color:var(--text);font-family:Fira Code,monospace;font-size:1rem;resize:none;transition:all .2s}textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px #6366f133}.ghost{background-color:transparent;border:1px solid var(--border);color:var(--text-muted);width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:1.5rem;cursor:pointer;transition:all .3s ease}.ghost:hover{background-color:var(--border);color:var(--text);transform:rotate(180deg)}.error{background-color:#ef44441a;border:1px solid var(--error);color:var(--error);padding:1rem;border-radius:.75rem;margin-top:1rem;font-size:.875rem;flex-shrink:0}.hidden{display:none}footer{margin-top:auto;padding-top:1.5rem;text-align:center;color:var(--text-muted);font-size:.875rem;flex-shrink:0}footer a{color:var(--primary);text-decoration:none;transition:color .2s}footer a:hover{color:var(--primary-hover);text-decoration:underline}@media (max-width: 768px){.converter-grid{grid-template-columns:1fr;grid-template-rows:1fr auto 1fr;gap:1rem}.controls{padding:0}.ghost{transform:rotate(90deg)}.ghost:hover{transform:rotate(270deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.card{animation:fadeIn .5s ease-out}