:root{--primary-50:#eff6ff;--primary-100:#dbeafe;--primary-200:#bfdbfe;--primary-300:#93c5fd;--primary-400:#60a5fa;--primary-500:#3b82f6;--primary-600:#2563eb;--primary-700:#1d4ed8;--primary-800:#1e40af;--primary-900:#1e3a8a;--primary-color:var(--primary-600);--primary-light:var(--primary-400);--primary-dark:var(--primary-800);--secondary-50:#f8fafc;--secondary-100:#f1f5f9;--secondary-200:#e2e8f0;--secondary-300:#cbd5e1;--secondary-400:#94a3b8;--secondary-500:#64748b;--secondary-600:#475569;--secondary-700:#334155;--secondary-800:#1e293b;--secondary-900:#0f172a;--success-50:#ecfdf5;--success-100:#d1fae5;--success-200:#a7f3d0;--success-300:#6ee7b7;--success-400:#34d399;--success-500:#10b981;--success-600:#059669;--success-700:#047857;--success-800:#065f46;--warning-50:#fffbeb;--warning-100:#fef3c7;--warning-200:#fde68a;--warning-300:#fcd34d;--warning-400:#fbbf24;--warning-500:#f59e0b;--warning-600:#d97706;--warning-700:#b45309;--warning-800:#92400e;--error-50:#fef2f2;--error-100:#fee2e2;--error-200:#fecaca;--error-300:#fca5a5;--error-400:#f87171;--error-500:#ef4444;--error-600:#dc2626;--error-700:#b91c1c;--error-800:#991b1b;--gray-50:#f8fafc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-300:#cbd5e1;--gray-400:#94a3b8;--gray-500:#64748b;--gray-600:#475569;--gray-700:#334155;--gray-800:#1e293b;--gray-900:#0f172a;--status-positive-bg:var(--success-100);--status-positive-text:var(--success-800);--status-positive-border:var(--success-600);--status-caution-bg:var(--warning-100);--status-caution-text:var(--warning-800);--status-caution-border:var(--warning-600);--status-negative-bg:var(--error-100);--status-negative-text:var(--error-800);--status-negative-border:var(--error-600);--background-color:var(--gray-50);--background-light:var(--gray-50);--background-dark:var(--gray-100);--text-color:var(--gray-900);--text-color-dark:var(--gray-900);--text-color-medium:var(--gray-700);--text-color-light:var(--gray-500);--border-color:var(--gray-200);--white:#fff;--red-light:var(--error-50);--red-dark:var(--error-600);--brand-purple:#6b46c1;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-full:9999px;--font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;--font-mono:"SF Mono",Monaco,"Inconsolata","Roboto Mono","Source Code Pro",monospace;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--shadow-2xl:0 25px 50px -12px #00000040;--transition-fast:150ms ease;--transition-normal:200ms ease;--transition-slow:300ms ease}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f8fafc;background-color:var(--background-light);color:#0f172a;color:var(--text-color-dark);font-family:Inter,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}.skip-nav{background:#2563eb;background:var(--primary-600);border-radius:.375rem;border-radius:var(--radius-md);color:#fff;font-size:.875rem;font-weight:600;left:16px;padding:8px 16px;position:absolute;text-decoration:none;top:-100%;transition:top .15s ease;transition:top var(--transition-fast);z-index:10000}.skip-nav:focus{top:16px}:focus-visible{outline:2px solid #2563eb;outline:2px solid var(--primary-600);outline-offset:2px}.visually-hidden{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.credential-setup-container{align-items:center;background:var(--gray-50);display:flex;justify-content:center;min-height:100vh;padding:var(--space-8)}.credential-setup-box{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);max-width:800px;overflow:hidden;padding:var(--space-8);position:relative;width:100%}.credential-setup-box:before{background:linear-gradient(90deg,var(--primary-500),var(--secondary-500));content:"";height:4px;left:0;position:absolute;right:0;top:0}.credential-setup-header{margin-bottom:var(--space-8);position:relative;text-align:center;z-index:1}.credential-setup-title{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,var(--primary-600),var(--secondary-600));-webkit-background-clip:text;background-clip:text;color:var(--gray-900);font-size:2rem;font-weight:700;letter-spacing:-.025em;margin-bottom:var(--space-2)}.credential-setup-description{color:var(--gray-600);font-size:1rem;line-height:1.6;margin-bottom:var(--space-8);margin-left:auto;margin-right:auto;max-width:600px}.configuration-section{background:var(--gray-50);border:1px solid var(--gray-100);border-radius:var(--radius-lg);margin-bottom:var(--space-10);padding:var(--space-6)}.configuration-section h3{border-bottom:2px solid var(--primary-200);color:var(--gray-900);font-size:1.25rem;font-weight:700;letter-spacing:-.025em;margin-bottom:var(--space-6);padding-bottom:var(--space-3)}.form-grid{grid-gap:var(--space-6);display:grid;gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.form-group{display:flex;flex-direction:column;gap:var(--space-2)}.form-group label{color:var(--gray-700);font-size:.875rem;font-weight:600;letter-spacing:.025em}.form-group input{background:var(--white);border:2px solid var(--gray-200);border-radius:var(--radius-lg);color:var(--gray-900);font-size:.875rem;font-weight:500;padding:var(--space-3) var(--space-4);transition:var(--transition-normal);width:100%}.form-group input:hover{border-color:var(--gray-300)}.form-group input:focus{background:var(--white);border-color:var(--primary-500);box-shadow:0 0 0 3px var(--primary-100);outline:none}.form-group input::placeholder{color:var(--gray-400);font-weight:400}.form-group input[type=number]{-moz-appearance:textfield}.form-group input[type=number]::-webkit-inner-spin-button,.form-group input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.error-message{align-items:center;background:var(--error-50);border:1px solid var(--error-200);border-radius:var(--radius-lg);color:var(--error-700);display:flex;font-size:.875rem;font-weight:500;gap:var(--space-2);margin-top:var(--space-4);padding:var(--space-4)}.error-message:before{content:"⚠️";font-size:1rem}.success-message{align-items:center;background:var(--success-50);border:1px solid var(--success-200);border-radius:var(--radius-lg);color:var(--success-700);display:flex;font-size:.875rem;font-weight:500;gap:var(--space-2);margin-top:var(--space-4);padding:var(--space-4)}.success-message:before{content:"✅";font-size:1rem}.form-actions{display:flex;gap:var(--space-3);justify-content:flex-end;margin-top:var(--space-8)}.save-button{background:linear-gradient(135deg,var(--primary-500),var(--primary-600));border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);color:var(--white);cursor:pointer;font-size:.875rem;font-weight:600;letter-spacing:.025em;overflow:hidden;padding:var(--space-3) var(--space-6);position:relative;transition:var(--transition-normal)}.save-button:before{background:linear-gradient(90deg,#0000,#fff3,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}.save-button:hover{background:linear-gradient(135deg,var(--primary-600),var(--primary-700));box-shadow:var(--shadow-md);transform:translateY(-1px)}.save-button:hover:before{left:100%}.save-button:active{box-shadow:var(--shadow-sm);transform:translateY(0)}.save-button:disabled{background:var(--gray-300);box-shadow:none;color:var(--gray-500);cursor:not-allowed;transform:none}.save-button:disabled:before{display:none}@media (max-width:1024px){.credential-setup-box{max-width:90%}.form-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}@media (max-width:768px){.credential-setup-container{padding:var(--space-4)}.credential-setup-box{border-radius:var(--radius-lg);padding:var(--space-6)}.credential-setup-title{font-size:1.5rem}.credential-setup-description{font-size:.875rem}.configuration-section{margin-bottom:var(--space-6);padding:var(--space-4)}.configuration-section h3{font-size:1.125rem}.form-grid{gap:var(--space-4);grid-template-columns:1fr}.form-actions{margin-top:var(--space-6)}}@media (max-width:480px){.credential-setup-container{padding:var(--space-2)}.credential-setup-box{border-radius:var(--radius-md);padding:var(--space-4)}.credential-setup-title{font-size:1.25rem}.configuration-section{padding:var(--space-3)}.save-button{padding:var(--space-4) var(--space-6);width:100%}}.tiptap-editor-container{margin-bottom:1rem}.image-warning{border-radius:.375rem;font-size:.875rem;font-weight:500;margin-bottom:.5rem;padding:.75rem}.image-warning.warning{background-color:var(--mui-palette-warning-light);border:1px solid var(--mui-palette-warning-main);color:var(--mui-palette-warning-contrastText)}.image-warning.success{background-color:var(--mui-palette-success-light);border:1px solid var(--mui-palette-success-main);color:var(--mui-palette-success-contrastText)}.image-warning.info{background-color:var(--mui-palette-primary-light);border:1px solid var(--mui-palette-primary-main);color:var(--mui-palette-primary-contrastText)}.tiptap-toolbar{background-color:var(--mui-palette-background-paper);border:1px solid var(--mui-palette-divider);border-radius:.375rem;display:flex;flex-wrap:wrap;margin-bottom:.5rem;padding:.5rem}.tiptap-hint{color:var(--mui-palette-text-secondary);margin-top:.5rem}.ProseMirror{background-color:var(--mui-palette-background-paper);border:1px solid var(--mui-palette-divider);border-radius:.375rem;caret-color:var(--mui-palette-primary-main);color:var(--mui-palette-text-primary);margin-top:.5rem;max-height:300px;min-height:150px;overflow-y:auto;padding:.75rem}.ProseMirror:focus{border-color:var(--mui-palette-primary-main);outline:2px solid var(--mui-palette-primary-main);outline-offset:-2px}.ProseMirror a{color:var(--mui-palette-primary-main)}.ProseMirror p{margin:.5rem 0}.ProseMirror img{display:block;height:auto;margin:.5rem 0;max-width:100%}.tiptap-toolbar button{background-color:var(--mui-palette-primary-main);border:1px solid var(--mui-palette-primary-main);border-radius:.375rem;color:var(--mui-palette-primary-contrastText);cursor:pointer;font-size:.875rem;margin-bottom:.5rem;margin-right:.5rem;padding:.5rem 1rem}.tiptap-toolbar button:hover{background-color:var(--mui-palette-primary-dark);border-color:var(--mui-palette-primary-dark)}.tiptap-toolbar button.is-active{background-color:var(--mui-palette-action-selected);border-color:var(--mui-palette-primary-main);color:var(--mui-palette-primary-main)}.tiptap-toolbar button:disabled{cursor:not-allowed;opacity:1}.tiptap-toolbar button:disabled,.tiptap-toolbar button:disabled:hover{background-color:var(--mui-palette-action-disabledBackground);border-color:var(--mui-palette-action-disabledBackground);color:var(--mui-palette-text-disabled)}.tiptap-toolbar button:focus{box-shadow:0 0 0 3px var(--mui-palette-action-focus);outline:2px solid var(--mui-palette-primary-main);outline-offset:2px}.color-picker-container{display:inline-block;position:relative}.tiptap-toolbar .color-picker-button{align-items:center;background-color:var(--mui-palette-background-paper);border-color:var(--mui-palette-divider);color:var(--mui-palette-text-primary);display:flex;gap:4px}.tiptap-toolbar .color-picker-button:hover{background-color:var(--mui-palette-action-hover);border-color:var(--mui-palette-primary-main)}.color-indicator{border:1px solid var(--mui-palette-divider);border-radius:2px;height:16px;width:16px}.tiptap-toolbar .clear-formatting-btn{align-items:center;background-color:var(--mui-palette-error-main);border-color:var(--mui-palette-error-main);box-shadow:0 2px 4px var(--mui-palette-action-focus);color:var(--mui-palette-error-contrastText);display:flex;font-weight:600;gap:.25rem;transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease}.tiptap-toolbar .clear-formatting-btn:hover{background-color:var(--mui-palette-error-dark);border-color:var(--mui-palette-error-dark);box-shadow:0 4px 8px var(--mui-palette-action-focus);transform:translateY(-1px)}.tiptap-toolbar .clear-formatting-btn:active{box-shadow:0 2px 4px var(--mui-palette-action-focus);transform:translateY(0)}.tiptap-toolbar .clear-formatting-btn:disabled{cursor:not-allowed}.tiptap-toolbar .clear-formatting-btn:disabled,.tiptap-toolbar .clear-formatting-btn:disabled:hover{background-color:var(--mui-palette-action-disabledBackground);border-color:var(--mui-palette-action-disabledBackground);box-shadow:none;color:var(--mui-palette-text-disabled);transform:none}.template-preview{background:#f8fafc;background:var(--mui-palette-background-default,#f8fafc);border:1px solid #0000001f;border:1px solid var(--mui-palette-divider,#0000001f);border-radius:12px;box-shadow:0 2px 8px #00000014;margin-top:1rem;overflow:hidden;padding:1.5rem;position:relative}.template-preview h4{align-items:center;color:#1e293b;color:var(--mui-palette-text-primary,#1e293b);display:flex;font-size:.875rem;font-weight:600;gap:.5rem;margin-bottom:1rem;margin-top:0;padding-bottom:.5rem}.template-preview h4:before{background:#1976d2;background:var(--mui-palette-primary-main,#1976d2);border-radius:2px;content:"";flex-shrink:0;height:16px;width:3px}.email-container{background:#fff;background:var(--mui-palette-background-paper,#fff);border:1px solid #0000001f;border:1px solid var(--mui-palette-divider,#0000001f);border-radius:8px;box-shadow:0 1px 4px #0000000f;overflow:hidden}.email-content{color:#374151;color:var(--mui-palette-text-primary,#374151);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.6}.preview-subject{background:#0000000a;background:var(--mui-palette-action-hover,#0000000a);border-bottom:1px solid #0000001f;border-bottom:1px solid var(--mui-palette-divider,#0000001f);color:#1e293b;color:var(--mui-palette-text-primary,#1e293b);font-size:14px;font-weight:600;padding:12px 16px}.preview-subject:before{content:"📧";font-size:14px;margin-right:6px}.preview-header{background:#fff;background:var(--mui-palette-background-paper,#fff);border-bottom:1px solid #0000001f;border-bottom:1px solid var(--mui-palette-divider,#0000001f);max-width:100%;overflow:auto;padding:16px;text-align:left}.preview-header img{display:block;height:auto;margin:0 auto;max-height:120px;max-width:100%;object-fit:contain}.preview-header h1,.preview-header h2,.preview-header h3{color:#1e293b;color:var(--mui-palette-text-primary,#1e293b);margin:8px 0 4px}.preview-body{word-wrap:break-word;background:#fff;background:var(--mui-palette-background-paper,#fff);color:#374151;color:var(--mui-palette-text-primary,#374151);font-size:14px;line-height:1.7;min-height:80px;padding:20px}.preview-body p{margin:0 0 12px}.preview-body p:last-child{margin-bottom:0}.preview-signature{background:#0000000a;background:var(--mui-palette-action-hover,#0000000a);border-top:1px solid #0000001f;border-top:1px solid var(--mui-palette-divider,#0000001f);color:#6b7280;color:var(--mui-palette-text-secondary,#6b7280);font-size:13px;padding:16px}.preview-signature:before{color:#9ca3af;color:var(--mui-palette-text-disabled,#9ca3af);content:"--";display:block;font-size:13px;margin-bottom:8px}.preview-signature img{height:auto;margin:8px 0;max-width:200px}.preview-signature p{margin:4px 0}.preview-signature a{color:#1976d2;color:var(--mui-palette-primary-main,#1976d2);text-decoration:none}.preview-signature a:hover{text-decoration:underline}.opt-out-notice{background:#0000000a;background:var(--mui-palette-action-hover,#0000000a);border-top:1px solid #0000001f;border-top:1px solid var(--mui-palette-divider,#0000001f);padding:12px 16px}.opt-out-divider{background:#0000001f;background:var(--mui-palette-divider,#0000001f);height:1px;margin-bottom:10px}.opt-out-text{align-items:center;color:#6b7280;color:var(--mui-palette-text-secondary,#6b7280);display:flex;font-size:12px;font-style:italic;gap:6px;line-height:1.5;margin:0}.opt-out-text svg{color:#1976d2;color:var(--mui-palette-primary-main,#1976d2);flex-shrink:0}@media (max-width:768px){.template-preview{padding:.75rem}.preview-body,.preview-header,.preview-signature,.preview-subject{padding:12px}.preview-header img{max-height:80px}.opt-out-notice{padding:10px 12px}}.preview-loading{align-items:center;display:inline-flex;margin-left:8px}.preview-loading svg{animation:spin 1s linear infinite;color:#1976d2;color:var(--mui-palette-primary-main,#1976d2)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.placeholder-guide h4{border-bottom:1px solid #0000001f;border-bottom:1px solid var(--mui-palette-divider,#0000001f);margin-bottom:1rem;margin-top:0;padding-bottom:.5rem}.placeholder-guide h5{color:#6b7280;color:var(--mui-palette-text-secondary,#6b7280);margin-bottom:.5rem;margin-top:0}.placeholder-guide ul{list-style-type:none;margin:0;padding-left:0}.placeholder-guide li{font-size:.9rem;margin-bottom:.5rem}.placeholder-guide code{background-color:#0000000a;background-color:var(--mui-palette-action-hover,#0000000a);border-radius:3px;font-family:monospace;padding:2px 4px}