:root{--bg: #0f172a;--bg-secondary: #1e293b;--bg-header: #1e293b;--text: #f1f5f9;--text-secondary: #94a3b8;--border: #334155;--primary: #d97706;--success: #22c55e;--radius: 8px;--shadow: 0 1px 3px rgba(0, 0, 0, .3)}*{box-sizing:border-box;margin:0;padding:0}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--primary);outline-offset:2px}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}.container{max-width:600px;margin:0 auto;padding:1.5rem}.app-header{background:var(--bg-header);border-bottom:1px solid var(--border);padding:1rem 0}.header-content{max-width:600px;margin:0 auto;padding:0 1.5rem;display:flex;justify-content:space-between;align-items:center}.header-title{font-size:1.25rem;font-weight:700;color:var(--text)}.header-title a{color:inherit;text-decoration:none}.category-nav{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.category-btn{padding:.5rem 1rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:.875rem;cursor:pointer;transition:all .2s;text-decoration:none}.category-btn:hover{border-color:var(--primary);color:var(--primary)}.category-btn.active{background:var(--primary);border-color:var(--primary);color:var(--bg)}.card-section{background:var(--bg-secondary);border:1px solid var(--border);border-radius:calc(var(--radius) * 2);padding:1.5rem;box-shadow:var(--shadow)}.card-section+.card-section{margin-top:1rem}.input-group{margin-bottom:1rem}.input-group label{display:block;font-size:.875rem;font-weight:500;color:var(--text-secondary);margin-bottom:.5rem}.input-row{display:flex;gap:.5rem}.input-row input,.input-row select,.input-row textarea{padding:.75rem 1rem;font-size:1.125rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);outline:none;transition:border-color .2s}.input-row input:focus,.input-row select:focus,.input-row textarea:focus{border-color:var(--primary)}.input-row select{font-size:1rem;cursor:pointer;min-width:140px}.input-row textarea{resize:vertical;min-height:100px}.conversions-list{margin-top:1.5rem;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.conversion-row{display:flex;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--border);cursor:pointer;transition:background-color .15s}.conversion-row:last-child{border-bottom:none}.conversion-row:hover{background-color:var(--bg-secondary)}.conversion-row.glow{background-color:#22c55e33;transition:background-color .3s ease-out}.conversion-equals{color:var(--text-secondary);font-size:.9rem;min-width:20px;margin-right:.5rem}.conversion-value{flex:1;font-weight:600;color:var(--primary);text-align:left;font-family:monospace;font-size:1rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversion-unit{color:var(--text-secondary);font-size:.875rem;min-width:60px;text-align:right;margin-left:.75rem;flex-shrink:0}.conversion-copied{color:var(--success);font-size:.75rem;margin-left:.5rem}.precision-row{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}.precision-row label{font-size:.875rem;color:var(--text-secondary)}.precision-row input[type=range]{width:120px;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;background:var(--border);border-radius:3px;cursor:pointer}.precision-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:var(--primary);border-radius:50%;cursor:pointer;transition:transform .15s ease}.precision-row input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}.precision-row input[type=range]::-moz-range-thumb{width:18px;height:18px;background:var(--primary);border-radius:50%;cursor:pointer;border:none}.precision-value{font-size:.875rem;font-weight:500;min-width:2ch}.card-section .fun-facts h2{font-size:1.25rem;margin-bottom:.75rem}.card-section .fun-facts ul{list-style:none;padding-left:0}.card-section .fun-facts li{position:relative;padding-left:1.5rem;margin-bottom:.75rem;color:var(--text-secondary);line-height:1.5}.card-section .fun-facts li:before{content:"•";color:var(--primary);position:absolute;left:0;font-size:1.25rem;line-height:1.4}.card-section .fun-facts li strong{color:var(--text)}.card-section .fun-facts li a{color:var(--primary);text-decoration:underline;font-weight:600}.card-section .fun-facts li a:hover{text-decoration:none}.card-section .explanatory-text h2{font-size:1.25rem;margin-bottom:.75rem}.card-section .explanatory-text p{color:var(--text-secondary);line-height:1.7}.home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.home-card{padding:1.5rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);text-decoration:none;color:var(--text);transition:all .2s}.home-card:hover{border-color:var(--primary);transform:translateY(-2px)}.home-card h3{font-size:1.125rem;margin-bottom:.25rem}.home-card p{font-size:.875rem;color:var(--text-secondary)}.result-box{margin-top:1.5rem;padding:1.5rem;background:var(--bg);border:2px solid var(--primary);border-radius:var(--radius);text-align:center}.result-box .result-value{font-size:2rem;font-weight:700;color:var(--primary);margin-bottom:.5rem}.result-box .result-label{font-size:.875rem;color:var(--text-secondary)}.result-box .result-description{margin-top:.75rem;font-size:.875rem;color:var(--text-secondary)}.bmi-category{display:inline-block;padding:.25rem .75rem;border-radius:var(--radius);font-size:.875rem;font-weight:600;margin-top:.5rem}.bmi-category.underweight{background:#3b82f6;color:#fff}.bmi-category.normal{background:var(--success);color:#fff}.bmi-category.overweight{background:#f59e0b;color:#fff}.bmi-category.obese{background:#ef4444;color:#fff}.calculate-btn{padding:.75rem 1.5rem;background:var(--primary);border:none;border-radius:var(--radius);color:var(--bg);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;width:100%}.calculate-btn:hover{filter:brightness(1.1)}.calculate-btn:active{transform:scale(.98)}@media(max-width:480px){.container{padding:1rem}.input-row{flex-direction:column}.input-row select{min-width:100%}.result-box .result-value{font-size:1.5rem}}
