.converter-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 768px) { .converter-layout { grid-template-columns: 1fr; } }
.converter-layout .input-group textarea { width:100%; min-height:140px; padding:0.875rem; border:2px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font-family:'SF Mono','Fira Code','Consolas',monospace; font-size:0.95rem; line-height:1.6; resize:vertical; transition:border-color 0.2s,box-shadow 0.2s; word-break:break-word; overflow-wrap:break-word; white-space:pre-wrap; }
.converter-layout .input-group textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
.converter-layout .input-group textarea.error { border-color:var(--error,#ef4444); }
.converter-layout .input-group textarea.success { border-color:var(--success,#10b981); }
.converter-layout select { width:100%; padding:0.75rem 0.875rem; border:2px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font-size:0.95rem; cursor:pointer; transition:border-color 0.2s,box-shadow 0.2s; appearance:auto; }
.converter-layout select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
.output-wrapper textarea { width:100%; min-height:140px; padding:0.875rem; border:2px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font-family:'SF Mono','Fira Code','Consolas',monospace; font-size:0.95rem; line-height:1.6; resize:vertical; cursor:pointer; word-break:break-word; overflow-wrap:break-word; white-space:pre-wrap; }
.output-wrapper textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
.converter-stats { margin-top:0.75rem; display:grid; grid-template-columns:repeat(4,1fr); gap:0.5rem; }
@media (max-width:480px) { .converter-stats { grid-template-columns:repeat(2,1fr); } }
#helpText { font-size:0.85rem; color:var(--text-secondary); margin-top:0.25rem; }
#charCount { font-size:0.8rem; color:var(--text-secondary); margin-top:0.25rem; text-align:right; }
.toast-message { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff; padding:0.75rem 1.5rem; border-radius:8px; font-size:0.9rem; z-index:9999; opacity:0; transition:opacity 0.3s ease; pointer-events:none; }
.toast-message.show { opacity:1; }