:root {
    --bg: #FFDEE9;
    --card: #FFFFFF;
    --accent: #B5FFFC;
    --primary: #FF7EB3;
    --dark: #2D3436;
    --shadow: 5px 5px 0px var(--dark);
}

body {
    background-color: var(--bg);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    padding: 2rem;
    color: var(--dark);
}

.container { width: 100%; max-width: 500px; }

header { text-align: center; margin-bottom: 2rem; }

.converter-card {
    background: var(--card);
    border: 3px solid var(--dark);
    padding: 2rem;
    border-radius: 20px;
    box-shadow: var(--shadow);
}

.category-select { display: flex; gap: 10px; margin-bottom: 1.5rem; }

.cat-btn {
    flex: 1;
    padding: 10px;
    border: 2px solid var(--dark);
    background: white;
    cursor: pointer;
    font-weight: bold;
    border-radius: 8px;
}

.cat-btn.active { background: var(--accent); box-shadow: 2px 2px 0px var(--dark); }

input, select {
    width: 100%;
    margin: 10px 0;
    padding: 15px;
    border: 2px solid var(--dark);
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: bold;
}

.result-display {
    background: var(--primary);
    color: white;
    padding: 20px;
    border-radius: 15px;
    border: 2px solid var(--dark);
    text-align: center;
    margin: 20px 0;
}

.main-btn {
    width: 100%;
    padding: 15px;
    background: #A0FE65;
    border: 2px solid var(--dark);
    font-weight: 900;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 4px 4px 0px var(--dark);
    border-radius: 10px;
}

.main-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0px var(--dark); }

.saved-section { margin-top: 2rem; }
.saved-section ul { list-style: none; padding: 0; }
.saved-item {
    background: white;
    padding: 10px;
    border: 2px solid var(--dark);
    margin-bottom: 5px;
    border-radius: 8px;
}