@charset "UTF-8";
:root {
  --xzz-bg: #f6f8fc;
  --xzz-surface: rgba(255,255,255,0.96);
  --xzz-line: #d7e0ee;
  --xzz-ink: #223548;
  --xzz-muted: #688096;
  --xzz-blue: #1a73e8;
  --xzz-blue-soft: #d3e3fd;
  --xzz-blue-pill: #c2e7ff;
  --xzz-shadow: 0 18px 44px rgba(31, 53, 80, 0.10);
}
html, body {
  background:
    radial-gradient(circle at 12% 10%, rgba(26,115,232,0.08), transparent 20%),
    radial-gradient(circle at 88% 12%, rgba(123,174,255,0.08), transparent 18%),
    linear-gradient(180deg, #f5f8fc 0%, #f6f8fc 100%) !important;
}
body:not(.task-login) {
  color: var(--xzz-ink);
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
body:not(.task-login) #layout {
  padding: 18px;
  gap: 16px;
}
body:not(.task-login) #layout-menu,
body:not(.task-login) #layout-sidebar,
body:not(.task-login) #layout-list,
body:not(.task-login) #layout-content {
  background: var(--xzz-surface);
  border: 1px solid rgba(216, 225, 238, 0.96);
  border-radius: 28px;
  box-shadow: var(--xzz-shadow);
  overflow: hidden;
}
body:not(.task-login) #layout-menu {
  background: rgba(255,255,255,0.9);
  padding-top: 10px;
}
body:not(.task-login) .popover-header {
  display: none;
}
body:not(.task-login) .xzz-rail-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 18px;
  margin: 0 10px 10px;
  border-bottom: 1px solid #edf2f8;
}
body:not(.task-login) .xzz-rail-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(26,115,232,0.18);
}
body:not(.task-login) .xzz-rail-copy strong {
  display: block;
  font-size: 15px;
  color: var(--xzz-ink);
}
body:not(.task-login) .xzz-rail-copy span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--xzz-muted);
}
body:not(.task-login) #taskmenu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 10px 16px;
}
body:not(.task-login) #taskmenu .action-buttons,
body:not(.task-login) #taskmenu .special-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body:not(.task-login) #taskmenu a,
body:not(.task-login) #taskmenu .button {
  min-height: 48px;
  margin: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--xzz-muted);
}
body:not(.task-login) #taskmenu a:hover,
body:not(.task-login) #taskmenu .button:hover {
  background: #eef3fb;
  color: var(--xzz-ink);
}
body:not(.task-login) #taskmenu .selected,
body:not(.task-login) #taskmenu .mail.selected,
body:not(.task-login) #taskmenu .contacts.selected,
body:not(.task-login) #taskmenu .settings.selected {
  background: var(--xzz-blue-soft);
  color: var(--xzz-blue);
}
body:not(.task-login) #taskmenu .compose {
  background: var(--xzz-blue-pill);
  color: #0b57d0;
  font-weight: 700;
  box-shadow: 0 14px 28px rgba(66, 133, 244, 0.18);
}
body:not(.task-login) .header {
  background: transparent;
  border-bottom: 1px solid #edf2f8;
  padding: 16px 18px;
}
body:not(.task-login) .header-title,
body:not(.task-login) .boxtitle,
body:not(.task-login) h2.subject {
  color: var(--xzz-ink);
  font-weight: 700;
}
body:not(.task-login) .searchbar {
  margin: 0;
  padding: 16px 18px 0;
  background: transparent;
}
body:not(.task-login) .searchbar input,
body:not(.task-login) .form-control,
body:not(.task-login) input,
body:not(.task-login) select,
body:not(.task-login) textarea {
  border-radius: 16px;
  border: 1px solid var(--xzz-line);
  background: #fff;
  box-shadow: none;
}
body:not(.task-login) input:focus,
body:not(.task-login) select:focus,
body:not(.task-login) textarea:focus,
body:not(.task-login) .form-control:focus {
  border-color: rgba(26,115,232,0.45);
  box-shadow: 0 0 0 4px rgba(26,115,232,0.10);
}
body:not(.task-login) .btn-primary,
body:not(.task-login) button.btn-primary,
body:not(.task-login) .button.mainaction,
body:not(.task-login) .btn.btn-primary {
  background: linear-gradient(135deg, #1a73e8 0%, #4d9cff 100%);
  border-color: transparent;
  color: #fff;
}
body:not(.task-login) .listing li:hover,
body:not(.task-login) .listing tbody tr:hover {
  background: #f4f7fb;
}
body:not(.task-login) .listing li.selected,
body:not(.task-login) .listing tbody tr.selected,
body:not(.task-login) .listing tbody tr.unfocused.selected {
  background: #d3e3fd;
}
body:not(.task-login) .listing td,
body:not(.task-login) .listing th {
  border-color: #edf2f8;
}
body:not(.task-login) #message-header,
body:not(.task-login) #message-content,
body:not(.task-login) #compose-headers,
body:not(.task-login) #composebodycontainer,
body:not(.task-login) #compose-options,
body:not(.task-login) #compose-attachments,
body:not(.task-login) .box,
body:not(.task-login) .records-table {
  background: #fff;
  border: 1px solid #edf2f8;
  border-radius: 22px;
}
body:not(.task-login) #message-header {
  padding: 22px 24px 0;
  border: 0;
  border-bottom: 1px solid #edf2f8;
  border-radius: 0;
}
body:not(.task-login) #message-content {
  display: grid;
  grid-template-columns: 280px minmax(0,1fr);
  gap: 18px;
  padding: 22px 24px 24px;
  border: 0;
}
body:not(.task-login) #compose-content {
  padding: 18px;
}
body:not(.task-login) #compose-headers {
  padding: 18px 18px 4px;
  margin-bottom: 16px;
}
body:not(.task-login) #composebodycontainer {
  padding: 8px;
  margin-bottom: 16px;
}
body:not(.task-login) #compose-options,
body:not(.task-login) #compose-attachments {
  padding: 16px;
}
body:not(.task-login) .xzz-task-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 18px 0;
  padding: 14px 16px;
  border-radius: 18px;
  background: #eef5ff;
  border: 1px solid #deebff;
  color: var(--xzz-muted);
  font-size: 13px;
  line-height: 1.7;
}
body:not(.task-login) .xzz-task-tip strong {
  color: var(--xzz-blue);
  white-space: nowrap;
}
@media (max-width: 1180px) {
  body:not(.task-login) #layout { padding: 10px; gap: 10px; }
  body:not(.task-login) #message-content { grid-template-columns: 1fr; }
}