/* Same design tokens as static/styles.css. No third-party fonts or analytics. */
:root {
  --deg-ink: #183130;
  --deg-muted: #586e6b;
  --deg-line: #dce7e4;
  --deg-canvas: #edf3f1;
  --deg-deep: #11322e;
  --deg-teal: #087a68;
  --deg-bright: #00b69d;
  --deg-soft: #e3f7f2;
}
html, body { background: var(--deg-canvas); color: var(--deg-ink); }
body, input, textarea, select, button { font-family: Manrope, "Segoe UI", Arial, sans-serif; }
a { color: var(--deg-teal); }
.deg-topbar {
  height: 76px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 26px; background: var(--deg-canvas);
  border-bottom: 1px solid var(--deg-line);
}
.deg-brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.deg-brand-mark { width: 42px; height: 42px; padding: 4px; background: #fff; border-radius: 13px; }
.deg-brand-copy { display: flex; flex-direction: column; gap: 3px; }
.deg-brand-copy small { color: var(--deg-muted); font-size: 9px; font-weight: 800; letter-spacing: 1.4px; }
.deg-brand-copy strong { color: var(--deg-ink); font-size: 19px; letter-spacing: -.4px; }
.deg-top-actions { display: flex; align-items: center; gap: 12px; }
.deg-status { padding: 8px 11px; border: 1px solid #c9e4dc; border-radius: 999px; background: #f6f9f8; color: #385654; font-size: 11px; }
.deg-crm-link { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--deg-line); background: #fff; color: var(--deg-deep); text-decoration: none !important; font-size: 12px; font-weight: 700; }
.deg-crm-link:hover { background: var(--deg-soft); }
.deg-help { width: 35px; height: 35px; border-radius: 50%; border: 1px solid var(--deg-line); background: #fff; color: var(--deg-deep); font-size: 16px; font-weight: 700; }
body.deg-workspace #layout { height: calc(100% - 76px); top: 76px; }
body.deg-workspace #layout-menu {
  background: radial-gradient(circle at 20% 10%, #00b69d25, transparent 280px), linear-gradient(175deg,#143b36,#11322e 44%,#0a2926);
  color: #e9f3f0; border-right: none;
}
#layout-menu .popover-header { background: transparent; border: none; }
#layout-menu #logo { max-width: 45px; max-height: 45px; padding: 4px; background: #fff; border-radius: 13px; }
#taskmenu a { color: #c5ded7 !important; border: none !important; border-radius: 12px; margin: 4px 8px; transition: background .15s,color .15s; }
#taskmenu a:hover, #taskmenu a.selected { background: #00b69d25 !important; color: #fff !important; }
#taskmenu a.selected { box-shadow: inset 3px 0 var(--deg-bright); }
#taskmenu .action-buttons { display: none; }
#taskmenu .theme { display: none; }
#taskmenu a .inner { font-size: 10px; font-weight: 600; }
#layout-sidebar { background: #f6f9f8; border-right: 1px solid var(--deg-line); }
#layout-sidebar > .header { background: transparent; border-bottom: 0; padding: 0 18px; }
#layout-sidebar .username { font-size: 11px; color: var(--deg-muted); }
.deg-compose {
  flex-shrink: 0; min-height: 48px; margin: 20px 16px 8px; padding: 12px 17px;
  border: 1px solid var(--deg-deep); border-radius: 15px; background: var(--deg-deep);
  color: #fff; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer;
  box-shadow: 0 8px 18px #11322e1a;
}
.deg-compose::before { content: "+"; margin-right: 12px; color: #75ead6; font-size: 19px; }
.deg-compose:hover { background: #174a42; }
.deg-compose-small { display: none; margin-left: auto; padding: 7px 11px; border: 0; border-radius: 10px; background: #11322e; color: #fff; font-size: 12px; font-weight: 650; cursor: pointer; }
.deg-folder-label { flex-shrink: 0; padding: 16px 22px 10px; color: var(--deg-muted); font-size: 9px; font-weight: 800; letter-spacing: 1.3px; }
#mailboxlist { padding: 0 12px; }
#mailboxlist li a { padding-top: 11px; padding-bottom: 11px; color: #385654; font-size: 13px; font-weight: 600; border: 0 !important; border-radius: 11px; margin-bottom: 3px; }
#mailboxlist li.selected > a { background: #dcefe9 !important; color: #0c5d50 !important; }
#mailboxlist li a:hover { background: #e8f1ee !important; }
#mailboxlist li .unreadcount { background: #087a68; color: #fff; border-radius: 999px; padding: 1px 6px; font-size: 10px; }
#layout-sidebar > .footer { background: transparent; border-top: 1px solid var(--deg-line); }
#layout-list { background: #fff; border-right: 1px solid var(--deg-line); }
#layout-list > .header, #layout-content > .header { background: #fff; border-bottom: 1px solid var(--deg-line); min-height: 62px; }
#layout-list .searchbar { margin: 13px 15px; height: 43px; flex-shrink: 0; border: 1px solid var(--deg-line); border-radius: 13px; background: #f6f9f8; }
#layout-list .searchbar input { height: 41px; background: transparent; color: var(--deg-ink); font-size: 13px; }
#layout-list .searchbar:focus-within { border-color: #087a68; box-shadow: 0 0 0 3px #087a6812; }
.searchbar a, .toolbar a, .menu a, .header a.button { color: #385654; }
.toolbar a:hover { color: var(--deg-teal); background: #e3f7f2; }
.messagelist tr td { border-color: #edf3f1 !important; }
.messagelist tr td.subject { padding: 15px 14px !important; }
.messagelist tr .fromto { color: #385654; font-size: 12px; }
.messagelist tr .date { color: #738783; font-size: 10px; }
.messagelist tr .subject a { color: var(--deg-ink); font-size: 13px; line-height: 1.7; }
.messagelist tr.selected td { background: #e3f7f2 !important; color: var(--deg-ink) !important; }
.messagelist tr:hover td { background: #f6f9f8; }
.messagelist tr.selected td.subject { box-shadow: inset 3px 0 #00b69d; }
#layout-list > .footer { background: #f6f9f8; border-top: 1px solid var(--deg-line); color: var(--deg-muted); font-size: 11px; }
#layout-content { background: #fff; }
html.iframe, html.iframe body { background: #fff; }
#message-header { padding: 22px 26px 14px; background: #fff; }
#message-header .subject { color: var(--deg-ink); font-size: 22px; line-height: 1.4; font-weight: 750; letter-spacing: -.35px; }
#message-header .header { color: var(--deg-muted); }
#messagebody { padding: 24px 26px; color: var(--deg-ink); font-size: 14px; line-height: 1.8; }
#messagebody .pre { font-family: Manrope, "Segoe UI", Arial, sans-serif; }
#attachment-list { border-top: 1px solid var(--deg-line); padding: 12px 24px; }
#attachment-list li { background: #f6f9f8; border: 1px solid var(--deg-line); border-radius: 11px; padding: 7px 12px; }
#message-content .attachmentslist, #message-content .attachments { background: #f6f9f8 !important; border-color: var(--deg-line) !important; }
#attachment-list a { color: #087a68 !important; }
.btn-primary { background: var(--deg-deep) !important; border-color: var(--deg-deep) !important; border-radius: 11px; }
.form-control, .custom-select { border-radius: 10px; border-color: var(--deg-line); }
.form-control:focus { border-color: var(--deg-teal); box-shadow: 0 0 0 3px #087a6812; }
.deg-help-dialog { max-width: 520px; width: calc(100% - 32px); padding: 28px; border: 1px solid var(--deg-line); border-radius: 22px; color: var(--deg-ink); box-shadow: 0 20px 80px #11322e30; }
.deg-help-dialog::backdrop { background: #11322e55; }
.deg-help-dialog h2 { font-size: 21px; line-height: 1.35; }
.deg-help-dialog p { color: #385654; font-size: 13px; line-height: 1.75; }
.deg-preview-note { padding: 12px; background: #fff4df; border-radius: 11px; }
.deg-dialog-close { padding: 10px 18px; background: var(--deg-deep); border: 0; border-radius: 11px; color: #fff; cursor: pointer; }
.deg-preview a[aria-disabled="true"] { opacity: .45; cursor: help; }
#rcmbtn100-clone { background: var(--deg-deep) !important; color: #fff !important; }
.deg-preview #rcmbtn100-clone { display: none !important; }
#deg-preview-banner { background: #11322e !important; color: #fff !important; font: 11px "Segoe UI", sans-serif !important; padding: 9px 14px !important; max-width: calc(100vw - 32px); border: 1px solid #00b69d55; }
html.iframe #deg-preview-banner { display: none; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #036e76 !important; outline-offset: 3px; }
@media (min-width: 1025px) {
  #layout-menu { width: 88px !important; }
  #layout-sidebar { width: 244px !important; min-width: 220px; }
  #layout-list { width: 380px; min-width: 300px; }
  #layout-menu .popover-header { padding-top: 20px; min-height: 86px; }
  #taskmenu a { padding: 14px 3px; }
  #layout-content > .header .toolbar a { font-size: 11px; }
}
@media (max-width: 1024px) {
  .deg-topbar { height: 65px; padding: 10px 16px; }
  body.deg-workspace #layout { height: calc(100% - 65px); top: 65px; }
  .deg-brand-copy strong { font-size: 17px; }
  .deg-brand-copy small { font-size: 8px; letter-spacing: .8px; }
  .deg-status { font-size: 10px; padding: 7px 9px; }
  .deg-crm-link { font-size: 11px; padding: 8px 10px; }
  #layout-sidebar { max-width: 300px; }
  .deg-compose-small { display: block; }
}
@media (max-width: 840px) { .deg-status { display: none; } }
@media (max-width: 580px) {
  .deg-topbar { gap: 8px; height: 64px; padding: 9px 12px; }
  body.deg-workspace #layout { height: calc(100% - 64px); top: 64px; }
  .deg-brand { gap: 8px; }
  .deg-brand-mark { width: 34px; height: 34px; border-radius: 10px; }
  .deg-brand-copy strong { font-size: 15px; }
  .deg-brand-copy small { font-size: 7px; letter-spacing: .4px; }
  .deg-top-actions { gap: 6px; }
  .deg-status { display: none; }
  .deg-crm-link { font-size: 10px; padding: 8px; }
  .deg-help { width: 30px; height: 30px; }
  #layout-list .searchbar { margin: 10px; }
  #deg-preview-banner { font-size: 10px !important; right: 8px !important; bottom: 8px !important; }
  #message-header { padding: 18px 16px 12px; }
  #message-header .subject { font-size: 18px; }
  #messagebody { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
