:root{--primary-color:#fcd10d;--primary-color-dark:#e0ba00;--primary-color-tint:#fffbe5;--gray-bg:#fefefe;--drawer-width:240px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--gray-bg);font-family:Roboto,system-ui,-apple-system,sans-serif;font-size:15px}input[type=text],input[type=email],input[type=password],input[type=number],textarea{background-color:#fff;border:1px solid #ddd;border-radius:5px;width:100%;padding:8px;font-family:inherit;font-size:15px}select{background-color:var(--primary-color-tint);border:1px solid #ddd;border-radius:5px;width:100%;padding:8px;font-family:inherit;font-size:15px}input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=number]:focus,select:focus,textarea:focus{border-color:#bbb;outline:none}textarea{resize:vertical}.header{background:var(--gray-bg);z-index:100;align-items:center;padding:12px 16px;display:flex;position:sticky;top:0}.header-title-group{cursor:pointer;font-family:inherit;font-weight:inherit;flex:0 0 calc(var(--drawer-width) - 16px);background:0 0;border:none;border-radius:6px;align-items:center;gap:10px;min-width:0;margin:-4px -6px;padding:4px 6px;display:flex}.header-title-group:hover{background:#0000000f}.header-logo{border-radius:6px;flex-shrink:0;width:28px;height:28px}.header-title{color:#333;text-overflow:ellipsis;white-space:nowrap;font-size:20px;font-weight:600;overflow:hidden}.header-actions{flex:1;align-items:center;min-width:0;display:flex}.icon-btn{cursor:pointer;background:0 0;border:none;border-radius:6px;padding:8px;font-size:20px;text-decoration:none;transition:background .2s}.icon-btn .material-symbols-outlined{vertical-align:middle;color:#000;text-decoration:none}.icon-btn-small{font-size:15px}.icon-btn:hover{background:#0000000f}.icon-btn:disabled{cursor:not-allowed}.icon-btn:disabled:hover{background:0 0}.icon-btn:disabled .material-symbols-outlined{color:#bbb}.icon-btn-spacer{visibility:hidden;pointer-events:none;width:12px;padding:0;display:inline-block;overflow:hidden}button{cursor:pointer;background:var(--primary-color);color:#262626;border:none;border-radius:4px;padding:8px 16px;font-family:inherit;font-size:15px;font-weight:500}button:hover{background:var(--primary-color-dark)}.btn-secondary{color:#262626;background:0 0;border:1px solid #ccc}.btn-secondary:hover{background:#f0f0f0}.container{height:calc(100dvh - 60px);display:flex}.drawer{width:var(--drawer-width);background:var(--gray-bg);padding:16px;transition:transform .3s,width .3s;overflow-y:auto}.drawer-header{color:#666;margin-bottom:12px;padding:0 8px;font-size:15px;font-weight:600}.drawer-item{cursor:pointer;color:#333;border-radius:6px;align-items:center;gap:8px;margin-bottom:4px;padding:8px;text-decoration:none;transition:background .2s;display:flex}.drawer-item .material-symbols-outlined{vertical-align:middle;color:#000;font-size:24px;text-decoration:none}.drawer-item:hover{background:#f0f0f0}.drawer-item.active{background:var(--primary-color-tint);font-weight:500}.drawer-item.unread{font-weight:700}.drawer-item-button{text-align:left;background:0 0;width:100%;font-size:15px;font-weight:400}.drawer-item-button:hover{background:#f0f0f0}.drawer-separator{background:#eee;height:1px;margin:8px 4px}.main-content{flex:1;padding:0 20px 20px;overflow-y:auto}.main-content-hidden{display:none}.modal-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:flex-start;padding:10px 0;display:flex;position:fixed;inset:0;overflow-y:auto}.modal-content{background:#fff;border-radius:8px;width:90%;max-width:500px;max-height:calc(100vh - 20px);padding:20px;overflow-y:auto;box-shadow:0 4px 8px #0000001a}.tab-bar{border-bottom:1px solid #eee;gap:8px;margin-bottom:16px;display:flex}.tab-btn{cursor:pointer;color:#666;background:0 0;border:none;border-bottom:2px solid #0000;border-radius:0;padding:8px 4px;font-family:inherit;font-size:15px;font-weight:400}.tab-btn:hover{color:#262626;background:0 0}.tab-btn.active{color:#262626;border-bottom-color:var(--primary-color);font-weight:600}.modal-footer{border-top:1px solid #eee;justify-content:flex-end;margin-top:20px;padding-top:16px;display:flex}.backdrop{z-index:40;background:#0000004d;display:none;position:fixed;inset:56px 0 0}.center{text-align:center}.auth-container{background:#fff;flex-direction:column;justify-content:center;align-items:center;gap:16px;max-width:400px;margin:auto;padding:20px;display:flex}.auth-container h2{color:#333;margin-bottom:8px}.auth-container .input-group{flex-direction:column;gap:4px;width:100%;display:flex}.error-message{color:#c0392b}table{border-collapse:collapse;background:#fff;width:100%}th,td{text-align:left;border:1px solid #ddd;padding:6px 10px}.folder-sync-cell{align-items:center;gap:8px;display:flex}.resync-progress{flex:1;align-items:center;gap:8px;min-width:0;display:flex}.resync-progress-track{background:#e0e0e0;border-radius:3px;flex:1;min-width:60px;height:6px;overflow:hidden}.resync-progress-fill{background:var(--primary-color);height:100%;transition:width .2s}.resync-progress-label{color:#666;white-space:nowrap;font-size:12px}.mail-list-header{align-items:center;gap:4px;padding-left:35px;display:flex}.mail-list-select-all{cursor:pointer;width:16px;height:16px;margin-right:4px}.empty-state{color:#bbb;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:50vh;display:flex}.empty-state-icon{color:#bbb;font-size:64px}.sync-chip{background:var(--primary-color-tint);color:#262626;z-index:2000;border-radius:20px;align-items:center;gap:8px;padding:8px 18px;font-size:14px;display:flex;position:fixed;top:72px;left:50%;transform:translate(-50%);box-shadow:0 4px 10px #0003}.sync-chip-icon{font-size:18px;animation:1s linear infinite sync-chip-spin}.spin{animation:1s linear infinite sync-chip-spin}@keyframes sync-chip-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.mail-list{flex-direction:column;gap:20px;display:flex}.mail-group{flex-direction:column;display:flex}.mail-group-date{color:#333;padding:0 2px 6px;font-size:13px;font-weight:700}.mail-group-items{background:#fff;border:1px solid #ddd;border-radius:8px;flex-direction:column;display:flex;overflow:hidden}.mail-group-items .mail-item{border-bottom:none}.mail-item{color:#333;border-bottom:1px solid #eee;align-items:center;gap:16px;padding:10px 14px;text-decoration:none;display:flex}.mail-item:last-child{border-bottom:none}.mail-item.unread{background:#f7faff;font-weight:700}.mail-item:hover{background:var(--primary-color-tint)}.mail-item-checkbox{flex-shrink:0;justify-content:center;align-items:center;width:16px;display:flex}.mail-item-checkbox input{cursor:pointer;width:16px;height:16px}.sender-avatar{object-fit:cover;border-radius:50%;flex-shrink:0}.sender-avatar-sm{width:32px;height:32px}.sender-avatar-lg{width:40px;height:40px}.sender-avatar-initials{background:var(--primary-color-tint);color:var(--primary-color-dark);justify-content:center;align-items:center;font-size:13px;font-weight:600;display:flex}.sender-avatar-lg.sender-avatar-initials{font-size:16px}.mail-item-content{flex-direction:column;flex:1;gap:3px;min-width:0;display:flex}.mail-item-line1{align-items:center;gap:12px;display:flex}.mail-item-from{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.mail-item-more-chip{color:#555;vertical-align:middle;background:#eee;border-radius:10px;margin-left:4px;padding:1px 6px;font-size:11px;font-weight:600;display:inline-block}.mail-item-attachment{flex-shrink:0;justify-content:center;align-items:center;width:18px;display:flex}.mail-item-attachment .material-symbols-outlined{color:#666;font-size:18px}.mail-item-subject{text-overflow:ellipsis;white-space:nowrap;color:#555;font-size:14px;overflow:hidden}.mail-item-date{color:#666;flex-shrink:0;font-size:13px;font-weight:400}.pagination{justify-content:center;align-items:center;gap:12px;padding:12px 0 0;display:flex}.pagination-label{color:#666;font-size:13px}.search-page{flex-direction:column;gap:16px;height:100%;display:flex}.search-form{background:#fff;border:1px solid #ddd;border-radius:8px;flex-direction:column;flex-shrink:0;gap:10px;padding:16px;display:flex}.search-form-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.search-form-row label{color:#666;flex-shrink:0;font-size:14px;font-weight:600}.search-form-row input[type=text]{flex:1;min-width:160px}.search-form-row input[type=date]{background-color:#fff;border:1px solid #ddd;border-radius:5px;padding:7px 8px;font-family:inherit;font-size:15px}.search-checkbox-label{color:#333;white-space:nowrap;flex-shrink:0;align-items:center;gap:6px;font-weight:400;display:flex}.search-checkbox-label input{cursor:pointer;width:16px;height:16px}.search-form-actions{justify-content:flex-end;display:flex}.search-results{flex:1;min-height:0;overflow-y:auto}.mail-item-folder-tag{flex-shrink:0;justify-content:center;align-items:center;width:20px;display:flex}.mail-item-folder-tag .material-symbols-outlined{color:#666;font-size:18px}@media (width<=820px){.container{height:calc(100dvh - 56px)}.drawer{z-index:50;width:100%;height:calc(100vh - 56px);position:fixed;top:56px;left:-100%;overflow-y:auto}.drawer.open{left:0}.main-content{width:100%;padding-left:0;padding-right:0}.mail-group-items{border-left:none;border-right:none;border-radius:0}.mail-group-date{font-size:12px}.mail-detail,.compose-panel{border-left:none;border-right:none;border-radius:0;padding-left:0;padding-right:0}.header{padding:10px 12px}.header-title-group{flex:0 auto}.header-no-branding .header-title-group{display:none}.header-no-branding{padding-left:0}.header-title{font-size:18px}.header-actions{padding-left:0}.icon-btn-spacer{width:8px}.backdrop.open{display:block}}.mail-detail{background:#fff;border:1px solid #ddd;border-radius:8px;flex-direction:column;max-width:900px;height:100%;padding:16px;display:flex;overflow:hidden}.mail-detail-actions{align-items:center;gap:8px;padding-left:29px;display:flex}@media (width<=820px){.mail-detail-actions{padding-left:0}}.mail-detail-scroll{flex:1;min-height:0;overflow-y:auto}.mail-detail-actions button:disabled{color:#999;cursor:not-allowed;background:#eee}.mail-detail-fields{border-bottom:1px solid #eee;flex-direction:column;gap:6px;margin-bottom:16px;padding-bottom:12px;display:flex}.mail-detail-field-from{align-items:center;gap:10px;display:flex}.mail-detail-label{color:#666;width:110px;font-weight:600;display:inline-block}.attachment-list{flex-wrap:wrap;gap:8px;margin-top:6px;display:flex}.attachment-chip{color:#333;cursor:pointer;background:#f0f0f0;border:1px solid #ddd;border-radius:14px;padding:4px 12px;font-size:13px;text-decoration:none;display:inline-block}.attachment-chip:hover{background:#e4e4e4}.safe-sender-banner{background:#fff8e1;border:1px solid #ffe082;border-radius:6px;align-items:center;gap:12px;margin-bottom:16px;padding:10px 14px;display:flex}.safe-sender-list{flex-direction:column;gap:6px;list-style:none;display:flex}.safe-sender-item{border:1px solid #eee;border-radius:6px;justify-content:space-between;align-items:center;gap:8px;padding:8px 8px 8px 12px;display:flex}.mail-body{word-wrap:break-word;overflow-wrap:break-word;max-width:100%;overflow-x:hidden}.mail-body img{max-width:100%;height:auto}.mail-body table{border:none;max-width:100%;width:auto!important}.mail-body pre{white-space:pre-wrap;overflow-wrap:break-word}.mail-body th,.mail-body td{word-wrap:break-word;border:none;max-width:100%}.mail-body img.blocked-image{background:#f5f5f5;border:1px dashed #bbb;width:32px;height:32px;padding:4px}.compose-btn{justify-content:center;align-items:center;gap:8px;width:100%;margin-bottom:16px;font-weight:600;display:flex}.compose-panel{background:#fff;border:1px solid #ddd;border-radius:8px;flex-direction:column;height:100%;padding:16px;display:flex;overflow:hidden}.compose-body{flex:1;min-height:0;overflow-y:auto}.compose-title{color:#333;margin-bottom:12px;font-size:18px;font-weight:600}.compose-status{color:#666;margin-left:4px;font-size:13px}.compose-form{flex-direction:column;gap:10px;display:flex}.compose-fields{border-bottom:1px solid #eee;flex-direction:column;gap:8px;padding-bottom:10px;display:flex}.compose-from{color:#666;font-size:13px}.compose-field-row{align-items:center;gap:8px;display:flex}.compose-field-row-attachments{display:block}.compose-field-row-attachments label{width:auto;margin-bottom:6px;display:block}.compose-field-row-attachments .attachment-list{margin-top:0}.compose-field-row label{color:#666;flex-shrink:0;width:50px;font-size:14px;font-weight:600}.chip-input-wrap{flex:1;min-width:0;position:relative}.chip-input{cursor:text;background:#fff;border:1px solid #ddd;border-radius:5px;flex-wrap:wrap;align-items:center;gap:6px;padding:4px 6px;display:flex}.chip-input:focus-within{border-color:#bbb}.chip-input input[type=text].chip-input-field{background:0 0;border:none;outline:none;flex:1;width:auto;min-width:120px;padding:4px 2px}.chip-suggestions{z-index:10;background:#fff;border:1px solid #ddd;border-radius:6px;max-height:200px;margin:0;padding:4px;list-style:none;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto;box-shadow:0 4px 12px #0000001f}.chip-suggestion{cursor:pointer;border-radius:4px;align-items:baseline;gap:6px;padding:6px 8px;font-size:14px;display:flex}.chip-suggestion.active,.chip-suggestion:hover{background:var(--primary-color-tint)}.chip-suggestion-name{font-weight:500}.chip-suggestion-address{color:#666;text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.compose-attachment-chip{align-items:center;gap:6px;display:inline-flex}.compose-attachment-remove{color:#666;background:0 0;border:none;padding:0;display:inline-flex}.compose-attachment-remove:hover{color:#c0392b;background:0 0}.editor{background:#fff;flex-direction:column;min-height:220px;display:flex}.editor-toolbar{background:#fafafa;border:1px solid #ddd;border-radius:6px 6px 0 0;align-items:center;gap:4px;padding:6px 8px;display:flex}.editor-btn{color:#333;background:0 0;border:none;border-radius:4px;min-width:28px;padding:4px 8px;font-size:14px}.editor-btn:hover{background:#0000000f}.editor-toolbar-sep{background:#ddd;width:1px;height:20px;margin:0 4px}.editor-content{outline:none;flex:1;min-height:180px;padding:12px;line-height:1.5;overflow-y:auto}.editor-content:empty:before{content:attr(data-placeholder);color:#999}.editor-img-wrap{resize:both;vertical-align:bottom;border:1px solid #0000;min-width:40px;min-height:40px;display:inline-block;position:relative;overflow:hidden}.editor-img-wrap:hover,.editor-img-wrap:focus-within{border-color:#bbb}.editor-img-wrap img{object-fit:fill;pointer-events:none;width:100%;height:100%;display:block}