:root{--bg-color: #0f172a;--card-bg: #1e293b;--text-primary: #f8fafc;--text-secondary: #94a3b8;--accent-color: #38bdf8;--accent-hover: #0ea5e9;--border-color: #334155;--font-family: "Inter", sans-serif}body{background-color:var(--bg-color);color:var(--text-primary);font-family:var(--font-family);display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0}#app{width:100%;max-width:600px;padding:1rem}.converter-card{background-color:var(--card-bg);padding:2.5rem;border-radius:16px;box-shadow:0 10px 25px -5px #0000004d;display:flex;flex-direction:column;gap:1.5rem}.title{margin:0;font-size:1.8rem;font-weight:700;text-align:center;background:linear-gradient(135deg,#a5f3fc,#38bdf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:1rem}.input-group,.result-group,.settings-group{display:flex;flex-direction:column;gap:.5rem}label{font-size:.875rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.input-wrapper{position:relative;display:flex;align-items:center}input[type=number],select{width:100%;padding:1rem;background-color:#0003;border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:1.1rem;font-family:inherit;transition:border-color .2s;box-sizing:border-box}input[type=number]:focus,select:focus{outline:none;border-color:var(--accent-color)}button#now-btn{position:absolute;right:8px;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:8px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}button#now-btn:hover{color:var(--text-primary);background-color:#ffffff1a}.display-box{background-color:#0006;padding:1.25rem;border-radius:8px;border:1px solid var(--border-color);font-family:JetBrains Mono,monospace;font-size:1.25rem;text-align:center;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}.display-box:hover{border-color:var(--accent-color);background-color:#38bdf80d}.display-box:active{transform:scale(.99)}.display-box.copied:after{content:"Copied!";position:absolute;top:0;left:0;right:0;bottom:0;background-color:#0ea5e9e6;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;color:#fff}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}