.converter-card { max-width: 900px; margin: 18px auto; padding: 14px; border-radius: 10px; background: linear-gradient(180deg,#ffffff 0%, #f7fbff 100%); box-shadow: 0 8px 20px rgba(44,95,141,0.06); border: 1px solid rgba(44,95,141,0.05); }
.converter-title { text-align:center; color:#2c5f8d; margin-bottom:10px; font-size:1.75rem; font-weight:600 }
.conv-row { display:flex; gap:12px; justify-content:center; align-items:center; margin-bottom:8px }
.conv-row label { display:flex; align-items:center; gap:6px; cursor:pointer; font-weight:500 }
.conv-textarea { width:100%; padding:8px; border-radius:8px; border:1px solid #e7eef7; box-shadow: inset 0 1px 2px rgba(16,24,40,0.03); font-size:2rem; line-height:1.35; resize:vertical; font-family: inherit; max-height:140px; }
.letter-btn { padding:6px 8px; border-radius:8px; border:1px solid #e6eef7; background:#fff; color:#2c5f8d; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; box-shadow:0 3px 8px rgba(44,95,141,0.03); font-size:1rem }
.letter-btn:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(44,95,141,0.06); }
.convert-btn { padding:8px 18px; border-radius:8px; border:none; background:linear-gradient(90deg,#2c5f8d,#1f4f7a); color:#fff; font-weight:700; cursor:pointer; box-shadow:0 10px 24px rgba(44,95,141,0.10); font-size:1.5rem }
.convert-btn:hover { transform:translateY(-2px); }
.output-textarea { width:100%; padding:8px; border-radius:8px; border:1px solid #eef4fb; background:#fbfeff; min-height:96px; font-size:2rem; line-height:1.35; font-family: inherit; max-height:200px; }

/* Utility small tweaks */
.converter-card .letter-buttons { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; justify-content:center; }

/* Ensure inputs and outputs share visual rhythm */
.conv-textarea, .output-textarea { color: #0f1724; }