:root{--bg-primary: #ffffff;--bg-secondary: #f6f8fa;--bg-input: #ffffff;--bg-input-selected: #f6f8fa;--bg-highlight: #f3f4f6;--bg-dropdown: #ffffff;--bg-badge: #ddf4ff;--text-primary: #1f2328;--text-secondary: #656d76;--text-muted: #8c959f;--border-color: #d0d7de;--border-focus: #0969da;--border-selected: #b6d9f8;--border-badge: #9ccaf8;--accent: #0969da;--accent-hover: #0550ae;--error: #cf222e;--success: #1a7f37;--focus-ring: 2px solid var(--accent);--focus-glow: 0 0 0 3px rgba(9, 105, 218, .3);--shadow-dropdown: 0 8px 24px rgba(140, 149, 159, .2)}@media (prefers-color-scheme: dark){:root{--bg-primary: #0d1117;--bg-secondary: #161b22;--bg-input: #21262d;--bg-input-selected: #161b22;--bg-highlight: #30363d;--bg-dropdown: #1c2128;--bg-badge: #1a2332;--text-primary: #e6edf3;--text-secondary: #7d8590;--text-muted: #484f58;--border-color: #30363d;--border-focus: #58a6ff;--border-selected: #388bfd;--border-badge: #1f6feb;--accent: #58a6ff;--accent-hover: #79c0ff;--error: #f85149;--success: #3fb950;--focus-glow: 0 0 0 3px rgba(88, 166, 255, .3);--shadow-dropdown: 0 8px 24px rgba(0, 0, 0, .4)}}.converter{display:flex;flex-direction:column;align-items:center;gap:32px;padding:24px;width:100%;max-width:600px;flex-shrink:0}.converter__units{display:flex;align-items:center;gap:16px;width:100%}.converter__arrow{color:var(--text-muted);font-size:20px;flex-shrink:0}.converter__values{display:flex;align-items:center;gap:16px;width:100%}.unit-input{position:relative;flex:1}.unit-input__wrapper{position:relative;width:100%}.unit-input__field{width:100%;cursor:text;transition:background-color .2s ease,border-color .2s ease}.unit-input__field--has-value{font-weight:500;background:var(--bg-input-selected);border-color:var(--border-selected);padding-right:140px}.unit-input__indicators{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;pointer-events:none}.unit-input__badge{display:inline-block;padding:3px 8px;font-size:11px;font-weight:500;color:var(--accent);background:var(--bg-badge);border:1px solid var(--border-badge);border-radius:12px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.unit-input__checkmark{color:var(--success);flex-shrink:0}.dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg-dropdown);border:1px solid var(--border-color);border-radius:6px;max-height:300px;overflow-y:auto;z-index:100;box-shadow:var(--shadow-dropdown)}.dropdown:empty{display:none}.dropdown-item{padding:10px 14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}.dropdown-item:hover,.dropdown-item--highlighted{background:var(--bg-highlight)}.dropdown-item__name{color:var(--text-primary);font-weight:500}.dropdown-item__category{color:var(--text-muted);font-size:12px;white-space:nowrap}.dropdown__load-more{padding:8px 14px;color:var(--text-muted);font-size:12px;text-align:center;border-top:1px solid var(--border-color);background:var(--bg-dropdown);position:sticky;bottom:0}.value-input{flex:1}.value-input__field{width:100%;font-size:24px;text-align:right;padding:12px 16px}.value-input__field--error{border-color:var(--error)}.value-input__field:focus{border-color:var(--border-focus)}.output__field{width:100%;font-size:24px;font-weight:500;color:var(--accent);background:transparent;border:1px dashed var(--border-color);text-align:right;padding:12px 16px}.output__field:focus{border-style:solid;border-color:var(--border-focus)}.keyboard-hints{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;color:var(--text-muted);font-size:12px}.keyboard-hint{display:flex;align-items:center;gap:6px}.keyboard-hint kbd{display:inline-block;padding:2px 6px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:4px;font-family:inherit;font-size:11px}.converter__footer{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}.share-button{display:flex;align-items:center;gap:6px;padding:12px 20px;font-size:13px;font-family:inherit;color:var(--text-secondary);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:all .2s ease;min-height:44px}.share-button:hover{color:var(--text-primary);background:var(--bg-highlight);border-color:var(--accent)}.share-button:active{transform:scale(.98)}.share-button svg{flex-shrink:0}.share-modal__backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.share-modal{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;width:100%;max-width:500px;box-shadow:var(--shadow-dropdown);animation:modalSlideIn .2s ease}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.share-modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border-color)}.share-modal__title{margin:0;font-size:16px;font-weight:600;color:var(--text-primary)}.share-modal__close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;font-size:24px;color:var(--text-muted);background:transparent;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease}.share-modal__close:hover{color:var(--text-primary);background:var(--bg-highlight)}.share-modal__content{padding:24px;display:flex;flex-direction:column;gap:20px}.share-modal__url-section{display:flex;flex-direction:column;gap:8px}.share-modal__url-input{width:100%;padding:10px 12px;font-family:inherit;font-size:14px;color:var(--text-primary);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:4px;outline:none;-webkit-user-select:all;user-select:all}.share-modal__url-input:focus{border-color:var(--border-focus);background:var(--bg-input)}.share-modal__hint{margin:0;font-size:12px;color:var(--text-muted);text-align:center}.share-modal__hint kbd{display:inline-block;padding:2px 6px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:3px;font-family:inherit;font-size:11px}.share-modal__copy-btn{width:100%;padding:10px 16px;font-family:inherit;font-size:14px;font-weight:500;color:var(--bg-primary);background:var(--accent);border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.share-modal__copy-btn:hover{background:var(--accent-hover)}.share-modal__copy-btn:active{transform:scale(.98)}.share-modal__divider{position:relative;text-align:center;color:var(--text-muted);font-size:12px}.share-modal__divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--border-color);z-index:0}.share-modal__divider span{position:relative;padding:0 12px;background:var(--bg-primary);z-index:1}.share-modal__social{display:flex;gap:12px;justify-content:center}.share-modal__social-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 16px;font-size:12px;font-family:inherit;color:var(--text-secondary);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;text-decoration:none;transition:all .2s ease;flex:1;max-width:120px}.share-modal__social-btn:hover{color:var(--text-primary);background:var(--bg-highlight);border-color:var(--accent)}.share-modal__social-btn:active{transform:scale(.98)}.share-modal__social-btn svg{flex-shrink:0}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);padding:12px 20px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;box-shadow:var(--shadow-dropdown);z-index:2000;animation:toastSlideIn .2s ease}@keyframes toastSlideIn{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.toast__message{color:var(--text-primary);font-size:14px;font-weight:500}.recent-conversions{width:100%;max-width:600px;margin-top:16px;display:flex;flex-direction:column;max-height:min(40vh,280px);min-height:0}.recent-conversions__title{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}.recent-conversions__list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--border-color) transparent}.recent-conversions__list::-webkit-scrollbar{width:8px}.recent-conversions__list::-webkit-scrollbar-track{background:transparent}.recent-conversions__list::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}.recent-conversions__list::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.recent-conversion-item{display:flex;align-items:center;gap:8px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;padding:4px;transition:all .2s ease}.recent-conversion-item:hover{background:var(--bg-highlight);border-color:var(--accent)}.recent-conversion-item__button{flex:1;display:flex;align-items:center;padding:8px 12px;font-family:inherit;font-size:14px;color:var(--text-primary);background:transparent;border:none;border-radius:4px;cursor:pointer;text-align:left;transition:all .2s ease}.recent-conversion-item__button:hover{background:var(--bg-highlight)}.recent-conversion-item__text{color:var(--text-primary)}.recent-conversion-item__delete{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;font-size:14px;color:var(--text-muted);background:transparent;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.recent-conversion-item__delete:hover{color:var(--error);background:var(--bg-highlight)}.category-selector{width:100%;max-width:800px;display:flex;flex-direction:column;gap:24px;padding:24px}.category-selector__title{margin:0;font-size:24px;font-weight:600;color:var(--text-primary);text-align:center}.category-selector__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;width:100%}.category-card{display:flex;align-items:center;justify-content:center;padding:24px 16px;font-family:inherit;font-size:16px;font-weight:500;color:var(--text-primary);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all .2s ease;min-height:80px}.category-card:hover{background:var(--bg-highlight);border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.category-card:active{transform:translateY(0)}.category-card__name{text-align:center}.category-page{width:100%;max-width:900px;display:flex;flex-direction:column;gap:32px;padding:24px}.category-page__header{display:flex;flex-direction:column;gap:16px}.category-page__back{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;font-family:inherit;font-size:14px;font-weight:500;color:var(--text-secondary);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:all .2s ease;align-self:flex-start}.category-page__back:hover{color:var(--text-primary);background:var(--bg-highlight);border-color:var(--accent)}.category-page__title{margin:0;font-size:32px;font-weight:700;color:var(--text-primary)}.category-page__content{display:flex;flex-direction:column;gap:40px}.category-page__section{display:flex;flex-direction:column;gap:20px}.category-page__section-title{margin:0;font-size:18px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.category-page__popular-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}.popular-conversion-card{display:flex;flex-direction:column;gap:8px;padding:16px;font-family:inherit;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all .2s ease;text-align:left}.popular-conversion-card:hover{background:var(--bg-highlight);border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.popular-conversion-card:active{transform:translateY(0)}.popular-conversion-card__label{font-size:15px;font-weight:500;color:var(--text-primary)}.popular-conversion-card__units{font-size:13px;color:var(--text-muted)}.category-page__units-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}.unit-card{display:flex;flex-direction:column;gap:4px;padding:12px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px}.unit-card__name{font-size:14px;font-weight:500;color:var(--text-primary)}.unit-card__abbr{font-size:12px;color:var(--text-muted)}.category-page__error{font-size:16px;color:var(--error);text-align:center;padding:40px 20px}@media (max-width: 640px){.category-selector__grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.category-page__title{font-size:24px}.category-page__popular-grid{grid-template-columns:1fr}.category-page__units-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100vh;background:var(--bg-primary);color:var(--text-primary);font-family:JetBrains Mono,SF Mono,Fira Code,Consolas,monospace;line-height:1.5}#app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:10vh;overflow-y:auto}input{font-family:inherit;font-size:inherit;background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-color);border-radius:6px;padding:10px 14px;outline:none;transition:border-color .15s ease,box-shadow .15s ease}input:focus{border-color:var(--border-focus);box-shadow:var(--focus-glow)}input::placeholder{color:var(--text-muted)}::selection{background:var(--accent);color:var(--bg-primary)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;top:-40px;left:0;background:var(--accent);color:#fff;padding:8px 16px;z-index:100;transition:top .2s}.skip-link:focus{top:0}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}@media (max-height: 700px){#app{padding-top:5vh}}@media (max-height: 500px){#app{padding-top:20px}}