body{font-family:Segoe UI,Arial,sans-serif;background:#f7f9fb;margin:0;padding:0;min-height:100vh;color:#222;transition:background .2s,color .2s}h1{text-align:center;margin-top:2rem;color:#222;letter-spacing:1px;font-size:2.2rem;transition:color .2s}#app{background:#fff;max-width:500px;margin:2rem auto 0;padding:2rem 2.5rem 2.5rem;border-radius:12px;box-shadow:0 4px 24px #00000014;display:flex;flex-direction:column;gap:1.2em;transition:background .2s,box-shadow .2s}.form-row{display:flex;flex-wrap:wrap;align-items:center;gap:1.2em;margin-bottom:.5em}.form-row label{margin-bottom:0;min-width:80px;text-align:right}.amount-group{display:flex;flex-direction:row;align-items:center;width:100%;margin-top:.2em;margin-bottom:.2em}.amount-group input[type=number]{flex-grow:1;min-width:0;width:100%}.amount-group button{flex-shrink:0;width:2.2em;min-width:2.2em;max-width:2.2em;height:2.2em;padding:0;margin-left:.15em;margin-right:0;font-size:1.2em;line-height:1;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:none}.theme-row{display:flex;align-items:center;gap:.7em;margin-top:2em;justify-content:flex-end}.theme-row label{font-weight:500;margin-bottom:0;min-width:0;text-align:left}label{font-weight:500;margin-right:.5em}select,input[type=number]{padding:.4em .8em;border:1px solid #cfd8dc;border-radius:6px;font-size:1em;background:#f5f7fa;transition:border .2s,background .2s,color .2s;margin-right:0;min-width:120px;color:inherit}select:focus,input[type=number]:focus{border:1.5px solid #1976d2}button{padding:.5em 1.2em;border:none;border-radius:6px;background:#1976d2;color:#fff;font-size:1em;font-weight:500;cursor:pointer;margin-right:.5em;margin-top:1em;transition:background .2s,box-shadow .2s;box-shadow:0 2px 8px #1976d214}button:disabled{background:#b0bec5;cursor:not-allowed}h2{margin-top:2.5em;margin-bottom:.5em;color:#1976d2;font-size:1.3em;border-bottom:1px solid #e3e8ee;padding-bottom:.3em;transition:color .2s,border-bottom .2s}#result{margin-top:1em;font-family:Fira Mono,Consolas,monospace;background:#f5f7fa;border-radius:6px;padding:1em;min-height:2em;word-break:break-all;box-shadow:0 1px 4px #00000008;font-size:1em;color:#111;transition:background .2s,color .2s}.form-row button{align-self:flex-end;margin-top:0}select{-webkit-appearance:none;appearance:none;background-image:url('data:image/svg+xml;utf8,<svg fill="%23333" height="16" viewBox="0 0 20 20" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7.293 7.293a1 1 0 011.414 0L10 8.586l1.293-1.293a1 1 0 111.414 1.414l-2 2a1 1 0 01-1.414 0l-2-2a1 1 0 010-1.414z"/></svg>');background-repeat:no-repeat;background-position:right .7em center;background-size:1em;padding-right:2.2em}body.dark-mode select{background-image:url('data:image/svg+xml;utf8,<svg fill="%23fff" height="16" viewBox="0 0 20 20" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7.293 7.293a1 1 0 011.414 0L10 8.586l1.293-1.293a1 1 0 111.414 1.414l-2 2a1 1 0 01-1.414 0l-2-2a1 1 0 010-1.414z"/></svg>')}@media (max-width: 600px){h1{font-size:1.5rem;margin-top:1.2rem}#app{max-width:100vw;padding:1em .5em 1.5em;border-radius:0;box-shadow:none}.form-row{flex-direction:column;align-items:stretch;gap:.7em;margin-bottom:0}.form-row label{text-align:left;min-width:0}select,input[type=number]{font-size:1em;min-width:0;width:100%}button{width:100%;margin-right:0;margin-top:.7em;font-size:1em}#result{font-size:.95em;padding:.7em}.amount-group{width:100%;display:flex;align-items:center}.amount-group input[type=number]{flex-grow:1;min-width:0;width:100%;font-size:1.1em;padding:.5em .7em;text-align:left}.amount-group button{flex-shrink:0;width:2.2em;min-width:2.2em;max-width:2.2em;height:2.2em;padding:0;margin-left:.15em;margin-right:0;font-size:1.2em;line-height:1;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:none}.theme-row{justify-content:flex-start;margin-top:1.2em}}@media (max-width: 400px){h1{font-size:1.1rem}#app{padding:.5em .1em 1em}h2{font-size:1em}#result{font-size:.85em;padding:.4em}}@media (prefers-color-scheme: dark){body:not(.light-mode){background:#181a1b;color:#fff}h1{color:#fff}#app{background:#23272b;box-shadow:0 4px 24px #00000052}select,input[type=number]{background:#23272b;border:1px solid #444;color:#fff}select:focus,input[type=number]:focus{border:1.5px solid #90caf9}button{background:#90caf9;color:#181a1b}button:disabled{background:#444;color:#888}h2{color:#90caf9;border-bottom:1px solid #444}#result{background:#23272b;color:#fff}}body.dark-mode{background:#181a1b;color:#fff}body.dark-mode h1{color:#fff}body.dark-mode #app{background:#23272b;box-shadow:0 4px 24px #00000052}body.dark-mode select,body.dark-mode input[type=number]{background:#23272b;border:1px solid #444;color:#fff}body.dark-mode select:focus,body.dark-mode input[type=number]:focus{border:1.5px solid #90caf9}body.dark-mode button{background:#90caf9;color:#181a1b}body.dark-mode button:disabled{background:#444;color:#888}body.dark-mode h2{color:#90caf9;border-bottom:1px solid #444}body.dark-mode #result{background:#23272b;color:#fff}body.light-mode{background:#f7f9fb;color:#222}body.light-mode h1{color:#222}body.light-mode #app{background:#fff;box-shadow:0 4px 24px #00000014}body.light-mode select,body.light-mode input[type=number]{background:#f5f7fa;border:1px solid #cfd8dc;color:#222}body.light-mode select:focus,body.light-mode input[type=number]:focus{border:1.5px solid #1976d2}body.light-mode button{background:#1976d2;color:#fff}body.light-mode button:disabled{background:#b0bec5;color:#fff}body.light-mode h2{color:#1976d2;border-bottom:1px solid #e3e8ee}body.light-mode #result{background:#f5f7fa;color:#111}