:root{
  --gray-50:#f9fafb;
  --gray-100:#f3f4f6;
  --gray-200:#e5e7eb;
  --gray-300:#d1d5db;
  --gray-400:#9ca3af;
  --gray-500:#6b7280;
  --gray-600:#4b5563;
  --gray-700:#374151;
  --gray-800:#1f2937;
  --gray-900:#111827;
  --blue-50:#eff6ff;
  --blue-100:#dbeafe;
  --blue-500:#3b82f6;
  --blue-600:#2563eb;
  --blue-700:#1d4ed8;
  --green-50:#f0fdf4;
  --green-500:#22c55e;
  --green-600:#16a34a;
  --yellow-50:#fefce8;
  --yellow-500:#eab308;
  --yellow-600:#ca8a04;
  --red-50:#fef2f2;
  --red-500:#ef4444;
  --red-600:#dc2626;
  --primary:#2563eb;
  --primary-hover:#1d4ed8;
  --success:#16a34a;
  --warning:#ca8a04;
  --danger:#dc2626;
  --text-primary:#111827;
  --text-secondary:#6b7280;
  --text-tertiary:#9ca3af;
  --border-color:#e5e7eb;
  --bg-primary:#ffffff;
  --bg-secondary:#f9fafb;
  --bg-tertiary:#f3f4f6;
  --shadow-xs:0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-sm:0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --shadow:0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-md:0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --shadow-lg:0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
  --font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --spacing-xs:4px;
  --spacing-sm:8px;
  --spacing-md:16px;
  --spacing-lg:24px;
  --spacing-xl:32px;
  --radius-sm:6px;
  --radius:8px;
  --radius-lg:12px;
  --radius-xl:16px;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,
body{
  height:100%;
}

body{
  font-family:var(--font-sans);
  color:var(--text-primary);
  background:var(--bg-secondary);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

body.theme-dimmed{
  --bg-secondary:#F2F1EE;
  --bg-tertiary:#F8F7F4;
  --bg-primary:#FFFFFF;
  --border-color:#E4E1DC;
  background:var(--bg-secondary);
}

a{
  color:inherit;
}

.app{
  max-width:1400px;
  margin:0 auto;
  padding:24px;
  opacity:1;
  transition:opacity .25s ease, transform .25s ease;
}

body.appLoading .app{
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
}

.header{
  background:white;
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  padding:16px 24px;
  margin-bottom:24px;
  box-shadow:var(--shadow-sm);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brandLogo{
  width:40px;
  height:40px;
  background:linear-gradient(135deg, var(--blue-600), var(--blue-700));
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-weight:700;
  font-size:16px;
  box-shadow:var(--shadow-sm);
}

.brandText h1,
.brandTitle{
  font-size:18px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--gray-900);
  line-height:1.2;
}

.brandText .subtitle,
.brandSub{
  font-size:13px;
  color:var(--text-secondary);
  margin-top:2px;
}

.nav{
  display:flex;
  gap:8px;
  background:var(--gray-100);
  padding:4px;
  border-radius:var(--radius);
}

.navBtn,
.navLink{
  padding:8px 16px;
  background:transparent;
  border:none;
  border-radius:var(--radius-sm);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:500;
  color:var(--text-secondary);
  cursor:pointer;
  text-decoration:none;
  transition:all .15s ease;
}

.navBtn:hover,
.navLink:hover{
  color:var(--text-primary);
  background:rgba(255,255,255,.5);
}

.navBtn.active,
.navLink.active{
  background:white;
  color:var(--text-primary);
  box-shadow:var(--shadow-xs);
}

body.crmLiteOff .navBtn[data-tab="tasks"],
body.crmLiteOff .navLink[data-tab="tasks"]{
  display:none;
}

.accountMenu{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
}

.accountBtn{
  display:flex;
  align-items:center;
  gap:4px;
  padding:2px 6px;
  height:30px;
  background:var(--gray-100);
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  font-size:13px;
  color:var(--text-primary);
  cursor:pointer;
  transition:all .15s ease;
}

.accountBtn:hover{
  background:var(--gray-200);
}

.accountStatus{
  width:6px;
  height:6px;
  background:var(--success);
  border-radius:50%;
  border:1px solid white;
}

.accountBadge{
  min-width:20px;
  height:20px;
  padding:0 4px;
  border-radius:var(--radius-sm);
  background:transparent;
  border:none;
  box-shadow:none;
  color:var(--text-primary);
  font-weight:700;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-transform:uppercase;
}

.accountChevron{
  width:14px;
  height:14px;
  color:var(--text-tertiary);
}

.dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:200px;
  background:white;
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  padding:4px;
  display:none;
  z-index:100;
}

.dropdown.open{
  display:block;
}

.dropdownItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  font-size:14px;
  font-weight:500;
  color:var(--text-primary);
  cursor:pointer;
  transition:background .15s ease;
  text-decoration:none;
}

