:root{--bg-grad-1: linear-gradient(135deg, #f8fafc 0%, #eef2ff 50%, #fff5f7 100%);--surface: rgba(255, 255, 255, .8);--muted: #374151;--accent-1: #7c3aed;--accent-2: #ec4899;--glass: rgba(255,255,255,.6);--glass-strong: rgba(255,255,255,.9);--panel-border: rgba(15, 23, 42, .05);--soft-shadow: 0 8px 30px rgba(15, 23, 42, .06);--text: #0f172a;--subtext: #475569;--success: #059669;--danger: #ef4444;--glass-blur: 10px;--code-bg: rgba(15,23,42,.03)}:root[data-theme=dark],:root[data-theme=system][data-use-dark=true]{--bg-grad-1: linear-gradient(135deg, #0f172a 0%, #111827 50%, #0b1220 100%);--surface: rgba(6, 8, 15, .45);--muted: #cbd5e1;--accent-1: #8b5cf6;--accent-2: #fb7185;--glass: rgba(255,255,255,.03);--glass-strong: rgba(255,255,255,.04);--panel-border: rgba(255, 255, 255, .05);--soft-shadow: 0 12px 40px rgba(2,6,23,.6);--text: #e6eef8;--subtext: #9aa7bf;--success: #34d399;--danger: #f87171;--glass-blur: 12px;--code-bg: rgba(255,255,255,.02)}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,#root{height:100%}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;background:var(--bg-grad-1);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background .3s ease,color .3s ease}.app-container{display:flex;flex-direction:column;min-height:100vh}.app-header{position:sticky;top:0;z-index:60;padding:.75rem 1rem;-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));background:linear-gradient(180deg,#fff9,#ffffff59);border-bottom:1px solid var(--panel-border);box-shadow:var(--soft-shadow)}:root[data-theme=dark] .app-header,:root[data-theme=system][data-use-dark=true] .app-header{background:linear-gradient(180deg,#02061799,#03071473)}.header-content{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:1rem;justify-content:space-between}.logo-section{display:flex;gap:.9rem;align-items:center}.logo-icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#fff9,#ffffff47);color:var(--accent-1);box-shadow:0 6px 18px #0206170f;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}:root[data-theme=dark] .logo-icon{background:linear-gradient(135deg,#ffffff08,#ffffff05)}.app-title{margin:0;font-size:1.2rem;font-weight:700;color:var(--text);letter-spacing:-.2px}.app-subtitle{margin:0;font-size:.86rem;color:var(--subtext);display:none}@media(min-width:640px){.app-subtitle{display:block}}.header-controls{display:flex;gap:.5rem;align-items:center}.language-switcher{display:flex;gap:.5rem;align-items:center;padding:.45rem .6rem;border-radius:10px;background:#00000008;border:1px solid var(--panel-border)}:root[data-theme=dark] .language-switcher{background:#ffffff05}.language-select{background:transparent;border:none;color:var(--text);font-size:.9rem;outline:none}.theme-switcher{display:flex;gap:6px;margin-left:6px}.theme-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:8px;border:1px solid transparent;background:var(--glass);color:var(--subtext);cursor:pointer;transition:transform .16s ease,box-shadow .22s ease,background .2s ease}.theme-btn:hover{transform:translateY(-2px)}.theme-btn.active{box-shadow:0 8px 24px #6366f11f;border-color:#0000000f;background:linear-gradient(90deg,#ffffffe6,#ffffffbf)}:root[data-theme=dark] .theme-btn.active{box-shadow:0 8px 24px #8b5cf61f;background:#ffffff08;border-color:#ffffff0a}.main-content{padding:2rem 1rem;flex:1}.content-grid{max-width:1200px;margin:0 auto;display:grid;gap:1.75rem;grid-template-columns:1fr}@media(min-width:1024px){.content-grid{grid-template-columns:540px 1fr}}.input-panel,.output-panel{background:linear-gradient(180deg,var(--surface),rgba(255,255,255,.02));border-radius:14px;padding:1.25rem;border:1px solid var(--panel-border);box-shadow:var(--soft-shadow);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));display:flex;flex-direction:column;gap:.9rem}.indigo-panel{border-left:4px solid var(--accent-1)}.blue-panel{border-left:4px solid #3b82f6}.panel-label{display:flex;gap:.6rem;align-items:center;color:var(--subtext);font-weight:600;font-size:.95rem}.message-textarea,.context-textarea{width:100%;padding:.9rem 1rem;border-radius:10px;border:1px solid rgba(0,0,0,.06);background:var(--code-bg);color:var(--text);font-size:.95rem;line-height:1.5;resize:vertical;min-height:80px;outline:none;transition:box-shadow .18s ease,border-color .18s ease}:root[data-theme=dark] .message-textarea,:root[data-theme=dark] .context-textarea{border:1px solid rgba(255,255,255,.04);color:var(--text)}.message-textarea:focus,.context-textarea:focus{box-shadow:0 8px 30px #6366f10f;border-color:var(--accent-1)}.tone-grid{display:grid;gap:.65rem;grid-template-columns:1fr 1fr}@media(min-width:768px){.tone-grid{grid-template-columns:repeat(3,1fr)}}.tone-button{padding:.85rem;border-radius:10px;background:linear-gradient(180deg,#ffffff08,#ffffff03);border:1px solid rgba(0,0,0,.04);text-align:left;cursor:pointer;transition:transform .16s ease,box-shadow .22s ease,border-color .16s ease}:root[data-theme=dark] .tone-button{background:#ffffff05;border:1px solid rgba(255,255,255,.03)}.tone-button:hover{transform:translateY(-4px);box-shadow:0 8px 24px #02061714}.tone-button-active{background:linear-gradient(90deg,#7b46ff1f,#ec489914);border:1px solid rgba(123,70,255,.34);box-shadow:0 14px 40px #6366f11f;transform:translateY(-6px) scale(1.01)}.tone-label{font-weight:700;font-size:.95rem;color:var(--text)}.tone-description{font-size:.8rem;color:var(--subtext);margin-top:6px}.context-toggle{display:flex;gap:.6rem;align-items:center;background:transparent;border:none;color:var(--accent-1);font-weight:600;cursor:pointer;padding:.35rem 0}.action-row{margin-top:.4rem;display:flex;gap:.75rem;align-items:center}.generate-button{flex:1;padding:.95rem 1rem;border-radius:12px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));border:none;color:#fff;font-weight:700;box-shadow:0 14px 40px #7c3aed2e;cursor:pointer;display:inline-flex;gap:.6rem;align-items:center;justify-content:center;transition:transform .16s ease,box-shadow .2s ease}.generate-button:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 20px 50px #7c3aed38}.generate-button:disabled{opacity:.55;cursor:not-allowed;transform:none}.keyboard-tip{font-size:.86rem;color:var(--subtext);margin-top:8px}.output-panel{min-height:360px;display:flex;flex-direction:column}.panel-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.6rem}.panel-title{font-size:1.05rem;font-weight:700;color:var(--text)}.output-actions{display:flex;gap:.6rem}.copy-button{display:inline-flex;gap:.5rem;align-items:center;padding:.5rem .8rem;border-radius:10px;background:linear-gradient(180deg,#ffffff08,#ffffff03);border:1px solid rgba(0,0,0,.04);color:var(--success);cursor:pointer;font-weight:600}:root[data-theme=dark] .copy-button{background:#ffffff05;border:1px solid rgba(255,255,255,.03);color:var(--success)}.copy-button:disabled{opacity:.5;cursor:not-allowed}.email-output{flex:1;padding:1rem;border-radius:10px;background:linear-gradient(180deg,#ffffff05,#ffffff03);border:1px dashed rgba(0,0,0,.03);overflow:auto}:root[data-theme=dark] .email-output{background:#ffffff05;border-color:#ffffff08}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:var(--subtext)}.loading-spinner-large{width:56px;height:56px;border-radius:50%;background:conic-gradient(var(--accent-1),var(--accent-2),rgba(255,255,255,0));filter:blur(.6px);animation:spin 1.4s linear infinite}.loading-spinner-small{width:18px;height:18px;border-radius:50%;background:conic-gradient(var(--accent-1),var(--accent-2));animation:spin 1s linear infinite;display:inline-block;margin-right:8px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.email-content{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;white-space:pre-wrap;color:var(--text);font-size:.95rem;line-height:1.6;margin:0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--subtext);text-align:center;gap:8px}.empty-icon{opacity:.5}.tips-section{margin-top:10px;padding-top:10px;border-top:1px dashed var(--panel-border)}.tips-title{display:flex;gap:8px;align-items:center;font-weight:700;color:var(--accent-1);margin:0 0 8px}.tips-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}.tip-item{display:flex;gap:10px;align-items:flex-start;color:var(--subtext)}.tip-bullet{width:8px;height:8px;border-radius:50%;background:#3b82f6;margin-top:6px;flex-shrink:0}.error-message{margin-top:8px;background:#ef444414;border:1px solid rgba(239,68,68,.12);color:var(--danger);padding:8px 10px;border-radius:8px;font-size:.9rem}.app-footer{border-top:1px solid var(--panel-border);padding:1rem 0;margin-top:1.6rem}.footer-content{max-width:1200px;margin:0 auto;text-align:center;color:var(--subtext);font-size:.9rem}.email-output::-webkit-scrollbar,.message-textarea::-webkit-scrollbar,.context-textarea::-webkit-scrollbar{width:8px;height:8px}.email-output::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#0000001f,#0000000f);border-radius:6px}:root[data-theme=dark] .email-output::-webkit-scrollbar-thumb{background:#ffffff0a}.spacer{height:12px}.action-row .generate-button svg,.header-controls svg{opacity:.95}:focus{outline:3px solid rgba(99,102,241,.14);outline-offset:2px;border-radius:6px}