:root {
  color-scheme: light;
  --ink: #20232f;
  --muted: #8d91a1;
  --subtle: #a9adba;
  --line: #eceef3;
  --paper: #fff;
  --canvas: #f7f8fc;
  --violet: #7064e8;
  --violet-dark: #5b50d4;
  --violet-soft: #f0efff;
  --violet-text: #6258d1;
  --violet-tint: #dedbff;
  --violet-ring: rgb(112 100 232 / 28%);
  --violet-shadow: rgb(112 100 232 / 20%);
  --green: #2fa77b;
  --green-soft: #e8f7f0;
  --orange: #e79a4c;
  --orange-soft: #fff3e6;
  --red: #dc6472;
  --shadow: 0 10px 35px rgb(34 38 60 / 7%);
  font-family: "DM Sans", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

[data-theme="ocean"] { --violet: #1f8fa3; --violet-dark: #17788a; --violet-soft: #e6f6f9; --violet-text: #187a8c; --violet-tint: #c9ecf2; --violet-ring: rgb(31 143 163 / 28%); --violet-shadow: rgb(31 143 163 / 20%); }
[data-theme="coral"] { --violet: #e8705f; --violet-dark: #d25d4c; --violet-soft: #fdeeeb; --violet-text: #c9584a; --violet-tint: #f9d3cd; --violet-ring: rgb(232 112 95 / 28%); --violet-shadow: rgb(232 112 95 / 20%); }
[data-theme="forest"] { --violet: #2f9a6c; --violet-dark: #27835b; --violet-soft: #e7f6ee; --violet-text: #257f58; --violet-tint: #c7ecd8; --violet-ring: rgb(47 154 108 / 28%); --violet-shadow: rgb(47 154 108 / 20%); }

* { box-sizing: border-box; }
.save-status { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 10000; padding: 10px 18px; border-radius: 12px; background: var(--ink); color: var(--paper); box-shadow: var(--shadow); }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: var(--canvas); font-size: 14px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--violet-ring); outline-offset: 2px; }
[hidden] { display: none !important; }

.auth-screen { display: grid; grid-template-columns: minmax(390px, 0.94fr) 1.06fr; min-height: 100vh; background: white; }
.auth-story { position: relative; display: flex; flex-direction: column; min-height: 100vh; padding: 38px clamp(35px, 6vw, 88px) 25px; overflow: hidden; color: white; background: #22213f; }
.auth-story::before, .auth-story::after { position: absolute; z-index: 0; border: 1px solid rgb(255 255 255 / 8%); border-radius: 50%; content: ""; pointer-events: none; }
.auth-story::before { width: 590px; height: 590px; right: -305px; top: 16%; }
.auth-story::after { width: 450px; height: 450px; right: -235px; top: calc(16% + 70px); }
.brand { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; width: fit-content; color: inherit; text-decoration: none; font-family: Manrope, sans-serif; font-size: 21px; font-weight: 800; letter-spacing: -1.1px; }
.brand-mark { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 11px; background: var(--violet); color: white; font-family: Georgia, serif; font-size: 25px; font-weight: 700; font-style: italic; line-height: 1; }
.brand-light-weight { color: #b7b3ff; font-weight: 500; }
.story-content { position: relative; z-index: 1; max-width: 490px; margin: auto 0; padding: 78px 0 58px; }
.eyebrow { margin: 0; color: #a5a2c0; font-size: 10px; font-weight: 700; letter-spacing: 1.35px; }
.story-content .eyebrow { display: flex; align-items: center; gap: 9px; color: #b6b3d2; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #8f84ff; box-shadow: 0 0 12px #8f84ff; }
.story-content h1 { margin: 26px 0 20px; font-family: Manrope, sans-serif; font-size: clamp(42px, 5vw, 65px); font-weight: 600; line-height: 1.14; letter-spacing: -3.4px; }
.story-content h1 span { color: #a39aff; }
.story-content > p { max-width: 395px; margin: 0; color: #c1c0d2; font-size: 15px; line-height: 1.8; }
.story-proof { display: flex; align-items: center; gap: 13px; margin-top: 40px; color: #c5c3d6; font-size: 12px; }
.proof-avatars { display: flex; padding-left: 1px; }
.proof-avatars span { display: grid; width: 27px; height: 27px; margin-left: -1px; place-items: center; border: 2px solid #22213f; border-radius: 50%; background: #e6b39a; color: #59413c; font-size: 8px; font-weight: 700; }
.proof-avatars span:nth-child(2) { background: #c7b9f4; color: #52438a; }
.proof-avatars span:nth-child(3) { background: #91c6ae; color: #315746; }
.proof-avatars span:nth-child(4) { background: #474663; color: white; }
.story-footer { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 12px; color: #9291ad; font-size: 10px; }
.auth-panel { position: relative; display: flex; min-height: 100vh; flex-direction: column; padding: 32px clamp(30px, 5vw, 70px); }
.auth-topline { display: flex; justify-content: flex-end; align-items: center; gap: 10px; color: #898d9d; font-size: 12px; }
.text-button { padding: 0; border: 0; background: none; color: var(--violet); font-size: inherit; font-weight: 700; }
.text-button:hover { color: var(--violet-dark); }
.auth-form-wrap { width: min(100%, 390px); margin: auto; padding: 42px 0 55px; }
.auth-heading { margin-bottom: 32px; }
.auth-icon { display: grid; width: 39px; height: 39px; margin-bottom: 23px; place-items: center; border-radius: 12px; background: var(--violet-soft); color: var(--violet); font-size: 18px; }
.auth-heading .eyebrow { color: #918cae; font-size: 9px; }
.auth-heading h2 { margin: 10px 0 8px; font-family: Manrope, sans-serif; font-size: 29px; letter-spacing: -1px; }
.auth-heading > p:last-child { margin: 0; color: #9295a3; font-size: 13px; line-height: 1.6; }
.form-stack { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; color: #494c5b; font-size: 12px; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid #e7e8ef; border-radius: 8px; background: white; color: var(--ink); font-size: 13px; font-weight: 400; transition: border-color .2s, box-shadow .2s; }
.field input::placeholder, .field textarea::placeholder { color: #b6b8c2; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #9c94fa; outline: 0; box-shadow: 0 0 0 3px rgb(112 100 232 / 10%); }
.field textarea { min-height: 95px; padding: 12px; resize: vertical; }
.field-help { color: #a4a7b3; font-size: 11px; font-weight: 400; }
.button { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; border: 1px solid transparent; border-radius: 8px; font-size: 12px; font-weight: 700; transition: background .16s, border-color .16s, transform .16s; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--violet); color: white; box-shadow: 0 4px 10px var(--violet-shadow); }
.button-primary:hover { background: var(--violet-dark); }
.button-outline { border-color: #e9e9ef; background: white; color: #4a4b59; }
.button-outline:hover { border-color: #c7c3f4; background: #fbfaff; }
.button-wide { width: 100%; min-height: 46px; margin-top: 5px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; color: #b2b4bf; font-size: 11px; }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; background: #eeeef2; content: ""; }
.demo-sparkle { color: var(--violet); }
.auth-note { margin: 15px 0 0; color: #a0a2ae; font-size: 10px; text-align: center; }
.auth-switch { margin: 25px 0 0; color: #8f92a0; font-size: 12px; text-align: center; }
.auth-switch .text-button { margin-left: 3px; }
.auth-panel-footer { color: #a7a9b4; font-size: 10px; text-align: center; }
.auth-panel-footer span { margin: 0 5px; color: #cccdd4; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; display: flex; width: 245px; flex-direction: column; padding: 25px 17px 14px; border-right: 1px solid #eff0f5; background: white; }
.brand-dark { margin: 0 0 25px 7px; color: #262638; font-size: 19px; }
.brand-dark .brand-mark { width: 29px; height: 29px; border-radius: 9px; font-size: 22px; }
.brand-dark-weight { color: #9999ab; font-weight: 500; }
.workspace-switcher { display: flex; min-height: 58px; align-items: center; gap: 10px; padding: 8px; border: 1px solid #eeeff4; border-radius: 9px; }
.workspace-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; background: #eae8ff; color: #675dd0; font-family: Manrope, sans-serif; font-size: 16px; font-weight: 800; }
.workspace-copy, .profile-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.workspace-copy strong, .profile-copy strong { overflow: hidden; color: #3d3f4e; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.workspace-copy small, .profile-copy small { overflow: hidden; color: #a1a4b0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.switcher-chevron { color: #a4a6b0; font-size: 17px; }
.nav-label { margin: 30px 8px 11px; color: #a6a8b4; font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.nav-label-spaced { margin-top: 29px; }
.main-nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item { display: flex; width: 100%; min-height: 40px; align-items: center; gap: 11px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: #7c8090; font-size: 12px; text-align: left; }
.nav-item:hover { background: #f7f7fc; color: var(--violet-text); }
.nav-item.active { background: var(--violet-soft); color: var(--violet-text); font-weight: 700; }
.nav-icon { display: grid; width: 17px; place-items: center; color: inherit; font-size: 16px; }
.nav-count { display: grid; width: 21px; height: 20px; margin-left: auto; place-items: center; border-radius: 6px; background: #f0f0f5; color: #8f91a0; font-size: 10px; }
.sidebar-bottom { margin-top: auto; }
.help-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 14px; padding: 14px 12px; border: 1px solid #ececf4; border-radius: 9px; background: linear-gradient(145deg, #fcfbff, #f8f7ff); }
.help-card-icon { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 7px; background: #eeecff; color: #7165e1; }
.help-card strong { color: #505263; font-size: 11px; }
.help-card > span:not(.help-card-icon) { color: #9295a4; font-size: 10px; }
.help-card a { color: #7064d9; font-size: 9px; font-weight: 700; text-decoration: none; }
.help-card a span { padding-left: 2px; }
.profile-button { display: flex; width: 100%; align-items: center; gap: 9px; padding: 12px 4px 1px; border: 0; border-top: 1px solid #f0f0f4; background: white; text-align: left; }
.avatar { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #f4d7c8; color: #775144; font-size: 10px; font-weight: 700; }
.profile-menu-icon { color: #9295a3; font-size: 20px; letter-spacing: 1px; }
.app-main { min-height: 100vh; margin-left: 245px; }
.topbar { position: sticky; z-index: 10; top: 0; display: flex; height: 64px; align-items: center; justify-content: space-between; padding: 0 36px; border-bottom: 1px solid #eff0f5; background: rgb(255 255 255 / 92%); backdrop-filter: blur(12px); }
.breadcrumb { display: flex; align-items: center; gap: 10px; color: #a0a3b0; font-size: 11px; }
.breadcrumb strong { color: #454756; font-weight: 600; }
.breadcrumb-separator { color: #c7c8d0; }
.topbar-actions { display: flex; height: 100%; align-items: center; gap: 18px; }
.today-label { color: #9a9daa; font-size: 11px; }
.icon-button { position: relative; display: grid; width: 30px; height: 30px; place-items: center; border: 0; background: transparent; color: #818493; font-size: 16px; }
.notification-button i { position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border: 1px solid white; border-radius: 50%; background: #ed8c76; }
.topbar-divider { width: 1px; height: 23px; background: #ececf1; }
.topbar-avatar { width: 29px; height: 29px; border: 0; font-size: 9px; }
.mobile-menu { display: none; }
.page-content { width: min(100%, 1440px); margin: 0 auto; padding: 30px 36px 45px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 25px; }
.page-heading h1 { margin: 0 0 7px; font-family: Manrope, sans-serif; font-size: 23px; font-weight: 700; letter-spacing: -.75px; }
.page-heading p { margin: 0; color: #9699a7; font-size: 12px; }
.heading-actions { display: flex; align-items: center; gap: 9px; }
.button-small { min-height: 37px; padding: 0 12px; font-size: 11px; }
.button-ghost { border-color: #e9eaf0; background: white; color: #626575; }
.button-ghost:hover { background: #fafaff; border-color: var(--violet-tint); }
.button-icon { font-size: 16px; line-height: 1; }
.section-label { margin: 0 0 13px; color: #9a9daa; font-size: 10px; font-weight: 700; letter-spacing: .45px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat-card { min-height: 127px; padding: 16px; border: 1px solid #eff0f4; border-radius: 10px; background: white; }
.stat-top { display: flex; align-items: center; justify-content: space-between; color: #9295a3; font-size: 10px; }
.stat-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; font-size: 15px; }
.stat-icon.purple { background: var(--violet-soft); color: var(--violet); }
.stat-icon.green { background: #e9f7f1; color: #38a87e; }
.stat-icon.orange { background: #fff3e7; color: #e29a50; }
.stat-icon.blue { background: #eaf3ff; color: #6592d7; }
.stat-number { margin: 11px 0 4px; font-family: Manrope, sans-serif; font-size: 25px; font-weight: 700; letter-spacing: -.8px; }
.stat-foot { color: #a0a3af; font-size: 10px; }
.stat-foot .positive { color: #31a278; font-weight: 600; }
.stat-foot .negative { color: #d15e6b; font-weight: 600; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(245px, .85fr); gap: 16px; margin-top: 21px; }
.dashboard-tasks { grid-column: 1 / -1; }
.panel { border: 1px solid #eff0f4; border-radius: 10px; background: white; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 18px; border-bottom: 1px solid #f1f1f5; }
.panel-header h2 { margin: 0; color: #444655; font-size: 12px; font-weight: 700; }
.panel-header p { margin: 5px 0 0; color: #a3a5b0; font-size: 10px; }
.link-button { padding: 3px 0; border: 0; background: none; color: var(--violet-text); font-size: 10px; font-weight: 700; }
.link-button:hover { color: var(--violet-dark); }
.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; }
.data-table th { padding: 11px 15px; border-bottom: 1px solid #f3f3f6; color: #a5a7b2; font-size: 9px; font-weight: 600; white-space: nowrap; }
.data-table td { padding: 12px 15px; border-bottom: 1px solid #f5f5f7; color: #666a79; font-size: 10px; white-space: nowrap; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fcfcff; }
.customer-cell { display: flex; align-items: center; gap: 9px; }
.customer-cell-copy { display: flex; flex-direction: column; gap: 4px; }
.customer-cell-copy strong { color: #414452; font-size: 10px; font-weight: 700; }
.customer-name-link { width: fit-content; padding: 0; border: 0; background: none; color: #414452; font-size: 10px; font-weight: 700; text-align: left; }
.customer-name-link:hover { color: #655ad1; text-decoration: underline; text-underline-offset: 2px; }
.customer-cell-copy small { color: #a1a4b1; font-size: 9px; }
.customer-email { display: block; margin: 4px 0 0 37px; color: #a1a4b1; font-size: 9px; }
.meeting-card-note { margin: 12px 0 0; color: #818493; font-size: 10px; line-height: 1.6; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.mini-avatar { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: var(--violet-soft); color: var(--violet-text); font-size: 9px; font-weight: 700; }
.mini-avatar.color-1 { background: #e9f6ef; color: #3d9872; }
.mini-avatar.color-2 { background: #fff0e5; color: #ce8550; }
.mini-avatar.color-3 { background: #e9f1fc; color: #6189c2; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 20px; background: #f1f1f5; color: #777a88; font-size: 9px; }
.status-pill::before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ""; }
.status-pill.active { background: #eaf7f0; color: #359d74; }
.status-pill.lead { background: #fff4e8; color: #d5934c; }
.status-pill.passive { background: var(--violet-soft); color: var(--violet-text); }
.meeting-list { padding: 2px 17px 8px; }
.meeting-item { display: flex; gap: 11px; padding: 14px 0; border-bottom: 1px solid #f2f2f5; }
.meeting-item:last-child { border-bottom: 0; }
.meeting-date { display: flex; width: 40px; height: 43px; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; background: var(--violet-soft); color: var(--violet-text); }
.meeting-date strong { font-family: Manrope, sans-serif; font-size: 16px; line-height: 1.2; }
.meeting-date span { font-size: 8px; text-transform: uppercase; }
.meeting-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 5px; }
.meeting-copy strong { overflow: hidden; color: #4b4d5b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.meeting-copy span { overflow: hidden; color: #a0a2ad; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.meeting-time { margin-left: auto; align-self: center; color: #9497a4; font-size: 9px; white-space: nowrap; }
.empty-state { padding: 30px 15px; color: #9da0ae; font-size: 11px; text-align: center; }
.empty-state strong { display: block; margin-bottom: 5px; color: #636676; font-size: 12px; }
.empty-action { margin-top: 10px; }
.list-toolbar { display: flex; align-items: center; gap: 10px; padding: 15px 17px; }
.search-box { position: relative; display: flex; width: min(100%, 300px); align-items: center; }
.search-box span { position: absolute; left: 12px; color: #a1a4b1; font-size: 15px; }
.search-box input { width: 100%; height: 36px; padding: 0 12px 0 34px; border: 1px solid #ececf2; border-radius: 7px; color: #4d5060; font-size: 11px; }
.search-box input::placeholder { color: #b0b2bd; }
.filter-select { height: 36px; padding: 0 28px 0 10px; border: 1px solid #ececf2; border-radius: 7px; background: white; color: #777a88; font-size: 10px; }
.toolbar-spacer { flex: 1; }
.table-actions { display: flex; align-items: center; gap: 5px; }
.row-action { display: grid; width: 27px; height: 27px; place-items: center; border: 0; border-radius: 5px; background: transparent; color: #9194a2; font-size: 14px; }
.row-action:hover { background: var(--violet-soft); color: var(--violet-text); }
.row-action.delete:hover { background: #fff0f1; color: #d15e6b; }
.table-footer { display: flex; justify-content: space-between; gap: 12px; padding: 13px 17px; border-top: 1px solid #f1f1f5; color: #a0a2ae; font-size: 10px; }
.meeting-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; padding: 17px; }
.meeting-card { padding: 15px; border: 1px solid #eff0f4; border-radius: 9px; transition: box-shadow .16s, transform .16s; }
.meeting-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.meeting-card-top { display: flex; align-items: flex-start; gap: 11px; }
.meeting-card .meeting-date { width: 43px; height: 47px; }
.meeting-card-content { min-width: 0; flex: 1; }
.meeting-card-content h3 { margin: 2px 0 6px; color: #454755; font-size: 12px; }
.meeting-card-content p { overflow: hidden; margin: 0; color: #9b9eaa; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.meeting-card-actions { display: flex; justify-content: flex-end; gap: 3px; margin-top: 10px; }
.meeting-meta { display: flex; gap: 13px; margin-top: 14px; padding-top: 11px; border-top: 1px solid #f1f1f5; color: #9295a2; font-size: 10px; }
.filters-row { display: flex; gap: 8px; padding: 0 17px 15px; }
.filter-chip { min-height: 28px; padding: 0 10px; border: 1px solid #ededf2; border-radius: 6px; background: white; color: #858896; font-size: 10px; }
.filter-chip.active { border-color: var(--violet-tint); background: var(--violet-soft); color: var(--violet-text); font-weight: 600; }
.report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.report-card { padding: 18px; border: 1px solid #eff0f4; border-radius: 10px; background: white; }
.report-card span { color: #9699a7; font-size: 10px; }
.report-card strong { display: block; margin: 10px 0 4px; font-family: Manrope, sans-serif; font-size: 25px; }
.report-card small { color: #a3a5b1; font-size: 10px; }
.bar-chart { display: flex; height: 200px; align-items: flex-end; justify-content: space-around; gap: 16px; padding: 20px 25px 0; }
.bar-group { display: flex; height: 100%; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: 9px; color: #a0a2af; font-size: 9px; }
.bars { display: flex; width: min(100%, 45px); height: 100%; align-items: flex-end; justify-content: center; gap: 4px; }
.bar { width: 14px; min-height: 4px; border-radius: 4px 4px 0 0; background: #dedbff; }
.bar:nth-child(2) { background: #776be5; }
.settings-card { max-width: 700px; padding: 21px; }
.settings-card h2 { margin: 0 0 6px; font-size: 14px; }
.settings-card > p { margin: 0 0 20px; color: #9699a7; font-size: 11px; }
.settings-actions { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-top: 20px; border-top: 1px solid #f0f0f4; }
.settings-actions p { margin: 0; color: #999ba8; font-size: 10px; }
.danger-button { min-height: 35px; padding: 0 11px; border: 1px solid #f1dfe1; border-radius: 7px; background: white; color: #c85c69; font-size: 10px; font-weight: 600; }
.back-link { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 15px; padding: 0; border: 0; background: none; color: #777a8a; font-size: 11px; }
.back-link:hover { color: #655ad1; }
.customer-profile { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px; }
.customer-profile-main { display: flex; min-width: 0; align-items: center; gap: 15px; }
.customer-profile-avatar { display: grid; width: 58px; height: 58px; flex: 0 0 auto; place-items: center; border-radius: 15px; background: var(--violet-soft); color: var(--violet-text); font-family: Manrope, sans-serif; font-size: 18px; font-weight: 700; }
.customer-profile-copy { min-width: 0; }
.customer-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.customer-title-row h1 { margin: 0; font-family: Manrope, sans-serif; font-size: 20px; letter-spacing: -.5px; }
.customer-profile-copy > p { margin: 7px 0 10px; color: #858896; font-size: 11px; }
.customer-profile-copy > p span { padding: 0 5px; color: #c5c6ce; }
.customer-profile-tags { display: flex; flex-wrap: wrap; gap: 14px; color: #9a9daa; font-size: 9px; }
.customer-profile-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.customer-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin: 14px 0; }
.customer-metric { display: flex; min-width: 0; min-height: 98px; flex-direction: column; justify-content: center; gap: 7px; padding: 15px 17px; border: 1px solid #eff0f4; border-radius: 9px; background: white; }
.customer-metric > span { color: #9699a7; font-size: 10px; }
.customer-metric strong { overflow: hidden; color: #3f4250; font-family: Manrope, sans-serif; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.customer-metric small { overflow: hidden; color: #a0a2ae; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.customer-detail-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(230px, .8fr); align-items: start; gap: 14px; }
.customer-detail-main, .customer-detail-aside { display: flex; min-width: 0; flex-direction: column; gap: 14px; }
.detail-panel { overflow: hidden; }
.detail-count { display: grid; min-width: 23px; height: 23px; padding: 0 6px; place-items: center; border-radius: 7px; background: #f2f1ff; color: #7166db; font-size: 10px; font-weight: 700; }
.timeline { padding: 5px 19px 16px; }
.timeline-item { position: relative; display: flex; gap: 14px; padding: 14px 0 2px 6px; }
.timeline-item:not(:last-child)::before { position: absolute; top: 28px; bottom: -7px; left: 10px; width: 1px; background: #e9e9f1; content: ""; }
.timeline-marker { z-index: 1; width: 10px; height: 10px; flex: 0 0 auto; margin-top: 4px; border: 2px solid #c5c1f7; border-radius: 50%; background: white; }
.timeline-item.upcoming .timeline-marker { border-color: #54b58d; }
.timeline-content { min-width: 0; flex: 1; padding-bottom: 12px; }
.timeline-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.timeline-heading strong { color: #484a59; font-size: 11px; }
.timeline-tag { padding: 4px 7px; border-radius: 12px; background: #f3f3f6; color: #858896; font-size: 8px; }
.timeline-tag.future { background: #eaf7f0; color: #359d74; }
.timeline-content > p { margin: 6px 0 0; color: #9b9eaa; font-size: 9px; }
.timeline-note { margin-top: 9px; padding: 9px 10px; border-radius: 6px; background: #fafaff; color: #777a89; font-size: 10px; line-height: 1.6; }
.timeline-actions { margin-top: 6px; }
.timeline-actions .link-button { font-size: 9px; }
.customer-note-list { padding: 5px 18px 0; }
.notes-header-actions { display: flex; align-items: center; gap: 9px; }
.customer-note-entry { padding: 12px 0; border-bottom: 1px solid #f1f1f5; }
.customer-note-entry:last-child { border-bottom: 0; }
.note-entry-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.note-entry-heading strong { color: #555867; font-size: 10px; }
.note-entry-heading time { color: #a0a2ae; font-size: 9px; }
.customer-note-entry h3 { margin: 8px 0 0; color: #454755; font-size: 11px; }
.customer-note-entry p { margin: 7px 0 0; color: #686b7a; font-size: 11px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.notes-empty { color: #a5a7b2; }
.notes-empty-state { margin: 0; padding: 18px; font-size: 10px; }
.contact-list { padding: 6px 16px 12px; }
.contact-person { padding: 12px 0; border-bottom: 1px solid #f2f2f5; }
.contact-person:last-of-type { border-bottom: 0; }
.contact-person-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.contact-person-name { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.contact-person-name strong { color: #555867; font-size: 10px; font-weight: 600; }
.contact-person-name small { color: #a1a3af; font-size: 9px; }
.contact-icon { display: grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: #f3f2ff; color: #7166db; font-size: 12px; }
.contact-detail-line { display: block; margin: 5px 0 0 38px; color: #7d8090; font-size: 9px; overflow-wrap: anywhere; text-decoration: none; }
.contact-detail-line:hover { color: #655ad1; text-decoration: underline; }
.contact-detail-muted { display: block; margin: 5px 0 0 38px; color: #a5a7b2; font-size: 9px; }
.contact-company { display: flex; flex-direction: column; gap: 6px; padding: 12px 0 3px; border-top: 1px solid #f2f2f5; }
.contact-company small { color: #a1a3af; font-size: 9px; }
.contact-company strong { color: #555867; font-size: 10px; font-weight: 500; }
.contact-empty { padding: 12px 0; font-size: 10px; }
.insight-card { padding: 17px; border: 1px solid #e8e5ff; border-radius: 10px; background: linear-gradient(145deg, #fcfbff, #f3f1ff); }
.insight-icon { display: grid; width: 29px; height: 29px; margin-bottom: 13px; place-items: center; border-radius: 8px; background: #e9e6ff; color: #7166db; }
.insight-card .eyebrow { color: #9892bf; font-size: 8px; }
.insight-card h2 { margin: 6px 0; color: #49465e; font-size: 13px; }
.insight-card > p:not(.eyebrow) { margin: 0 0 10px; color: #77758e; font-size: 10px; line-height: 1.7; }
.insight-card .link-button { font-size: 10px; }
.offer-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-bottom: 15px; }
.offer-summary article { display: flex; min-height: 82px; flex-direction: column; justify-content: center; gap: 8px; padding: 14px 17px; border: 1px solid #eff0f4; border-radius: 9px; background: white; }
.offer-summary article span { color: #9699a7; font-size: 10px; }
.offer-summary article strong { color: #3f4250; font-family: Manrope, sans-serif; font-size: 19px; }
.offer-filters { padding-top: 13px; }
.offer-name-link { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0; border: 0; background: none; color: #514bb1; font-size: 10px; font-weight: 700; text-align: left; }
.offer-name-link:hover { text-decoration: underline; }
.offer-name-link small { color: #9699a7; font-size: 9px; font-weight: 400; }
.offer-design-help { margin: 0; color: #9497a4; font-size: 10px; line-height: 1.6; }
.offer-items-editor { display: flex; flex-direction: column; gap: 10px; }
.offer-items-editor > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.offer-items-editor > header > div { display: flex; flex-direction: column; gap: 4px; }
.offer-items-editor > header strong { color: #555867; font-size: 11px; }
.offer-items-editor > header small { color: #a1a3af; font-size: 9px; }
.offer-item-list { display: flex; flex-direction: column; gap: 9px; }
.offer-item-row { display: grid; grid-template-columns: minmax(130px, 1fr) 75px 120px 28px; align-items: end; gap: 8px; padding: 10px; border: 1px solid #eeeff4; border-radius: 8px; background: #fcfcfe; }
.offer-item-row .field { gap: 5px; font-size: 9px; }
.offer-item-row .field input { min-height: 35px; padding: 0 9px; font-size: 10px; }
.offer-item-remove { margin-bottom: 4px; }
.offer-item-remove:disabled { cursor: not-allowed; opacity: .35; }
.offer-editor-total { display: flex; justify-content: space-between; align-items: center; padding: 12px 13px; border-radius: 8px; background: #f5f4ff; color: #727586; font-size: 11px; }
.offer-editor-total strong { color: #5f55ca; font-family: Manrope, sans-serif; font-size: 15px; }
.offer-preview-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-bottom: 1px solid #efeff4; }
.offer-document { width: min(100%, 760px); margin: 0 auto; padding: 42px 48px; background: white; color: #252735; font-family: "DM Sans", sans-serif; }
.modal:has(.offer-document) { width: min(100%, 900px); }
.offer-document-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 23px; border-bottom: 2px solid var(--offer-accent); }
.offer-document-header > div:first-child { display: flex; align-items: center; gap: 12px; }
.offer-brand-mark { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 12px; background: var(--offer-accent); color: white; font-family: Manrope, sans-serif; font-size: 13px; font-weight: 800; }
.offer-document-header h1 { margin: 0; font-family: Manrope, sans-serif; font-size: 18px; }
.offer-document-header p { margin: 5px 0 0; color: #828593; font-size: 9px; }
.offer-document-number { display: flex; flex-direction: column; gap: 5px; text-align: right; }
.offer-document-number span, .offer-document-title > p { color: var(--offer-accent); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; }
.offer-document-number strong { font-family: Manrope, sans-serif; font-size: 13px; }
.offer-document-title { padding: 28px 0 18px; }
.offer-document-title > p { margin: 0 0 8px; }
.offer-document-title h2 { margin: 0; font-family: Manrope, sans-serif; font-size: 25px; letter-spacing: -.5px; }
.offer-document-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 27px; padding: 16px; border-radius: 8px; background: #f8f8fb; }
.offer-document-meta > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.offer-document-meta small { color: #999ba8; font-size: 8px; font-weight: 700; letter-spacing: .7px; }
.offer-document-meta strong { color: #424553; font-size: 11px; }
.offer-document-meta span { color: #777a89; font-size: 9px; }
.offer-document-meta .meta-spaced { margin-top: 6px; }
.offer-document-table { width: 100%; border-collapse: collapse; }
.offer-document-table th { padding: 10px 8px; border-bottom: 1px solid #e8e8ef; color: #8d909d; font-size: 8px; text-align: left; }
.offer-document-table th:not(:first-child), .offer-document-table td:not(:first-child) { text-align: right; white-space: nowrap; }
.offer-document-table td { padding: 13px 8px; border-bottom: 1px solid #f0f0f4; color: #505362; font-size: 10px; }
.offer-document-totals { width: min(100%, 290px); margin: 18px 0 0 auto; }
.offer-document-totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; color: #777a89; font-size: 10px; }
.offer-document-totals strong { color: #484b59; font-weight: 600; }
.offer-document-totals .grand-total { margin-top: 6px; padding: 12px 0 0; border-top: 2px solid var(--offer-accent); color: #343745; font-size: 12px; font-weight: 700; }
.offer-document-totals .grand-total strong { color: var(--offer-accent); font-size: 15px; }
.offer-document-terms { margin-top: 30px; padding-top: 16px; border-top: 1px solid #eeeef3; }
.offer-document-terms h3 { margin: 0 0 7px; color: #494c5a; font-size: 10px; }
.offer-document-terms p { margin: 0; color: #777a89; font-size: 9px; line-height: 1.7; white-space: pre-wrap; }
.offer-document-footer { display: flex; flex-direction: column; gap: 7px; margin-top: 34px; padding-top: 13px; border-top: 1px solid #eeeef3; color: #9699a7; font-size: 8px; line-height: 1.5; }
.offer-document-footer span { color: #777a89; }
.modal:has(.offer-designer-layout) { width: min(1480px, 98vw); max-height: 96vh; }
.modal:has(.offer-designer-layout) > .modal-header { padding: 14px 20px 11px; }
.modal:has(.offer-designer-layout) > .modal-header h2 { font-size: 15px; }
.modal:has(.offer-designer-layout) > .modal-header p { font-size: 9px; }
.offer-designer-layout { display: grid; height: min(72vh, 760px); min-height: 530px; grid-template-columns: 190px minmax(350px, 1fr) 235px; border-bottom: 1px solid #eeeef3; }
.offer-designer-tools, .offer-designer-inspector { min-width: 0; overflow-y: auto; padding: 17px 13px; background: white; }
.offer-designer-tools { border-right: 1px solid #eeeef3; }
.offer-designer-inspector { border-left: 1px solid #eeeef3; }
.designer-panel-title { color: #434654; font-size: 11px; font-weight: 700; }
.offer-designer-tools > p { margin: 7px 0 14px; color: #999ba8; font-size: 9px; line-height: 1.55; }
.designer-tool-list { display: flex; flex-direction: column; gap: 6px; }
.designer-tool { display: flex; min-height: 37px; align-items: center; gap: 8px; padding: 0 8px; border: 1px solid #eeeff4; border-radius: 7px; background: white; color: #656878; font-size: 10px; text-align: left; }
.designer-tool:hover { border-color: #c9c4fa; background: #faf9ff; color: #6258d1; }
.designer-tool[draggable="true"] { cursor: grab; }
.designer-tool-icon { display: grid; width: 23px; height: 23px; flex: 0 0 auto; place-items: center; border-radius: 6px; background: var(--violet-soft); color: var(--violet); font-family: Manrope, sans-serif; font-size: 12px; font-weight: 700; }
.designer-tool-plus { margin-left: auto; color: #aaa5d8; font-size: 14px; }
.designer-hint { display: flex; flex-direction: column; gap: 5px; margin-top: 17px; padding: 10px; border-radius: 7px; background: #f7f6ff; color: #8d8ba3; font-size: 9px; line-height: 1.5; }
.designer-hint strong { color: #6a63ac; font-size: 9px; }
.offer-designer-workspace { display: flex; min-width: 0; flex-direction: column; overflow: hidden; background: #f0f1f5; }
.designer-workspace-header, .designer-workspace-footer { display: flex; min-height: 37px; align-items: center; justify-content: space-between; gap: 10px; padding: 0 13px; background: #f8f8fb; color: #9295a3; font-size: 8px; }
.designer-workspace-header span:first-child { color: #717482; font-size: 8px; font-weight: 700; letter-spacing: .6px; }
.offer-designer-stage { display: flex; min-height: 0; flex: 1; justify-content: center; overflow: auto; padding: 14px; }
.offer-designer-canvas { position: relative; width: min(100%, 560px); height: fit-content; flex: 0 0 auto; aspect-ratio: 210 / 297; overflow: hidden; background: white; box-shadow: 0 3px 15px rgb(34 38 60 / 13%); container-type: inline-size; }
.offer-template-block { position: absolute; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; padding: .6cqw; border: .18cqw solid transparent; border-radius: .6cqw; background: var(--block-background); color: var(--block-color); font-size: calc(var(--block-font-size) * .126cqw); font-weight: var(--block-bold); line-height: 1.4; text-align: var(--block-align); }
.offer-template-block.is-editing { border-color: transparent; cursor: grab; touch-action: none; }
.offer-template-block.is-editing:hover { border-color: #b7b1f5; border-style: dashed; }
.offer-template-block.is-editing.selected { z-index: 3; border-color: #7469e4; border-style: solid; box-shadow: 0 0 0 .25cqw rgb(112 100 232 / 12%); }
.offer-template-block.is-editing:active { cursor: grabbing; }
.offer-transform-handle { position: absolute; z-index: 5; display: grid; width: 9px; height: 9px; place-items: center; padding: 0; border: 1px solid white; border-radius: 50%; background: #7064e8; box-shadow: 0 0 0 1px #7064e8; touch-action: none; }
.offer-transform-handle.resize-nw { top: 0; left: 0; cursor: nwse-resize; }
.offer-transform-handle.resize-ne { top: 0; right: 0; cursor: nesw-resize; }
.offer-transform-handle.resize-sw { bottom: 0; left: 0; cursor: nesw-resize; }
.offer-transform-handle.resize-se { right: 0; bottom: 0; cursor: nwse-resize; }
.offer-transform-handle.resize-w, .offer-transform-handle.resize-e { top: 50%; cursor: ew-resize; transform: translateY(-50%); }
.offer-transform-handle.resize-w { left: 0; }
.offer-transform-handle.resize-e { right: 0; }
.offer-transform-handle.rotate { top: 1px; left: 50%; width: 14px; height: 14px; transform: translateX(-50%); border-radius: 50%; color: white; font-size: 10px; line-height: 1; cursor: grab; }
.offer-transform-handle.rotate:active { cursor: grabbing; }
.offer-template-block.block-logo { align-items: center; justify-content: center; padding: 0; }
.offer-block-logo-fallback { display: grid; width: 100%; height: 100%; place-items: center; border-radius: 12%; background: var(--block-background); color: var(--block-color); font-size: 1.5em; font-weight: 700; }
.offer-block-image { width: 100%; height: 100%; object-fit: contain; }
.offer-template-block.block-brand { justify-content: center; gap: .35cqw; }
.offer-template-block.block-brand > span, .offer-template-block.block-number > strong { font-size: 1.15em; }
.offer-template-block.block-brand > small, .offer-template-block.block-number > small { color: #999ba8; font-size: .68em; font-weight: 400; }
.offer-template-block.block-number { align-items: flex-end; justify-content: center; gap: .35cqw; }
.offer-template-block.block-offer-title { justify-content: center; gap: .4cqw; }
.offer-template-block.block-offer-title > small { color: var(--block-accent); font-size: .65em; font-weight: 700; letter-spacing: .12em; }
.offer-template-block.block-offer-title > strong { font-size: 1.55em; line-height: 1.25; }
.offer-template-block.block-recipient, .offer-template-block.block-dates { justify-content: center; gap: .45cqw; padding: 1.5cqw; border-radius: .8cqw; }
.offer-template-block.block-recipient > small, .offer-template-block.block-dates > small { color: #999ba8; font-size: .65em; font-weight: 700; letter-spacing: .08em; }
.offer-template-block.block-recipient > strong, .offer-template-block.block-dates > strong { font-size: .95em; }
.offer-template-block.block-recipient > span { color: #777a89; font-size: .78em; }
.offer-template-block.block-items { padding: 0; }
.offer-block-items { width: 100%; border-collapse: collapse; font-size: .72em; }
.offer-block-items th { padding: .75cqw .6cqw; border-bottom: .15cqw solid #dedfe7; color: #858896; font-size: .72em; text-align: left; }
.offer-block-items td { padding: 1cqw .6cqw; border-bottom: .12cqw solid #ececf1; color: var(--block-color); }
.offer-block-items th:not(:first-child), .offer-block-items td:not(:first-child) { text-align: right; white-space: nowrap; }
.offer-template-block.block-totals { gap: .5cqw; }
.offer-template-block.block-totals > span, .offer-template-block.block-totals > b { display: flex; justify-content: space-between; gap: 4px; }
.offer-template-block.block-totals > b { margin-top: .5cqw; padding-top: .8cqw; border-top: .2cqw solid var(--block-accent); font-size: 1.1em; }
.offer-template-block.block-totals > b > strong { color: var(--block-accent); }
.offer-template-block.block-terms { gap: .7cqw; }
.offer-template-block.block-terms > strong { font-size: 1.05em; }
.offer-template-block.block-terms > span { line-height: 1.6; white-space: pre-wrap; }
.offer-template-block.block-footer { justify-content: center; gap: .3cqw; border-top: .12cqw solid #eeeef3; font-size: .76em; }
.offer-template-block.block-footer > small { color: #777a89; }
.offer-template-block.block-heading { justify-content: center; font-size: calc(var(--block-font-size) * .126cqw); }
.offer-template-block.block-text { justify-content: flex-start; }
.offer-template-block.block-image { align-items: center; justify-content: center; }
.offer-block-image-placeholder { color: #a3a5b1; font-size: .85em; }
.offer-template-block.block-line { display: block; height: 0 !important; min-height: 0; padding: 0; border: 0; border-top: max(1px, .28cqw) solid var(--block-color); border-radius: 0; background: transparent; }
.offer-template-block.block-line.is-editing { height: 12px !important; overflow: visible; border: 0; }
.offer-template-block.block-line.is-editing::before { position: absolute; top: 50%; right: 0; left: 0; border-top: max(1px, .28cqw) solid var(--block-color); content: ""; }
.offer-template-block.block-line.is-editing.selected { outline: 1px dashed #7469e8; }
.offer-template-block.block-shape { border: 0; border-radius: 1cqw; }
.designer-workspace-footer { min-height: 37px; border-top: 1px solid #eaebf0; font-size: 8px; }
.designer-workspace-footer .link-button { font-size: 8px; }
.designer-inspector-content { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.designer-selected-label { display: flex; align-items: center; gap: 8px; padding-bottom: 11px; border-bottom: 1px solid #eff0f4; }
.designer-selected-label > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.designer-selected-label strong { color: #4c4e5d; font-size: 10px; }
.designer-selected-label small { color: #9da0ac; font-size: 8px; }
.designer-bound-note, .designer-no-selection { margin: 0; color: #9a9daa; font-size: 9px; line-height: 1.55; }
.designer-property { display: flex; flex-direction: column; gap: 5px; color: #7d8090; font-size: 9px; }
.designer-property input:not([type="color"]), .designer-property select, .designer-property textarea { width: 100%; min-height: 30px; padding: 5px 8px; border: 1px solid #e8e9ef; border-radius: 6px; background: white; color: #4d5060; font-size: 10px; }
.designer-property input[type="color"] { width: 100%; height: 31px; padding: 3px; border: 1px solid #e8e9ef; border-radius: 6px; background: white; }
.designer-property textarea { resize: vertical; }
.designer-property-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.designer-checkbox { display: flex; align-items: center; gap: 5px; color: #828593; font-size: 9px; }
.designer-checkbox input { accent-color: var(--violet); }
.designer-upload { display: flex; flex-direction: column; gap: 7px; color: #7d8090; font-size: 9px; }
.designer-upload-button { min-height: 31px; border: 1px solid #e8e9ef; border-radius: 6px; background: white; color: #6359ce; font-size: 9px; font-weight: 600; }
.designer-upload-button:hover { background: #f8f7ff; }
.designer-inspector-actions { display: flex; gap: 7px; padding-top: 7px; border-top: 1px solid #eff0f4; }
.designer-inspector-actions .button-small, .designer-inspector-actions .danger-button { min-height: 30px; font-size: 9px; }
.designer-global-properties { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; padding-top: 13px; border-top: 1px solid #eff0f4; }
.offer-designer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 17px; color: #9699a7; font-size: 9px; }
.offer-designer-footer > div { display: flex; gap: 8px; }
.custom-offer-document { position: relative; width: 100%; aspect-ratio: 210 / 297; overflow: hidden; padding: 0; container-type: inline-size; }
.custom-offer-document .offer-template-block:not(.is-editing) { border-color: transparent; border-radius: 0; }
.custom-offer-document .block-logo { border-radius: 12% !important; }
.custom-offer-document .block-recipient, .custom-offer-document .block-dates { border-radius: .8cqw !important; }
.custom-offer-document .block-shape { border-radius: 1cqw !important; }
.custom-offer-document .block-line { border-top-color: var(--block-color) !important; }

.toast { position: fixed; z-index: 100; top: 20px; right: 22px; max-width: min(420px, calc(100vw - 32px)); padding: 12px 16px; transform: translateY(-12px); border: 1px solid #dcefe5; border-radius: 9px; background: white; box-shadow: var(--shadow); color: #368b6c; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast.error { border-color: #f3dfe1; color: #bd5663; }
.modal-backdrop { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 20px; background: rgb(26 27 43 / 40%); backdrop-filter: blur(3px); }
.modal { width: min(100%, 490px); max-height: min(90vh, 760px); overflow-y: auto; border: 1px solid #eeeef3; border-radius: 13px; background: white; box-shadow: 0 24px 80px rgb(18 19 36 / 20%); animation: modal-in .18s ease-out; }
@keyframes modal-in { from { transform: translateY(8px) scale(.99); opacity: .7; } to { transform: translateY(0) scale(1); opacity: 1; } }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 21px 22px 15px; border-bottom: 1px solid #f0f0f4; }
.modal-header h2 { margin: 0 0 5px; font-family: Manrope, sans-serif; font-size: 17px; }
.modal-header p { margin: 0; color: #999ba7; font-size: 10px; }
.modal-close { display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 6px; background: #f6f6f9; color: #858794; font-size: 17px; }
.modal-form { display: flex; flex-direction: column; gap: 15px; padding: 19px 22px 22px; }
.modal-form .field { gap: 7px; font-size: 11px; }
.modal-form .field input, .modal-form .field select, .modal-form .field textarea { min-height: 39px; font-size: 11px; }
.modal-form .field textarea { min-height: 76px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.form-grid .field-full { grid-column: 1 / -1; }
.contact-editor { display: flex; flex-direction: column; gap: 10px; }
.contact-editor-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.contact-editor-header > div { display: flex; flex-direction: column; gap: 4px; }
.contact-editor-header > div > strong { color: #555867; font-size: 11px; }
.contact-editor-header > div > small { color: #a1a3af; font-size: 9px; }
.contact-editor-header .button-small { min-height: 31px; }
.contact-editor-entry { padding: 12px; border: 1px solid #eeeff4; border-radius: 8px; background: #fcfcfe; }
.contact-editor-entry > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.contact-editor-entry > header > strong { color: #686b7a; font-size: 10px; }
.remove-contact-button { color: #c85c69; font-size: 9px; }
.contact-editor-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.contact-editor-fields .field { gap: 5px; font-size: 9px; }
.contact-editor-fields .field input { min-height: 35px; padding: 0 9px; font-size: 10px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 7px; }
.confirm-copy { padding: 4px 22px 20px; color: #737684; font-size: 12px; line-height: 1.7; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 22px 22px; }
.sidebar-scrim { display: none; }

/* ─── Global search ─── */
.global-search { position: relative; display: flex; flex: 1; max-width: 420px; align-items: center; margin: 0 24px; }
.global-search-icon { position: absolute; left: 12px; color: #a1a4b1; font-size: 15px; pointer-events: none; }
.global-search input { width: 100%; height: 38px; padding: 0 52px 0 34px; border: 1px solid #ececf2; border-radius: 9px; background: #f8f8fb; color: #4d5060; font-size: 11px; transition: border-color .2s, background .2s, box-shadow .2s; }
.global-search input:focus { border-color: var(--violet-tint); background: white; box-shadow: 0 0 0 3px var(--violet-ring); outline: 0; }
.global-search input::placeholder { color: #b0b2bd; }
.global-search-kbd { position: absolute; right: 10px; padding: 2px 6px; border: 1px solid #e4e5ec; border-radius: 5px; background: white; color: #a4a7b3; font-family: inherit; font-size: 9px; pointer-events: none; }
.global-search-results { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; left: 0; display: flex; flex-direction: column; overflow: hidden; padding: 6px; border: 1px solid #eceef3; border-radius: 11px; background: white; box-shadow: 0 18px 50px rgb(24 25 43 / 14%); }
.search-result { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; }
.search-result:hover, .search-result:focus-visible { background: var(--violet-soft); outline: 0; }
.search-result-icon { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 7px; background: #f3f3f7; color: var(--violet-text); font-size: 13px; }
.search-result-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.search-result-copy strong { overflow: hidden; color: #3f4250; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.search-result-copy small { overflow: hidden; color: #9b9eaa; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.search-result-type { padding: 3px 7px; border-radius: 20px; background: #f3f3f7; color: #858896; font-size: 8px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.search-empty { padding: 14px; color: #9da0ae; font-size: 10px; text-align: center; }

/* ─── Segmented control ─── */
.segmented { display: inline-flex; padding: 3px; border: 1px solid #e9eaf0; border-radius: 8px; background: #f6f6f9; }
.segmented button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: #858896; font-size: 10px; font-weight: 600; }
.segmented button.active { background: white; color: var(--violet-text); box-shadow: 0 1px 4px rgb(24 25 43 / 8%); }

/* ─── Calendar ─── */
.calendar { padding: 6px 17px 17px; }
.calendar-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 0 14px; }
.calendar-toolbar strong { min-width: 150px; color: #3f4250; font-family: Manrope, sans-serif; font-size: 13px; text-align: center; text-transform: capitalize; }
.calendar-toolbar .button-small { min-height: 30px; padding: 0 10px; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendar-weekdays span { padding: 4px 0 8px; color: #a3a5b1; font-size: 9px; font-weight: 700; letter-spacing: .4px; text-align: center; text-transform: uppercase; }
.calendar-cell { display: flex; min-height: 92px; flex-direction: column; gap: 4px; padding: 7px; border: 1px solid #eff0f4; border-radius: 9px; background: #fcfcfe; cursor: pointer; transition: border-color .16s, background .16s; }
.calendar-cell:hover { border-color: var(--violet-tint); background: white; }
.calendar-cell.empty { border-style: dashed; background: transparent; cursor: default; }
.calendar-cell.today { border-color: var(--violet); background: white; }
.calendar-day-number { color: #6d7080; font-size: 10px; font-weight: 700; }
.calendar-cell.today .calendar-day-number { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--violet); color: white; }
.calendar-event { display: block; overflow: hidden; width: 100%; padding: 3px 6px; border: 0; border-left: 3px solid var(--violet); border-radius: 4px; background: var(--violet-soft); color: #4b4d5b; font-size: 9px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event span { color: var(--violet-text); font-weight: 700; }
.calendar-event.type-ofiste { border-left-color: var(--green); background: var(--green-soft); }
.calendar-event.type-ofiste span { color: var(--green); }
.calendar-event.type-telefon { border-left-color: var(--orange); background: var(--orange-soft); }
.calendar-event.type-telefon span { color: var(--orange); }
.calendar-more { color: #9b9eaa; font-size: 8px; }

/* ─── Status select (inline) ─── */
.status-select { min-height: 28px; padding: 0 22px 0 9px; border: 1px solid #ededf2; border-radius: 20px; background: #f1f1f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23888' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 8px center; color: #777a88; font-size: 9px; font-weight: 600; appearance: none; }
.status-select.active { border-color: #d6efe3; background-color: #eaf7f0; color: #359d74; }
.status-select.lead { border-color: #f6e0d0; background-color: #fff4e8; color: #d5934c; }
.status-select.passive { border-color: var(--violet-tint); background-color: var(--violet-soft); color: var(--violet-text); }

/* ─── Tasks ─── */
.task-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.task-summary article.alert strong { color: #d15e6b; }
.progress { width: 100%; height: 6px; overflow: hidden; border-radius: 6px; background: #eeeef3; }
.progress span { display: block; height: 100%; border-radius: 6px; background: var(--violet); transition: width .3s; }
.task-list { display: flex; flex-direction: column; }
.task-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 13px 17px; border-bottom: 1px solid #f2f2f5; transition: background .16s; }
.task-item:last-child { border-bottom: 0; }
.task-item.highlight { animation: task-highlight 1.6s ease-out; }
@keyframes task-highlight { from { background: var(--violet-soft); } to { background: transparent; } }
.task-list.compact .task-item { padding: 11px 17px; }
.task-check { position: relative; display: grid; width: 20px; height: 20px; place-items: center; cursor: pointer; }
.task-check input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.task-check span { display: grid; width: 18px; height: 18px; place-items: center; border: 2px solid #d4d6df; border-radius: 6px; background: white; transition: border-color .16s, background .16s; }
.task-check input:checked + span { border-color: var(--violet); background: var(--violet); }
.task-check input:checked + span::after { width: 5px; height: 9px; margin-top: -2px; border: solid white; border-width: 0 2px 2px 0; content: ""; transform: rotate(45deg); }
.task-check input:focus-visible + span { box-shadow: 0 0 0 3px var(--violet-ring); }
.task-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.task-copy strong { overflow: hidden; color: #3f4250; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.task-copy span { overflow: hidden; color: #9b9eaa; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.task-item.done .task-copy strong { color: #a3a5b1; text-decoration: line-through; }
.customer-name-link.inline { display: inline; font-size: 9px; color: var(--violet-text); }
.task-priority { padding: 3px 8px; border-radius: 20px; background: #f1f1f5; color: #777a88; font-size: 8px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.task-priority.yuksek { background: #fff0f1; color: #d15e6b; }
.task-priority.dusuk { background: #eef3fb; color: #6592d7; }
.task-due { padding: 4px 9px; border-radius: 20px; background: #f3f3f7; color: #858896; font-size: 9px; font-weight: 600; white-space: nowrap; }
.task-due.overdue { background: #fff0f1; color: #d15e6b; }
.task-due.today { background: var(--violet-soft); color: var(--violet-text); }
.task-due.soon { background: #fff4e8; color: #d5934c; }
.task-due.done { background: #eaf7f0; color: #359d74; }

/* ─── Reports ─── */
.report-toolbar { flex-wrap: wrap; }
.report-toolbar .filter-select { min-width: 140px; }
.kpi-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.kpi { display: flex; flex-direction: column; gap: 6px; padding: 14px 15px; border: 1px solid #eff0f4; border-radius: 10px; background: white; }
.kpi span { color: #9699a7; font-size: 9px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }
.kpi strong { color: #2f3240; font-family: Manrope, sans-serif; font-size: 18px; letter-spacing: -.4px; }
.kpi small { color: #a3a5b1; font-size: 9px; }
.reports-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.report-panel { display: flex; min-width: 0; flex-direction: column; }
.report-panel.wide { grid-column: 1 / -1; }
.report-body { flex: 1; padding: 17px 18px; }
.report-empty { margin: 0; padding: 24px 0; color: #9da0ae; font-size: 10px; text-align: center; }
.report-empty.success { color: #359d74; }
.donut-wrap { display: flex; align-items: center; gap: 22px; }
.donut { position: relative; display: grid; width: 132px; height: 132px; flex: 0 0 auto; place-items: center; border-radius: 50%; }
.donut-center { display: flex; width: 86px; height: 86px; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: white; }
.donut-center strong { color: #2f3240; font-family: Manrope, sans-serif; font-size: 20px; line-height: 1; }
.donut-center span { margin-top: 4px; color: #a3a5b1; font-size: 9px; }
.legend { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 9px; color: #6d7080; font-size: 10px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.legend strong { color: #3f4250; }
.legend small { min-width: 32px; color: #a3a5b1; font-size: 9px; text-align: right; }
.column-chart { display: flex; height: 190px; align-items: stretch; gap: 10px; }
.column-group { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: center; gap: 6px; }
.column-value { overflow: hidden; max-width: 100%; color: #6d7080; font-size: 8px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.column-track { display: flex; width: 100%; flex: 1; align-items: flex-end; justify-content: center; border-radius: 6px; background: linear-gradient(to top, #f5f5f8, transparent); }
.column { display: block; width: min(100%, 34px); border-radius: 6px 6px 2px 2px; background: linear-gradient(to top, var(--violet), var(--violet-tint)); transition: height .3s; }
.column-label { color: #a3a5b1; font-size: 9px; }
.hbar-list { display: flex; flex-direction: column; gap: 12px; }
.hbar-row { display: flex; flex-direction: column; gap: 6px; }
.hbar-meta { display: flex; align-items: baseline; gap: 8px; color: #6d7080; font-size: 10px; }
.hbar-meta strong { margin-left: auto; color: #3f4250; }
.hbar-meta small { color: #a3a5b1; font-size: 9px; }
.hbar-track { height: 8px; overflow: hidden; border-radius: 6px; background: #f1f1f5; }
.hbar-track span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(to right, var(--violet), var(--violet-tint)); }
.report-table { width: 100%; border-collapse: collapse; }
.report-table th { padding: 0 8px 9px; border-bottom: 1px solid #f1f1f5; color: #a5a7b2; font-size: 9px; font-weight: 600; text-align: left; white-space: nowrap; }
.report-table td { padding: 10px 8px; border-bottom: 1px solid #f5f5f7; color: #666a79; font-size: 10px; vertical-align: middle; }
.report-table tr:last-child td { border-bottom: 0; }
.report-table th:first-child, .report-table td:first-child { padding-left: 0; }
.report-table.slim { flex: 1; }
.report-table .score { display: inline-grid; min-width: 30px; height: 24px; place-items: center; padding: 0 8px; border-radius: 7px; background: var(--violet-soft); color: var(--violet-text); font-size: 10px; }
.share { position: relative; display: flex; min-width: 90px; align-items: center; gap: 8px; }
.share span { display: block; height: 6px; flex: 1; border-radius: 6px; background: linear-gradient(to right, var(--violet), var(--violet-tint)); }
.share small { color: #858896; font-size: 9px; }
.status-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.funnel { display: flex; flex-direction: column; gap: 10px; }
.funnel-step { display: grid; grid-template-columns: minmax(0, 1fr) 130px; align-items: center; gap: 12px; }
.funnel-bar { display: flex; min-height: 34px; align-items: center; justify-content: flex-end; padding: 0 12px; border-radius: 8px; background: linear-gradient(to right, var(--violet-tint), var(--violet)); color: white; transition: width .3s; }
.funnel-bar strong { font-family: Manrope, sans-serif; font-size: 13px; }
.funnel-label { display: flex; flex-direction: column; gap: 2px; color: #4b4d5b; font-size: 10px; font-weight: 600; }
.funnel-label small { color: #a3a5b1; font-size: 9px; font-weight: 400; }
.mini-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.mini-kpis.four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; }
.mini-kpis div { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 9px; background: #f8f8fb; text-align: center; }
.mini-kpis strong { color: #2f3240; font-family: Manrope, sans-serif; font-size: 16px; }
.mini-kpis span { color: #a3a5b1; font-size: 9px; }

/* ─── Settings ─── */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.settings-card { max-width: none; }
.theme-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.theme-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e9eaf0; border-radius: 9px; background: white; color: #626575; font-size: 11px; font-weight: 600; }
.theme-option:hover { border-color: var(--violet-tint); }
.theme-option.active { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-ring); }
.theme-swatch { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 3px white, 0 0 0 1px #e4e5ec; }
.theme-swatch.theme-violet { background: #7064e8; }
.theme-swatch.theme-ocean { background: #1f8fa3; }
.theme-swatch.theme-coral { background: #e8705f; }
.theme-swatch.theme-forest { background: #2f9a6c; }
.file-button { cursor: pointer; }

/* ─── Gruplu kenar çubuğu ─── */
.sidebar { overflow: hidden; }
.sidebar-nav { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 2px; overflow-y: auto; padding: 6px 2px 8px 0; margin-right: -6px; scrollbar-width: thin; }
.sidebar-nav .nav-label { margin: 2px 0 8px; }
.nav-group { margin-top: 6px; }
.nav-group-toggle { display: flex; width: 100%; min-height: 36px; align-items: center; gap: 11px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: #5d606f; font-size: 11px; font-weight: 700; text-align: left; }
.nav-group-toggle:hover { background: #f7f7fc; }
.nav-group.current .nav-group-toggle { color: var(--violet-text); }
.nav-chevron { margin-left: auto; color: #b3b6c2; font-size: 14px; transition: transform .18s; }
.nav-group.open .nav-chevron { transform: rotate(180deg); }
.nav-group-items { display: none; padding: 2px 0 4px 10px; border-left: 1px solid #eef0f5; margin-left: 20px; }
.nav-group.open .nav-group-items { display: flex; flex-direction: column; gap: 1px; }
.nav-group-items .nav-item { min-height: 32px; font-size: 11px; }
.nav-group-items .nav-item .nav-icon { font-size: 12px; opacity: .75; }
.nav-count.accent { background: var(--violet); color: white; }
.sidebar-bottom { flex: 0 0 auto; }

/* ─── Bildirimler ─── */
.notification-wrap { position: relative; display: flex; align-items: center; }
.notification-panel { position: absolute; z-index: 40; top: calc(100% + 10px); right: -10px; width: min(380px, calc(100vw - 32px)); overflow: hidden; border: 1px solid #eceef3; border-radius: 12px; background: white; box-shadow: 0 18px 50px rgb(24 25 43 / 14%); }
.notification-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #f1f1f5; color: #3f4250; font-size: 11px; }
.notification-panel > header > div { display: flex; gap: 10px; }
.notification-item { display: flex; width: 100%; align-items: center; gap: 11px; padding: 11px 14px; border: 0; border-bottom: 1px solid #f5f5f7; background: white; text-align: left; }
.notification-item:last-child { border-bottom: 0; }
.notification-item:hover { background: #fafaff; }
.notification-item.read { opacity: .65; }
.notification-icon { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: var(--violet-soft); color: var(--violet-text); font-size: 13px; }
.notification-item.warning .notification-icon, .notification-item.reminder .notification-icon { background: #fff4e8; color: #d5934c; }
.notification-item.danger .notification-icon { background: #fff0f1; color: #d15e6b; }
.notification-item.approval .notification-icon { background: #eaf7f0; color: #359d74; }
.notification-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.notification-copy > span { overflow: hidden; color: #3f4250; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.notification-copy small { color: #9b9eaa; font-size: 9px; }
.notification-list { display: flex; flex-direction: column; }
.notification-list.compact .notification-item { padding: 9px 17px; }

/* ─── Genel modül bileşenleri ─── */
.module-summary article small { color: #a3a5b1; font-size: 9px; }
.module-summary article.alert strong { color: #d15e6b; }
.filters-row.inline { padding: 0; flex-wrap: wrap; }
.muted { color: #a3a5b1; }
.cell-clamp { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.module-table td { white-space: normal; }
.color-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; box-shadow: inset 0 0 0 2px white, 0 0 0 1px #e4e5ec; }
.tag-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 20px; background: color-mix(in srgb, var(--tag) 14%, white); color: var(--tag); font-size: 9px; font-weight: 700; }
.tag-chip::before { width: 6px; height: 6px; border-radius: 50%; background: var(--tag); content: ""; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.stats-chips { margin-bottom: 14px; }
.field-checkbox { min-height: 46px; }
.modal-form .field-checkbox { min-height: 39px; }
.permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; border: 1px solid #e7e8ef; border-radius: 8px; }
.permission-grid .designer-checkbox { font-size: 11px; color: #4d5060; }
.field-inline { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.field-inline input { width: 90px !important; }
.lead-score { display: inline-grid; min-width: 34px; height: 26px; place-items: center; padding: 0 8px; border-radius: 8px; font-size: 10px; font-weight: 700; }
.lead-score.hot { background: #fff0f1; color: #d15e6b; }
.lead-score.warm { background: #fff4e8; color: #d5934c; }
.lead-score.cold { background: #f1f1f5; color: #858896; }
.target-progress { display: flex; min-width: 140px; flex-direction: column; gap: 4px; }
.target-progress small { color: #858896; font-size: 9px; }
.status-pill.danger { background: #fff0f1; color: #d15e6b; }
.code-block { overflow-x: auto; margin: 0; padding: 12px 14px; border-radius: 8px; background: #22213f; color: #e6e4ff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; line-height: 1.6; white-space: pre; }
.switch { position: relative; display: inline-block; width: 36px; height: 20px; flex: 0 0 auto; }
.switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 20px; background: #d9dbe4; transition: background .18s; }
.switch span::after { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgb(0 0 0 / 20%); content: ""; transition: transform .18s; }
.switch input:checked + span { background: var(--violet); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--violet-ring); }

/* ─── Kanban ─── */
.kanban { display: grid; grid-template-columns: repeat(6, minmax(190px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kanban-column { display: flex; min-height: 320px; flex-direction: column; border: 1px solid #eff0f4; border-radius: 10px; background: #f8f8fb; transition: border-color .16s, background .16s; }
.kanban-column.over { border-color: var(--violet); background: var(--violet-soft); }
.kanban-column.won { background: #f3faf6; }
.kanban-column.lost { background: #fdf4f5; }
.kanban-column > header { display: flex; flex-direction: column; gap: 3px; padding: 12px 13px 9px; border-bottom: 1px solid #ececf1; color: #4b4d5b; font-size: 11px; }
.kanban-column > header span { color: #9b9eaa; font-size: 9px; }
.kanban-cards { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 10px; }
.kanban-card { display: flex; flex-direction: column; gap: 6px; padding: 11px 12px; border: 1px solid #eceef3; border-radius: 9px; background: white; cursor: grab; transition: box-shadow .16s, transform .16s; }
.kanban-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.kanban-card.dragging { opacity: .5; }
.kanban-card strong { color: #3f4250; font-size: 11px; }
.kanban-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #4b4d5b; font-size: 11px; font-weight: 700; }
.kanban-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #9b9eaa; font-size: 9px; }
.kanban-empty { padding: 20px 10px; border: 1px dashed #dcdde6; border-radius: 8px; color: #b3b6c2; font-size: 9px; text-align: center; }

/* ─── Geçmiş / zaman çizelgesi ─── */
.history-list { display: flex; flex-direction: column; }
.history-item { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f2f2f5; }
.history-item:last-child { border-bottom: 0; }
.history-type { display: inline-block; padding: 4px 8px; border-radius: 6px; background: var(--violet-soft); color: var(--violet-text); font-size: 9px; font-weight: 700; text-align: center; }
.history-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.history-copy strong { color: #3f4250; font-size: 11px; }
.history-copy span { overflow: hidden; color: #9b9eaa; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.history-item time { color: #a3a5b1; font-size: 9px; white-space: nowrap; }

/* ─── İletişim ─── */
.comm-list { display: flex; flex-direction: column; }
.comm-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: start; gap: 12px; padding: 13px 17px; border-bottom: 1px solid #f2f2f5; }
.comm-item:last-child { border-bottom: 0; }
.comm-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: var(--violet-soft); color: var(--violet-text); font-size: 14px; }
.comm-item.call .comm-icon { background: #eaf7f0; color: #359d74; }
.comm-item.whatsapp .comm-icon { background: #e7f8ee; color: #25a96a; }
.comm-item.sms .comm-icon { background: #fff4e8; color: #d5934c; }
.comm-item.chat .comm-icon { background: #e6f6f9; color: #187a8c; }
.comm-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.comm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.comm-head strong { color: #3f4250; font-size: 11px; }
.comm-copy > span { color: #9b9eaa; font-size: 9px; }
.comm-copy p { margin: 2px 0 0; color: #6d7080; font-size: 10px; line-height: 1.6; white-space: pre-wrap; }
.comm-item time { color: #a3a5b1; font-size: 9px; text-align: right; line-height: 1.5; }
.quick-dial { display: flex; flex-direction: column; }
.quick-dial-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f2f2f5; }
.quick-dial-row:last-child { border-bottom: 0; }
.quick-dial-row strong { display: block; color: #3f4250; font-size: 11px; }
.quick-dial-row small { color: #9b9eaa; font-size: 9px; }
.quick-dial-row .button-small { min-height: 30px; text-decoration: none; }
.quick-comms { display: flex; gap: 4px; margin-right: 6px; padding-right: 8px; border-right: 1px solid #eeeef3; }
.quick-comms .row-action { text-decoration: none; }

/* ─── Canlı destek ─── */
.chat-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 14px; min-height: 480px; }
.chat-list { display: flex; flex-direction: column; overflow-y: auto; }
.chat-list-item { display: flex; width: 100%; align-items: center; gap: 10px; padding: 12px 14px; border: 0; border-bottom: 1px solid #f2f2f5; background: white; text-align: left; }
.chat-list-item.active { background: var(--violet-soft); }
.chat-list-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.chat-list-copy strong { color: #3f4250; font-size: 11px; }
.chat-list-copy small { overflow: hidden; color: #9b9eaa; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.chat-window { display: flex; flex-direction: column; }
.chat-messages { display: flex; flex: 1; flex-direction: column; gap: 10px; min-height: 300px; max-height: 480px; overflow-y: auto; padding: 16px; background: #fafafc; }
.chat-bubble { max-width: 70%; padding: 10px 12px; border-radius: 12px; background: white; border: 1px solid #eceef3; }
.chat-bubble.agent { align-self: flex-end; border-color: transparent; background: var(--violet); color: white; }
.chat-bubble p { margin: 0 0 4px; font-size: 11px; line-height: 1.5; }
.chat-bubble time { font-size: 8px; opacity: .7; }
.chat-compose { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #f1f1f5; }
.chat-compose input { flex: 1; min-height: 38px; padding: 0 12px; border: 1px solid #e7e8ef; border-radius: 8px; font-size: 11px; }

/* ─── İş akışları ─── */
.workflow-list { display: flex; flex-direction: column; }
.workflow-card { display: flex; align-items: center; gap: 14px; padding: 14px 17px; border-bottom: 1px solid #f2f2f5; }
.workflow-card:last-child { border-bottom: 0; }
.workflow-card.inactive { opacity: .55; }
.workflow-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 7px; }
.workflow-copy strong { color: #3f4250; font-size: 11px; }
.workflow-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chain-step { padding: 4px 9px; border-radius: 6px; font-size: 9px; font-weight: 600; }
.chain-step.trigger { background: var(--violet-soft); color: var(--violet-text); }
.chain-step.condition { background: #fff4e8; color: #d5934c; }
.chain-step.action { background: #eaf7f0; color: #359d74; }
.chain-arrow { color: #b3b6c2; font-size: 10px; }

/* ─── Entegrasyon / API ─── */
.integration-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.integration-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.integration-card.enabled { border-color: var(--violet-tint); }
.integration-card > header { display: flex; align-items: center; gap: 10px; }
.integration-card > header > div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.integration-card strong { color: #3f4250; font-size: 12px; }
.integration-card small { color: #9b9eaa; font-size: 9px; }
.integration-card p { margin: 0; color: #6d7080; font-size: 10px; line-height: 1.6; }
.integration-icon { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: var(--violet-soft); color: var(--violet-text); font-family: Manrope, sans-serif; font-size: 15px; font-weight: 800; }
.integration-form { gap: 8px; padding-top: 8px; border-top: 1px solid #f1f1f5; }
.integration-form .field { font-size: 10px; }
.integration-form .field input { min-height: 34px; font-size: 11px; }
.api-key { padding: 3px 6px; border-radius: 5px; background: #f3f3f7; font-family: ui-monospace, Menlo, monospace; font-size: 10px; }
.endpoint-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.endpoint { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 8px 10px; font-size: 10px; }
.endpoint code { color: #3f4250; font-family: ui-monospace, Menlo, monospace; }
.endpoint small { grid-column: 2; color: #9b9eaa; font-size: 9px; }
.method { padding: 3px 0; border-radius: 5px; font-size: 9px; font-weight: 700; text-align: center; }
.method.get { background: #eaf7f0; color: #359d74; }
.method.post { background: var(--violet-soft); color: var(--violet-text); }
.export-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.export-grid .button-small { justify-content: flex-start; gap: 6px; }
.export-grid small { color: #a3a5b1; font-weight: 400; }

/* ─── Yapay zekâ ─── */
.ai-badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 20px; background: linear-gradient(135deg, var(--violet-soft), #fdf2ff); color: var(--violet-text); font-size: 11px; font-weight: 700; }
.insight-list { display: flex; flex-direction: column; }
.ai-insight { display: flex; align-items: center; gap: 14px; padding: 14px 17px; border-bottom: 1px solid #f2f2f5; }
.ai-insight:last-child { border-bottom: 0; }
.ai-insight-icon { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: var(--violet-soft); color: var(--violet-text); font-size: 15px; }
.ai-insight.danger .ai-insight-icon { background: #fff0f1; color: #d15e6b; }
.ai-insight.warning .ai-insight-icon { background: #fff4e8; color: #d5934c; }
.ai-insight.success .ai-insight-icon { background: #eaf7f0; color: #359d74; }
.ai-insight-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.ai-insight-copy strong { color: #3f4250; font-size: 11px; }
.ai-insight-copy p { margin: 0; color: #6d7080; font-size: 10px; line-height: 1.6; }
.ai-notes p { margin: 0 0 10px; color: #6d7080; font-size: 10px; line-height: 1.7; }
.ai-notes strong { color: #3f4250; }

/* ─── Diğer ─── */
.kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; }
.kb-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.kb-card h3 { margin: 0; color: #3f4250; font-size: 12px; }
.kb-card p { margin: 0; color: #6d7080; font-size: 10px; line-height: 1.6; }
.kb-card small { color: #a3a5b1; font-size: 9px; }
.detail-mini-list { display: flex; flex-direction: column; padding: 6px 17px 12px; }
.detail-mini-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f2f2f5; font-size: 10px; }
.detail-mini-row:last-child { border-bottom: 0; }
.detail-mini-row strong { overflow: hidden; color: #3f4250; text-overflow: ellipsis; white-space: nowrap; }
.detail-mini-row small { color: #9b9eaa; }
.customer-profile-tags.extended { margin-top: 10px; flex-wrap: wrap; gap: 6px; }
.product-pick-row { display: flex; flex-direction: column; gap: 6px; }
.product-pick-row select { min-height: 32px; padding: 0 8px; border: 1px dashed #d9d6f7; border-radius: 7px; background: #fbfaff; color: var(--violet-text); font-size: 10px; }
.calendar-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: #9b9eaa; font-size: 9px; }
.calendar-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 3px; border-radius: 3px; background: var(--violet); vertical-align: middle; }
.calendar-legend i.appointment, .calendar-event.appointment { border-left-color: #1f8fa3; background: #e6f6f9; }
.calendar-legend i.appointment { background: #1f8fa3; }
.calendar-event.appointment span { color: #187a8c; }
.calendar-legend i.visit, .calendar-event.visit { border-left-color: var(--green); background: var(--green-soft); }
.calendar-legend i.visit { background: var(--green); }
.calendar-legend i.task, .calendar-event.task { border-left-color: var(--orange); background: var(--orange-soft); }
.calendar-legend i.task { background: var(--orange); }
.calendar-event.task span { color: var(--orange); }
.calendar-legend i.reminder, .calendar-event.reminder { border-left-color: #dc6472; background: #fff0f1; }
.calendar-legend i.reminder { background: #dc6472; }
.calendar-event.reminder span { color: #dc6472; }
.mobile-feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mobile-feature { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border: 1px solid #eceef3; border-radius: 9px; background: white; text-align: left; }
.mobile-feature:hover { border-color: var(--violet-tint); }
.mobile-feature span { font-size: 16px; color: var(--violet-text); }
.mobile-feature strong { color: #3f4250; font-size: 11px; }
.mobile-feature small { color: #9b9eaa; font-size: 9px; }
.reports-section-label { margin: 22px 0 13px; }

@media (max-width: 1050px) {
  .sidebar { width: 220px; }
  .app-main { margin-left: 220px; }
  .page-content { padding-right: 23px; padding-left: 23px; }
  .topbar { padding-right: 23px; padding-left: 23px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .kpi-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .global-search { max-width: 280px; margin: 0 14px; }
  .customer-detail-grid { grid-template-columns: minmax(0, 1.4fr) minmax(220px, .8fr); }
}
@media (max-width: 760px) {
  .auth-screen { display: block; }
  .auth-story { display: none; }
  .auth-panel { min-height: 100vh; padding: 24px; }
  .auth-form-wrap { margin: auto; padding: 54px 0 44px; }
  .auth-panel-footer { padding-bottom: 4px; }
  .sidebar { z-index: 40; width: 255px; transform: translateX(-105%); transition: transform .22s ease; box-shadow: 8px 0 30px rgb(24 25 43 / 8%); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-scrim.visible { position: fixed; z-index: 30; inset: 0; display: block; background: rgb(24 25 43 / 30%); }
  .app-main { margin-left: 0; }
  .topbar { height: 58px; padding: 0 16px; }
  .mobile-menu { display: grid; width: 30px; height: 30px; place-items: center; border: 0; background: transparent; color: #626575; font-size: 17px; }
  .breadcrumb { margin-right: auto; margin-left: 10px; gap: 7px; font-size: 10px; }
  .today-label, .topbar-divider, .notification-button, .global-search-kbd { display: none; }
  .global-search { margin: 0 6px; }
  .global-search input { height: 34px; padding-left: 30px; font-size: 10px; }
  .reports-grid { grid-template-columns: 1fr; }
  .module-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .chat-layout { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: repeat(6, 220px); }
  .history-item { grid-template-columns: minmax(0, 1fr); }
  .history-item time { grid-row: 1; }
  .comm-item { grid-template-columns: 34px minmax(0, 1fr); }
  .comm-item time, .comm-item .row-action { grid-column: 2; justify-self: start; }
  .permission-grid, .export-grid, .mobile-feature-list { grid-template-columns: 1fr; }
  .notification-panel { right: -40px; }
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .task-item .task-priority { display: none; }
  .task-item .table-actions { grid-column: 2 / -1; justify-content: flex-end; }
  .calendar-cell { min-height: 58px; padding: 4px; }
  .calendar-event { display: none; }
  .calendar-cell:has(.calendar-event)::after { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); content: ""; }
  .calendar-more { display: none; }
  .donut-wrap { flex-direction: column; align-items: stretch; }
  .funnel-step { grid-template-columns: minmax(0, 1fr) 100px; }
  .theme-picker { grid-template-columns: 1fr; }
  .topbar-actions { gap: 8px; }
  .page-content { padding: 23px 16px 35px; }
  .page-heading { align-items: flex-start; }
  .page-heading h1 { font-size: 20px; }
  .page-heading p { max-width: 290px; line-height: 1.5; }
  .heading-actions { flex-shrink: 0; }
  .heading-actions .button-label { display: none; }
  .button-small { width: 36px; min-height: 36px; padding: 0; font-size: 16px; }
  .dashboard-grid { gap: 13px; }
  .customer-detail-grid { grid-template-columns: 1fr; }
  .customer-profile { align-items: flex-start; flex-direction: column; padding: 17px; }
  .customer-profile-actions { width: 100%; }
  .customer-profile-actions .button { flex: 1; }
  .report-grid { grid-template-columns: 1fr; }
  .meeting-cards { grid-template-columns: 1fr; }
  .list-toolbar { flex-wrap: wrap; }
  .search-box { width: 100%; }
  .toolbar-spacer { display: none; }
  .modal:has(.offer-designer-layout) { width: 98vw; }
  .offer-designer-layout { height: min(76vh, 700px); min-height: 500px; grid-template-columns: 125px minmax(280px, 1fr); grid-template-rows: minmax(310px, 1fr) 190px; }
  .offer-designer-inspector { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid #eeeef3; border-left: 0; }
  .designer-global-properties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
  .designer-global-properties .designer-panel-title { grid-column: 1 / -1; }
  .offer-designer-tools { grid-column: 1; grid-row: 1; padding-right: 8px; padding-left: 8px; }
  .offer-designer-workspace { grid-column: 2; grid-row: 1; }
  .designer-workspace-header span:last-child, .designer-workspace-footer > span { display: none; }
  .offer-designer-stage { justify-content: flex-start; }
  .offer-designer-canvas { width: max(100%, 300px); }
}
@media (max-width: 480px) {
  .auth-panel { padding-right: 20px; padding-left: 20px; }
  .page-heading { gap: 8px; }
  .page-heading p { font-size: 10px; }
  .stats-grid { gap: 9px; }
  .stat-card { min-height: 115px; padding: 12px; }
  .stat-number { font-size: 22px; }
  .stat-top { font-size: 9px; }
  .stat-icon { width: 27px; height: 27px; }
  .panel-header { padding: 14px; }
  .data-table th, .data-table td { padding-right: 10px; padding-left: 10px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .field-full { grid-column: auto; }
  .contact-editor-fields { grid-template-columns: 1fr; }
  .modal-backdrop { padding: 10px; }
  .modal { max-height: 94vh; }
  .offer-summary { grid-template-columns: 1fr; gap: 8px; }
  .offer-summary article { min-height: 66px; }
  .offer-item-row { grid-template-columns: minmax(0, 1fr) 65px 28px; }
  .offer-item-row .field:first-child { grid-column: 1 / -1; }
  .offer-item-row .field:nth-child(3) { grid-column: 1 / 3; }
  .offer-document { padding: 24px 18px; }
  .offer-document-title h2 { font-size: 20px; }
  .offer-document-meta { gap: 12px; padding: 12px; }
  .offer-document-table th, .offer-document-table td { padding: 9px 4px; font-size: 8px; }
  .offer-designer-layout { grid-template-columns: 88px minmax(230px, 1fr); grid-template-rows: minmax(260px, 1fr) 210px; }
  .designer-tool { min-height: 32px; gap: 4px; padding: 0 4px; font-size: 8px; }
  .designer-tool-icon { width: 19px; height: 19px; font-size: 10px; }
  .designer-tool-plus { display: none; }
  .designer-global-properties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer-designer-footer { align-items: flex-start; flex-direction: column; }
  .offer-designer-footer > div { align-self: flex-end; }
  .designer-inspector-actions .button-small { width: auto; }
}

@media print {
  @page { size: A4; margin: 16mm; }
  body:not(.print-reports) * { visibility: hidden !important; }
  body:not(.print-reports) #modal-root, body:not(.print-reports) #modal-root * { visibility: visible !important; }
  .print-reports .sidebar, .print-reports .topbar, .print-reports .toast, .print-reports .report-toolbar, .print-reports .sidebar-scrim, .print-reports [data-report-export] { display: none !important; }
  .print-reports .app-main { margin: 0 !important; }
  .print-reports .page-content { width: 100% !important; padding: 0 !important; }
  .print-reports .reports-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .print-reports .report-panel, .print-reports .kpi { break-inside: avoid; }
  #modal-root { position: static !important; }
  .modal-backdrop { position: static !important; display: block !important; padding: 0 !important; background: white !important; backdrop-filter: none !important; }
  .modal:has(.offer-document) { width: 100% !important; max-height: none !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; animation: none !important; }
  .modal-header, .offer-preview-actions { display: none !important; }
  .offer-document { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .offer-document-table tr, .offer-document-totals, .offer-document-meta { break-inside: avoid; }
  .custom-offer-document { aspect-ratio: 210 / 297; overflow: hidden; }
  .custom-offer-document .offer-template-block { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}