:root{--bg-color: #f8f9fa;--primary-color: #4a90e2;--secondary-color: #6c757d;--dark-color: #343a40;--highlight-color: #e9ecef;--border-color: #dee2e6;--success-color: #28a745;--hover-color: #4682b4}body{margin:0;padding:0;font-family:Arial,sans-serif;background-color:var(--bg-color);color:var(--dark-color)}header{background-color:var(--primary-color);padding:1rem;text-align:center}header h1{color:var(--dark-color);margin:0}header h1 a{color:#fff;text-decoration:none}header h1 a:hover{color:var(--highlight-color)}header h1 span{opacity:.8}main{max-width:1000px;margin:0 auto;padding:20px;display:flex;gap:20px}.converter-section{flex:1}.converter-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.converter-title h2{margin:0}.converter-container{background-color:#fff;border:1px solid var(--border-color);border-radius:4px;box-shadow:0 2px 4px #403d581a}.tabs{display:flex}.tab{padding:10px 20px;background-color:var(--primary-color);color:#fff;border:none;cursor:pointer}.tab:not(.active){background-color:var(--bg-color);color:var(--secondary-color);border:1px solid var(--border-color)}.tab.active{background-color:var(--primary-color);color:#fff;border:1px solid var(--primary-color)}.conversion-inputs{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:20px;background-color:#fff}.input-group{display:grid;gap:10px}.input-group label{font-weight:700;font-size:1.2em}.input-group input{padding:10px;font-size:1.1em;border:1px solid var(--border-color);width:100%;box-sizing:border-box}input,select{padding:8px;border:1px solid var(--border-color);border-radius:4px;background:#fff}select{width:100%;border:1px solid var(--border-color);height:250px}.unit-finder{background-color:#fff;padding:20px;border-radius:4px;box-shadow:0 2px 4px #403d581a}.finder-inputs{display:grid;grid-template-columns:1fr 1fr;gap:15px}.converters-menu{width:300px;box-shadow:0 2px 4px #403d581a}.converters-menu h3{background-color:var(--primary-color);color:#fff;margin:0;padding:10px}.converters-menu ul{list-style:none;padding:0;margin:0;border:1px solid var(--border-color);background-color:#fff}.converters-menu li{border-bottom:1px solid var(--border-color)}.converters-menu li:last-child{border-bottom:none}.converters-menu a{display:block;padding:10px;color:var(--dark-color);text-decoration:none}.converters-menu a:hover{background-color:var(--primary-color);color:#fff}.common-conversions{margin-top:20px}.common-conversions h3{color:var(--dark-color);margin-bottom:20px}.common-conversions ul{list-style:none;padding:0;columns:2;column-gap:20px}.common-conversions li{margin-bottom:5px}.common-conversions a{color:var(--primary-color);text-decoration:none}.common-conversions a:hover{color:var(--hover-color);text-decoration:underline}.tab:hover{background-color:var(--hover-color);color:#fff}input:focus,select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #4a90e233}.tab,input,select,a{transition:all .2s ease-in-out}