@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";:root{--font-sans:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--bg-app:#fff;--bg-sidebar:#f6f8fc;--bg-card:#fff;--bg-card-hover:#f1f3f4;--bg-input:#f1f3f4;--border-light:#f1f3f4;--border-medium:#e0e0e0;--border-focus:#0f9d58;--text-primary:#202124;--text-secondary:#5f6368;--text-muted:#80868b;--color-primary:#0f9d58;--color-primary-hover:#0b8043;--color-primary-light:#e6f4ea;--color-scheduled-text:#b45309;--color-scheduled-bg:#fef3c7;--color-scheduled-border:#fde68a;--color-processing-text:#b45309;--color-processing-bg:#fef3c7;--color-processing-border:#fde68a;--color-sent-text:#0f9d58;--color-sent-bg:#e6f4ea;--color-sent-border:#c3e6cb;--color-failed-text:#d93025;--color-failed-bg:#fce8e6;--color-failed-border:#fad2cf;--shadow-sm:0 1px 2px 0 #3c40431a;--shadow-md:0 1px 3px 0 #3c40431a, 0 1px 2px 0 #3c40430f;--shadow-lg:0 4px 6px -1px #0000000d, 0 2px 4px -1px #00000008;--shadow-xl:0 10px 15px -3px #0000000d;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-full:9999px;--transition-fast:.1s ease;--transition-normal:.2s ease}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}body{background-color:var(--bg-app);color:var(--text-primary);font-family:var(--font-sans);min-height:100vh;overflow-x:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-app)}::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}#root{width:100%;min-height:100vh;display:flex}button,input,textarea,select{color:inherit;font-family:inherit}a{color:inherit;text-decoration:none}.title-xl{color:var(--text-primary);font-size:1.85rem;font-weight:700}.title-lg{color:var(--text-primary);font-size:1.35rem;font-weight:600}.title-md{color:var(--text-primary);font-size:1.05rem;font-weight:600}.body-md{color:var(--text-secondary);font-size:.9rem;line-height:1.5}.body-sm{color:var(--text-muted);font-size:.8rem}.dashboard-layout{background-color:var(--bg-app);width:100%;min-height:100vh;display:flex}.sidebar{background-color:var(--bg-sidebar);border-right:1px solid var(--border-medium);flex-direction:column;flex-shrink:0;justify-content:space-between;width:256px;padding:20px;display:flex}.main-content{background-color:var(--bg-app);flex-direction:column;flex-grow:1;height:100vh;display:flex;overflow:hidden}.search-header{border-bottom:1px solid var(--border-medium);background-color:var(--bg-app);justify-content:space-between;align-items:center;height:64px;padding:0 24px;display:flex}.search-bar-container{background-color:var(--bg-input);border-radius:var(--radius-full);width:100%;max-width:560px;color:var(--text-secondary);border:1px solid #0000;align-items:center;gap:12px;padding:8px 16px;display:flex}.search-bar-container:focus-within{border-color:var(--border-medium);box-shadow:var(--shadow-sm);background-color:#fff}.search-input{width:100%;color:var(--text-primary);background:0 0;border:none;outline:none;font-size:.95rem}.search-actions{align-items:center;gap:12px;display:flex}.content-split-container{flex-grow:1;height:calc(100vh - 64px);display:flex;overflow:hidden}.list-pane{border-right:1px solid var(--border-medium);flex-direction:column;flex-grow:1;display:flex;overflow-y:auto}.detail-pane{background-color:#fff;flex-direction:column;width:50%;display:flex;overflow-y:auto}@media (width<=1024px){.detail-pane{z-index:50;width:100%;box-shadow:var(--shadow-xl);position:fixed;top:64px;bottom:0;right:0}}.btn{border-radius:var(--radius-md);cursor:pointer;box-shadow:var(--shadow-sm);background-color:#0000;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:8px 18px;font-size:.85rem;font-weight:500;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn:active{transform:scale(.98)}.btn-primary{background-color:var(--color-primary);color:#fff;font-weight:600}.btn-primary:hover{background-color:var(--color-primary-hover);box-shadow:0 4px 10px #0f9d5833}.btn-secondary{border-color:var(--border-medium);color:var(--text-secondary);background-color:#fff}.btn-secondary:hover{background-color:var(--bg-card-hover);color:var(--text-primary);border-color:var(--text-muted)}.btn-outline-green{border:1.5px solid var(--color-primary);color:var(--color-primary);border-radius:var(--radius-full);background-color:#fff;font-weight:600}.btn-outline-green:hover{background-color:var(--color-primary-light);box-shadow:0 2px 6px #0f9d5826}.btn-text-icon{border-radius:var(--radius-full);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;padding:6px;display:inline-flex}.btn-text-icon:hover{background-color:var(--bg-card-hover);color:var(--text-primary)}.sidebar-logo{color:var(--color-primary);align-items:center;gap:8px;margin-bottom:24px;font-size:1.15rem;font-weight:700;display:flex}.sidebar-menu{flex-direction:column;flex-grow:1;gap:4px;margin-top:16px;list-style:none;display:flex}.sidebar-item{border-radius:var(--radius-full);color:var(--text-secondary);transition:all var(--transition-fast);cursor:pointer;align-items:center;gap:12px;padding:10px 16px;font-size:.9rem;font-weight:500;display:flex}.sidebar-item:hover{background-color:var(--bg-card-hover);color:var(--text-primary)}.sidebar-item.active{background-color:var(--color-primary-light);color:var(--color-primary);font-weight:600}.sidebar-footer{border-top:1px solid var(--border-medium);flex-direction:column;gap:12px;padding-top:16px;display:flex}.user-profile-widget{border-radius:var(--radius-md);border:1px solid var(--border-medium);background-color:#fff;justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.user-avatar{border-radius:var(--radius-full);background-color:var(--color-primary-light);width:32px;height:32px;color:var(--color-primary);object-fit:cover;justify-content:center;align-items:center;font-size:.85rem;font-weight:600;display:flex;overflow:hidden}.user-details{flex-direction:column;flex-grow:1;max-width:130px;margin-left:10px;display:flex}.user-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;font-weight:600;overflow:hidden}.user-email{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:.7rem;overflow:hidden}.email-list-row{border-bottom:1px solid var(--border-light);cursor:pointer;transition:background-color var(--transition-fast);background-color:#fff;flex-direction:column;padding:14px 24px;display:flex}.email-list-row:hover{background-color:var(--bg-card-hover)}.email-list-row.selected{background-color:var(--color-primary-light)}.email-row-top{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.email-row-recipient{color:var(--text-primary);font-size:.9rem;font-weight:600}.email-row-badge-time{border-radius:var(--radius-sm);align-items:center;gap:4px;padding:3px 8px;font-size:.725rem;font-weight:500;display:inline-flex}.email-row-badge-time.scheduled{color:#b45309;background-color:#fef3c7;border:1px solid #fde68a}.email-row-badge-time.sent{color:#374151;background-color:#f3f4f6;border:1px solid #e5e7eb}.email-row-badge-time.failed{color:#b91c1c;background-color:#fee2e2;border:1px solid #fca5a5}.email-row-subject-line{align-items:center;gap:8px;margin-bottom:4px;font-size:.875rem;display:flex}.email-row-subject{color:var(--text-primary);font-weight:500}.email-row-status-text{text-transform:uppercase;font-size:.75rem;font-weight:600}.email-row-status-text.scheduled{color:#b45309}.email-row-status-text.sent{color:var(--color-primary)}.email-row-status-text.failed{color:#d93025}.email-row-status-text.processing{color:#d97706}.email-row-preview{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;overflow:hidden}.detail-header{border-bottom:1px solid var(--border-medium);justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.detail-subject-line{align-items:center;gap:12px;font-size:1.15rem;font-weight:600;display:flex}.detail-actions-right{gap:8px;display:flex}.detail-sender-row{align-items:center;gap:12px;padding:20px 24px;display:flex}.detail-sender-avatar{border-radius:var(--radius-full);background-color:var(--border-medium);width:36px;height:36px;color:var(--text-secondary);justify-content:center;align-items:center;font-weight:600;display:flex}.detail-sender-info{flex-direction:column;display:flex}.detail-sender-name{color:var(--text-primary);font-size:.875rem;font-weight:600}.detail-sender-email{color:var(--text-secondary);font-size:.75rem}.detail-time{color:var(--text-muted);margin-left:auto;font-size:.75rem}.detail-body-container{color:var(--text-primary);white-space:pre-wrap;background-color:#fff;flex-grow:1;padding:24px;font-size:.95rem;line-height:1.6}.compose-window{z-index:150;animation:fadeIn var(--transition-fast) forwards;background-color:#fff;flex-direction:column;display:flex;position:fixed;inset:0}.compose-header{border-bottom:1px solid var(--border-medium);justify-content:space-between;align-items:center;height:56px;padding:0 24px;display:flex}.compose-header-left{align-items:center;gap:16px;font-size:1.05rem;font-weight:600;display:flex}.compose-header-right{align-items:center;gap:12px;display:flex}.compose-fields-grid{border-bottom:1px solid var(--border-light);flex-direction:column;gap:12px;padding:16px 24px;display:flex}.compose-field-row{grid-template-columns:140px 1fr;align-items:center;font-size:.9rem;display:grid}.compose-field-label{color:var(--text-secondary);font-weight:500}.compose-field-input{border:1px solid var(--border-medium);background-color:var(--bg-sidebar);border-radius:var(--radius-md);color:var(--text-primary);width:100%;transition:all var(--transition-fast);outline:none;padding:8px 12px;font-size:.9rem}.compose-field-input:focus{border-color:var(--color-primary);box-shadow:var(--shadow-sm);background-color:#fff}.compose-field-select{border:1px solid var(--border-medium);background-color:var(--bg-sidebar);border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;outline:none;width:100%;max-width:240px;padding:8px 12px;font-size:.9rem}.btn-upload-list{color:var(--color-primary);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;align-items:center;gap:6px;padding:4px 8px;font-size:.8rem;font-weight:600;display:inline-flex}.btn-upload-list:hover{background-color:var(--color-primary-light)}.recipient-chips-container{border:1px solid var(--border-medium);background-color:var(--bg-sidebar);border-radius:var(--radius-md);width:100%;min-height:40px;transition:all var(--transition-fast);flex-wrap:wrap;align-items:center;gap:6px;padding:6px 12px;display:flex}.recipient-chips-container:focus-within{border-color:var(--color-primary);box-shadow:var(--shadow-sm);background-color:#fff}.recipient-chip{border:1px solid var(--color-primary);color:var(--color-primary);border-radius:var(--radius-full);background-color:#fff;align-items:center;gap:6px;padding:3px 10px;font-size:.775rem;font-weight:500;display:inline-flex}.recipient-chip-more{background-color:var(--bg-input);color:var(--text-secondary);border-radius:var(--radius-full);padding:3px 8px;font-size:.775rem;font-weight:600;display:inline-flex}.editor-toolbar{background-color:var(--bg-sidebar);border-bottom:1px solid var(--border-light);flex-wrap:wrap;align-items:center;gap:4px;padding:8px 24px;display:flex}.editor-toolbar-btn{color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:6px;display:flex}.editor-toolbar-btn:hover{background-color:var(--border-medium);color:var(--text-primary)}.editor-textarea{border:1px solid var(--border-medium);border-radius:var(--radius-md);resize:none;color:var(--text-primary);transition:all var(--transition-fast);background-color:#fff;outline:none;flex-grow:1;margin:16px 24px;padding:16px 20px;font-size:.95rem;line-height:1.6}.editor-textarea:focus{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}.editor-textarea[contenteditable]:empty:before{content:attr(placeholder);color:var(--text-muted);cursor:text}.send-later-popover{border:1px solid var(--border-medium);border-radius:var(--radius-md);width:280px;box-shadow:var(--shadow-lg);z-index:200;background-color:#fff;flex-direction:column;gap:12px;padding:16px;display:flex;position:absolute;top:52px;right:24px}.popover-title{color:var(--text-primary);margin-bottom:4px;font-size:.9rem;font-weight:600}.suggested-time-item{color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:background-color var(--transition-fast);padding:8px 10px;font-size:.8rem}.suggested-time-item:hover{background-color:var(--bg-card-hover);color:var(--text-primary)}.popover-footer{border-top:1px solid var(--border-light);justify-content:flex-end;gap:8px;margin-top:4px;padding-top:10px;display:flex}.login-layout{background-color:#f6f8fc;justify-content:center;align-items:center;width:100%;min-height:100vh;display:flex}.login-card{border:1px solid var(--border-medium);border-radius:var(--radius-lg);width:100%;max-width:400px;box-shadow:var(--shadow-sm);background-color:#fff;flex-direction:column;padding:40px 32px;display:flex}.login-divider{text-align:center;color:var(--text-muted);align-items:center;margin:24px 0;font-size:.75rem;display:flex}.login-divider:before,.login-divider:after{content:"";border-bottom:1px solid var(--border-light);flex:1}.login-divider span{padding:0 10px}.login-fields{flex-direction:column;gap:12px;display:flex}.login-input{background-color:var(--bg-input);border:1px solid var(--border-medium);border-radius:var(--radius-md);width:100%;color:var(--text-primary);outline:none;padding:10px 14px;font-size:.9rem}.login-input:focus{border-color:var(--color-primary)}.btn-login-submit{background-color:var(--color-primary);color:#fff;border-radius:var(--radius-md);cursor:pointer;width:100%;transition:all var(--transition-fast);border:none;padding:10px;font-size:.9rem;font-weight:600}.btn-login-submit:disabled{cursor:not-allowed;opacity:.75}.btn-login-submit:hover:not(:disabled){background-color:var(--color-primary-hover)}.btn-google-login{background-color:var(--color-primary-light);color:var(--color-primary);border-radius:var(--radius-md);cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:10px;width:100%;padding:12px;font-size:.9rem;font-weight:600;display:flex}.btn-google-login:hover{background-color:#d4eedb}.btn-google-login svg{width:20px;height:20px}.toast-container{z-index:1000;flex-direction:column;gap:10px;display:flex;position:fixed;bottom:24px;right:24px}.toast{border-radius:var(--radius-md);border:1px solid var(--border-medium);box-shadow:var(--shadow-xl);color:var(--text-primary);background-color:#fff;align-items:center;gap:12px;padding:14px 20px;font-size:.9rem;animation:.2s forwards slideIn;display:flex}.toast-success{border-left:4px solid var(--color-sent-text)}.toast-error{border-left:4px solid var(--color-failed-text)}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.spinner{border:2px solid #0000001a;border-top-color:var(--color-primary);border-radius:50%;width:24px;height:24px;animation:.8s linear infinite spin}.spinner-lg{border-width:3px;width:48px;height:48px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin-icon{animation:1s linear infinite spin;display:inline-block}.center-container{text-align:center;flex-direction:column;flex-grow:1;justify-content:center;align-items:center;gap:16px;padding:60px 20px;display:flex}.empty-illustration{color:var(--text-muted);margin-bottom:8px}.editor-textarea blockquote,.detail-body-container blockquote{border-left:4px solid var(--color-primary);color:var(--text-secondary);background-color:var(--bg-sidebar);border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:12px 0 12px 16px;padding:6px 16px;font-style:italic}.modal-backdrop{z-index:250;animation:fadeIn var(--transition-fast) forwards;background-color:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border-medium);width:100%;animation:slideIn var(--transition-fast) forwards;background-color:#fff}
