/* Gmail-like layout (responsive, polished) */
:root{--bg:#fff;--text:#202124;--muted:#5f6368;--primary:#1a73e8;--border:#e0e3e7;--hover:#f6f8fc;--card:#fff}
/*@media (prefers-color-scheme: dark){
  :root{--bg:#0f1115;--text:#e9eef6;--muted:#98a0ab;--primary:#8ab4f8;--border:#202531;--hover:#151924;--card:#121622}
}*/
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:Roboto,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}
.header{
    /*display:flex;align-items:center;
    gap:12px;padding:8px 12px;
    border-bottom:1px solid var(--border);
    position:sticky;top:0;background:var(--bg);z-index:50;*/
    
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: #7ff6cf;
    z-index: 50;
    height: 70px;
}
.header .menu{display:inline-flex; border:#444 1px solid;}
.header .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px}
.header .search{flex:1;display:flex;align-items:center;gap:8px;background:#f1f3f4;color:#1f2328;border-radius:24px;padding:6px 12px;max-width:860px}
.header .search input{flex:1;border:none;background:transparent;outline:none;font-size:14px;padding:6px;color:#1f2328}
.header .actions{display:flex;align-items:center;gap:8px}
.header .pill{display:inline-flex;align-items:center;gap:6px;background:var(--hover);border:1px solid var(--border);padding:6px 10px;border-radius:18px;font-size:12px;color:var(--muted)}
.layout{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 56px)}
.sidebar{border-right:1px solid var(--border);padding:10px 8px;position:sticky;top:56px;height:calc(100vh - 56px);overflow:auto;background:var(--bg)}
.sidebar-header {
    width: 100%;
    padding: 10px;
    padding-bottom: 30px;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    background: #ffffff;
}

.btn:hover,.sidebar a{
    text-decoration:none!important;
}


.compose{display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:#fff;border-radius:18px;padding:10px 16px;font-weight:600;margin:8px}
.nav{margin-top:4px}.nav a{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:16px;color:var(--text)}
.nav a.active,.nav a:hover{background:var(--hover)}
.content{padding:16px}
.card{border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:none;overflow:hidden}
.card .card-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border)}
.card .card-body{padding:0}
.card .card-footer{padding:10px 16px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table thead th{font-size:12px;color:var(--muted);font-weight:600;padding:10px 16px;border-bottom:1px solid var(--border);text-transform:uppercase}
.table tbody tr{cursor:pointer}.table tbody tr:hover{background:var(--hover)}
.table td{padding:12px 16px;border-bottom:1px solid var(--border);font-size:14px}
.mail-item-unread td{font-weight:700}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:16px;background:#eef3fe;color:#1a73e8;font-size:12px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:8px;background:transparent;padding:8px 12px;font-size:14px;cursor:pointer;color:var(--text)}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}.btn.icon{padding:8px;border-radius:50%}
.form-control{width:100%;border:1px solid var(--border);border-radius:10px;padding:10px 12px;outline:none;background:var(--bg);color:var(--text)}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,115,232,.15)}
.form-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.label{color:var(--muted);font-size:12px;text-transform:uppercase;margin-bottom:6px}
.meta{color:var(--muted);font-size:12px}
.message-view{padding:0px}
.message-toolbar{
    /*display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;*/
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
    flex-wrap: wrap;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
}
.message-header h1{font-size:22px;margin:8px 0; margin-bottom: 20px;}.message-header .meta{margin-top:4px}
.message-body{
    /*background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;*/
    background: var(--card);
    line-height: 30px;
    
}
.message-body pre{white-space:pre-wrap;word-wrap:break-word}
.message-body a{
    color:blue;
}
.attachments{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.login-wrap{display:flex;justify-content:center;align-items:center;min-height:100vh;background:var(--hover)}
.login-card{width:420px;max-width:92vw;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:24px}
.login-card h2{margin:0 0 12px}.login-card .muted{color:var(--muted);font-size:13px;margin-bottom:12px}
.alert{padding:10px 12px;border:1px solid #f2b8b5;background:#fce8e6;color:#c5221f;border-radius:8px;margin-bottom:10px;font-size:13px}
footer.site{border-top:1px solid var(--border);padding:10px 16px;color:var(--muted);font-size:12px;margin-top:16px}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'WGT' 400,'GRAD' 0,'opsz' 24}
@media (max-width: 900px){
    .login-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    background: none;
}
  .layout{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0px;height:100%;bottom:0;width:280px;transform:translateX(-100%);transition:transform .25s ease;background:var(--bg);z-index:60}
  .sidebar.open{transform:translateX(0)}
  .header .menu{display:inline-flex}.header .search{max-width:none}
  .content{padding:12px}.card .card-header,.card .card-footer{padding:10px 12px}
  .table thead{display:none}.table tbody tr{display:block;border-bottom:1px solid var(--border);padding:10px}
  .table td{display:block;border:none;padding:4px 0}.table td:last-child{padding-bottom:0}
}

@media (max-width: 600px){
    .hideonmobile{
        display:none!important;
    }
     .showonmobile{
        display:inline-block!important;
    }
    
    

    
    
}