@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Manrope', Arial, sans-serif; background: #F6F4F0; color: #222222; min-height: 100vh; }

/* Header bar */
.top-bar { background: #142652; padding: 0.875rem 2rem; display: flex; justify-content: space-between; align-items: center; }
.top-bar-left { display: flex; align-items: center; gap: 1rem; }
.top-bar-logo { height: 28px; width: auto; }
.top-bar-title { color: #ffffff; font-size: 0.9rem; font-weight: 500; opacity: 0.7; }
.top-bar-divider { width: 1px; height: 20px; background: rgba(255,255,255,0.2); }
#user-info { display: flex; align-items: center; gap: 0.75rem; }
#user-email { font-size: 0.8rem; color: rgba(255,255,255,0.7); }
#sign-out-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; padding: 0.3rem 0.75rem; cursor: pointer; font-size: 0.75rem; color: #ffffff; font-family: 'Manrope', Arial, sans-serif; transition: background 0.15s; }
#sign-out-btn:hover { background: rgba(255,255,255,0.2); }

/* Layout */
.container { max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem 3rem; }
.hidden { display: none !important; }

/* Login */
#login-section { text-align: center; margin-top: 6rem; }
.login-card { display: inline-block; background: #ffffff; border-radius: 16px; padding: 3rem 3.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06); }
.login-card h2 { font-size: 1.25rem; font-weight: 700; color: #142652; margin-bottom: 0.5rem; }
.login-card p { font-size: 0.875rem; color: #5E5E5E; margin-bottom: 2rem; line-height: 1.5; }

/* Options */
.card { background: #ffffff; border-radius: 12px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.04); margin-bottom: 1rem; }
.options-row { display: flex; gap: 1rem; }
.options-row .input-group { flex: 1; margin-bottom: 0; }
.input-group { margin-bottom: 0; }
label { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.8rem; color: #5E5E5E; text-transform: uppercase; letter-spacing: 0.03em; }
select { width: 100%; padding: 0.55rem 0.75rem; border: 1px solid #e0ddd8; border-radius: 8px; font-size: 0.875rem; background: #ffffff; cursor: pointer; font-family: 'Manrope', Arial, sans-serif; color: #222222; transition: border-color 0.15s, box-shadow 0.15s; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%235E5E5E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; }
select:focus { outline: none; border-color: #3445FF; box-shadow: 0 0 0 3px rgba(52,69,255,0.1); }

/* Textarea */
textarea { width: 100%; padding: 0.875rem; border: 1px solid #e0ddd8; border-radius: 8px; font-family: 'Menlo', 'Consolas', monospace; font-size: 0.8rem; resize: vertical; background: #ffffff; color: #222222; line-height: 1.6; transition: border-color 0.15s, box-shadow 0.15s; }
textarea:focus { outline: none; border-color: #3445FF; box-shadow: 0 0 0 3px rgba(52,69,255,0.1); }
textarea::placeholder { color: #aaa; }

/* Translate button */
#translate-btn { background: #3445FF; color: #ffffff; border: none; border-radius: 8px; padding: 0.8rem 2.5rem; font-size: 0.95rem; font-weight: 600; cursor: pointer; font-family: 'Manrope', Arial, sans-serif; transition: background 0.15s, transform 0.1s; display: block; margin-top: 1rem; }
#translate-btn:hover { background: #2a38cc; transform: translateY(-1px); }
#translate-btn:active { transform: translateY(0); }
#translate-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Loading animation */
.loading-animation { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 3rem 1rem; margin-top: 1.5rem; }
#loading-emoji { font-size: 3.5rem; animation: bounce 0.6s ease-in-out infinite alternate; display: inline-block; }
#loading-message { font-size: 0.95rem; color: #5E5E5E; font-weight: 500; }
@keyframes bounce { 0% { transform: translateY(0) rotate(-5deg); } 100% { transform: translateY(-18px) rotate(5deg); } }

/* Output */
#output-section { margin-top: 1.5rem; }
.output-tabs { display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.75rem; }
.tab { background: #ffffff; border: 1px solid #e0ddd8; border-radius: 8px; padding: 0.45rem 1rem; font-size: 0.8rem; cursor: pointer; color: #5E5E5E; font-family: 'Manrope', Arial, sans-serif; font-weight: 500; transition: all 0.15s; }
.tab:hover { background: #f0eeea; }
.tab.active { background: #142652; color: #ffffff; border-color: #142652; }
#usage-info { font-size: 0.75rem; color: #5E5E5E; margin-left: auto; }
#copy-btn { background: #3445FF; color: #ffffff; border: none; border-radius: 8px; padding: 0.45rem 1rem; font-size: 0.8rem; cursor: pointer; font-family: 'Manrope', Arial, sans-serif; font-weight: 600; transition: background 0.15s; }
#copy-btn:hover { background: #2a38cc; }
#output, #output-formatted { background: #ffffff; border: 1px solid #e0ddd8; border-radius: 10px; padding: 1rem 1.25rem; font-family: 'Menlo', 'Consolas', monospace; font-size: 0.75rem; white-space: pre-wrap; max-height: 500px; overflow-y: auto; line-height: 1.6; color: #333; }
#output { word-break: break-all; }
#preview { width: 100%; height: 700px; border: 1px solid #e0ddd8; border-radius: 10px; background: #ffffff; }

/* Responsive */
@media (max-width: 640px) {
  .top-bar { padding: 0.75rem 1rem; }
  .top-bar-title, .top-bar-divider { display: none; }
  .container { padding: 1.25rem 1rem; }
  .options-row { flex-direction: column; gap: 0.75rem; }
  .login-card { padding: 2rem 1.5rem; }
  #translate-btn { width: 100%; }
}