.dropdownItem:hover{
  background:var(--gray-100);
}

.dropdownItem.danger{
  color:var(--danger);
}

.dropdownDivider{
  height:1px;
  background:var(--border-color);
  margin:4px 0;
}

.dropdownItem.appearanceToggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.dropdownItem.appearanceToggle .dropdownChevron{
  font-size:12px;
  color:var(--text-tertiary);
  transition:transform .15s ease;
}

.dropdownItem.appearanceToggle.open .dropdownChevron{
  transform:rotate(180deg);
}

.dropdownSubmenu{
  display:none;
  margin:4px 8px 8px;
  padding:6px;
  background:var(--gray-100);
  border-radius:10px;
}

.dropdownSubmenu.open{
  display:block;
}

.dropdownSubItem{
  width:100%;
  text-align:left;
  border:none;
  background:transparent;
  padding:6px 8px;
  border-radius:8px;
  font-size:13px;
  color:var(--text-secondary);
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}

.dropdownSubItem:hover{
  background:var(--gray-200);
  color:var(--text-primary);
}

.dropdownSubItem.active{
  background:#e5e7eb;
  color:var(--text-primary);
  font-weight:600;
}

.dropdownSubDivider{
  height:1px;
  background:var(--border-color);
  margin:6px 8px;
}

.kbd{
  font-size:11px;
  padding:2px 6px;
  background:var(--gray-100);
  border:1px solid var(--border-color);
  border-radius:4px;
  color:var(--text-tertiary);
  font-family:monospace;
}

.toggleState{
  font-size:11px;
  color:var(--text-tertiary);
}

.dropdownItem.active .toggleState{
  color:var(--primary);
  font-weight:600;
}

.calcMenu,
.recentContactsMenu{
  position:relative;
  display:none;
  align-items:center;
}

body.calcOn .calcMenu,
body.recentContactsOn .recentContactsMenu{
  display:inline-flex;
}

.calcToggleBtn{
  width:30px;
  height:30px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-color);
  background:var(--gray-100);
  color:var(--text-secondary);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .15s ease;
}

.calcToggleBtn:hover{
  background:var(--gray-200);
  color:var(--text-primary);
}

.calcToggleBtn svg{
  width:16px;
  height:16px;
}

body.recentContactsDrawerOpen{
  overflow:hidden;
}

.recentContactsDrawerBackdrop[hidden],
.recentContactsDrawer[hidden]{
  display:none !important;
}

.recentContactsDrawerBackdrop{
  position:fixed;
  inset:0;
  display:block;
  background:rgba(15,23,42,.24);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:118;
}

.recentContactsDrawerBackdrop.open{
  opacity:1;
  pointer-events:auto;
}

.recentContactsDrawer{
  position:fixed;
  top:0;
  right:0;
  width:min(380px, 100vw);
  height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--bg-primary);
  border-left:1px solid var(--border-color);
  box-shadow:var(--shadow-lg);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(calc(100% + 24px));
  transition:transform .18s ease, opacity .18s ease, visibility 0s linear .18s;
  z-index:119;
}

.recentContactsDrawer.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(0);
  transition-delay:0s;
}

.recentContactsDrawerHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px;
  border-bottom:1px solid var(--border-color);
  background:var(--bg-secondary);
}

.recentContactsDrawerTitle{
  color:var(--text-primary);
  font-size:16px;
  font-weight:700;
}

.recentContactsDrawerSubtitle{
  margin-top:2px;
  color:var(--text-tertiary);
  font-size:12px;
}

.recentContactsDrawerClose{
  flex:0 0 auto;
}

