:root { --primary: #10b981; /* Green for Reverse */ --bg: #f8fafc; --surface: #ffffff; --border: #cbd5e1; }
body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); padding: 2rem; max-width: 1400px; margin: 0 auto; }
@font-face{font-family:Royankee;font-style:normal;font-weight:600;font-display:fallback;src:url('../common/Royankee7.woff2') format('woff2');}
@font-face{font-family:"Manupama6";font-style:normal;font-weight:600;font-display:fallback;src:url('../common/Manupama0006.woff2') format('woff2');}
h1 { color: #0f172a; margin-bottom: 0.5rem; }
.subtitle { color: #64748b; margin-bottom: 2rem; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; height: calc(100vh - 300px); min-height: 500px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); display: flex; flex-direction: column; height: 100%; }

label { font-weight: 600; font-size: 0.9rem; color: #475569; margin-bottom: 0.5rem; display: block; }

textarea { width: 100%; flex-grow: 1; padding: 1rem; border: 1px solid var(--border); border-radius: 6px; font-size: 1.1rem; resize: none; box-sizing: border-box; line-height: 1.6; }
textarea:focus { outline: 2px solid var(--primary); border-color: transparent; }

/* Input specific styles (The Anu Text) */
#input { font-size: 1.4rem; } 

/* Output specific styles (The Unicode Text) */
#output[readonly] { background: #f1f5f9; color: #334155; font-family: 'Gautami', 'Nirmala UI', system-ui, sans-serif; }

.controls { margin-top: 1rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
button { background: var(--primary); color: white; border: none; padding: 0.6rem 1.2rem; border-radius: 6px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
button:hover { opacity: 0.9; }
button.secondary { background: #e2e8f0; color: #334155; }

select { padding: 0.6rem; border-radius: 6px; border: 1px solid var(--border); }

#status { margin-top: 1rem; padding: 0.75rem; border-radius: 6px; background: #d1fae5; color: #065f46; font-size: 0.9rem; display: none; }
#status.error { background: #fee2e2; color: #991b1b; }

@media (max-width: 768px) { 
    body { padding: 1rem; }
    .grid { grid-template-columns: 1fr; height: auto; display: block; }
    .card { height: auto; margin-bottom: 20px; }
    textarea { height: 250px; } 
}