:root {
    --primary: #0078d4;
    --bg-light: #f3f2f1;
    --border: #edebe9;
    --text-main: #323130;
}

body { font-family: 'Segoe UI', sans-serif; margin: 0; display: flex; height: 100vh; color: var(--text-main); }

/* Sidebar */
.sidebar { width: 230px; background: var(--bg-light); border-right: 1px solid var(--border); padding: 15px; }
.btn-compose { background: var(--primary); color: white; border: none; padding: 12px; width: 100%; border-radius: 4px; cursor: pointer; font-weight: 600; margin-bottom: 20px; }

/* Mail List */
.mail-list { width: 380px; border-right: 1px solid var(--border); overflow-y: auto; background: white; }
.mail-item { padding: 15px; border-bottom: 1px solid var(--bg-light); cursor: pointer; transition: 0.2s; }
.mail-item:hover { background: #f0f7ff; }
.mail-item.active { border-left: 4px solid var(--primary); background: #f0f7ff; }
.mail-item .sender { font-weight: 600; font-size: 0.9em; display: block; }
.mail-item .subject { font-size: 0.85em; color: #605e5c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Content Area */
.mail-content { flex: 1; display: flex; flex-direction: column; background: white; }
.mail-header { padding: 20px; border-bottom: 1px solid var(--border); }
.mail-body { padding: 20px; overflow-y: auto; line-height: 1.6; }

/* Form */
input, textarea { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 4px; box-sizing: border-box; }