:root {
  --ink: #101114;
  --ink-soft: #24262b;
  --ivory: #f6f3ec;
  --paper: #fffdf8;
  --blue: #4656ff;
  --blue-deep: #3342e6;
  --mint: #b9ff66;
  --coral: #ff8066;
  --sky: #cde7ff;
  --muted: #686a70;
  --line: rgba(16,17,20,.12);
  --shadow: 0 22px 60px rgba(28,29,36,.1);
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--ivory);
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.admin-skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  transform: translateY(-160%);
}

.admin-skip-link:focus { transform: translateY(0); }

.admin-mark { width: 38px; height: 38px; flex: 0 0 auto; }

.admin-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -.06em;
}

.admin-brand small {
  display: block;
  margin-top: -3px;
  color: rgba(255,255,255,.42);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.admin-kicker {
  margin: 0 0 12px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.admin-button {
  min-height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 11px 17px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.admin-button.primary { background: var(--blue); color: #fff; }
.admin-button.primary:hover { background: var(--blue-deep); transform: translateY(-1px); }
.admin-button.secondary { border-color: var(--line); background: var(--paper); }

/* Authentication */
.auth-body { min-height: 100vh; background: var(--ink); color: #fff; }

.auth-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(460px, .92fr);
}

.auth-brand {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 55px 7vw 50px;
  background:
    radial-gradient(circle at 80% 18%, rgba(70,86,255,.5), transparent 34%),
    radial-gradient(circle at 16% 78%, rgba(185,255,102,.11), transparent 28%),
    var(--ink);
}

.auth-brand h1 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(56px, 7vw, 104px);
  line-height: .92;
  letter-spacing: -.075em;
}

.auth-brand h1 em {
  color: var(--mint);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

.auth-brand-note {
  max-width: 500px;
  margin: 0;
  color: rgba(255,255,255,.5);
  font-size: 13px;
}

.auth-panel {
  display: grid;
  place-items: center;
  padding: 35px;
  background: var(--ivory);
  color: var(--ink);
}

.auth-card {
  width: min(100%, 510px);
  padding: 48px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.auth-card h2 { margin: 0 0 14px; font-size: 39px; line-height: 1; letter-spacing: -.06em; }
.auth-card > p:not(.admin-kicker):not(.auth-foot) { margin: 0 0 28px; color: var(--muted); }
.auth-foot { margin: 24px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.auth-error, .form-error, .admin-notice { padding: 13px 15px; border-radius: 11px; background: #ffe4df; color: #7b281b; font-size: 12px; font-weight: 700; }
.admin-notice { margin-bottom: 22px; background: #e6ffd0; color: #26440d; }

/* App shell */
.admin-app { min-height: 100vh; }

.admin-sidebar {
  position: fixed;
  z-index: 40;
  inset: 0 auto 0 0;
  width: 250px;
  display: flex;
  flex-direction: column;
  padding: 27px 20px;
  overflow-y: auto;
  background: var(--ink);
  color: #fff;
}

.admin-sidebar > .admin-brand { margin: 0 10px 48px; }

.admin-sidebar nav { display: grid; gap: 5px; }

.admin-sidebar nav a, .sidebar-bottom a, .sidebar-bottom button {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 10px 13px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: rgba(255,255,255,.57);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

.admin-sidebar nav a > span, .sidebar-bottom span { width: 22px; color: rgba(255,255,255,.75); font-size: 17px; text-align: center; }
.admin-sidebar nav a:hover, .admin-sidebar nav a.active, .sidebar-bottom a:hover, .sidebar-bottom button:hover { background: rgba(255,255,255,.08); color: #fff; }
.admin-sidebar nav a.active { box-shadow: inset 3px 0 0 var(--mint); }
.sidebar-bottom { display: grid; gap: 3px; margin-top: auto; padding-top: 30px; }
.sidebar-bottom form { margin: 0; }

.admin-main { min-height: 100vh; margin-left: 250px; }

.admin-topbar {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 34px;
  border-bottom: 1px solid var(--line);
  background: rgba(246,243,236,.88);
  backdrop-filter: blur(16px);
}

.admin-topbar > div:first-of-type span, .admin-topbar > div:first-of-type strong { display: block; }
.admin-topbar > div:first-of-type span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.admin-topbar > div:first-of-type strong { font-size: 14px; }
.topbar-user { display: flex; align-items: center; gap: 10px; }
.topbar-user > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 850; }
.topbar-user strong, .topbar-user small { display: block; }
.topbar-user strong { font-size: 12px; }
.topbar-user small { color: var(--muted); font-size: 9px; }
.sidebar-toggle { display: none; border: 0; background: transparent; font-size: 22px; cursor: pointer; }

.admin-content { width: min(100%, 1500px); margin: 0 auto; padding: 45px 38px 80px; }

.admin-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 35px;
}

.admin-page-heading h1, .lead-hero h1 {
  margin: 0;
  font-size: clamp(42px, 5vw, 72px);
  line-height: .94;
  letter-spacing: -.07em;
}

.admin-page-heading > div > p:last-child { max-width: 620px; margin: 15px 0 0; color: var(--muted); font-size: 15px; }

.panel {
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--paper);
}

.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.panel-heading span { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.panel-heading h2 { margin: 3px 0 0; font-size: 21px; letter-spacing: -.045em; }
.panel-heading > a, .panel-heading > time { color: var(--blue); font-size: 11px; font-weight: 800; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card { min-height: 172px; display: flex; flex-direction: column; padding: 21px; border-radius: 21px; transition: transform .2s ease; }
.stat-card:hover { transform: translateY(-3px); }
.stat-card > span { font-size: 11px; font-weight: 800; }
.stat-card strong { margin: auto 0 2px; font-size: 55px; line-height: 1; letter-spacing: -.07em; }
.stat-card small { font-size: 11px; opacity: .95; }
.stat-card.cobalt { background: var(--blue); color: #fff; }
.stat-card.mint { background: var(--mint); }
.stat-card.coral { background: var(--coral); }
.stat-card.sky { background: var(--sky); }

.dashboard-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; }
.span-2 { grid-column: span 2; }

.mini-row, .contact-row, .task-row, .calendar-row, .brief-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}
.panel-heading + .mini-row, .panel-heading + .agenda-row, .panel-heading + .brief-row { border-top: 0; }
.mini-row > div, .contact-row > div:nth-child(2), .task-row > div:nth-child(2), .calendar-row > div:nth-child(2), .brief-row > span { min-width: 0; flex: 1; }
.mini-row strong, .mini-row small, .contact-row strong, .contact-row small, .task-row strong, .task-row small, .calendar-row strong, .calendar-row small { display: block; }
.mini-row strong, .contact-row strong, .task-row strong, .calendar-row strong, .brief-row strong { font-size: 13px; }
.mini-row small, .contact-row small, .task-row small, .calendar-row small, .brief-row span { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 38px; height: 38px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 12px; background: var(--sky); color: var(--blue-deep); font-size: 13px; font-weight: 900; }

.agenda-row { display: grid; grid-template-columns: 68px 1fr; padding: 13px 0; border-top: 1px solid var(--line); }
.agenda-row time { color: var(--blue); font-size: 11px; font-weight: 850; }
.agenda-row strong, .agenda-row small { display: block; }
.agenda-row strong { font-size: 12px; }
.agenda-row small { color: var(--muted); font-size: 10px; }

.status { display: inline-flex; padding: 5px 8px; border-radius: 999px; background: #ececf0; color: #555860; font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.status-new { background: #e4e7ff; color: #3040c7; }
.status-contacted { background: #dff3ff; color: #176181; }
.status-qualified { background: #e5ffd1; color: #356310; }
.status-won { background: var(--mint); color: #203c0a; }
.status-lost { background: #ececf0; color: #686a70; }

.empty-state { min-height: 170px; display: grid; place-content: center; padding: 30px; text-align: center; }
.empty-state > span { color: var(--blue); font-size: 24px; }
.empty-state h3 { margin: 8px 0 3px; font-size: 17px; }
.empty-state p { max-width: 380px; margin: 0; color: var(--muted); font-size: 11px; }

/* Forms */
.admin-form { display: grid; gap: 16px; }
.admin-form.two-column { grid-template-columns: 1fr 1fr; }
.admin-form .full { grid-column: 1 / -1; }
.admin-form label { display: grid; gap: 7px; color: #414349; font-size: 10px; font-weight: 800; }
.admin-form input, .admin-form select, .admin-form textarea, .search-bar input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: none;
  background: #fff;
  color: var(--ink);
}
.admin-form input, .admin-form select { height: 45px; padding: 0 12px; }
.admin-form textarea { min-height: 90px; padding: 12px; resize: vertical; }
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus, .search-bar input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(70,86,255,.75); }
.password-hint { margin: -6px 0 0; color: var(--muted); font-size: 10px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.form-panel { max-width: 900px; }

.search-bar { display: flex; gap: 9px; margin-bottom: 17px; }
.search-bar input { height: 48px; padding: 0 15px; }
.search-bar button { padding: 0 20px; border: 0; border-radius: 11px; background: var(--ink); color: #fff; cursor: pointer; font-size: 11px; font-weight: 800; }
.filter-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.filter-pill { padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 10px; font-weight: 800; }
.filter-pill.active { border-color: var(--ink); background: var(--ink); color: #fff; }
.result-limit-note { margin: -7px 0 18px; color: var(--muted); font-size: 11px; }

/* Leads */
.lead-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.lead-card { min-height: 300px; display: flex; flex-direction: column; padding: 21px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); transition: transform .2s ease, box-shadow .2s ease; }
.lead-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.lead-card-top { display: flex; justify-content: space-between; }
.lead-card h3 { margin: 30px 0 2px; font-size: 26px; letter-spacing: -.055em; }
.lead-card > p { margin: 0; color: var(--muted); font-size: 11px; }
.lead-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: auto 0 22px; }
.lead-card dl div { padding: 10px; border-radius: 10px; background: #f3f2ee; }
.lead-card dt { color: var(--muted); font-size: 8px; font-weight: 850; text-transform: uppercase; }
.lead-card dd { margin: 3px 0 0; font-size: 10px; font-weight: 800; }
.card-link { color: var(--blue); font-size: 11px; font-weight: 850; }
.detail-back { margin-bottom: 24px; color: var(--muted); font-size: 11px; font-weight: 800; }
.lead-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 33px; }
.lead-hero p:last-child { margin: 10px 0 0; color: var(--muted); }
.detail-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; }
blockquote { margin: 30px 0; padding: 0 0 0 22px; border-left: 4px solid var(--mint); font-size: 20px; line-height: 1.55; white-space: pre-wrap; }
.contact-strip { display: flex; flex-wrap: wrap; gap: 9px; }
.contact-strip > * { padding: 8px 11px; border-radius: 999px; background: #efeee9; font-size: 10px; font-weight: 800; }
.note-row { padding: 15px 0; border-top: 1px solid var(--line); }
.note-row p { margin: 0 0 6px; font-size: 13px; white-space: pre-wrap; }
.note-row time { color: var(--muted); font-size: 9px; }

/* Contacts, tasks, calendar */
.contact-list { padding-top: 5px; }
.contact-methods { display: flex; align-items: flex-end; flex-direction: column; gap: 3px; }
.contact-methods a { color: var(--blue); font-size: 10px; font-weight: 700; }
.split-workspace { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); align-items: start; gap: 20px; }
.sticky-panel { position: sticky; top: 20px; }
.task-row > form { flex: 0 0 auto; }
.task-check { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; color: var(--ink); font-weight: 900; }
.task-row.done { opacity: .48; }
.task-row.done strong { text-decoration: line-through; }
.task-row.done .task-check { border-color: var(--mint); background: var(--mint); }
.task-meta { display: flex; align-items: flex-end; flex-direction: column; gap: 3px; }
.task-meta time { color: var(--muted); font-size: 9px; white-space: nowrap; }
.priority { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #b9bbc2; }
.priority-high { background: var(--coral); }
.priority-low { background: var(--sky); }
.priority-label { font-size: 10px; font-weight: 900; text-transform: uppercase; }
.calendar-row { align-items: flex-start; }
.calendar-date { width: 52px; height: 58px; display: grid; flex: 0 0 auto; place-content: center; border-radius: 13px; background: var(--blue); color: #fff; text-align: center; }
.calendar-date strong { font-size: 22px; line-height: 1; }
.calendar-date span { font-size: 8px; font-weight: 850; text-transform: uppercase; }
.calendar-row p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.source-pill { margin-left: auto; padding: 5px 8px; border-radius: 999px; background: #eeeef2; font-size: 8px; font-weight: 850; text-transform: uppercase; }

/* Assistant and settings */
.brief-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.brief-panel { min-height: 280px; }
.brief-row { position: relative; display: grid; grid-template-columns: 1fr auto 18px; }
.brief-row > i { color: var(--blue); font-style: normal; }
.memory-panel { max-width: 100%; }
.note-capture { grid-template-columns: 1fr auto; align-items: end; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.note-capture textarea { grid-row: span 2; }
.checkbox { display: flex !important; grid-auto-flow: column; align-items: center; justify-content: start; }
.checkbox input { width: 16px; height: 16px; }
.settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.connection-card { min-height: 400px; display: flex; flex-direction: column; }
.connection-card.connected { background: var(--ink); color: #fff; }
.connection-top { display: flex; align-items: center; justify-content: space-between; }
.connection-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--blue); color: #fff; font-size: 19px; font-weight: 900; }
.connection-icon.google { background: var(--paper); color: var(--blue); box-shadow: inset 0 0 0 1px var(--line); }
.connection-icon.ai { background: var(--mint); color: var(--ink); }
.connection-state { padding: 5px 8px; border-radius: 999px; background: var(--mint); color: var(--ink); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.connection-state.waiting { background: #ececf0; color: #686a70; }
.connection-card h2 { margin: 38px 0 12px; font-size: 25px; letter-spacing: -.05em; }
.connection-card p { color: var(--muted); font-size: 12px; line-height: 1.65; }
.connection-card.connected p, .connection-card.connected dt { color: rgba(255,255,255,.52); }
.connection-card dl { margin: auto 0 0; }
.connection-card dl div { display: flex; justify-content: space-between; gap: 15px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.12); }
.connection-card dt { font-size: 9px; }
.connection-card dd { margin: 0; font-size: 10px; font-weight: 800; text-align: right; }
.connection-card ul { margin: auto 0 0; padding: 0; list-style: none; }
.connection-card li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 10px; font-weight: 750; }
.connection-card li::before { content: '→'; margin-right: 8px; color: var(--blue); }
.connection-foot { margin-top: 18px; color: var(--muted); font-size: 8px; overflow-wrap: anywhere; }

@media (max-width: 1180px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lead-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-grid { grid-template-columns: 1fr; }
  .connection-card { min-height: 320px; }
}

@media (max-width: 900px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-brand { min-height: 52vh; padding: 38px 28px; }
  .auth-panel { padding: 24px; }
  .admin-sidebar { visibility: hidden; transform: translateX(-100%); transition: transform .2s ease, visibility .2s; }
  .sidebar-open .admin-sidebar { visibility: visible; transform: translateX(0); box-shadow: 30px 0 80px rgba(0,0,0,.28); }
  .admin-main { margin-left: 0; }
  .sidebar-toggle { display: block; }
  .admin-topbar { padding-inline: 20px; }
  .admin-topbar > div:first-of-type { display: none; }
  .admin-content { padding: 35px 20px 70px; }
  .split-workspace { grid-template-columns: 1fr; }
  .sticky-panel { position: static; }
}

@media (max-width: 680px) {
  .auth-brand h1 { font-size: 52px; }
  .auth-card { padding: 30px 23px; }
  .admin-page-heading { align-items: flex-start; flex-direction: column; gap: 20px; }
  .admin-page-heading h1, .lead-hero h1 { font-size: 47px; }
  .stat-grid, .dashboard-grid, .lead-grid, .detail-grid, .brief-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .stat-card { min-height: 145px; }
  .stat-card strong { font-size: 46px; }
  .admin-form.two-column, .note-capture { grid-template-columns: 1fr; }
  .admin-form .full { grid-column: auto; }
  .note-capture textarea { grid-row: auto; }
  .lead-hero { align-items: flex-start; flex-direction: column; }
  .contact-row, .task-row { align-items: flex-start; flex-wrap: wrap; }
  .contact-methods { flex-basis: 100%; align-items: flex-start; margin-left: 51px; }
  .contact-methods a { overflow-wrap: anywhere; }
  .task-meta { flex-basis: 100%; align-items: flex-start; margin-left: 41px; }
  .calendar-row { flex-wrap: wrap; }
  .source-pill { margin-left: 65px; }
  .topbar-user div { display: none; }
  .panel { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}