*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.container{max-width:1200px;margin:0 auto;padding:20px}.btn{padding:10px 20px;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;transition:all .3s ease}.btn-primary{background-color:#1a73e8;color:#fff}.btn-primary:hover{background-color:#1557b0}.btn-secondary{background-color:#5f6368;color:#fff}.btn-secondary:hover{background-color:#3c4043}.btn-danger{background-color:#d93025;color:#fff}.btn-danger:hover{background-color:#b31412}.btn-success{background-color:#1e8e3e;color:#fff}.btn-success:hover{background-color:#137333}input,textarea,select{width:100%;padding:10px;border:1px solid #dadce0;border-radius:4px;font-size:14px;font-family:inherit}input:focus,textarea:focus,select:focus{outline:none;border-color:#1a73e8;box-shadow:0 0 0 2px #1a73e81a}label{display:block;margin-bottom:5px;font-size:14px;color:#5f6368;font-weight:500}.card{background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a;padding:20px;margin-bottom:20px}.spinner{border:3px solid #f3f3f3;border-top:3px solid #1a73e8;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:20px auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-message{background-color:#fce8e6;color:#d93025;padding:12px;border-radius:4px;margin-bottom:15px;border-left:4px solid #d93025}.success-message{background-color:#e6f4ea;color:#137333;padding:12px;border-radius:4px;margin-bottom:15px;border-left:4px solid #137333}.header{background:#fff;border-bottom:1px solid #e8eaed;padding:15px 30px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100;box-shadow:0 1px 3px #0000000d}.header-left{display:flex;align-items:center}.logo{font-size:24px;font-weight:600;color:#1a73e8;margin:0}.header-right{display:flex;align-items:center;gap:20px}.user-info{display:flex;flex-direction:column;align-items:flex-end}.user-name{font-size:14px;color:#202124;font-weight:500}.user-email{font-size:12px;color:#5f6368}.logout-btn{padding:8px 16px;font-size:14px}@media (max-width: 768px){.header{padding:15px 20px}.user-info{display:none}.logout-btn{padding:6px 12px;font-size:12px}}.sidebar{width:250px;background:#fff;border-right:1px solid #e8eaed;padding:20px 10px;display:flex;flex-direction:column;height:calc(100vh - 60px);position:sticky;top:60px}.compose-button{display:flex;align-items:center;gap:10px;padding:12px 20px;background-color:#1a73e8;color:#fff;border-radius:24px;text-decoration:none;font-weight:500;font-size:14px;margin-bottom:20px;transition:background-color .2s;justify-content:center}.compose-button:hover{background-color:#1557b0}.compose-icon{font-size:18px}.sidebar-nav{flex:1;overflow-y:auto}.sidebar-item{display:flex;align-items:center;gap:15px;padding:10px 20px;color:#5f6368;text-decoration:none;border-radius:0 24px 24px 0;font-size:14px;margin-bottom:4px;transition:background-color .2s}.sidebar-item:hover{background-color:#f1f3f4}.sidebar-item.active{background-color:#e8f0fe;color:#1a73e8;font-weight:500}.sidebar-icon{font-size:18px;width:20px;text-align:center}.sidebar-label{flex:1}.storage-info{padding:15px 10px;border-top:1px solid #e8eaed;margin-top:auto}.storage-text{font-size:12px;color:#5f6368;margin-bottom:8px}.storage-bar{height:4px;background-color:#e8eaed;border-radius:2px;overflow:hidden}.storage-bar-fill{height:100%;background-color:#1a73e8;transition:width .3s}@media (max-width: 768px){.sidebar{width:60px;padding:20px 5px}.compose-button{padding:12px;border-radius:50%;width:50px;height:50px;justify-content:center}.compose-button .sidebar-label{display:none}.sidebar-item{padding:12px;justify-content:center}.sidebar-label,.storage-info{display:none}}.layout{min-height:100vh;background-color:#f5f5f5}.layout-content{display:flex;background-color:#f5f5f5}.main-content{flex:1;padding:20px;max-width:1400px;margin:0 auto;width:100%}@media (max-width: 768px){.main-content{padding:15px}}.auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px}.auth-box{background:#fff;padding:40px;border-radius:12px;box-shadow:0 10px 40px #0000001a;width:100%;max-width:450px}.auth-title{font-size:32px;font-weight:600;color:#1a73e8;text-align:center;margin-bottom:10px}.auth-subtitle{font-size:20px;color:#5f6368;text-align:center;margin-bottom:30px;font-weight:400}.auth-form,.form-group{margin-bottom:20px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.btn-block{width:100%;padding:12px;font-size:16px;margin-top:10px}.auth-footer{text-align:center;padding-top:20px;border-top:1px solid #e8eaed}.auth-footer p{color:#5f6368;font-size:14px}.auth-link{color:#1a73e8;text-decoration:none;font-weight:500}.auth-link:hover{text-decoration:underline}@media (max-width: 480px){.auth-box{padding:30px 20px}.form-row{grid-template-columns:1fr}}.email-list-container{background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a;overflow:hidden}.email-list-header{padding:20px;background-color:#f8f9fa;border-bottom:1px solid #e8eaed;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px}.email-list-header h2{font-size:24px;color:#202124;font-weight:400;margin:0}.search-form{display:flex;gap:10px;flex:1;max-width:400px}.search-input{flex:1;padding:8px 12px;border:1px solid #dadce0;border-radius:4px;font-size:14px}.email-list{max-height:calc(100vh - 250px);overflow-y:auto}.email-item{display:flex;justify-content:space-between;padding:15px 20px;border-bottom:1px solid #e8eaed;cursor:pointer;transition:background-color .2s}.email-item:hover{background-color:#f8f9fa}.email-item.unread{background-color:#f1f3f4;font-weight:500}.email-item-left{display:flex;gap:15px;flex:1;min-width:0}.star-btn{background:none;border:none;font-size:18px;color:#5f6368;cursor:pointer;padding:0;width:24px;height:24px;flex-shrink:0}.star-btn.starred{color:#fbbc04}.email-item-content{flex:1;min-width:0}.email-from,.email-subject{font-size:14px;color:#202124;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.email-subject .attachment-icon{margin-left:8px;font-size:12px}.email-preview{font-size:13px;color:#5f6368;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.email-item-right{display:flex;align-items:center;gap:15px;flex-shrink:0}.email-date{font-size:12px;color:#5f6368;white-space:nowrap}.delete-btn{background:none;border:none;font-size:16px;cursor:pointer;padding:4px;opacity:0;transition:opacity .2s}.email-item:hover .delete-btn{opacity:1}.empty-state{padding:60px 20px;text-align:center;color:#5f6368;font-size:16px}.pagination{display:flex;justify-content:center;align-items:center;gap:20px;padding:20px;background-color:#f8f9fa;border-top:1px solid #e8eaed}.page-info{color:#5f6368;font-size:14px}@media (max-width: 768px){.email-list-header{flex-direction:column;align-items:stretch}.search-form{max-width:none}.email-item{flex-direction:column;gap:10px}.email-item-right{justify-content:space-between}.delete-btn{opacity:1}}.email-view{background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a;overflow:hidden}.email-toolbar{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background-color:#f8f9fa;border-bottom:1px solid #e8eaed}.email-actions{display:flex;gap:10px}.btn-warning{background-color:#fbbc04;color:#fff}.btn-warning:hover{background-color:#f9ab00}.email-content{padding:30px}.email-subject h2{font-size:24px;color:#202124;margin-bottom:20px;font-weight:400}.email-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #e8eaed}.email-from,.email-to,.email-cc{font-size:14px;color:#5f6368;margin-bottom:8px}.email-from strong,.email-to strong,.email-cc strong{color:#202124;margin-right:5px}.email-date{font-size:12px;color:#5f6368}.email-body{margin-top:30px;line-height:1.6;color:#202124;font-size:14px}.email-body pre{white-space:pre-wrap;word-wrap:break-word;font-family:inherit;margin:0}.email-attachments{margin-top:30px;padding-top:20px;border-top:1px solid #e8eaed}.email-attachments h3{font-size:14px;color:#5f6368;margin-bottom:15px;font-weight:500}.attachment-item{display:flex;align-items:center;padding:10px;background-color:#f8f9fa;border-radius:4px;margin-bottom:8px}.attachment-icon{margin-right:10px}.attachment-name{flex:1;color:#1a73e8;font-size:14px}.attachment-size{color:#5f6368;font-size:12px}@media (max-width: 768px){.email-toolbar{flex-direction:column;align-items:stretch;gap:10px}.email-actions{justify-content:space-between}.email-content{padding:20px 15px}.email-subject h2{font-size:20px}.email-header{flex-direction:column;align-items:flex-start;gap:5px}}.compose-container{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;overflow:hidden}.compose-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background-color:#f8f9fa;border-bottom:1px solid #e8eaed}.compose-header h2{font-size:18px;color:#202124;font-weight:500}.close-btn{background:none;border:none;font-size:28px;color:#5f6368;cursor:pointer;line-height:1;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}.close-btn:hover{background-color:#e8eaed}.compose-form{padding:20px}.compose-field{display:flex;align-items:center;margin-bottom:15px;border-bottom:1px solid #e8eaed;padding-bottom:10px}.compose-field label{width:80px;font-size:14px;color:#5f6368;margin:0}.compose-field input,.compose-field textarea{flex:1;border:none;padding:5px;font-size:14px}.compose-field input:focus,.compose-field textarea:focus{outline:none;box-shadow:none}.compose-body{flex-direction:column;align-items:stretch;border-bottom:none}.compose-body textarea{width:100%;min-height:300px;resize:vertical;padding:10px}.compose-actions{display:flex;gap:10px;padding-top:15px}@media (max-width: 768px){.compose-field label{width:60px}}.App{min-height:100vh}