:root{--bg: #f2f8f4;--bg-alt: #e8f2eb;--surface: #ffffff;--surface-2: #f6fbf7;--border: #d2e8d8;--border-strong: #b8d8c0;--accent: #1a7a50;--accent-hover: #166843;--accent-soft: #e2f4ea;--accent-text: #ffffff;--text: #1a2e23;--text-2: #3d5a48;--text-muted: #6b8878;--shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);--shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);--shadow-lg: 0 12px 32px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.04);--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-xl: 28px;--transition: .18s ease}[data-theme=dark]{--bg: #0f1712;--bg-alt: #141e17;--surface: #1a2520;--surface-2: #202e28;--border: #2a3d32;--border-strong: #3a5244;--accent: #2ecc78;--accent-hover: #3ddb87;--accent-soft: #1a3028;--accent-text: #0f1712;--text: #e4f0e8;--text-2: #a8c8b4;--text-muted: #6e9880;--shadow-sm: 0 1px 3px rgba(0,0,0,.3);--shadow-md: 0 4px 12px rgba(0,0,0,.4);--shadow-lg: 0 12px 32px rgba(0,0,0,.5)}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}html{scroll-behavior:smooth;-webkit-overflow-scrolling:touch}body{overscroll-behavior-x:none;min-height:100dvh}body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;min-height:100dvh;min-height:100svh;padding:0;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}button,input{font:inherit;color:inherit}button{cursor:pointer;border:none;background:none}input{border:none;outline:none;background:none}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}.app-shell{max-width:1280px;margin:0 auto;padding:0 20px 40px;display:flex;flex-direction:column;gap:0}.app-header{display:flex;align-items:center;justify-content:space-between;padding:18px 0 16px;border-bottom:1px solid var(--border);margin-bottom:20px}.app-brand{display:flex;align-items:center;gap:10px}.brand-icon{flex-shrink:0}.brand-title{font-size:1.3rem;font-weight:700;letter-spacing:-.02em;color:var(--text)}.theme-toggle{width:40px;height:40px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);font-size:1.1rem;display:grid;place-items:center;transition:background var(--transition),border-color var(--transition),transform var(--transition);flex-shrink:0}.theme-toggle:hover{background:var(--accent-soft);border-color:var(--accent);transform:rotate(20deg)}main{display:flex;flex-direction:column;gap:16px}.cat-nav{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 20px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:12px}.cat-search-row{position:relative}.cat-search-wrap{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:0 14px;transition:border-color var(--transition),box-shadow var(--transition)}.cat-search-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}.cat-search-icon{font-size:1.15rem;color:var(--text-muted);line-height:1;flex-shrink:0}.cat-search-input{flex:1;padding:11px 0;font-size:.95rem;background:none;color:var(--text);-moz-appearance:none;appearance:none;-webkit-appearance:none}.cat-search-input::placeholder{color:var(--text-muted)}.cat-search-input::-webkit-search-cancel-button{display:none}.cat-clear-btn{font-size:1.2rem;color:var(--text-muted);line-height:1;padding:4px;border-radius:50%;transition:color var(--transition),background var(--transition)}.cat-clear-btn:hover{color:var(--text);background:var(--border)}.cat-group{display:flex;flex-direction:column;gap:6px}.cat-group-label{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.cat-pills{display:flex;flex-wrap:wrap;gap:6px;width:100%;justify-content:flex-start}.cat-pill{padding:5px 12px;border-radius:20px;border:1.5px solid var(--border);background:var(--surface-2);color:var(--text-2);font-size:.82rem;font-weight:500;transition:all var(--transition);white-space:nowrap;-webkit-tap-highlight-color:transparent;flex-shrink:0;min-height:32px}.cat-pill:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.cat-pill.active{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:600}.cat-no-results{font-size:.9rem;color:var(--text-muted);padding:8px 4px}.active-strip{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-hover) 100%);border-radius:var(--radius-md);padding:14px 20px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}.active-strip-name{font-size:1.1rem;font-weight:700;color:var(--accent-text);letter-spacing:-.01em}.active-strip-desc{font-size:.85rem;color:#ffffffd1;line-height:1.5}.converter-shell{display:grid;grid-template-columns:1fr 48px 1fr;gap:8px;align-items:stretch;background:transparent;border:none;border-radius:0;padding:0;box-shadow:none;width:100%}.panel{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:16px;box-shadow:var(--shadow-md);overflow:visible;min-height:400px;box-sizing:border-box;width:100%}.panel-label{font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);flex-shrink:0}.value-input{width:100%;padding:16px 18px;border-radius:var(--radius-md);border:2px solid var(--border);background:var(--surface-2);color:var(--text);font-size:clamp(1.1rem,3vw,1.5rem);font-weight:700;text-align:center;transition:border-color var(--transition),box-shadow var(--transition);box-sizing:border-box;flex-shrink:0}.value-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}.value-input::placeholder{color:var(--text-muted);font-weight:400}.result-display{width:100%;padding:16px 18px;border-radius:var(--radius-md);background:var(--accent-soft);border:2px solid var(--border-strong);color:var(--accent);font-size:1rem;font-weight:700;text-align:center;display:grid;place-items:center;word-break:break-all;transition:background var(--transition);box-sizing:border-box;flex-shrink:0}.unit-search{width:100%;padding:10px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--surface-2);color:var(--text);font-size:.88rem;transition:border-color var(--transition),box-shadow var(--transition);-moz-appearance:none;appearance:none;-webkit-appearance:none}.unit-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}.unit-search::placeholder{color:var(--text-muted)}.unit-search::-webkit-search-cancel-button{cursor:pointer}.unit-list{display:flex;flex-direction:column;gap:4px;max-height:380px;overflow-y:auto;overflow-x:hidden;padding-right:2px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-padding-top:8px;scroll-padding-bottom:8px;overscroll-behavior:contain}.unit-list::-webkit-scrollbar{width:4px;height:4px}.unit-list::-webkit-scrollbar-track{background:transparent}.unit-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;min-height:20px}.unit-btn{width:100%;text-align:left;padding:11px 14px;border-radius:var(--radius-sm);border:1.5px solid transparent;background:transparent;color:var(--text);display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.88rem;min-height:42px;transition:all var(--transition);-webkit-tap-highlight-color:transparent}.unit-btn:hover{background:var(--accent-soft);border-color:var(--border-strong);color:var(--text)}.unit-btn.selected{background:var(--accent);border-color:var(--accent-hover);color:var(--accent-text);font-weight:600}.unit-btn-name{flex:1}.unit-btn-abbr,.unit-btn-val{font-size:.8rem;opacity:.75;white-space:nowrap}.unit-btn.selected .unit-btn-abbr,.unit-btn.selected .unit-btn-val{opacity:.85}.no-units{padding:20px;text-align:center;color:var(--text-muted);font-size:.85rem;border:1.5px dashed var(--border);border-radius:var(--radius-sm)}.swap-col{display:flex;justify-content:center;align-items:flex-start;padding-top:44px}.swap-btn{width:42px;height:42px;border-radius:50%;background:var(--surface-2);border:2px solid var(--border);color:var(--accent);font-size:1.15rem;font-weight:700;display:grid;place-items:center;transition:all var(--transition);flex-shrink:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.swap-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-text);transform:rotate(180deg);box-shadow:var(--shadow-md)}.swap-btn:active{transform:rotate(180deg) scale(.93)}.formula-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 20px;box-shadow:var(--shadow-sm)}.formula-text{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.9rem;color:var(--text-2);min-width:0;word-break:break-word;overflow-wrap:break-word}.formula-eq{font-variant-numeric:tabular-nums;color:var(--text)}.formula-eq strong{color:var(--accent)}.formula-names{color:var(--text-muted);font-size:.82rem}.copy-btn{padding:8px 18px;border-radius:var(--radius-sm);background:var(--surface-2);border:1.5px solid var(--border);color:var(--text-2);font-size:.85rem;font-weight:600;white-space:nowrap;transition:all var(--transition);flex-shrink:0}.copy-btn:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.copy-btn.copied{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.copy-btn.copy-fail{background:#fef2f2;border-color:#fca5a5;color:#dc2626}[data-theme=dark] .copy-btn.copy-fail{background:#2d1515;border-color:#7f1d1d;color:#f87171}.value-input.invalid{border-color:#ef4444;box-shadow:0 0 0 3px #ef444426}.all-conv{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm)}.all-conv-heading{font-size:.88rem;font-weight:600;color:var(--text-muted);margin-bottom:14px;letter-spacing:.01em}.conv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}.conv-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--surface-2);text-align:left;transition:all var(--transition);cursor:pointer;-webkit-tap-highlight-color:transparent}.conv-card:hover{border-color:var(--accent);background:var(--accent-soft)}.conv-card.conv-active{border-color:var(--accent);background:var(--accent)}.conv-card.conv-source{border-style:dashed;opacity:.7}.conv-val{font-size:1rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;word-break:break-all}.conv-card.conv-active .conv-val{color:var(--accent-text)}.conv-name{font-size:.78rem;color:var(--text-2);line-height:1.3}.conv-card.conv-active .conv-name{color:#ffffffd9}.conv-abbr{font-size:.72rem;color:var(--text-muted);font-weight:500}.conv-card.conv-active .conv-abbr{color:#ffffffb3}.app-footer{margin-top:32px;padding-top:20px;border-top:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.footer-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;font-size:.82rem}.footer-links span{color:var(--border-strong)}.footer-links a{color:var(--text-muted)}.footer-links a:hover{color:var(--accent)}.footer-copy{font-size:.78rem;color:var(--text-muted)}@media screen and (max-width: 767px){.value-input{font-size:16px!important}.unit-btn{min-height:48px}.conv-card{min-height:80px}.cat-pill{min-height:36px}}@media (max-width: 640px){.app-shell{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}main{flex:1;display:flex;flex-direction:column;gap:16px}.app-footer{margin-top:auto;padding-top:20px}.app-header{padding:14px 0 12px;margin-bottom:14px}.brand-title{font-size:1.1rem}.cat-nav{padding:12px 14px;gap:10px}.converter-shell{grid-template-columns:1fr 28px 1fr;gap:4px;padding:10px 8px;overflow:hidden}.panel{padding:10px 8px;min-height:unset;min-width:0;overflow:hidden}.unit-btn-abbr{display:none}.swap-col{display:flex;justify-content:center;align-items:center;padding-top:0;min-height:0}.swap-btn{width:28px;height:28px;border-radius:50%;background:var(--surface-2);border:2px solid var(--border);color:var(--accent);font-size:.85rem;font-weight:700;display:grid;place-items:center;transition:all var(--transition);flex-shrink:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transform:rotate(90deg);box-shadow:var(--shadow-sm)}.swap-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-text);transform:rotate(90deg) scale(1.05)}.swap-btn:active{transform:rotate(90deg) scale(.95)}.unit-list{max-height:220px}.formula-bar{padding:10px 12px;gap:10px}.formula-names{display:none}.value-input,.result-display{padding:12px 14px;font-size:clamp(1rem,2.5vw,1.3rem)}.unit-search{padding:8px 12px;font-size:.85rem}.panel-label{font-size:.7rem}.all-conv{padding:14px}.conv-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px}.conv-card{padding:10px 12px}.conv-val{font-size:.9rem}}@media (max-width: 360px){.brand-title{font-size:1rem}.active-strip{padding:12px 16px}.active-strip-name{font-size:1rem}.active-strip-desc{font-size:.8rem}.converter-shell{padding:10px;gap:8px}.value-input{padding:14px 16px;font-size:1rem}.unit-search{padding:8px 12px;font-size:.85rem}.panel-label{font-size:.7rem}.formula-bar{padding:10px 12px;gap:8px}.copy-btn{padding:6px 12px;font-size:.8rem;min-width:auto}.panel{gap:8px}.unit-btn{padding:10px 12px;font-size:.85rem}.conv-card{padding:8px 10px}.conv-val{font-size:.9rem}.conv-name{font-size:.75rem}.conv-abbr{font-size:.7rem}}.cat-pill,.unit-btn,.conv-card,.swap-btn,.copy-btn,.theme-toggle{-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}*{-webkit-touch-callout:none}input,textarea{-webkit-user-select:text;user-select:text}html,body{overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:none}.app-shell{width:100%;min-height:100dvh;box-sizing:border-box}@supports (padding: max(0px)){.app-shell{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));padding-bottom:max(40px,env(safe-area-inset-bottom));padding-top:max(0px,env(safe-area-inset-top))}}@media (max-width: 640px){.app-shell{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-bottom:max(32px,env(safe-area-inset-bottom));padding-top:max(0px,env(safe-area-inset-top))}}@media (max-width: 400px){.app-shell{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right));padding-top:max(0px,env(safe-area-inset-top))}}.value-input,.unit-search{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:16px!important;touch-action:manipulation}@media screen and (max-width: 767px){input:focus{font-size:16px!important}}button,.unit-btn,.conv-card,.cat-pill,.swap-btn,.copy-btn,.theme-toggle{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}.swap-btn:hover,.swap-btn:active,.theme-toggle:hover{transform:none}}