*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;background:#f1f3f4;color:#202124;height:100vh;overflow:hidden}#root{height:100vh;display:flex;flex-direction:column}.app{display:flex;flex-direction:column;height:100vh}.app-header{display:flex;align-items:center;gap:12px;padding:0 20px;height:52px;background:#1f2d3d;color:#fff;flex-shrink:0}.app-logo{font-size:18px}.app-header h1{font-size:15px;font-weight:600;letter-spacing:.2px}.badge{margin-left:4px;background:#ffffff26;border-radius:20px;padding:4px 12px;display:flex;flex-direction:column;max-width:300px}.badge-name{font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.badge-email{font-size:11px;color:#a8bfd8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.panels{display:flex;flex:1;overflow:hidden}.panel{display:flex;flex-direction:column;overflow:hidden;background:#fff;border-right:1px solid #e0e0e0}.panel-users{width:230px;flex-shrink:0}.panel-messages{width:310px;flex-shrink:0}.panel-viewer{flex:1;border-right:none}.panel-inner{display:flex;flex-direction:column;height:100%;overflow:hidden}.panel-title{padding:10px 16px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:#80868b;border-bottom:1px solid #e8eaed;flex-shrink:0}.item-list{list-style:none;overflow-y:auto;flex:1}.item{padding:10px 16px;cursor:pointer;border-bottom:1px solid #f1f3f4;transition:background .1s}.item:hover{background:#f8f9fa}.item.active{background:#e8f0fe;border-left:3px solid #1a73e8;padding-left:13px}.item-primary{font-size:13px;font-weight:500;color:#202124}.item-secondary{font-size:12px;color:#5f6368;margin-top:2px}.item-meta{font-size:11px;color:#9aa0a6;margin-top:2px}.msg-subject{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msg-item{padding:10px 14px}.msg-row-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-bottom:3px}.msg-sender{font-size:13px;font-weight:500;color:#202124;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msg-date{font-size:11px;color:#9aa0a6;white-space:nowrap;flex-shrink:0}.msg-subject-line{font-size:12px;color:#5f6368;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px;margin-bottom:4px}.msg-subject-line.bold{font-weight:600;color:#202124}.unread-dot{width:7px;height:7px;border-radius:50%;background:#1a73e8;flex-shrink:0}.msg-item.unread .msg-sender{font-weight:700}.msg-item.unread .msg-date{color:#1a73e8;font-weight:600}.msg-labels{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}.lbl{font-size:10px;font-weight:600;padding:1px 6px;border-radius:10px;white-space:nowrap}.lbl-unread{background:#e8f0fe;color:#1558d6}.lbl-important{background:#fef7e0;color:#b06000;font-size:12px}.lbl-inbox{background:#e6f4ea;color:#137333}.lbl-sent{background:#f1f3f4;color:#5f6368}.lbl-spam{background:#fce8e6;color:#c5221f}.lbl-trash{background:#f1f3f4;color:#9aa0a6}.lbl-starred{background:#fef7e0;color:#b06000;font-size:12px}.lbl-outbound{background:#e8f0fe;color:#1558d6}.muted{color:#9aa0a6}.item.suspended{opacity:.5}.suspended-badge{display:inline-block;margin-left:6px;padding:1px 6px;font-size:10px;font-weight:600;color:#b93a2b;background:#fce8e6;border-radius:10px;vertical-align:middle}.filter-bar{display:flex;align-items:center;gap:6px;padding:7px 10px;border-bottom:1px solid #e8eaed;flex-shrink:0}.btn-filter{display:flex;align-items:center;gap:5px;padding:5px 12px;border:1px solid #dadce0;border-radius:20px;font-size:12px;cursor:pointer;background:#fff;color:#5f6368;font-weight:500;transition:background .1s,border-color .1s}.btn-filter:hover,.btn-filter.active{background:#e8f0fe;border-color:#1a73e8;color:#1a73e8}.filter-dot{width:7px;height:7px;border-radius:50%;background:#1a73e8;flex-shrink:0}.btn-filter-clear{padding:5px 10px;border:none;border-radius:20px;font-size:11px;cursor:pointer;background:#fce8e6;color:#c5221f;font-weight:500}.btn-filter-clear:hover{background:#f5c6c2}.filter-panel{display:flex;flex-direction:column;gap:8px;padding:12px;background:#f8f9fa;border-bottom:1px solid #e8eaed;flex-shrink:0}.filter-field{display:flex;flex-direction:column;gap:3px}.filter-field label{font-size:11px;font-weight:600;color:#80868b;text-transform:uppercase;letter-spacing:.4px}.filter-field input,.filter-field select{padding:7px 10px;border:1px solid #dadce0;border-radius:6px;font-size:13px;color:#202124;background:#fff;outline:none}.filter-field input:focus,.filter-field select:focus{border-color:#1a73e8;box-shadow:0 0 0 2px #1a73e81f}.btn-apply{margin-top:2px;padding:8px;background:#1a73e8;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer}.btn-apply:hover{background:#1765cc}.notice{padding:8px 16px;font-size:12px;color:#5f6368;flex-shrink:0}.notice.error{color:#c5221f;background:#fce8e6}.btn-more{display:block;width:calc(100% - 32px);margin:8px 16px;padding:7px 0;background:#fff;border:1px solid #dadce0;border-radius:6px;font-size:12px;color:#1a73e8;cursor:pointer;flex-shrink:0}.btn-more:hover{background:#e8f0fe}.empty-state{display:flex;align-items:center;justify-content:center;height:100%;font-size:13px;color:#9aa0a6}.viewer-inner{background:#fff}.msg-iframe{flex:1;width:100%;border:none;min-height:0}@keyframes shimmer{0%{background-position:-600px 0}to{background-position:600px 0}}.sk{background:linear-gradient(90deg,#f0f0f0 25%,#e4e4e4,#f0f0f0 75%);background-size:600px 100%;animation:shimmer 1.3s ease-in-out infinite;border-radius:4px}.sk-line{height:11px;margin:5px 0}.sk-wide{width:78%}.sk-medium{width:55%}.sk-narrow{width:38%}.skeleton-item{padding:12px 16px;border-bottom:1px solid #f1f3f4;pointer-events:none}@keyframes spin{to{transform:rotate(360deg)}}.spinner-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;flex:1;color:#9aa0a6;font-size:12px}.spinner{width:36px;height:36px;border:3px solid #e8eaed;border-top-color:#1a73e8;border-radius:50%;animation:spin .75s linear infinite}@media (max-width: 767px){.app-header{padding:0 12px;height:52px;gap:8px}.btn-back{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;padding:4px 6px;flex-shrink:0;line-height:1}.app-logo{display:none}.header-text{display:flex;flex-direction:column;flex:1;min-width:0}.app-header h1{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-sub{font-size:11px;color:#a8bfd8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.badge{display:none}.panels{position:relative;overflow:hidden}.panel{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;transition:transform .28s cubic-bezier(.4,0,.2,1);background:#fff}.panels .panel-users{transform:translate(0)}.panels .panel-messages,.panels .panel-viewer{transform:translate(100%)}.panels.mobile-messages .panel-users{transform:translate(-30%)}.panels.mobile-messages .panel-messages{transform:translate(0)}.panels.mobile-messages .panel-viewer{transform:translate(100%)}.panels.mobile-viewer .panel-users,.panels.mobile-viewer .panel-messages{transform:translate(-30%)}.panels.mobile-viewer .panel-viewer{transform:translate(0)}.item{padding:14px 16px}.item-primary{font-size:15px}.item-secondary{font-size:13px}.msg-sender{font-size:15px}.msg-subject-line{font-size:13px}.filter-field input,.filter-field select{font-size:16px}.btn-apply{padding:12px;font-size:15px}.btn-more{padding:12px 0;font-size:14px}}@keyframes progress-slide{0%{width:0%;opacity:1}80%{width:90%;opacity:1}to{width:100%;opacity:0}}.top-bar{position:fixed;top:0;left:0;height:3px;background:#1a73e8;border-radius:0 2px 2px 0;animation:progress-slide 1.2s ease-out forwards;z-index:999}