/* DeepL Theme Collection */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; line-height: 1.5; }
a { text-decoration: none; transition: 0.2s; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* 1. Developer Theme (Light Tech Focus) */
.theme-dev { background: #F8FAFC; color: #334155; }
.theme-dev .navbar { background: white; border-bottom: 1px solid #E2E8F0; }
.theme-dev .nav-link { color: #64748B; font-weight: 500; }
.theme-dev .nav-link:hover, .theme-dev .nav-link.active { color: #0EA5E9; }
.theme-dev .btn-primary { background: #0F172A; color: white; border: none; padding: 8px 20px; border-radius: 6px; font-weight: 600; transition: 0.2s; }
.theme-dev .btn-primary:hover { background: #334155; }
.theme-dev .translator-box { background: white; border: 1px solid #E2E8F0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); border-radius: 8px; }
.theme-dev .translator-header { background: #F1F5F9; border-bottom: 1px solid #E2E8F0; color: #475569; }
.theme-dev .input-area { border-right: 1px solid #E2E8F0; }
.theme-dev .output-area { background: white; }
.theme-dev textarea { color: #334155; background: transparent; font-family: 'JetBrains Mono', monospace; font-size: 14px; }
.theme-dev textarea::placeholder { color: #94A3B8; }
.theme-dev .card { background: white; border: 1px solid #E2E8F0; color: #334155; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.theme-dev .hero-text { color: #0EA5E9; font-family: 'JetBrains Mono', monospace; background: #E0F2FE; padding: 0 10px; border-radius: 4px; }
.theme-dev h1 { color: #0F172A; letter-spacing: -0.5px; }

/* 2. Clean/Minimal (Consumer Focus) */
.theme-clean { background: #FFFFFF; color: #1A1A1A; }
.theme-clean .navbar { background: white; border-bottom: none; padding: 20px 40px; }
.theme-clean .logo { font-weight: 800; letter-spacing: -1px; font-size: 24px; color: #000; }
.theme-clean .btn-primary { background: #000; color: white; border-radius: 50px; padding: 10px 30px; }
.theme-clean .translator-box { border: 1px solid #EEE; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.05); }
.theme-clean .input-area { border-right: 1px solid #EEE; }
.theme-clean .output-area { background: #FAFAFA; }
.theme-clean .card { border: none; background: #F9F9F9; border-radius: 16px; padding: 40px; }
.theme-clean h1 { font-weight: 300; letter-spacing: -1px; }

/* 3. Enterprise (B2B/Trust Focus) */
.theme-enterprise { background: #F8F9FA; color: #333; }
.theme-enterprise .navbar { background: #004B87; color: white; }
.theme-enterprise .nav-link { color: rgba(255,255,255,0.8); }
.theme-enterprise .nav-link:hover { color: white; }
.theme-enterprise .btn-primary { background: #FFD700; color: #004B87; border-radius: 2px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; }
.theme-enterprise .translator-box { border-top: 4px solid #004B87; background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.theme-enterprise .output-area { background: #F0F4F8; }
.theme-enterprise .section-bg { background: #004B87; color: white; }
.theme-enterprise .trust-badge { filter: grayscale(100%) brightness(200%); opacity: 0.7; }

/* 4. Creative (Writer/Vibrant Focus) */
.theme-creative { background: #FFF5F5; color: #4A0404; }
.theme-creative .navbar { background: rgba(255,255,255,0.8); backdrop-filter: blur(10px); }
.theme-creative .btn-primary { background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%); color: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4); }
.theme-creative .translator-box { border: 2px solid #FFE3E3; border-radius: 24px; background: white; overflow: hidden; }
.theme-creative .output-area { background: #FFF0F0; }
.theme-creative .highlight { color: #FF6B6B; font-weight: 700; background: #FFE3E3; padding: 0 5px; }
.theme-creative h1 { font-family: 'Georgia', serif; font-style: italic; }

/* Common Components */
.translator-wrapper { max-width: 1000px; margin: 40px auto; padding: 0 20px; }
.translator-header { padding: 15px 20px; display: flex; gap: 20px; border-bottom: 1px solid rgba(0,0,0,0.05); }
.translator-body { display: flex; min-height: 300px; }
.input-area, .output-area { flex: 1; padding: 20px; }
textarea { width: 100%; height: 100%; border: none; resize: none; outline: none; font-size: 18px; line-height: 1.6; }
.section { padding: 80px 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.footer { padding: 40px 0; font-size: 14px; opacity: 0.6; text-align: center; margin-top: auto; }