:root{--bg: #22242C;--bg-surface: #272D32;--bg-hover: #2f353b;--border: #3a4048;--text: #e0e0e0;--text-muted: #888;--accent: #f48120;--accent-hover: #ff9a44;--font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}.app{display:flex;min-height:100vh}.sidebar{width:240px;background:var(--bg-surface);border-right:1px solid var(--border);padding:1rem 0;flex-shrink:0;display:flex;flex-direction:column}.sidebar-title{font-size:1.1rem;font-weight:700;padding:.5rem 1.2rem 1rem;color:var(--accent);letter-spacing:-.02em}.sidebar nav{display:flex;flex-direction:column;gap:2px;padding:0 .5rem}.sidebar nav a{text-decoration:none;color:var(--text-muted);padding:.5rem .75rem;border-radius:6px;font-size:.875rem;transition:all .15s;display:flex;align-items:center;gap:.5rem}.sidebar nav a:hover{color:var(--text);background:var(--bg-hover)}.sidebar nav a.active{color:var(--text);background:var(--bg-hover);font-weight:500}.main{flex:1;padding:2rem;max-width:900px}.main h1{font-size:1.5rem;font-weight:600;margin-bottom:1.5rem}.tool-area{display:flex;flex-direction:column;gap:1rem}.tool-row{display:flex;gap:.5rem;flex-wrap:wrap}label{font-size:.8rem;color:var(--text-muted);margin-bottom:.25rem;display:block}textarea,input[type=text],input[type=number]{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:var(--font-mono);font-size:.875rem;padding:.75rem;resize:vertical;outline:none;transition:border-color .15s}select{background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.8rem;padding:.5rem .75rem;outline:none;cursor:pointer;transition:border-color .15s}select:focus{border-color:var(--accent)}textarea:focus,input:focus{border-color:var(--accent)}textarea{min-height:120px}button{background:var(--bg-hover);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:.5rem 1rem;font-size:.8rem;cursor:pointer;transition:all .15s}button:hover{background:var(--border)}button.primary{background:var(--accent);border-color:var(--accent);color:#000;font-weight:600}button.primary:hover{background:var(--accent-hover)}.error{color:#f44;font-size:.8rem;margin-top:.25rem}.result-box{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.75rem;font-family:var(--font-mono);font-size:.875rem;word-break:break-all;white-space:pre-wrap;min-height:60px}.swap-btn{align-self:center}.mobile-header{display:none;position:fixed;top:0;left:0;right:0;height:56px;background:var(--bg-surface);border-bottom:1px solid var(--border);padding:0 1rem;align-items:center;gap:1rem;z-index:100}.mobile-title{font-size:1.1rem;font-weight:700;color:var(--accent)}.menu-toggle{width:40px;height:40px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center}.hamburger{position:relative;width:20px;height:2px;background:var(--text);transition:all .3s}.hamburger:before,.hamburger:after{content:"";position:absolute;width:20px;height:2px;background:var(--text);transition:all .3s}.hamburger:before{top:-6px}.hamburger:after{top:6px}.hamburger.open{background:transparent}.hamburger.open:before{top:0;transform:rotate(45deg)}.hamburger.open:after{top:0;transform:rotate(-45deg)}.overlay{display:none;position:fixed;inset:0;background:#00000080;z-index:90}@media(max-width:768px){.mobile-header{display:flex}.overlay{display:block}.sidebar{position:fixed;top:0;left:0;bottom:0;z-index:95;transform:translate(-100%);transition:transform .3s ease}.sidebar .sidebar-title{display:none}.sidebar.open{transform:translate(0)}.main{padding:1rem;padding-top:calc(56px + 1rem);max-width:100%}.main h1{font-size:1.25rem}.tool-row{flex-direction:column}textarea{min-height:100px}button{width:100%;padding:.75rem 1rem}.result-box{font-size:.8rem}.mobile-clipboard{display:flex}}.mobile-clipboard{display:none;gap:.5rem}.mobile-clipboard button{flex:1;font-size:.75rem;padding:.5rem}.input-header,.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem}.input-header label,.output-header label{margin-bottom:0}