:root {
  --ink: #15182b;
  --muted: #6f748d;
  --soft: #969ab0;
  --line: #e7e8f0;
  --surface: #ffffff;
  --canvas: #f6f7fb;
  --navy: #071a3a;
  --navy-2: #0b234f;
  --purple: #155eef;
  --purple-2: #2f7cf6;
  --cyan: #31b5e8;
  --mint: #28c89a;
  --coral: #ff7d66;
  --amber: #ffb84d;
  --shadow: 0 12px 34px rgba(31, 37, 68, .08);
  --shadow-lg: 0 28px 70px rgba(18, 23, 50, .18);
  --radius: 18px;
  font-family: 'DM Sans', Arial, sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--canvas); font-size: 14px; line-height: 1.45; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }

.login-view {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(430px, .88fr);
  background: var(--navy);
  overflow: hidden;
  position: relative;
}

.login-visual {
  min-height: 100vh;
  padding: clamp(28px, 4vh, 42px) clamp(32px, 5vw, 78px);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}

.login-visual::before {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 50%;
  left: -180px;
  top: 20%;
  box-shadow: 0 0 0 80px rgba(255,255,255,.015), 0 0 0 160px rgba(255,255,255,.01);
  z-index: -1;
}

.login-ambient { position: absolute; border-radius: 50%; filter: blur(110px); pointer-events: none; opacity: .35; }
.login-ambient-one { width: 360px; height: 360px; background: #155eef; top: -100px; left: 28%; }
.login-ambient-two { width: 280px; height: 280px; background: #31b5e8; bottom: -100px; left: 43%; }

.brand { display: inline-flex; align-items: center; gap: 12px; font: 800 21px/1 'Manrope', sans-serif; letter-spacing: -.04em; }
.brand-light { color: #fff; }
.brand-logo { width: 156px; height: 64px; display: block; object-fit: contain; border-radius: 7px; }
.login-visual > .brand { width: fit-content; padding: 8px; border-radius: 16px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 50px rgba(0,0,0,.12); }
.login-visual .brand-logo { width: 82px; height: 82px; border-radius: 11px; }
.mobile-brand .brand-logo { width: 70px; height: 70px; border-radius: 12px; }
.brand-compact-mark { display: none !important; }
.brand-mark { width: 29px; height: 26px; position: relative; display: inline-flex; align-items: end; gap: 3px; transform: skewY(-14deg); }
.brand-mark span { width: 7px; border-radius: 2px; background: var(--purple-2); box-shadow: 0 0 14px rgba(47,124,246,.5); }
.brand-mark span:nth-child(1) { height: 12px; background: var(--cyan); }
.brand-mark span:nth-child(2) { height: 20px; }
.brand-mark span:nth-child(3) { height: 26px; background: #fff; }

.login-copy { margin-top: clamp(62px, 12vh, 126px); width: min(100%, 650px); color: #fff; position: relative; z-index: 2; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 11px/1 'Manrope', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow i { width: 24px; height: 1px; background: currentColor; }
.eyebrow-light { color: #a9b0d4; }
.login-copy h1 { max-width: 100%; font: 700 clamp(42px, 4.5vw, 68px)/1.04 'Manrope', sans-serif; letter-spacing: -.055em; margin: 26px 0 24px; overflow-wrap: anywhere; }
.login-copy h1 span { color: #8fc2ff; }
.typing-line { min-height: 1.08em; display: inline-flex; align-items: center; white-space: nowrap; }
.typing-caret { width: 3px; height: .82em; margin-left: 7px; display: inline-block; border-radius: 4px; background: #8fc2ff; animation: typingBlink .8s steps(1,end) infinite; }
@keyframes typingBlink { 0%,45% { opacity: 1; } 46%,100% { opacity: 0; } }
.login-copy > p { color: #adb3ce; font-size: 18px; line-height: 1.7; max-width: 560px; margin: 0; }
.trust-row { display: flex; align-items: center; gap: 15px; margin-top: 34px; }
.trust-row p { color: #8d93ae; font-size: 13px; margin: 0; }
.trust-row strong { color: #fff; }
.trust-avatars { display: flex; }
.trust-avatars span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: #252b49; color: #dce0ff; font-size: 9px; font-weight: 700; border: 2px solid var(--navy); margin-left: -7px; }
.trust-avatars span:first-child { margin-left: 0; background: var(--purple); }
.trust-avatars span:nth-child(2) { background: #238a78; }
.trust-avatars span:nth-child(3) { background: #b85d54; }

.login-art { position: absolute; width: min(720px, 64vw); max-width: none; right: -17%; bottom: -7%; z-index: 1; mix-blend-mode: screen; opacity: .68; animation: artFloat 7s ease-in-out infinite; mask-image: linear-gradient(90deg, transparent 0, #000 25%, #000 100%); }
@keyframes artFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }

.login-panel { background: #fbfbfd; min-height: 100vh; border-radius: 34px 0 0 34px; display: grid; place-items: center; padding: 40px; position: relative; z-index: 3; box-shadow: -20px 0 60px rgba(0,0,0,.18); overflow-y: auto; }
.login-box { width: min(420px, 100%); }
.mobile-brand { display: none; }
.step-label { color: var(--purple); font: 800 10px/1 'Manrope', sans-serif; letter-spacing: .15em; }
.login-box h2 { font: 700 33px/1.15 'Manrope', sans-serif; letter-spacing: -.045em; margin: 13px 0 9px; }
.login-helper { color: var(--muted); margin: 0 0 27px; line-height: 1.5; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; margin-bottom: 22px; border-radius: 13px; background: #eceff6; }
.auth-tab { height: 39px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; }
.auth-tab.active { background: #fff; color: var(--purple); box-shadow: 0 4px 14px rgba(31,37,68,.09); }
.auth-form { animation: authIn .22s ease; }
@keyframes authIn { from { opacity: 0; transform: translateY(5px); } }
.signup-success { padding: 20px; border: 1px solid #cceee3; border-radius: 14px; background: #eefbf7; color: #176b55; }
.signup-success strong { display: block; font: 700 17px/1.2 'Manrope', sans-serif; }
.signup-success p { margin: 8px 0 16px; color: #46796b; font-size: 12px; line-height: 1.55; }
.role-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 25px; }
.role-card { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; display: grid; grid-template-columns: 34px 1fr 14px; align-items: center; gap: 9px; text-align: left; padding: 13px; color: var(--ink); transition: .2s ease; }
.role-card:hover { transform: translateY(-2px); border-color: #cfc9fa; }
.role-card.active { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(21,94,239,.1); background: #f7faff; }
.role-card .role-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--ink); }
.role-card:nth-child(2) .role-icon { background: #2878e8; }
.role-card strong, .role-card small { display: block; }
.role-card strong { font-size: 13px; }
.role-card small { color: var(--muted); font-size: 10px; margin-top: 3px; white-space: nowrap; }
.role-card i { width: 12px; height: 12px; border: 1px solid #c9cad5; border-radius: 50%; position: relative; }
.role-card.active i::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--purple); }
.field-label { display: block; font-size: 12px; font-weight: 700; margin: 16px 0 7px; }
.field-label-row { display: flex; justify-content: space-between; align-items: center; }
.field-label a { font-weight: 600; color: var(--purple); }
.input-wrap { display: flex; align-items: center; height: 49px; background: #fff; border: 1px solid var(--line); border-radius: 12px; transition: .2s; }
.input-wrap:focus-within { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(21,94,239,.1); }
.input-wrap input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); padding: 0 8px; }
.input-icon { color: #9a9db1; padding-left: 15px; font-weight: 700; font-size: 12px; }
.icon-button { border: 0; background: transparent; color: #8b8fa5; padding: 12px 14px; }
.primary-button { min-height: 46px; border: 0; border-radius: 12px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; padding: 0 19px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 9px 20px rgba(21,24,43,.16); transition: .2s ease; }
.primary-button:hover { background: #262b4d; transform: translateY(-1px); }
.primary-button:active { transform: translateY(0); }
.login-button { width: 100%; height: 53px; margin-top: 24px; justify-content: space-between; padding: 0 20px; background: var(--purple); box-shadow: 0 12px 30px rgba(21,94,239,.28); }
.login-button:hover { background: #0b4fd1; }
.login-button b { font-size: 20px; }
.login-note { text-align: center; font-size: 11px; color: var(--muted); margin-top: 18px; }
.login-note span { color: var(--mint); }
.login-disclosure { margin: 13px 0 0; padding: 12px 13px; border: 1px solid #dfe5f1; border-radius: 10px; background: #f7f9fd; color: #5d6578; font-size: 11.5px; line-height: 1.55; }
.login-links { margin-top: 13px; display: flex; align-items: center; justify-content: center; gap: 14px; color: #536079; font-size: 11.5px; font-weight: 700; }
.login-links a { text-decoration: underline; text-underline-offset: 3px; }
.form-error { min-height: 18px; color: #d94a52; font-size: 12px; text-align: center; }

.app-view { min-height: 100vh; display: flex; }
.sidebar { width: 254px; position: fixed; inset: 0 auto 0 0; background: var(--navy); color: #b9bfd5; z-index: 20; display: flex; flex-direction: column; transition: width .25s ease, transform .25s ease; }
.sidebar-head { min-height: 82px; padding: 8px 16px 8px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; }
.sidebar-head .brand { min-width: 0; }
.sidebar-head .brand-logo { width: 64px; height: 64px; border-radius: 10px; transition: width .25s ease,height .25s ease,transform .25s ease; }
.sidebar-collapse { width: 27px; height: 27px; background: #181d32; color: #8e94aa; border: 1px solid #282e47; border-radius: 8px; }
.workspace-switcher { margin: 7px 14px 12px; padding: 11px; background: #13182b; border: 1px solid #242a43; border-radius: 13px; display: grid; grid-template-columns: 35px 1fr 16px; align-items: center; gap: 9px; }
.workspace-avatar { width: 35px; height: 35px; display: grid; place-items: center; background: #0e3472; color: #d6e8ff; font-size: 10px; font-weight: 800; border-radius: 10px; }
.workspace-meta strong, .workspace-meta small { display: block; }
.workspace-meta strong { color: #f3f4fb; font-size: 13px; }
.workspace-meta small { color: #8b93af; font-size: 10.5px; margin-top: 3px; }
.workspace-chev { color: #68708d; }
.main-nav { flex: 1; overflow-y: auto; padding: 0 13px; scrollbar-width: none; }
.main-nav p { font: 700 10px/1 'Manrope', sans-serif; letter-spacing: .13em; color: #69728f; margin: 23px 11px 9px; }
.nav-item { width: 100%; height: 44px; color: #aab1ca; border: 0; background: transparent; border-radius: 10px; display: flex; align-items: center; gap: 12px; padding: 0 12px; text-align: left; margin: 2px 0; transition: .18s ease; position: relative; }
.nav-item:hover { color: #e6e8f5; background: #151a2e; }
.nav-item.active { color: #fff; background: #1b2037; box-shadow: inset 3px 0 0 var(--purple-2); }
.nav-item.active::after { content: ''; position: absolute; right: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.nav-icon { width: 20px; text-align: center; color: #7e86a4; font-size: 16px; }
.nav-item.active .nav-icon { color: #8fc2ff; }
.nav-item > span:nth-child(2) { font-size: 14px; font-weight: 600; flex: 1; }
.nav-item b { font-size: 10px; color: #8e96b2; background: #272d47; padding: 3px 7px; border-radius: 12px; }
.nav-item em { font-style: normal; font-size: 9px; color: #0f1528; background: var(--cyan); padding: 3px 6px; border-radius: 5px; font-weight: 800; }
.sidebar-footer { padding: 10px 14px 16px; }
.profile-button { width: 100%; border: 0; background: transparent; color: #e9eaf3; display: grid; grid-template-columns: 34px 1fr 20px; gap: 9px; align-items: center; text-align: left; padding: 7px; border-radius: 10px; }
.profile-button:hover { background: #151a2e; }
.avatar { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--purple); color: #fff; font-size: 10px; font-weight: 800; }
.profile-button strong, .profile-button small { display: block; }
.profile-button strong { font-size: 13px; }
.profile-button small { color: #8d95b0; font-size: 10.5px; margin-top: 2px; }
.profile-button b { font-size: 12px; color: #747d99; }

.main-shell { min-height: 100vh; margin-left: 254px; width: calc(100% - 254px); transition: .25s ease; }
.topbar { height: 72px; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); padding: 0 31px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 15; }
.topbar-search { width: min(420px, 43vw); height: 39px; display: flex; align-items: center; background: #f5f6fa; border: 1px solid #ececf2; border-radius: 10px; padding: 0 11px; color: #8e92a8; }
.topbar-search input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; padding: 0 9px; font-size: 13.5px; color: var(--ink); }
.topbar-search kbd { font-size: 10px; padding: 3px 6px; border: 1px solid #dddfe8; border-radius: 5px; background: #fff; color: #8f94aa; }
.topbar-actions { display: flex; align-items: center; gap: 8px; position: relative; }
.icon-action { width: 37px; height: 37px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #6c7188; position: relative; }
.notification-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notification-button[aria-expanded="true"] { border-color: #b9d2ff; color: var(--purple); background: #f4f8ff; }
.notification-badge { position: absolute; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 9px; right: -6px; top: -7px; background: var(--coral); color: #fff; border: 2px solid #fff; font-size: 9.5px; font-weight: 800; }
.notification-panel { position: absolute; width: min(390px, calc(100vw - 32px)); right: 0; top: 49px; z-index: 50; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); }
.notification-head { min-height: 60px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.notification-head h3 { margin: 0; font: 700 17px/1.2 'Manrope', sans-serif; }
.notification-head > div { display: flex; align-items: center; gap: 8px; }
.notification-head button { border: 0; background: transparent; color: var(--purple); font-size: 12px; font-weight: 700; }
.notification-head #clear-all-notifications { color: #c44935; }
.notification-head button:disabled { opacity: .4; cursor: not-allowed; }
.notification-list { max-height: min(520px, calc(100vh - 150px)); overflow-y: auto; }
.notification-item { width: 100%; border: 0; border-bottom: 1px solid #f0f1f5; background: #fff; padding: 13px 15px; display: grid; grid-template-columns: 36px 1fr 7px; gap: 10px; align-items: start; text-align: left; color: var(--ink); }
.notification-item:hover { background: #f8faff; }
.notification-item.unread { background: #f4f8ff; }
.notification-symbol { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: var(--purple); background: #eaf2ff; font-size: 15px; }
.notification-copy strong, .notification-copy span, .notification-copy small { display: block; }
.notification-copy strong { font-size: 13px; }
.notification-copy span { margin-top: 4px; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.notification-copy small { margin-top: 5px; color: var(--soft); font-size: 10px; }
.notification-unread { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--purple); }
.notification-empty { padding: 36px 20px; text-align: center; color: var(--muted); }
.notification-empty strong { display: block; color: var(--ink); font-size: 14px; margin-bottom: 5px; }
.notification-empty span { font-size: 11.5px; }
.primary-button.compact { min-height: 40px; font-size: 12.5px; border-radius: 10px; }
.danger-button { min-height: 42px; padding: 0 15px; border: 1px solid #f0b8ad; border-radius: 10px; background: #fff4f1; color: #b63d2d; font-weight: 800; }
.mobile-menu { display: none; }
.page-root { padding: 30px 32px 50px; max-width: 1600px; margin: 0 auto; }

.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.page-title .eyebrow { color: var(--purple); margin-bottom: 10px; }
.page-title h1 { margin: 0; font: 700 31px/1.15 'Manrope', sans-serif; letter-spacing: -.045em; }
.page-title p { margin: 7px 0 0; color: var(--muted); font-size: 14px; }
.page-actions { display: flex; gap: 9px; align-items: center; }
.secondary-button { min-height: 44px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 0 16px; color: #52576e; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: .18s; }
.secondary-button:hover { border-color: #cacce0; transform: translateY(-1px); }
.filter-select { height: 44px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 10px; padding: 0 34px 0 13px; font-size: 13px; font-weight: 600; outline: 0; }
.field-help { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.45; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; min-width: 0; position: relative; overflow: hidden; transition: transform .24s ease, box-shadow .24s ease; }
.metric-card:hover { transform: translateY(-3px) perspective(700px) rotateX(1.4deg); box-shadow: var(--shadow); }
.metric-card::after { content: ''; position: absolute; width: 70px; height: 70px; border-radius: 50%; right: -28px; top: -30px; background: var(--metric-soft, #f2efff); }
.metric-label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 600; }
.metric-label i { width: 7px; height: 7px; border-radius: 2px; background: var(--metric-color, var(--purple)); transform: rotate(45deg); }
.metric-main { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: 14px; }
.metric-main strong { font: 700 31px/1 'Manrope', sans-serif; letter-spacing: -.045em; }
.metric-change { color: var(--mint); background: #edfbf7; font-size: 11px; font-weight: 800; border-radius: 7px; padding: 4px 6px; }
.metric-change.down { color: var(--coral); background: #fff2ef; }
.metric-live { color: #687089; background: #f1f3f7; font-size: 9px; font-weight: 800; letter-spacing: .06em; border-radius: 7px; padding: 5px 7px; }
.metric-sub { margin-top: 8px; font-size: 11.5px; color: var(--soft); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(270px, .78fr); gap: 17px; margin-bottom: 18px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 3px 15px rgba(22,27,56,.025); }
.panel-head { min-height: 62px; padding: 15px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.panel-title h2 { font: 700 17px/1.2 'Manrope', sans-serif; margin: 0; letter-spacing: -.02em; }
.panel-title p { margin: 4px 0 0; color: var(--soft); font-size: 11.5px; }

.calendar-board { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); gap: 17px; align-items: stretch; margin-bottom: 18px; }
.calendar-panel, .agenda-panel { min-width: 0; overflow: hidden; }
.calendar-head { min-height: 56px; padding: 10px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.calendar-controls { display: flex; align-items: center; gap: 7px; }
.calendar-controls strong { min-width: 118px; text-align: center; font: 700 13px/1.2 'Manrope', sans-serif; }
.calendar-nav, .calendar-today { height: 35px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: #555b72; font-size: 13px; font-weight: 700; }
.calendar-nav { width: 35px; padding: 0; font-size: 19px; line-height: 1; }
.calendar-today { padding: 0 11px; color: var(--purple); background: #f6f9ff; border-color: #dce8ff; }
.calendar-nav:hover, .calendar-today:hover { border-color: #aac7ff; color: var(--purple); }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; padding: 9px 14px 3px; }
.calendar-weekdays span { color: #858aa0; font-size: 10px; font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: .05em; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 5px 14px 10px; }
.calendar-day { min-width: 0; min-height: 42px; padding: 6px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #3f455c; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; font-size: 12px; font-weight: 700; transition: .16s ease; }
.calendar-day:hover { border-color: #c8d9fb; background: #f7faff; }
.calendar-day.outside { color: #b5b8c7; opacity: .58; }
.calendar-day.today { border-color: #a9c5fb; box-shadow: inset 0 0 0 1px #a9c5fb; }
.calendar-day.selected { border-color: var(--purple); background: var(--purple); color: #fff; box-shadow: 0 7px 16px rgba(21,94,239,.24); }
.calendar-day-events { min-height: 9px; display: flex; align-items: center; gap: 3px; }
.calendar-day-events b { font-size: 8px; color: inherit; }
.calendar-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; display: inline-block; background: #8d92a6; }
.calendar-dot.draft { background: #8d92a6; }
.calendar-dot.scheduled { background: #155eef; }
.calendar-dot.sending { background: #31b5e8; }
.calendar-dot.sent { background: #28c89a; }
.calendar-dot.paused { background: #ffb84d; }
.calendar-day.selected .calendar-dot { border: 1px solid rgba(255,255,255,.78); }
.calendar-legend { min-height: 38px; padding: 8px 14px; border-top: 1px solid #f0f1f5; display: flex; align-items: center; flex-wrap: wrap; gap: 7px 12px; color: var(--muted); font-size: 10.5px; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 5px; }
.calendar-legend b { margin-left: auto; color: var(--ink); font-size: 11px; }
.agenda-head { min-height: 56px; }
.agenda-list { max-height: 312px; min-height: 230px; padding: 10px; overflow-y: auto; display: grid; align-content: start; gap: 8px; }
.agenda-item { width: 100%; min-width: 0; border: 1px solid #e9eaf1; border-radius: 13px; background: #fff; padding: 13px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; color: var(--ink); text-align: left; transition: .17s ease; }
.agenda-item:hover { border-color: #bcd1fb; background: #f8faff; transform: translateY(-1px); }
.agenda-marker { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #f0f1f5; color: #686d82; font-size: 13px; font-weight: 800; }
.agenda-marker.scheduled { color: #155eef; background: #edf5ff; }
.agenda-marker.sending { color: #147c9c; background: #e9fafd; }
.agenda-marker.sent { color: #198c6b; background: #edfaf6; }
.agenda-marker.paused { color: #a66a0e; background: #fff7e8; }
.agenda-copy { min-width: 0; }
.agenda-copy strong, .agenda-copy small { display: block; }
.agenda-copy strong { overflow: hidden; color: var(--ink); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.agenda-copy small { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 10.5px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.agenda-empty { min-height: 208px; padding: 28px 22px; display: grid; place-items: center; align-content: center; text-align: center; color: var(--muted); }
.agenda-empty > span { width: 48px; height: 48px; margin-bottom: 12px; border-radius: 15px; display: grid; place-items: center; background: #edf5ff; color: var(--purple); font-size: 25px; }
.agenda-empty h3 { margin: 0; color: var(--ink); font: 700 16px/1.2 'Manrope', sans-serif; }
.agenda-empty p { margin: 7px 0 0; font-size: 12px; }
.campaign-date strong, .campaign-date small { display: block; white-space: nowrap; }
.campaign-date strong { color: var(--ink); font-size: 12px; }
.campaign-date small { margin-top: 3px; color: var(--soft); font-size: 10px; }
.legend { display: flex; align-items: center; gap: 13px; font-size: 11px; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); }
.legend span:nth-child(2) i { background: var(--cyan); }
.chart-body { height: 272px; padding: 18px 18px 8px; }
.line-chart { width: 100%; height: 100%; overflow: visible; }
.chart-grid { stroke: #edeef4; stroke-width: 1; }
.chart-label { fill: #8e93a9; font-size: 10px; }
.chart-empty-state { height: 100%; display: grid; place-items: center; align-content: center; padding: 24px; text-align: center; color: var(--muted); }
.chart-empty-state > span { width: 48px; height: 48px; margin-bottom: 12px; display: grid; place-items: center; border-radius: 15px; background: #edf5ff; color: var(--purple); font-size: 25px; }
.chart-empty-state strong { color: var(--ink); font: 700 16px/1.2 'Manrope', sans-serif; }
.chart-empty-state p { max-width: 360px; margin: 7px 0 0; font-size: 12px; line-height: 1.5; }
.chart-line-open { fill: none; stroke: var(--purple); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 4px 5px rgba(21,94,239,.22)); }
.chart-line-click { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-area { fill: url(#areaFill); }
.chart-dot { fill: #fff; stroke: var(--purple); stroke-width: 2; }

.delivery-card { min-height: 334px; padding: 21px; background: linear-gradient(150deg, #f7faff, #edf5ff); border-color: #d8e7ff; overflow: hidden; position: relative; }
.delivery-card::after { content: ''; position: absolute; width: 180px; height: 180px; border-radius: 50%; right: -75px; top: -80px; background: rgba(21,94,239,.12); }
.delivery-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; z-index: 1; }
.delivery-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: #155eef; color: #fff; box-shadow: 0 9px 22px rgba(21,94,239,.24); font-size: 18px; }
.delivery-card h2 { margin: 18px 0 8px; color: var(--ink); font: 700 21px/1.2 'Manrope', sans-serif; letter-spacing: -.04em; }
.delivery-card > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.delivery-facts { margin-top: 17px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.delivery-facts div { padding: 10px; border: 1px solid rgba(21,94,239,.11); border-radius: 10px; background: rgba(255,255,255,.72); }
.delivery-facts span, .delivery-facts strong { display: block; }
.delivery-facts span { color: var(--soft); font-size: 9.5px; }
.delivery-facts strong { margin-top: 3px; color: var(--ink); font-size: 14px; }
.delivery-action { margin-top: 13px; padding: 0; border: 0; background: transparent; color: var(--purple); font-size: 12px; font-weight: 800; }

.campaign-list-panel { overflow: hidden; }
.table-pagination { min-height: 62px; padding: 12px 17px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 11.5px; }
.table-pagination > div { display: flex; gap: 8px; }
.table-pagination button:disabled { opacity: .45; cursor: not-allowed; }
.panel-link { border: 0; background: transparent; color: var(--purple); font-size: 12.5px; font-weight: 700; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; color: #7e8399; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; padding: 14px 17px; background: #fafafd; border-bottom: 1px solid var(--line); }
.data-table td { padding: 16px 17px; border-bottom: 1px solid #f0f1f5; font-size: 13px; color: #4f546a; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background .16s; }
.data-table tbody tr:hover { background: #fafaff; }
.campaign-name { display: flex; align-items: center; gap: 11px; }
.campaign-icon { width: 34px; height: 34px; border-radius: 10px; background: #edf5ff; color: var(--purple); display: grid; place-items: center; font-size: 14px; }
.campaign-name strong, .campaign-name small { display: block; }
.campaign-name strong { color: var(--ink); font-size: 13.5px; cursor: pointer; }
.campaign-name strong:hover { color: var(--purple); }
.campaign-name small { color: var(--soft); font-size: 10.5px; margin-top: 3px; }
.status { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 7px; font-size: 10.5px; font-weight: 800; text-transform: capitalize; }
.status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status.sent { background: #edfaf6; color: #198c6b; }
.status.failed { background: #fff0ed; color: #c44935; }
.status.draft { background: #f0f1f5; color: #686d82; }
.status.scheduled { background: #edf5ff; color: #155eef; }
.status.sending { background: #e9fafd; color: #147c9c; }
.status.paused { background: #fff7e8; color: #a66a0e; }
.status.draft { background: #f2f3f6; color: #7d8194; }
.owner-chip { display: flex; align-items: center; gap: 7px; }
.mini-avatar { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 9px; font-weight: 800; }
.rate-cell strong { display: block; font-size: 13px; color: var(--ink); }
.rate-cell small { color: var(--soft); font-size: 10.5px; }
.row-action { width: 28px; height: 28px; border: 1px solid var(--line); background: #fff; border-radius: 8px; color: #73788f; }
.row-actions { display: flex; justify-content: flex-end; gap: 5px; white-space: nowrap; }
.delete-campaign { color: #bd4635; background: #fff7f5; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.toolbar-group { display: flex; gap: 8px; align-items: center; }
.search-field { height: 44px; width: min(320px, 36vw); display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; color: var(--soft); }
.search-field input { border: 0; outline: 0; flex: 1; min-width: 0; font-size: 13px; color: var(--ink); }
.segmented { display: inline-flex; background: #eceef4; padding: 3px; border-radius: 10px; }
.segmented button { height: 36px; border: 0; background: transparent; color: #73788f; padding: 0 14px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.segmented button.active { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(28,33,64,.08); }

.list-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.list-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; transition: .22s ease; position: relative; overflow: hidden; }
.list-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.list-card::after { content: ''; position: absolute; width: 80px; height: 80px; border: 14px solid var(--list-color); opacity: .06; border-radius: 50%; right: -28px; bottom: -35px; }
.list-card-head { display: flex; justify-content: space-between; align-items: flex-start; }
.list-symbol { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--list-color); box-shadow: 0 8px 18px color-mix(in srgb, var(--list-color) 30%, transparent); }
.more-button { border: 0; background: transparent; color: #999caf; }
.list-card h3 { font: 700 17px/1.2 'Manrope', sans-serif; letter-spacing: -.02em; margin: 15px 0 6px; }
.list-card p { color: var(--muted); font-size: 12px; line-height: 1.55; min-height: 38px; margin: 0; }
.rule-chip { display: inline-flex; max-width: 100%; margin-top: 12px; padding: 7px 9px; border-radius: 7px; color: #155eef; background: #edf5ff; font-size: 10.5px; font-weight: 700; text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-stat { display: flex; align-items: end; justify-content: space-between; margin-top: 19px; padding-top: 14px; border-top: 1px solid #f0f1f4; }
.list-stat strong { font: 700 23px/1 'Manrope', sans-serif; }
.list-stat small { display: block; color: var(--soft); font-size: 10.5px; margin-top: 4px; }
.growth-up { color: var(--mint); background: #effbf7; border-radius: 6px; padding: 5px 7px; font-size: 10.5px; font-weight: 800; }
.growth-down { color: var(--coral); background: #fff0ed; border-radius: 6px; padding: 5px 7px; font-size: 10.5px; font-weight: 800; }

.contact-table .contact-person { display: flex; align-items: center; gap: 9px; }
.contact-person strong, .contact-person small { display: block; }
.contact-person strong { color: var(--ink); font-size: 13px; }
.contact-person small { color: var(--soft); font-size: 10.5px; margin-top: 2px; }
.engagement-bar { width: 80px; height: 5px; border-radius: 6px; background: #eceef3; overflow: hidden; }
.engagement-bar span { height: 100%; display: block; border-radius: inherit; background: var(--purple); }

.template-count { color: var(--muted); font-size: 12px; font-weight: 700; }
.template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.template-card { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: .22s ease; }
.template-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.template-preview { height: 230px; padding: 0; background: #eef1f6; position: relative; overflow: hidden; }
.template-preview iframe { width: 640px; height: 720px; border: 0; background: #fff; pointer-events: none; transform: scale(.42); transform-origin: top left; }
.template-preview-badge { position: absolute; right: 10px; top: 10px; padding: 5px 7px; border-radius: 6px; color: #fff; background: rgba(8,18,42,.76); font-size: 9px; font-weight: 800; }
.template-meta { padding: 15px; }
.template-meta span { color: var(--template-color); font-size: 10.5px; font-weight: 800; text-transform: uppercase; }
.template-meta h3 { font: 700 15px/1.3 'Manrope', sans-serif; margin: 6px 0 4px; }
.template-meta p { color: var(--muted); font-size: 12px; line-height: 1.5; min-height: 36px; margin: 0 0 8px; }
.template-meta > small { color: var(--soft); font-size: 9.5px; }
.template-actions { display: grid; grid-template-columns: auto 36px 1fr; gap: 7px; margin-top: 13px; }
.template-actions button { min-width: 0; padding-left: 11px; padding-right: 11px; }
.template-empty { grid-column: 1/-1; min-height: 350px; }

.template-builder-modal { width: calc(100vw - 28px) !important; height: calc(100vh - 28px); max-height: none; }
.template-builder-modal .builder-head { min-height: 83px; }
.template-builder-modal > form { overflow: hidden; }
.builder-shell { min-height: 0; flex: 1; display: grid; grid-template-columns: 190px minmax(420px, 1fr) 365px; overflow: hidden; background: #f5f6f9; }
.builder-blocks, .builder-settings { min-height: 0; padding: 18px; background: #fff; overflow-y: auto; }
.builder-blocks { border-right: 1px solid var(--line); }
.builder-blocks > strong { font: 700 16px/1.2 'Manrope', sans-serif; }
.builder-blocks > p { margin: 4px 0 15px; color: var(--soft); font-size: 10.5px; }
.builder-blocks > button { width: 100%; margin-bottom: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 9px; background: #fff; color: var(--ink); text-align: left; }
.builder-blocks > button:hover { border-color: #aac7ff; background: #f7faff; }
.builder-blocks > button b { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--purple); background: #edf5ff; font-size: 11px; }
.builder-blocks > button span { font-size: 11.5px; font-weight: 700; }
.builder-tip { margin-top: 18px; padding: 12px; border-radius: 11px; background: #edf5ff; color: #234064; }
.builder-tip strong, .builder-tip span { display: block; }
.builder-tip strong { font-size: 11px; }
.builder-tip span { margin-top: 5px; font-size: 9.5px; line-height: 1.5; }
.builder-canvas { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.builder-canvas-bar { min-height: 48px; padding: 0 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; background: #fff; }
.builder-canvas-bar strong { font-size: 12px; }
.builder-canvas-bar span { color: var(--soft); font-size: 10px; }
.builder-email-stage { flex: 1; min-height: 0; padding: 24px; overflow: auto; display: flex; justify-content: center; align-items: flex-start; }
.builder-email-stage iframe { width: 680px; min-width: 680px; height: 900px; border: 0; background: #fff; box-shadow: 0 12px 38px rgba(20,31,55,.14); }
.builder-settings { border-left: 1px solid var(--line); }
.builder-settings .form-control { height: 42px; font-size: 12px; }
.builder-settings textarea.form-control { min-height: 105px; }
.builder-settings .color-input { padding: 5px; }
.builder-section { margin: 18px -18px 0; padding: 17px 18px 0; border-top: 1px solid var(--line); }
.builder-section h3 { margin: 0 0 12px; font: 700 13px/1.2 'Manrope', sans-serif; }
.builder-section > small, .form-group > small { display: block; margin-top: 6px; color: var(--soft); font-size: 9.5px; line-height: 1.5; }
.social-logo-preview { margin-bottom: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 9px; background: #f8faff; }
.social-logo-preview img { width: 34px; height: 34px; object-fit: contain; }
.asset-row { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.asset-row .secondary-button { height: 42px; display: inline-flex; align-items: center; cursor: pointer; }
.builder-footer { justify-content: flex-end; }
.builder-footer > span { margin-right: auto; color: var(--muted); font-size: 10.5px; }
.file-control { height: auto; padding: 10px; }
.code-editor { min-height: 320px !important; font-family: Consolas, monospace; font-size: 11px !important; }
.campaign-body-editor { min-height: 180px !important; font-family: Arial, sans-serif; }
.rich-editor { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.rich-editor:focus-within { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(21,94,239,.09); }
.rich-toolbar { min-height: 40px; padding: 5px 7px; border-bottom: 1px solid var(--line); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; background: #f8f9fc; }
.rich-toolbar button { min-width: 31px; height: 29px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #4c5367; font-size: 11px; }
.rich-toolbar button:hover { border-color: #cbd9f4; background: #fff; color: var(--purple); }
.rich-content { min-height: 155px; padding: 13px 14px; outline: 0; color: var(--ink); font: 13px/1.65 Arial, sans-serif; overflow-y: auto; }
.rich-content p { margin: 0 0 10px; }
.rich-content ul, .rich-content ol { padding-left: 22px; }

.report-hero { background: var(--navy-2); color: #fff; border: 0; overflow: hidden; position: relative; padding: 24px; margin-bottom: 17px; }
.report-hero::after { content: ''; position: absolute; width: 330px; height: 330px; border-radius: 50%; border: 50px solid rgba(21,94,239,.11); right: -110px; top: -180px; }
.report-top { display: flex; justify-content: space-between; gap: 20px; position: relative; z-index: 1; }
.report-name { display: flex; gap: 14px; }
.report-icon { width: 54px; height: 54px; border-radius: 15px; background: linear-gradient(145deg, #155eef, #31b5e8); display: grid; place-items: center; font-size: 20px; box-shadow: 0 12px 30px rgba(21,94,239,.35); }
.report-name h1 { font: 700 24px/1.2 'Manrope', sans-serif; letter-spacing: -.04em; margin: 0 0 7px; }
.report-name p { color: #aeb4ca; font-size: 12px; margin: 0; }
.report-name p span { color: #bdc2d8; }
.report-summary { display: grid; grid-template-columns: repeat(6, minmax(82px,1fr)); gap: 0; margin-top: 25px; position: relative; z-index: 1; }
.report-summary > div { padding: 0 19px; border-left: 1px solid #2a3049; }
.report-summary > div:first-child { border-left: 0; padding-left: 0; }
.report-summary small { color: #929ab7; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; display: block; }
.report-summary strong { display: block; font: 700 21px/1 'Manrope', sans-serif; margin-top: 8px; }
.report-summary em { color: #a0a7bf; font-style: normal; font-size: 10.5px; margin-top: 5px; display: block; }
.report-grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 17px; }
.email-plan-panel { padding-bottom: 22px; }
.email-usage-block { padding: 18px 22px 0; }
.email-usage-label { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 9px; color: var(--muted); font-size: 12px; }
.email-usage-label strong { color: var(--ink); font-size: 13px; }
.email-usage-meter { height: 12px; overflow: hidden; border-radius: 999px; background: #e8edf6; }
.email-usage-meter i { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: linear-gradient(90deg,#155eef,#28c89a); }
.email-usage-meter.daily i { background: linear-gradient(90deg,#8a63ef,#43cfe3); }
.email-plan-note { margin: 20px 22px 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.email-plan-action { display: flex; justify-content: flex-end; padding: 18px 20px 20px; }
.funnel-list { padding: 12px 18px 18px; }
.funnel-row { margin-top: 15px; }
.funnel-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.funnel-label strong { color: var(--ink); }
.funnel-track { height: 7px; background: #eef0f5; border-radius: 7px; overflow: hidden; }
.funnel-track span { height: 100%; border-radius: inherit; display: block; background: var(--funnel-color, var(--purple)); }
.link-list { padding: 4px 18px 16px; }
.link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid #f0f1f4; }
.link-row:last-child { border-bottom: 0; }
.link-row strong, .link-row small { display: block; }
.link-row strong { font-size: 13px; }
.link-row small { color: var(--soft); font-size: 10.5px; margin-top: 3px; }
.link-row b { color: var(--purple); text-align: right; font-size: 13px; }

.leaderboard { padding: 4px 17px 14px; }
.leader-row { display: grid; grid-template-columns: 23px 1fr auto; align-items: center; gap: 9px; padding: 12px 0; border-bottom: 1px solid #f0f1f4; }
.leader-row:last-child { border: 0; }
.rank { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: #f0f1f6; font-size: 10.5px; font-weight: 800; color: #797d91; }
.leader-row:first-child .rank { background: #fff5df; color: #bf811a; }
.leader-person { display: flex; align-items: center; gap: 8px; }
.leader-person strong, .leader-person small { display: block; }
.leader-person strong { font-size: 13px; }
.leader-person small { color: var(--soft); font-size: 10.5px; }
.leader-score { text-align: right; }
.leader-score strong, .leader-score small { display: block; }
.leader-score strong { font-size: 13px; }
.leader-score small { color: var(--mint); font-size: 10.5px; }

.empty-state { padding: 56px 25px; text-align: center; }
.empty-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; margin: 0 auto 15px; background: #edf5ff; color: var(--purple); font-size: 20px; }
.empty-state h3 { font: 700 18px/1.2 'Manrope', sans-serif; margin: 0 0 7px; }
.empty-state p { color: var(--muted); font-size: 13px; max-width: 390px; margin: 0 auto 18px; line-height: 1.55; }

.modal-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(9,13,28,.68); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 14px; animation: fadeIn .18s ease; }
@keyframes fadeIn { from { opacity: 0; } }
.modal { width: min(640px, 100%); max-height: calc(100vh - 28px); overflow: hidden; display: flex; flex-direction: column; background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg); animation: modalIn .22s ease; }
.modal.wide { width: min(900px, 100%); }
.modal.campaign-wizard-modal { width: min(1120px, 100%); }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.modal-head { padding: 20px 26px 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex: 0 0 auto; }
.modal-head h2 { font: 700 22px/1.2 'Manrope', sans-serif; letter-spacing: -.03em; margin: 0; }
.modal-head p { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
.modal-close { border: 1px solid var(--line); background: #fff; border-radius: 9px; color: #697086; }
.modal-head > .modal-close { width: 36px; height: 36px; flex: 0 0 36px; padding: 0; font-size: 17px; }
.modal > form { min-height: 0; display: flex; flex: 1 1 auto; flex-direction: column; overflow: hidden; }
.modal-body { min-height: 0; padding: 20px 26px; overflow-y: auto; }
.modal > form > .modal-body, .modal > .modal-body { flex: 1 1 auto; }
.modal-footer { padding: 14px 26px 18px; display: flex; justify-content: flex-end; align-items: center; flex: 0 0 auto; flex-wrap: wrap; gap: 10px; border-top: 1px solid #f0f1f5; background: #fff; }
.modal-footer .modal-close { width: auto; height: auto; min-width: 84px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { margin-bottom: 15px; }
.modal-body > .form-group:last-child, .modal-body > .form-grid:last-child .form-group:last-child { margin-bottom: 0; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { display: block; color: #444a62; font-size: 12.5px; font-weight: 700; margin-bottom: 8px; }
.form-control { width: 100%; height: 48px; border: 1px solid var(--line); border-radius: 11px; outline: 0; padding: 0 14px; color: var(--ink); background: #fff; font-size: 14px; }
textarea.form-control { min-height: 108px; resize: vertical; padding-top: 13px; line-height: 1.5; }
.form-control:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(21,94,239,.09); }
.contact-list-picker { max-height: 150px; padding: 8px; overflow-y: auto; border: 1px solid var(--line); border-radius: 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.contact-list-picker label { padding: 8px; border-radius: 8px; background: #f8f9fc; display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.subscription-toggle { padding: 12px; border: 1px solid var(--line); border-radius: 11px; display: flex !important; align-items: center; gap: 10px; }
.subscription-toggle strong, .subscription-toggle small { display: block; }
.subscription-toggle small { margin-top: 3px; color: var(--soft); font-size: 9.5px; }
.contact-edit-footer .danger-button { margin-right: auto; }
.color-picker { display: flex; gap: 8px; }
.color-choice { width: 30px; height: 30px; border-radius: 9px; border: 3px solid #fff; box-shadow: 0 0 0 1px #dfe0e8; }
.color-choice.active { box-shadow: 0 0 0 2px var(--ink); }
.wizard-steps { display: flex; gap: 0; padding: 0 22px; border-bottom: 1px solid var(--line); }
.wizard-step { flex: 1; padding: 15px 4px; color: #8e93a8; font-size: 12px; font-weight: 700; position: relative; text-align: center; }
.wizard-step.active { color: var(--purple); }
.wizard-step.done { color: var(--mint); }
.wizard-step.active::after { content: ''; position: absolute; height: 2px; background: var(--purple); left: 8px; right: 8px; bottom: -1px; }
.select-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.select-card { border: 1px solid var(--line); border-radius: 12px; padding: 13px; display: flex; gap: 10px; align-items: center; cursor: pointer; transition: .17s; }
.select-card:hover, .select-card.selected { border-color: var(--purple); background: #faf9ff; }
.select-card input { accent-color: var(--purple); }
.select-card strong, .select-card small { display: block; }
.select-card strong { font-size: 13px; }
.select-card small { color: var(--soft); font-size: 10.5px; margin-top: 3px; }
.recipient-total { background: #f7f6ff; border: 1px solid #e7e3ff; border-radius: 12px; padding: 14px; display: flex; align-items: center; justify-content: space-between; margin-top: 13px; }
.recipient-total span { color: var(--muted); font-size: 13px; }
.recipient-total strong { color: var(--purple); font: 700 19px/1 'Manrope', sans-serif; }
.schedule-options { display: grid; gap: 9px; }
.campaign-review { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 14px; }
.campaign-review > div { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #f8fbff; }
.campaign-review small, .campaign-review strong, .campaign-review span { display: block; }
.campaign-review small { color: #7f8499; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.campaign-review strong { margin-top: 6px; color: var(--ink); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.campaign-review span { margin-top: 3px; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.campaign-preview-panel { margin: 14px 0 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #eef2f8; }
.campaign-preview-panel > div { min-height: 58px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border-bottom: 1px solid var(--line); }
.campaign-preview-panel > div strong, .campaign-preview-panel > div small { display: block; }
.campaign-preview-panel > div strong { font-size: 13px; }
.campaign-preview-panel > div small { margin-top: 3px; color: var(--soft); font-size: 10px; }
.campaign-preview-panel iframe { width: 100%; height: min(62vh, 680px); min-height: 540px; border: 0; background: #fff; }
.schedule-option { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.schedule-option.selected { border-color: var(--purple); background: #faf9ff; }
.schedule-option input { accent-color: var(--purple); margin-top: 2px; }
.schedule-option strong, .schedule-option small { display: block; }
.schedule-option strong { font-size: 14px; }
.schedule-option small { color: var(--muted); font-size: 12px; margin-top: 3px; }
.test-send-row { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 9px; margin-top: 14px; }
.test-send-row .form-group { margin-bottom: 0; }
.csv-drop { border: 1px dashed #cdd0de; border-radius: 13px; background: #fafbfc; padding: 21px; text-align: center; }
.csv-drop h3 { font-size: 15px; margin: 7px 0 4px; }
.csv-drop p { color: var(--muted); font-size: 12px; margin: 0 0 11px; }
.import-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.import-choice { min-height: 125px; padding: 18px; border: 1px solid var(--line); border-radius: 13px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.import-choice:hover { border-color: #9cbcf8; background: #f8faff; }
.import-choice > span { width: 34px; height: 34px; margin-bottom: 10px; border-radius: 9px; display: grid; place-items: center; background: #edf5ff; color: var(--purple); }
.import-choice strong { font-size: 13px; }
.import-choice small { margin-top: 5px; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.import-file-status { margin-top: 10px; padding: 9px 11px; border-radius: 8px; background: #f3f5f9; color: var(--muted); font-size: 10.5px; }
.import-progress { padding: 0 26px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); background: #fbfcff; }
.import-progress > div { min-height: 56px; display: flex; align-items: center; gap: 9px; color: #969cb0; position: relative; }
.import-progress > div:not(:last-child)::after { content: ''; position: absolute; top: 28px; left: 37px; right: 12px; height: 1px; background: #dfe4ef; }
.import-progress span { width: 25px; height: 25px; z-index: 1; border: 1px solid #d6dbe7; border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: 10px; font-weight: 800; }
.import-progress strong { z-index: 1; padding-right: 8px; background: #fbfcff; font-size: 11px; }
.import-progress .active { color: var(--purple); }
.import-progress .active span { border-color: var(--purple); background: var(--purple); color: #fff; }
.import-progress .done { color: var(--mint); }
.import-progress .done span { border-color: var(--mint); background: var(--mint); color: #fff; }
.mapping-intro { margin-bottom: 16px; }
.mapping-intro strong { font: 700 15px/1.2 'Manrope', sans-serif; }
.mapping-intro p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.mapping-table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 13px; }
.mapping-table { width: 100%; border-collapse: collapse; min-width: 700px; }
.mapping-table th { padding: 10px 12px; background: #f7f9fd; color: #858ba0; font-size: 9px; text-align: left; text-transform: uppercase; letter-spacing: .06em; }
.mapping-table td { padding: 10px 12px; border-top: 1px solid #edf0f5; color: var(--muted); font-size: 11px; }
.mapping-table td strong { color: var(--ink); font-size: 12px; }
.mapping-table .form-control { height: 38px; min-width: 170px; font-size: 11px; }
.mapping-check { color: var(--mint) !important; font-weight: 900; text-align: center; }
.mapping-summary { margin-top: 11px; color: var(--muted); font-size: 11px; }
.import-ready { padding: 13px 0 22px; text-align: center; }
.import-ready > span { width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 14px; display: grid; place-items: center; background: #e9fbf5; color: var(--mint); font-size: 20px; font-weight: 900; }
.import-ready h3 { margin: 0; font: 700 18px/1.2 'Manrope', sans-serif; }
.import-ready p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }

.toast-root { position: fixed; right: 22px; bottom: 22px; z-index: 100; display: grid; gap: 9px; }
.toast { width: min(330px, calc(100vw - 44px)); background: #13182b; color: #fff; border: 1px solid #2a3049; border-radius: 13px; padding: 13px 15px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; animation: toastIn .25s ease; }
@keyframes toastIn { from { transform: translateY(12px); opacity: 0; } }
.toast-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #1a4b40; color: #5ce0b9; }
.toast strong, .toast small { display: block; }
.toast strong { font-size: 13px; }
.toast small { color: #aeb4cc; font-size: 10.5px; margin-top: 2px; }

.skeleton { background: linear-gradient(90deg, #f0f1f4 25%, #f7f8fa 40%, #f0f1f4 60%); background-size: 300% 100%; animation: skeleton 1.4s infinite; border-radius: 8px; }
@keyframes skeleton { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.sidebar.collapsed { width: 78px; }
.sidebar.collapsed .brand > span:last-child, .sidebar.collapsed .workspace-meta, .sidebar.collapsed .workspace-chev, .sidebar.collapsed .nav-item > span:nth-child(2), .sidebar.collapsed .nav-item b, .sidebar.collapsed .nav-item em, .sidebar.collapsed .main-nav p, .sidebar.collapsed .profile-button > span:nth-child(2), .sidebar.collapsed .profile-button b { display: none; }
.sidebar.collapsed .workspace-switcher { grid-template-columns: 1fr; padding: 8px; }
.sidebar.collapsed .workspace-avatar { margin: auto; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 0; }
.sidebar.collapsed .nav-icon { width: auto; }
.sidebar.collapsed .sidebar-collapse { transform: rotate(180deg); }
.sidebar.collapsed .sidebar-head { min-height: 104px; padding: 9px 0 7px; flex-direction: column; justify-content: center; gap: 5px; }
.sidebar.collapsed .sidebar-head .brand { width: 100%; justify-content: center; }
.sidebar.collapsed .brand-logo { display: block; width: 48px; height: 48px; border-radius: 9px; }
.sidebar.collapsed + .main-shell { margin-left: 78px; width: calc(100% - 78px); }

@media (max-width: 1120px) and (min-width: 821px) {
  .login-view { grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr); }
  .login-visual { padding-left: 38px; padding-right: 38px; }
  .login-copy h1 { font-size: clamp(40px, 5.2vw, 57px); }
  .login-copy > p { max-width: 480px; font-size: 16px; }
  .login-art { right: -28%; width: min(650px, 66vw); }
  .login-panel { padding: 32px; }
}

@media (max-width: 1150px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .list-grid { grid-template-columns: repeat(2, 1fr); }
  .template-grid { grid-template-columns: repeat(3, 1fr); }
  .report-summary { grid-template-columns: repeat(3, 1fr); gap: 18px 0; }
  .report-summary > div:nth-child(4) { border-left: 0; padding-left: 0; }
  .builder-shell { grid-template-columns: minmax(420px, 1fr) 340px; }
  .builder-blocks { display: none; }
}

@media (max-width: 820px) {
  .login-view { grid-template-columns: 1fr; background: #fbfbfd; }
  .login-visual { display: none; }
  .login-panel { border-radius: 0; box-shadow: none; padding: clamp(22px, 6vw, 40px); }
  .mobile-brand { display: flex; align-items: center; justify-content: center; gap: 11px; font: 800 20px/1 'Manrope', sans-serif; margin-bottom: 36px; }
  .mobile-brand .brand-mark span:nth-child(3) { background: var(--ink); }
  .sidebar { transform: translateX(-100%); box-shadow: 20px 0 60px rgba(9,13,28,.28); }
  .sidebar.mobile-open { transform: translateX(0); }
  .main-shell { margin-left: 0; width: 100%; }
  .mobile-menu { display: grid; place-items: center; width: 37px; height: 37px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
  .topbar { padding: 0 18px; gap: 12px; }
  .topbar-search { flex: 1; width: auto; }
  .topbar-search kbd { display: none; }
  .dashboard-grid, .report-grid, .calendar-board { grid-template-columns: 1fr; }
  .delivery-card { min-height: 270px; }
  .template-grid { grid-template-columns: repeat(2, 1fr); }
  .builder-shell { grid-template-columns: 1fr 320px; }
  .builder-email-stage { padding: 14px; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .typing-caret { display: none; }
}

@media (max-width: 640px) {
  .login-panel { align-items: start; padding-top: 24px; }
  .login-box { width: 100%; }
  .mobile-brand { margin-bottom: 26px; }
  .login-box h2 { font-size: clamp(27px, 8.5vw, 33px); }
  .login-helper { margin-bottom: 22px; }
  .page-root { padding: 22px 15px 40px; }
  .page-header { align-items: flex-start; flex-direction: column; }
  .page-actions { width: 100%; flex-wrap: wrap; }
  .page-actions > * { flex: 1; }
  .topbar { padding: 0 12px; }
  .topbar-search { display: none; }
  .topbar-actions { margin-left: auto; }
  .notification-panel { position: fixed; top: 64px; left: 10px; right: 10px; width: auto; }
  .icon-action:first-child { display: none; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .metric-card { padding: 14px; }
  .metric-main strong { font-size: 22px; }
  .metric-change, .metric-live { display: none; }
  .calendar-head { align-items: flex-start; flex-direction: column; }
  .calendar-controls { width: 100%; }
  .calendar-controls strong { flex: 1; }
  .calendar-weekdays { gap: 3px; padding-right: 10px; padding-left: 10px; }
  .calendar-grid { gap: 3px; padding-right: 10px; padding-left: 10px; }
  .calendar-day { min-height: 48px; padding: 6px; }
  .calendar-legend b { width: 100%; margin-left: 0; }
  .agenda-item { grid-template-columns: 38px minmax(0, 1fr); }
  .agenda-marker { width: 38px; height: 38px; }
  .agenda-item .status { grid-column: 2; justify-self: start; }
  .list-grid, .template-grid { grid-template-columns: 1fr; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar-group { width: 100%; }
  .search-field { width: 100%; }
  .data-table th:nth-child(3), .data-table td:nth-child(3), .data-table th:nth-child(4), .data-table td:nth-child(4), .data-table th:nth-child(6), .data-table td:nth-child(6) { display: none; }
  .data-table th, .data-table td { padding: 12px 10px; }
  .campaign-icon { display: none; }
  .report-summary { grid-template-columns: 1fr 1fr; }
  .report-summary > div { padding: 0 10px; }
  .report-summary > div:nth-child(3), .report-summary > div:nth-child(5) { border-left: 0; padding-left: 0; }
  .report-top { flex-direction: column; }
  .form-grid, .select-card-grid { grid-template-columns: 1fr; }
  .campaign-review { grid-template-columns: 1fr; }
  .campaign-preview-panel iframe { height: 360px; }
  .test-send-row { grid-template-columns: 1fr; }
  .import-choice-grid, .contact-list-picker { grid-template-columns: 1fr; }
  .import-progress { padding: 0 14px; }
  .import-progress strong { display: none; }
  .modal-backdrop { padding: 10px; align-items: end; }
  .modal { border-radius: 20px 20px 8px 8px; max-height: calc(100vh - 20px); }
  .modal-head { padding: 20px 18px 16px; }
  .modal-body { padding: 20px 18px; }
  .modal-footer { padding: 14px 18px 20px; }
  .template-builder-modal { width: 100% !important; height: calc(100vh - 20px); }
  .builder-shell { display: block; overflow-y: auto; }
  .builder-canvas { display: none; }
  .builder-settings { overflow: visible; border-left: 0; }
  .builder-footer > span { width: 100%; }
  .role-card { grid-template-columns: 29px 1fr 12px; padding: 10px; }
  .role-card .role-icon { width: 29px; height: 29px; }
}