.tool-cards-grid{display:grid;grid-template-columns:repeat(3,minmax(300px,1fr));gap:1.5rem;margin:0 auto}.tool-card{background-color:#fff;padding:22px;border-radius:.75rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000000f;border:1px solid #e5e7eb;cursor:pointer;transition:var(--transition);display:flex;flex-direction:column;justify-content:space-between;gap:20px;min-height:150px}.tool-card:hover{transform:translateY(-5px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.tool-card-title{font-weight:600;color:var(--primary-color);margin-bottom:1rem}.tool-card-description{color:var(--text-color);font-size:1.8rem}.tool-card-cta{background-color:var(--primary-color);margin-top:1rem;font-size:1.8rem;font-weight:500;color:var(--white-color);border-radius:12px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;align-self:flex-start;transition:var(--transition)}.tool-card-cta:hover{box-shadow:8px 8px var(--primary-color);background-color:var(--black-color)}.back-button{background-color:var(--black-color);cursor:pointer;font-size:1.8rem;font-weight:500;color:var(--white-color);border-radius:12px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;align-self:flex-start;transition:var(--transition)}.back-button:hover{background-color:var(--primary-color)}.converter-container{width:100%;max-width:600px;margin:20px auto 0;padding:1.5rem;background-color:#fff;border-radius:1rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;display:flex;flex-direction:column;gap:1.5rem;border:1px solid #e5e7eb}.converter-title{font-size:2.8rem;font-weight:700;text-align:center}.input-wrapper{position:relative}.input-field,.unit-select,.base-size-input{width:100%;border:1px solid #d1d5db;border-radius:.5rem;padding:.75rem 1rem;transition:var(--transition);outline:none}.input-field:focus,.unit-select:focus,.base-size-input:focus{border-color:var(--primary-color);box-shadow:0 0 0 1px var(--primary-color)}.input-unit-label{position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:#6b7280;font-weight:600;text-transform:lowercase}.unit-selector-group{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.unit-select{flex:1;background-color:var(--white-color);-webkit-appearance:none;-moz-appearance:none;appearance:none}.swap-button{padding:.75rem;border-radius:50%;color:var(--black-color);background-color:#f3f4f6;border:none;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center}.swap-button:hover,.swap-button:focus{box-shadow:0 0 0 2px var(--primary-color)}.base-size-group{display:flex;align-items:center;gap:1rem;padding:.75rem;background-color:#f9fafb;border-radius:12px}.base-size-label{color:#000c;font-weight:500;white-space:nowrap}.base-size-input-wrapper{width:100%;position:relative}.base-size-unit{color:#0009;font-weight:500;text-transform:lowercase;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.base-size-input{padding:.5rem .75rem}.convert-button{width:100%;font-weight:600;border-radius:12px;border:none;cursor:pointer;transition:var(--transition);background-color:var(--primary-color);color:var(--white-color);box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.convert-button:hover:not(:disabled){background-color:var(--black-color);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000000f}.convert-button:active:not(:disabled){transform:scale(.98)}.convert-button:disabled{background-color:#d1d5db;color:#6b7280;cursor:not-allowed;box-shadow:none}.result-display{text-align:center;min-height:6rem;display:flex;align-items:center;justify-content:center;background-color:#f9fafb;border-radius:12px;padding:1rem;font-size:2.5rem;position:relative}.error-message{color:var(--primary-color);font-weight:600}.result-value-group{color:var(--primary-color)}.result-value{font-weight:700}.result-unit{margin-left:.5rem;font-weight:500;color:#000c;text-transform:lowercase}.placeholder-text{color:#6b7280}.copy-button{color:#0009;font-size:18px;background:transparent;line-height:1;padding:4px;border:2px solid rgba(0,0,0,.2);border-radius:8px}.clipboard-wrapper{position:absolute;top:50%;right:10px;transform:translateY(-50%);display:flex;align-items:center;justify-content:flex-end;gap:10px;font-size:16px}@media screen and (max-width: 600px){.tool-cards-grid{grid-template-columns:1fr}.base-size-group{flex-direction:column;align-items:flex-start}.unit-selector-group{gap:20px;flex-direction:column;align-items:center;justify-content:center}.result-display{font-size:1.8rem;justify-content:flex-start}}