:root{--bg-color: #121212;--sidebar-bg: #1e1e1e;--card-bg: #252525;--text-primary: #e0e0e0;--text-secondary: #a0a0a0;--accent-color: #7c4dff;--accent-hover: #651fff;--border-color: #333;--danger-color: #cf6679}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;background-color:var(--bg-color);color:var(--text-primary);height:100vh;overflow:hidden}#app{height:100%;display:flex;flex-direction:column}.view{height:100%;width:100%}.hidden{display:none!important}#login-view{display:flex;justify-content:center;align-items:center;background:radial-gradient(circle at center,#2a2a2a,#121212)}.login-container{background-color:var(--card-bg);padding:2.5rem;border-radius:12px;width:100%;max-width:400px;box-shadow:0 8px 32px #00000080;text-align:center}.login-container h1{margin-bottom:.5rem;color:var(--accent-color)}.login-container p{color:var(--text-secondary);margin-bottom:2rem}.input-group{margin-bottom:1.2rem;text-align:left}.input-group label{display:block;margin-bottom:.5rem;font-size:.9rem;color:var(--text-secondary)}input,textarea{width:100%;padding:.8rem;border-radius:6px;border:1px solid var(--border-color);background-color:#1a1a1a;color:var(--text-primary);font-family:inherit;outline:none;transition:border-color .2s}input:focus,textarea:focus{border-color:var(--accent-color)}.btn-primary{width:100%;padding:.8rem;border:none;border-radius:6px;background-color:var(--accent-color);color:#fff;font-weight:600;cursor:pointer;transition:background-color .2s}.btn-primary:hover{background-color:var(--accent-hover)}.advanced-settings{text-align:left;margin-bottom:1.5rem;font-size:.9rem}.advanced-settings summary{cursor:pointer;color:var(--text-secondary);margin-bottom:1rem}#dashboard-view{display:flex}.sidebar{width:250px;background-color:var(--sidebar-bg);border-right:1px solid var(--border-color);display:flex;flex-direction:column;padding:1.5rem}.brand{font-size:1.5rem;font-weight:700;color:var(--accent-color);margin-bottom:2rem}.btn-compose{background-color:var(--accent-color);color:#fff;border:none;padding:.8rem;border-radius:8px;font-weight:600;cursor:pointer;margin-bottom:2rem;transition:transform .1s}.btn-compose:active{transform:scale(.98)}#folder-list{list-style:none;flex-grow:1}#folder-list li{padding:.8rem;margin-bottom:.5rem;border-radius:6px;cursor:pointer;color:var(--text-secondary);transition:background-color .2s}#folder-list li:hover{background-color:#ffffff0d;color:var(--text-primary)}#folder-list li.active{background-color:#7c4dff26;color:var(--accent-color)}.user-profile{border-top:1px solid var(--border-color);padding-top:1rem;font-size:.9rem}#user-email-display{display:block;margin-bottom:.5rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis}#logout-btn{background:none;border:none;color:var(--danger-color);cursor:pointer;font-size:.9rem}.main-content{flex-grow:1;display:flex;flex-direction:column;background-color:var(--bg-color);position:relative}.top-bar{height:60px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 2rem}#refresh-btn,#back-to-list-btn{background:none;border:1px solid var(--border-color);color:var(--text-primary);padding:.5rem 1rem;border-radius:4px;cursor:pointer}#refresh-btn:hover,#back-to-list-btn:hover{background-color:#ffffff0d}#email-list{flex-grow:1;overflow-y:auto}.email-item{padding:1rem 2rem;border-bottom:1px solid var(--border-color);cursor:pointer;transition:background-color .1s}.email-item:hover{background-color:#ffffff05}.email-item .subject{font-weight:600;margin-bottom:.3rem;font-size:1rem}.email-item .details{display:flex;justify-content:space-between;font-size:.85rem;color:var(--text-secondary)}#email-detail-container{display:flex;flex-direction:column;height:100%}#email-content{padding:2rem;overflow-y:auto;flex-grow:1}#detail-subject{font-size:1.5rem;margin-bottom:1rem}.meta{margin-bottom:2rem;color:var(--text-secondary);font-size:.9rem;border-bottom:1px solid var(--border-color);padding-bottom:1rem}.email-body-content{line-height:1.6;color:var(--text-primary)}.modal{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:100}.modal-content{background-color:var(--card-bg);width:600px;border-radius:12px;display:flex;flex-direction:column;box-shadow:0 10px 40px #00000080}.modal-content header{padding:1rem 1.5rem;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.modal-content header button{background:none;border:none;color:var(--text-secondary);font-size:1.5rem;cursor:pointer}#compose-form{padding:1.5rem;display:flex;flex-direction:column;gap:1rem}#compose-body{height:200px;resize:none}