.recentContactsDrawerBody{
  flex:1;
  overflow:auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.recentContactsDrawerTabs{
  display:inline-flex;
  align-self:flex-start;
  gap:8px;
  padding:4px;
  border:1px solid var(--border-color);
  border-radius:999px;
  background:var(--bg-secondary);
}

.recentContactsDrawerTab{
  border:none;
  background:transparent;
  color:var(--text-secondary);
  font-size:12px;
  font-weight:700;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}

.recentContactsDrawerTab:hover{
  color:var(--text-primary);
}

.recentContactsDrawerTab.active{
  background:var(--bg-primary);
  color:var(--text-primary);
  box-shadow:var(--shadow-sm);
}

.recentContactsDrawerPanel{
  display:none;
  flex-direction:column;
  gap:10px;
}

.recentContactsDrawerPanel.active{
  display:flex;
}

.recentContactsDrawerList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.recentContactsEmpty{
  border:1px dashed var(--border-color);
  border-radius:var(--radius);
  background:var(--bg-secondary);
  padding:16px;
  color:var(--text-secondary);
  font-size:13px;
  text-align:center;
}

.recentContactItemLink,
.favoriteContactCard{
  display:block;
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  background:var(--bg-primary);
  color:inherit;
  padding:12px 14px;
  text-decoration:none;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}

.recentContactItemLink:hover,
.favoriteContactCard:hover{
  border-color:var(--primary);
  background:var(--bg-secondary);
}

.recentContactItemLink:hover{
  transform:translateX(-2px);
}

.recentContactItemTop{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}

.recentContactItemName,
.favoriteContactNameLink{
  color:var(--text-primary);
  font-size:14px;
  font-weight:700;
}

.favoriteContactNameLink{
  text-decoration:none;
}

.favoriteContactNameLink:hover,
.favoriteContactActionLink:hover{
  color:var(--primary);
  text-decoration:underline;
}

.recentContactItemTime{
  color:var(--text-tertiary);
  font-size:11px;
  white-space:nowrap;
}

.recentContactItemSubtitle,
.favoriteContactSummary,
.favoriteContactActionLink,
.favoriteContactText,
.favoriteContactMuted{
  color:var(--text-secondary);
  font-size:12px;
}

.recentContactItemSubtitle{
  margin-top:6px;
}

.favoriteContactCard{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.favoriteContactSummary{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}

.favoriteContactSummaryDot,
.favoriteContactMuted{
  color:var(--text-tertiary);
}

.favoriteContactMeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}

.favoriteContactMetaItem,
.favoriteContactEmailWrap{
  min-width:0;
  display:flex;
  align-items:center;
}

.favoriteContactEmailWrap{
  max-width:100%;
  flex-wrap:wrap;
  gap:8px;
}

.favoriteContactActionLink{
  min-width:0;
  word-break:break-word;
  text-decoration:none;
}

.favoriteContactCopyBtn{
  width:26px;
  height:26px;
  flex:0 0 auto;
  border:1px solid var(--border-color);
  border-radius:8px;
  background:var(--bg-primary);
  color:var(--text-secondary);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}

.favoriteContactCopyBtn svg{
  width:14px;
  height:14px;
}

.favoriteContactCopyBtn:hover,
.favoriteContactCopyBtn.copied{
  border-color:var(--primary);
  color:var(--primary);
  background:var(--bg-secondary);
}

.calcPopover{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:280px;
  display:none;
  z-index:120;
  padding:12px;
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  background:var(--bg-primary);
  box-shadow:var(--shadow-md);
}

.calcPopover.open{
  display:block;
}

.calcHeader{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}

.calcDisplay{
  flex:1;
  min-height:40px;
  padding:6px 10px;
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  background:var(--bg-tertiary);
  color:var(--text-primary);
  font-size:17px;
  font-weight:600;
  text-align:right;
}

.calcHistoryBtn{
  width:32px;
  height:32px;
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  background:var(--bg-primary);
  color:var(--text-secondary);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:all .15s ease;
}

.calcHistoryBtn svg{
  width:16px;
  height:16px;
}

.calcHistoryBtn:hover,
.calcHistoryBtn.active{
  background:var(--gray-100);
  color:var(--text-primary);
}

.calcHistory{
  display:none;
  max-height:170px;
  overflow:auto;
  margin-top:10px;
  padding:8px;
  border:1px dashed var(--border-color);
  border-radius:var(--radius-sm);
  background:var(--bg-tertiary);
}

.calcHistory.open{
  display:block;
}

.calcHistoryItem{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:2px 0;
  color:var(--text-secondary);
  font-size:12px;
}

.calcHistoryItem strong{
  color:var(--text-primary);
  font-weight:600;
}

.calcHistoryEmpty{
  color:var(--text-tertiary);
  font-size:12px;
}

.calcKeypad{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:6px;
}

.calcKey{
  height:38px;
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  background:var(--bg-primary);
  color:var(--text-primary);
  cursor:pointer;
  font-size:16px;
  transition:background .15s ease;
}

.calcKey:hover,
.calcKey.operator{
  background:var(--bg-tertiary);
}

.calcKey.operator,
.calcKey.equal{
  font-size:18px;
  font-weight:600;
}

.calcKey.equal{
  border-color:var(--primary);
  background:var(--primary);
  color:white;
}

.calcKey.wide{
  grid-column:span 2;
}

.footer{
  margin-top:32px;
  padding:18px 0 14px;
  border-top:1px solid var(--border-color);
  text-align:center;
  color:var(--text-tertiary);
  font-size:13px;
}

.footer a{
  color:inherit;
  text-decoration:none;
  margin:0 6px;
}

.footer a:hover{
  color:var(--text-secondary);
  text-decoration:underline;
}

.footerVersion{
  color:inherit;
  font:inherit;
  white-space:nowrap;
}

@media (max-width:720px){
  .recentContactsDrawer{
    width:100vw;
  }
}