:root {
  --ink: #15233a;
  --ink-soft: #5e6b80;
  --canvas: #f4f7fb;
  --card: #ffffff;
  --line: #e8edf4;
  --nav: #15233a;
  --nav-muted: #9dadc3;
  --violet: #665cf3;
  --violet-soft: #ecebff;
  --blue: #2f80ed;
  --blue-soft: #e6f0ff;
  --green: #14a77b;
  --green-soft: #e3f7f0;
  --orange: #ed8a28;
  --orange-soft: #fff1df;
  --red: #dd5a62;
  --red-soft: #fce7e8;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 1120px; background: var(--canvas); }
button, input, select { font: inherit; }
button { cursor: pointer; }

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  display: flex;
  position: fixed;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 248px;
  flex-direction: column;
  padding: 25px 16px 16px;
  color: #fff;
  background: radial-gradient(circle at -10% -4%, #354c72 0%, var(--nav) 43%);
}

.brand { display: flex; align-items: center; padding: 0 10px; }
.brand-logo { display: block; width: 64px; height: 64px; flex: 0 0 64px; border: 1px solid rgba(255,255,255,.3); border-radius: 16px; background: #f8fbff; box-shadow: 0 7px 18px rgba(7, 17, 35, .3); object-fit: cover; }
.workspace { margin: 17px 10px 27px; color: var(--nav-muted); font-size: 12px; }
.sidebar nav { display: grid; gap: 20px; }
.nav-group { display: grid; gap: 4px; }
.nav-label { margin: 0 10px 5px; color: #72829a; font-size: 10px; font-weight: 760; letter-spacing: 1.1px; text-transform: uppercase; }
.nav-item { display: flex; align-items: center; width: 100%; gap: 12px; min-height: 40px; padding: 0 10px; color: #b8c4d4; border: 0; border-radius: 9px; background: transparent; text-align: left; font-size: 14px; transition: .16s ease; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.065); }
.nav-item.active { color: #fff; background: rgba(139, 148, 255, .22); box-shadow: inset 2px 0 0 #9a95ff; }
.nav-icon { width: 16px; color: #91a1bc; text-align: center; font-size: 15px; }
.nav-item.active .nav-icon { color: #c7c4ff; }
.nav-item b { display: grid; min-width: 18px; height: 18px; place-items: center; margin-left: auto; padding: 0 5px; color: #fff; border-radius: 10px; background: var(--violet); font-size: 10px; }
.sidebar-foot { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 14px 8px 2px; border-top: 1px solid rgba(255,255,255,.1); }
.profile-avatar, .topbar-avatar { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #f8ce97, #d9874f); color: #52301f; font-size: 11px; font-weight: 800; }
.sidebar-foot strong { display: block; font-size: 12px; }
.sidebar-foot span { display: block; margin-top: 2px; color: var(--nav-muted); font-size: 10px; }
.icon-button { width: 26px; height: 26px; margin-left: auto; color: #aebbd0; border: 0; border-radius: 7px; background: transparent; font-size: 16px; }
.icon-button:hover { color: #fff; background: rgba(255,255,255,.09); }

.workspace-main { width: calc(100% - 248px); margin-left: 248px; }
.topbar { display: flex; position: sticky; z-index: 1; top: 0; align-items: center; justify-content: space-between; height: 68px; padding: 0 42px; border-bottom: 1px solid rgba(221,227,238,.75); background: rgba(244,247,251,.91); backdrop-filter: blur(12px); }
.crumb { display: flex; align-items: center; gap: 9px; color: #8b97a9; font-size: 13px; }
.crumb i { color: #c0c7d1; font-style: normal; }.crumb strong { color: #46546a; font-weight: 650; }
.topbar-actions { display: flex; align-items: center; gap: 16px; }.quick-action { padding: 8px 11px; color: #3e3a8d; border: 0; border-radius: 7px; background: #e8e7ff; font-size: 12px; font-weight: 750; }.quick-action:hover { background: #dddcff; }
.bell { position: relative; width: 28px; height: 28px; color: #536178; border: 0; background: transparent; font-size: 20px; }.bell b { position: absolute; top: 2px; right: 1px; display: grid; min-width: 13px; height: 13px; place-items: center; padding: 0 3px; color: white; border-radius: 8px; background: var(--red); font-size: 8px; }.topbar-avatar { width: 32px; height: 32px; }

.content { max-width: 1480px; margin: 0 auto; padding: 39px 42px 48px; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 27px; }.page-header h1 { margin: 4px 0 7px; color: #17253c; font-size: 28px; line-height: 1.18; letter-spacing: -1.1px; }.eyebrow { margin: 0; color: #8793a8; font-size: 11px; font-weight: 760; letter-spacing: .85px; text-transform: uppercase; }.page-description { max-width: 710px; margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }.header-actions { display: flex; gap: 9px; flex: 0 0 auto; }.button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 15px; border-radius: 8px; font-size: 12px; font-weight: 720; transition: .16s ease; }.button-primary { color: #fff; border: 1px solid var(--violet); background: var(--violet); box-shadow: 0 6px 14px rgba(102,92,243,.17); }.button-primary:hover { background: #5349e8; transform: translateY(-1px); }.button-secondary { color: #46546a; border: 1px solid #dce2ec; background: #fff; }.button-secondary:hover { border-color: #cbd4e2; background: #fafcff; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; margin-bottom: 18px; }.metric-card { position: relative; overflow: hidden; min-height: 142px; padding: 19px 19px 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); box-shadow: 0 6px 22px rgba(41,52,75,.035); }.metric-card:after { position: absolute; right: -17px; bottom: -24px; width: 86px; height: 86px; border-radius: 50%; content: ""; opacity: .7; }.metric-card p { margin: 16px 0 5px; color: #718097; font-size: 12px; }.metric-card strong { display: block; font-size: 22px; letter-spacing: -.7px; }.metric-card small { display: block; margin-top: 8px; color: #94a0b2; font-size: 11px; }.metric-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; font-size: 16px; font-weight: 800; }.metric-violet .metric-icon { color: var(--violet); background: var(--violet-soft); }.metric-violet:after { background: #f0efff; }.metric-blue .metric-icon { color: var(--blue); background: var(--blue-soft); }.metric-blue:after { background: #edf5ff; }.metric-green .metric-icon { color: var(--green); background: var(--green-soft); }.metric-green:after { background: #e9f9f3; }.metric-orange .metric-icon { color: var(--orange); background: var(--orange-soft); }.metric-orange:after { background: #fff5e8; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .8fr); gap: 18px; }.bottom-grid { margin-top: 18px; }.panel { min-width: 0; border: 1px solid var(--line); border-radius: 13px; background: var(--card); box-shadow: 0 6px 22px rgba(41,52,75,.032); }.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; padding: 21px 23px 0; }.panel-heading h2 { margin: 5px 0 0; font-size: 16px; letter-spacing: -.35px; }.text-button { padding: 3px 0; color: var(--violet); border: 0; background: transparent; font-size: 11px; font-weight: 750; }.count-pill { display: grid; min-width: 21px; height: 21px; place-items: center; border-radius: 12px; background: var(--violet-soft); color: var(--violet); font-size: 11px; font-weight: 800; }
.pipeline-list { display: grid; gap: 17px; padding: 26px 23px 25px; }.pipeline-row { display: grid; grid-template-columns: 164px 1fr; gap: 17px; align-items: center; }.pipeline-row span { display: block; font-size: 12px; font-weight: 700; }.pipeline-row small { display: block; margin-top: 4px; color: #8a96a8; font-size: 10px; }.bar { height: 8px; overflow: hidden; border-radius: 8px; background: #edf0f6; }.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8f88ff, #6359ed); }.focus-list { padding: 14px 14px 16px; }.focus-item { display: grid; width: 100%; grid-template-columns: 40px 1fr 14px; gap: 9px; align-items: center; padding: 11px 8px; color: inherit; border: 0; border-bottom: 1px solid #eff2f6; background: transparent; text-align: left; }.focus-item:last-child { border-bottom: 0; }.focus-item:hover { background: #fafbfe; }.focus-type { display: grid; height: 24px; place-items: center; color: #655cf0; border-radius: 6px; background: #efefff; font-size: 10px; font-weight: 760; }.focus-item strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.focus-item small { display: block; overflow: hidden; margin-top: 3px; color: #909baa; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.focus-item > span:last-child { color: #a1abbb; }.activity-list { display: grid; gap: 18px; margin: 0; padding: 24px 23px 25px; list-style: none; }.activity-list li { display: grid; grid-template-columns: 44px 10px 1fr; gap: 10px; align-items: start; }.activity-list time { padding-top: 1px; color: #94a0b1; font-size: 10px; }.activity-dot { display: block; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #56c0a0; box-shadow: 0 0 0 4px #e9f8f3; }.activity-dot.is-violet { background: var(--violet); box-shadow: 0 0 0 4px #efefff; }.activity-list strong { display: block; font-size: 12px; }.activity-list small { display: block; margin-top: 4px; color: #91a0b1; font-size: 10px; }.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 23px; }.quick-grid button { display: grid; min-height: 84px; justify-items: start; gap: 12px; padding: 13px; color: #536077; border: 1px solid #e9edf3; border-radius: 10px; background: #fbfcfe; font-size: 12px; text-align: left; }.quick-grid button:hover { color: var(--violet); border-color: #d8d6ff; background: #f9f8ff; }.quick-grid span { color: var(--violet); font-size: 17px; font-weight: 800; }

.list-panel { overflow: hidden; }.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 72px; padding: 0 21px; border-bottom: 1px solid #edf0f5; }.tabs { display: flex; align-self: stretch; gap: 19px; }.tab { position: relative; padding: 0; color: #8793a4; border: 0; background: none; font-size: 12px; }.tab.active { color: #293850; font-weight: 750; }.tab.active:after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; border-radius: 2px; background: var(--violet); content: ""; }.toolbar-search { display: flex; width: 280px; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid #e4e9f1; border-radius: 8px; background: #fbfcfe; color: #9ba6b6; }.toolbar-search input { width: 100%; height: 32px; outline: none; color: #344258; border: 0; background: transparent; font-size: 12px; }.toolbar-search input::placeholder { color: #aeb7c4; }.table-shell { width: 100%; overflow-x: auto; }table { width: 100%; border-spacing: 0; border-collapse: collapse; }th { height: 41px; padding: 0 18px; color: #94a0b2; border-bottom: 1px solid #edf0f5; background: #fbfcfe; font-size: 10px; font-weight: 700; letter-spacing: .2px; text-align: left; white-space: nowrap; }td { height: 61px; padding: 10px 18px; color: #48566b; border-bottom: 1px solid #f0f2f6; font-size: 12px; white-space: nowrap; }tbody tr:hover td { background: #fcfdff; }tbody tr:last-child td { border-bottom: 0; }td strong { display: block; color: #2b3a51; font-weight: 700; }.table-secondary { display: block; overflow: hidden; max-width: 220px; margin-top: 4px; color: #98a4b5; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.company-cell { display: flex; align-items: center; gap: 9px; }.company-avatar { display: grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; color: #5d55db; border-radius: 8px; background: #eeedff; font-size: 10px; font-weight: 800; }.owner { display: flex; align-items: center; gap: 6px; }.owner span { display: grid; width: 20px; height: 20px; place-items: center; color: #6862dd; border-radius: 50%; background: #efefff; font-size: 8px; font-weight: 800; }.score { display: inline-grid; width: 27px; height: 22px; place-items: center; color: #156f5a; border-radius: 6px; background: #e7f7f2; font-size: 11px; font-weight: 760; }.row-actions { display: flex; align-items: center; gap: 9px; }.row-actions button { padding: 0; color: #5c55dd; border: 0; background: none; font-size: 11px; font-weight: 720; }.row-actions .prominent { color: #147e60; }.row-actions .danger-link { color: var(--red); }.muted { color: #a5afbe; font-size: 11px; }.badge { display: inline-flex; min-height: 21px; align-items: center; padding: 0 7px; border-radius: 5px; font-size: 10px; font-weight: 720; }.badge-neutral { color: #748196; background: #f0f3f7; }.badge-warning { color: #b5691c; background: #fff0de; }.badge-info { color: #286fc9; background: #e8f1ff; }.badge-violet { color: #6158d9; background: #edeaff; }.badge-success { color: #157d61; background: #e5f7f0; }.badge-danger { color: #c44750; background: #fce9ea; }.level { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; font-size: 10px; font-weight: 800; }.level-a { color: #a25a18; background: #fff0de; }.level-b { color: #2f72c6; background: #e6f0ff; }.level-c { color: #68768d; background: #eff2f5; }.empty { height: 160px; color: #98a3b3; text-align: center; }.view-note { color: #758296; font-size: 12px; }.view-note strong { color: #34435a; }.stage-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; margin: -2px 0 17px; border: 1px solid var(--line); border-radius: 11px; background: var(--line); }.stage-strip div { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; background: #fff; }.stage-strip span { color: #7d899a; font-size: 12px; }.stage-strip strong { color: #3e38a0; font-size: 18px; }.probability { display: flex; align-items: center; gap: 7px; }.probability span { display: block; width: 58px; height: 5px; overflow: hidden; border-radius: 5px; background: #edf0f5; }.probability i { display: block; height: 100%; border-radius: inherit; background: #6e65ee; }.product-thumb { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: #f2f5fb; color: #6777a0; font-size: 15px; }.order-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin: -2px 0 17px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #fff; }.order-summary div { padding: 15px 20px; border-right: 1px solid var(--line); }.order-summary div:last-child { border-right: 0; }.order-summary span { display: block; color: #8c99aa; font-size: 11px; }.order-summary strong { display: block; margin-top: 6px; font-size: 17px; letter-spacing: -.3px; }.approval-banner { display: flex; gap: 13px; align-items: center; margin: -2px 0 17px; padding: 14px 18px; border: 1px solid #e5e3ff; border-radius: 10px; background: #f8f7ff; }.approval-banner > span { display: grid; width: 30px; height: 30px; place-items: center; color: var(--violet); border-radius: 8px; background: #e8e7ff; font-size: 16px; }.approval-banner strong { display: block; color: #37336f; font-size: 12px; }.approval-banner p { margin: 4px 0 0; color: #827fa5; font-size: 11px; }.analytics-hero { display: flex; justify-content: space-between; gap: 22px; margin-bottom: 18px; padding: 27px 30px; overflow: hidden; border-radius: 14px; background: linear-gradient(115deg, #1d2f4d, #2d3e7a); color: #fff; }.analytics-hero h2 { margin: 7px 0 11px; font-size: 21px; letter-spacing: -.6px; }.analytics-hero strong { display: block; font-size: 30px; letter-spacing: -1.1px; }.analytics-hero strong small { color: #a8b5d5; font-size: 14px; font-weight: 600; letter-spacing: 0; }.analytics-hero p { margin: 11px 0 0; color: #b7c2dd; font-size: 11px; }.goal-bar { width: 510px; max-width: 100%; height: 7px; overflow: hidden; margin-top: 18px; border-radius: 8px; background: rgba(255,255,255,.18); }.goal-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8e8aff, #c4c1ff); }.hero-aside { align-self: center; min-width: 195px; padding: 17px 19px; border: 1px solid rgba(255,255,255,.13); border-radius: 11px; background: rgba(12,24,52,.24); }.hero-aside span, .hero-aside small { display: block; color: #afbbd8; font-size: 11px; }.hero-aside strong { margin: 7px 0 10px; font-size: 20px; }.analytics-grid { grid-template-columns: 1fr 1fr; }.source-bars { display: grid; gap: 20px; padding: 25px 23px; }.source-bars div { display: grid; grid-template-columns: 100px 1fr 20px; align-items: center; gap: 10px; }.source-bars span { color: #57667b; font-size: 11px; }.source-bars i { display: block; height: 8px; overflow: hidden; border-radius: 8px; background: #edf0f5; }.source-bars b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #65c4a4, #1ca67e); }.source-bars strong { color: #526078; font-size: 11px; text-align: right; }.health-list { display: grid; gap: 1px; padding: 23px; }.health-list > div { display: grid; grid-template-columns: 100px 1fr auto; align-items: center; padding: 14px 0; border-bottom: 1px solid #edf0f5; }.health-list > div:last-child { border-bottom: 0; }.health-list strong { color: #3c4b61; font-size: 12px; }.health-list small { color: #8c98a9; font-size: 11px; }

.modal-backdrop { display: grid; position: fixed; z-index: 8; inset: 0; place-items: center; padding: 24px; background: rgba(17, 29, 51, .48); backdrop-filter: blur(5px); }.modal { width: min(650px, 100%); max-height: calc(100vh - 48px); overflow: auto; border-radius: 15px; background: #fff; box-shadow: 0 26px 70px rgba(15,26,47,.28); }.modal header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 23px 25px 18px; border-bottom: 1px solid #edf0f4; }.modal header h2 { margin: 5px 0 5px; font-size: 19px; letter-spacing: -.45px; }.modal header p:not(.eyebrow) { margin: 0; color: #8793a4; font-size: 11px; }.modal-close { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; color: #7f8c9f; border: 0; border-radius: 6px; background: #f4f6f9; font-size: 21px; line-height: 1; }.modal-close:hover { color: #43536a; background: #edf1f5; }.modal form { padding: 22px 25px 0; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 15px; }.field { display: grid; gap: 7px; }.field span { color: #57657a; font-size: 11px; font-weight: 700; }.field span b { color: var(--red); }.field input, .field select { width: 100%; height: 37px; outline: 0; color: #344257; border: 1px solid #dfe5ee; border-radius: 7px; background: #fff; font-size: 12px; }.field input { padding: 0 10px; }.field select { padding: 0 8px; }.field input:focus, .field select:focus { border-color: #9691fb; box-shadow: 0 0 0 3px rgba(102,92,243,.1); }.form-note { margin: 17px 0 -2px; padding: 10px 11px; color: #6d6a9e; border-radius: 7px; background: #f5f4ff; font-size: 11px; line-height: 1.5; }.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin: 22px -25px 0; padding: 15px 25px; border-top: 1px solid #edf0f4; }.info-modal { padding: 28px 25px 0; text-align: center; }.info-icon { display: grid; width: 37px; height: 37px; place-items: center; margin: 0 auto 14px; color: var(--violet); border-radius: 50%; background: var(--violet-soft); font-size: 19px; font-weight: 800; }.info-modal p { max-width: 380px; margin: 0 auto; color: #647188; font-size: 13px; line-height: 1.7; }.info-modal .modal-actions { margin-top: 24px; }.detail-summary { display: grid; grid-template-columns: 1fr auto; gap: 13px 20px; padding: 22px 25px; background: #fbfcff; }.detail-summary span { color: #8a96a8; font-size: 11px; }.detail-summary strong { color: #334258; font-size: 12px; }.fulfillment-track { display: grid; gap: 19px; margin: 0; padding: 26px 25px 3px; list-style: none; }.fulfillment-track li { display: grid; grid-template-columns: 30px 1fr; gap: 11px; align-items: start; }.fulfillment-track b { display: grid; width: 24px; height: 24px; place-items: center; color: #9aa5b5; border-radius: 50%; background: #edf0f4; font-size: 10px; }.fulfillment-track li.done b { color: #fff; background: var(--green); }.fulfillment-track li.active b { color: #fff; background: var(--violet); }.fulfillment-track strong { display: block; color: #3d4a60; font-size: 12px; }.fulfillment-track small { display: block; margin-top: 4px; color: #92a0b1; font-size: 11px; }

#toast-root { position: fixed; z-index: 10; top: 20px; right: 24px; display: grid; gap: 9px; }.toast { padding: 12px 15px; color: #fff; border-radius: 8px; background: #223553; box-shadow: 0 12px 30px rgba(17,30,53,.22); font-size: 12px; animation: slide-in .2s ease-out; }.empty-copy { padding: 22px; color: #9ba5b5; font-size: 12px; text-align: center; }
@keyframes slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.mailbox { display: grid; grid-template-columns: 218px 335px minmax(400px, 1fr); min-height: 650px; overflow: hidden; border: 1px solid #e3e8f0; border-radius: 14px; background: #fff; box-shadow: 0 7px 26px rgba(41,52,75,.035); }.mail-folders { display: flex; flex-direction: column; padding: 18px 12px; border-right: 1px solid #e8edf4; background: #fafbfe; }.mail-account { display: flex; gap: 9px; align-items: center; padding: 3px 5px 17px; }.mail-account-mark { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; color: #655cf2; border-radius: 8px; background: #ebeaff; font-size: 14px; }.mail-account strong, .mail-account small { display: block; overflow: hidden; max-width: 150px; text-overflow: ellipsis; white-space: nowrap; }.mail-account strong { color: #38465b; font-size: 11px; }.mail-account small { margin-top: 3px; color: #96a1b1; font-size: 9px; }.mail-account i { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #20aa7d; box-shadow: 0 0 0 3px #ddf6ec; }.compose-button { width: 100%; min-height: 36px; margin-bottom: 15px; color: #fff; border: 0; border-radius: 8px; background: #665cf3; font-size: 12px; font-weight: 750; box-shadow: 0 5px 12px rgba(102,92,243,.16); }.compose-button:hover { background: #554bea; }.folder-list { display: grid; gap: 2px; }.folder-item { display: flex; width: 100%; align-items: center; gap: 8px; min-height: 35px; padding: 0 9px; color: #69778c; border: 0; border-radius: 7px; background: transparent; text-align: left; font-size: 11px; }.folder-item:hover { color: #424f65; background: #f0f3f8; }.folder-item.active { color: #544bd5; background: #ecebff; font-weight: 750; }.folder-item > span { width: 16px; text-align: center; }.folder-item b { margin-left: auto; color: #7e8a9d; font-size: 10px; }.folder-item.active b { color: #6258da; }.mail-connection { display: flex; gap: 7px; align-items: center; margin-top: auto; padding: 12px 8px 0; border-top: 1px solid #e8edf4; }.mail-connection > span { color: #1cab7e; font-size: 11px; }.mail-connection strong, .mail-connection small { display: block; }.mail-connection strong { color: #58667a; font-size: 10px; }.mail-connection small { margin-top: 2px; color: #9ba6b6; font-size: 9px; }.mail-list-pane { min-width: 0; overflow: auto; border-right: 1px solid #e8edf4; }.mail-search { display: flex; align-items: center; gap: 6px; height: 58px; padding: 0 14px; border-bottom: 1px solid #edf0f5; color: #9aa5b4; }.mail-search input { width: 100%; height: 32px; outline: 0; padding: 0 9px; color: #39475c; border: 1px solid #e3e8ef; border-radius: 7px; background: #fafbfe; font-size: 11px; }.mail-search input:focus { border-color: #a19bfa; background: #fff; }.mail-list-title { display: flex; justify-content: space-between; padding: 15px 15px 9px; color: #405066; }.mail-list-title strong { font-size: 12px; }.mail-list-title span { color: #98a4b4; font-size: 10px; }.mail-items { display: grid; }.mail-item { display: grid; width: 100%; grid-template-columns: 29px 1fr auto; gap: 9px; align-items: start; padding: 12px 14px; color: inherit; border: 0; border-bottom: 1px solid #eff2f6; background: #fff; text-align: left; }.mail-item:hover { background: #fbfcff; }.mail-item.selected { background: #f1f0ff; box-shadow: inset 2px 0 0 #6c63ee; }.mail-item.unread strong, .mail-item.unread p { color: #27364d; font-weight: 760; }.mail-sender-avatar { display: grid; width: 29px; height: 29px; place-items: center; color: #5f57d7; border-radius: 8px; background: #edecff; font-size: 9px; font-weight: 800; }.mail-item-top { display: flex; justify-content: space-between; gap: 7px; }.mail-item-top strong { overflow: hidden; color: #536176; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.mail-item time { flex: 0 0 auto; color: #a1aab8; font-size: 9px; }.mail-item p { overflow: hidden; margin: 5px 0 3px; color: #5c6a80; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.mail-item small { display: block; overflow: hidden; color: #9aa5b4; font-size: 9px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }.mail-item > i { color: #e5aa32; font-size: 11px; font-style: normal; }.mail-empty { padding: 50px 20px; color: #a0aab8; font-size: 11px; text-align: center; }.mail-reader { min-width: 0; background: #fff; }.mail-reader-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 25px 27px 17px; border-bottom: 1px solid #eef1f5; }.mail-reader-head h2 { max-width: 490px; margin: 5px 0 0; color: #26364e; font-size: 18px; letter-spacing: -.35px; }.mail-reader-actions { display: flex; gap: 6px; }.mail-reader-actions button { min-height: 30px; padding: 0 9px; color: #5f6e83; border: 1px solid #e3e8ef; border-radius: 7px; background: #fff; font-size: 11px; }.mail-reader-actions button:hover { color: #574ed9; border-color: #d7d5ff; background: #f8f7ff; }.mail-party { display: flex; align-items: center; gap: 9px; padding: 17px 27px; }.mail-sender-avatar.large { width: 34px; height: 34px; border-radius: 10px; font-size: 10px; }.mail-party strong, .mail-party small { display: block; }.mail-party strong { color: #3e4c61; font-size: 11px; }.mail-party small { margin-top: 4px; color: #929dad; font-size: 10px; }.to-line { margin-left: auto; color: #a0aab8; font-size: 10px; }.mail-content { min-height: 235px; padding: 8px 27px 25px; color: #48576c; font-size: 12px; line-height: 1.85; white-space: normal; }.attachments { padding: 0 27px 22px; }.attachments p { margin: 0 0 8px; color: #8c98a9; font-size: 10px; }.attachments span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 9px; color: #5b55d1; border: 1px solid #dfddff; border-radius: 6px; background: #f8f7ff; font-size: 10px; }.mail-crm-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 22px 22px; padding: 13px; border: 1px solid #e3e8ef; border-radius: 10px; background: #fbfcfe; }.mail-crm-card > div:first-child { display: flex; align-items: center; gap: 9px; }.mail-crm-card > div:first-child > span { display: grid; width: 28px; height: 28px; place-items: center; color: #5d55d8; border-radius: 7px; background: #eeedff; font-size: 14px; }.mail-crm-card.unmatched > div:first-child > span { color: #bd741d; background: #fff0df; }.mail-crm-card p, .mail-crm-card strong, .mail-crm-card small { display: block; margin: 0; }.mail-crm-card p { color: #8a96a8; font-size: 9px; }.mail-crm-card strong { margin-top: 2px; color: #445167; font-size: 11px; }.mail-crm-card small { margin-top: 3px; color: #9ba5b4; font-size: 9px; }.mail-crm-actions { display: flex; gap: 7px; flex: 0 0 auto; }.mail-crm-actions button { min-height: 27px; padding: 0 8px; color: #5e56d6; border: 1px solid #dddafe; border-radius: 6px; background: #fff; font-size: 10px; font-weight: 700; }.mail-crm-actions .prominent { color: #fff; border-color: #665cf3; background: #665cf3; }.mail-reader-empty { display: grid; min-height: 100%; align-content: center; justify-items: center; gap: 8px; color: #9aa5b4; text-align: center; }.mail-reader-empty > span { display: grid; width: 43px; height: 43px; place-items: center; color: #7d76e7; border-radius: 12px; background: #efeeff; font-size: 20px; }.mail-reader-empty strong { margin-top: 5px; color: #667488; font-size: 12px; }.mail-reader-empty small { max-width: 250px; font-size: 10px; line-height: 1.6; }.field textarea { width: 100%; min-height: 156px; resize: vertical; outline: 0; padding: 10px; color: #344257; border: 1px solid #dfe5ee; border-radius: 7px; font: inherit; font-size: 12px; line-height: 1.65; }.field textarea:focus { border-color: #9691fb; box-shadow: 0 0 0 3px rgba(102,92,243,.1); }.field-wide { margin-top: 17px; }.compose-note { display: flex; gap: 7px; align-items: flex-start; margin-top: 15px; padding: 9px 10px; color: #6d6a9e; border-radius: 7px; background: #f5f4ff; }.compose-note span { font-size: 13px; }.compose-note p { margin: 0; font-size: 10px; line-height: 1.55; }

.customer-360 { padding: 20px 25px 0; }.customer-profile { display: flex; align-items: center; gap: 11px; padding: 15px; border: 1px solid #e4e7fb; border-radius: 10px; background: #f9f9ff; }.customer-profile-avatar { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; color: #5c54d6; border-radius: 10px; background: #e8e7ff; font-size: 11px; font-weight: 800; }.customer-profile p, .customer-profile h3, .customer-profile small { display: block; margin: 0; }.customer-profile p { color: #8b96a8; font-size: 9px; }.customer-profile h3 { margin: 3px 0; color: #344259; font-size: 13px; }.customer-profile small { color: #69778c; font-size: 10px; }.customer-profile .badge { margin-left: auto; }.customer-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 14px; overflow: hidden; border: 1px solid #e8edf3; border-radius: 9px; background: #e8edf3; }.customer-metrics div { padding: 12px; background: #fff; }.customer-metrics span, .customer-metrics small { display: block; color: #909baa; font-size: 10px; }.customer-metrics strong { display: block; margin: 5px 0 3px; color: #3c4a60; font-size: 18px; letter-spacing: -.4px; }.customer-metrics small { overflow: hidden; color: #657287; text-overflow: ellipsis; white-space: nowrap; }.customer-metrics small .badge { margin: 0 3px 0 0; vertical-align: middle; }.customer-activity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 19px; }.customer-section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }.customer-section-heading > span { color: #48566b; font-size: 11px; font-weight: 750; }.customer-section-heading small { color: #9ba5b3; font-size: 9px; }.customer-activity-list { display: grid; gap: 1px; overflow: hidden; border: 1px solid #edf0f5; border-radius: 8px; background: #edf0f5; }.customer-activity-list > div { display: flex; gap: 8px; align-items: center; min-height: 47px; padding: 7px 9px; background: #fff; }.activity-icon { display: grid; width: 23px; height: 23px; flex: 0 0 auto; place-items: center; color: #5d55dc; border-radius: 6px; background: #efeeff; font-size: 10px; }.activity-icon.task { color: #177f61; background: #e6f7f0; }.customer-activity-list p, .customer-activity-list strong, .customer-activity-list small { display: block; margin: 0; }.customer-activity-list p { min-width: 0; }.customer-activity-list strong { overflow: hidden; color: #536176; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.customer-activity-list small { margin-top: 3px; color: #9ba6b6; font-size: 9px; }.customer-empty { margin: 0; padding: 14px; color: #9ba6b6; background: #fff; font-size: 10px; }.customer-360-actions { margin-top: 20px; }.template-manager { padding: 17px 25px 0; }.template-manager-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 10px; border-bottom: 1px solid #edf0f5; }.template-manager-header strong, .template-manager-header small { display: block; }.template-manager-header strong { color: #405067; font-size: 12px; }.template-manager-header small { margin-top: 3px; color: #96a1b1; font-size: 10px; }.template-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid #edf0f5; }.template-card:last-of-type { border-bottom: 0; }.template-card h3, .template-card p { margin: 0; }.template-card h3 { margin: 4px 0 6px; color: #405067; font-size: 13px; }.template-card > div > p:last-child { max-width: 385px; color: #7f8c9e; font-size: 10px; line-height: 1.55; }.template-card-actions { display: flex; flex: 0 0 auto; gap: 7px; margin-top: 7px; }.template-note { margin-top: 15px; padding: 10px; color: #6d6a9e; border-radius: 7px; background: #f5f4ff; font-size: 10px; line-height: 1.55; }.template-note code { color: #564ed1; font-size: inherit; }

.mail-item > div { min-width: 0; }

.mail-delivery-trace { display: flex; gap: 9px; align-items: center; margin: 0 27px 13px; padding: 9px 10px; color: #16795f; border: 1px solid #d8f1e7; border-radius: 8px; background: #f4fcf8; }.mail-delivery-trace > span { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; color: #15795f; border-radius: 6px; background: #dff5eb; font-size: 12px; font-weight: 800; }.mail-delivery-trace strong, .mail-delivery-trace small { display: block; }.mail-delivery-trace strong { font-size: 10px; }.mail-delivery-trace small { overflow: hidden; max-width: 510px; margin-top: 2px; color: #6c9387; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.mail-delivery-trace.demo { color: #795b18; border-color: #f3e2b9; background: #fffaf0; }.mail-delivery-trace.demo > span { color: #996b18; background: #fff0cd; }.mail-delivery-trace.demo small { color: #9a8559; }.mail-delivery-trace.failed { color: #ae4d44; border-color: #f2d2ce; background: #fff7f6; }.mail-delivery-trace.failed > span { color: #b24e44; background: #ffe5e1; }.mail-delivery-trace.failed small { color: #9f756f; }.compose-note-failed { color: #a24e45; background: #fff5f4; }

.quote-detail { padding: 20px 25px 0; }.quote-detail-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 16px; border: 1px solid #e3e5fb; border-radius: 10px; background: linear-gradient(115deg, #f9f9ff, #fbfcff); }.quote-detail-hero h3, .quote-detail-hero p { margin: 0; }.quote-detail-hero h3 { margin: 5px 0; color: #344259; font-size: 15px; }.quote-detail-hero p:last-child { color: #78859a; font-size: 10px; }.quote-detail-hero > div:last-child { display: grid; justify-items: end; gap: 7px; }.quote-detail-hero > div:last-child > strong { color: #3f389b; font-size: 18px; }.quote-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 14px; overflow: hidden; border: 1px solid #e8edf3; border-radius: 9px; background: #e8edf3; }.quote-summary-grid div { padding: 12px; background: #fff; }.quote-summary-grid span, .quote-summary-grid strong { display: block; }.quote-summary-grid span { color: #909baa; font-size: 10px; }.quote-summary-grid strong { margin-top: 5px; overflow: hidden; color: #435168; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.quote-section { margin-top: 19px; }.quote-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 8px; }.quote-section-heading strong { color: #46546a; font-size: 12px; }.quote-section-heading small { color: #9aa5b5; font-size: 10px; }.quote-lines { overflow: hidden; border: 1px solid #e9edf3; border-radius: 9px; }.quote-line-head, .quote-line { display: grid; grid-template-columns: minmax(0, 1.65fr) 95px 50px 92px; gap: 10px; align-items: center; padding: 10px 12px; }.quote-line-head { color: #909baa; border-bottom: 1px solid #edf0f5; background: #fbfcfe; font-size: 9px; font-weight: 750; }.quote-line { color: #5b687c; font-size: 10px; }.quote-line > div { min-width: 0; }.quote-line strong, .quote-line small { display: block; }.quote-line > div strong { overflow: hidden; color: #46546a; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.quote-line small { margin-top: 3px; color: #9ba6b6; font-size: 9px; }.quote-line > strong { color: #3b4960; font-size: 10px; text-align: right; }.quote-total { display: flex; justify-content: flex-end; align-items: baseline; gap: 15px; padding: 13px 2px 0; }.quote-total span { color: #7d899a; font-size: 11px; }.quote-total strong { color: #3f389b; font-size: 17px; }.quote-approval-track { display: grid; gap: 14px; margin: 0; padding: 14px 0 1px; list-style: none; }.quote-approval-track li { display: grid; grid-template-columns: 27px 1fr; gap: 10px; align-items: start; }.quote-approval-track b { display: grid; width: 23px; height: 23px; place-items: center; color: #96a2b2; border-radius: 50%; background: #edf0f4; font-size: 9px; }.quote-approval-track li.done b { color: #fff; background: var(--green); }.quote-approval-track li.active b { color: #fff; background: var(--violet); }.quote-approval-track strong, .quote-approval-track small { display: block; }.quote-approval-track strong { color: #48566b; font-size: 11px; }.quote-approval-track small { margin-top: 3px; color: #98a3b3; font-size: 10px; }
.approval-source-card { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px; border: 1px solid #e4e6fb; border-radius: 9px; background: #fafaff; }.approval-source-card > span { display: grid; width: 27px; height: 27px; place-items: center; color: #5d55d8; border-radius: 7px; background: #ecebff; font-size: 12px; }.approval-source-card p, .approval-source-card strong, .approval-source-card small { display: block; margin: 0; }.approval-source-card p { color: #8a96a8; font-size: 9px; }.approval-source-card strong { margin: 2px 0; color: #48566b; font-size: 11px; }.approval-source-card small { color: #98a3b3; font-size: 9px; }

.fulfillment-summary { grid-template-columns: repeat(4, 1fr); }.fulfillment-summary small { display: block; margin-top: 4px; color: #98a3b3; font-size: 10px; }.fulfillment-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }.fulfillment-grid .panel-heading { padding-bottom: 17px; }.fulfillment-grid .table-shell { border-top: 1px solid #edf0f5; }.fulfillment-grid th, .fulfillment-grid td { padding-right: 13px; padding-left: 13px; }.fulfillment-grid td { font-size: 11px; }.fulfillment-grid td button { padding: 0; color: #5c55dd; border: 0; background: transparent; font-size: 10px; font-weight: 720; }.fulfillment-documents { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 18px; overflow: hidden; border: 1px solid #e8edf3; border-radius: 9px; background: #e8edf3; }.fulfillment-documents > div { min-width: 0; padding: 11px; background: #fff; }.fulfillment-documents strong, .fulfillment-documents span, .fulfillment-documents small { display: block; }.fulfillment-documents strong { color: #78859a; font-size: 9px; }.fulfillment-documents span, .fulfillment-documents small { margin-top: 5px; overflow: hidden; color: #48566b; font-size: 10px; line-height: 1.55; text-overflow: ellipsis; }.fulfillment-documents small { color: #9ba6b6; }.fulfillment-track-detail { padding-top: 10px; }

.inventory-summary { grid-template-columns: repeat(4, 1fr); }.inventory-summary small { display: block; margin-top: 4px; color: #98a3b3; font-size: 10px; }.inventory-stock-panel { margin-bottom: 18px; }.inventory-ledger-panel .panel-heading { padding-bottom: 17px; }.inventory-ledger-panel .table-shell { border-top: 1px solid #edf0f5; }.inventory-link { padding: 0; color: #5c55dd; border: 0; background: transparent; font-size: 11px; font-weight: 720; }.inventory-change { display: inline-flex; min-width: 36px; justify-content: center; padding: 4px 7px; border-radius: 5px; font-size: 10px; font-weight: 800; }.inventory-change.in { color: #147b5e; background: #e5f7f0; }.inventory-change.out { color: #b86b1c; background: #fff0de; }.inventory-detail-list { display: grid; overflow: hidden; border: 1px solid #e9edf3; border-radius: 9px; }.inventory-detail-list > div { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 10px 11px; border-bottom: 1px solid #edf0f5; }.inventory-detail-list > div:last-child { border-bottom: 0; }.inventory-detail-list p, .inventory-detail-list strong, .inventory-detail-list small { display: block; margin: 0; }.inventory-detail-list p { min-width: 0; }.inventory-detail-list p strong { color: #48566b; font-size: 11px; }.inventory-detail-list small { overflow: hidden; margin-top: 3px; color: #98a3b3; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.inventory-detail-list > div > small { max-width: 160px; margin: 0; text-align: right; white-space: normal; line-height: 1.45; }

.purchase-summary { grid-template-columns: repeat(4, 1fr); }.purchase-summary small { display: block; margin-top: 4px; color: #98a3b3; font-size: 10px; }.purchase-order-panel { margin-bottom: 18px; }.supplier-panel .panel-heading { padding-bottom: 17px; }.supplier-panel .table-shell { border-top: 1px solid #edf0f5; }
.replenishment-summary { grid-template-columns: repeat(4, 1fr); }.replenishment-summary small { display: block; margin-top: 4px; color: #98a3b3; font-size: 10px; }.replenishment-panel { margin-bottom: 18px; }.replenishment-note { margin-top: 0; }

.document-summary { grid-template-columns: repeat(4, 1fr); }.document-summary small { display: block; margin-top: 4px; color: #98a3b3; font-size: 10px; }

.attachment-summary { grid-template-columns: repeat(4, 1fr); }.attachment-summary small { display: block; margin-top: 4px; color: #98a3b3; font-size: 10px; }.attachment-panel .table-shell { border-top: 1px solid #edf0f5; }.attachment-preview { padding: 20px 25px 0; }.attachment-image-preview { display: block; width: 100%; max-height: 330px; object-fit: contain; border: 1px solid #e4e8ee; border-radius: 9px; background: #fafbfc; }.attachment-file-preview { display: grid; min-height: 190px; align-content: center; justify-items: center; gap: 7px; border: 1px dashed #d9dee8; border-radius: 9px; background: #fafbfe; text-align: center; }.attachment-file-preview > span { display: grid; width: 40px; height: 40px; place-items: center; color: #5d55d8; border-radius: 10px; background: #edecff; font-size: 19px; }.attachment-file-preview strong { color: #4b596e; font-size: 12px; }.attachment-file-preview small { color: #98a3b3; font-size: 10px; }.attachment-preview .approval-source-card { margin-top: 16px; }

.finance-summary, .supplier-summary { grid-template-columns: repeat(4, 1fr); }.finance-summary small, .supplier-summary small { display: block; margin-top: 4px; color: #98a3b3; font-size: 10px; }.finance-receipt-panel, .finance-disbursement-panel { margin-bottom: 18px; }.finance-disbursement-panel .table-shell { border-top: 1px solid #edf0f5; }.finance-gap-panel .panel-heading { padding-bottom: 17px; }.finance-gap-panel .table-shell { border-top: 1px solid #edf0f5; }.supplier-center-panel .table-shell { border-top: 1px solid #edf0f5; }

.expense-summary { grid-template-columns: repeat(4, 1fr); }.expense-summary small { display: block; margin-top: 4px; color: #98a3b3; font-size: 10px; }.expense-panel .table-shell { border-top: 1px solid #edf0f5; }

.quality-summary { grid-template-columns: repeat(4, 1fr); }.quality-summary small { display: block; margin-top: 4px; color: #98a3b3; font-size: 10px; }.quality-panel .table-shell { border-top: 1px solid #edf0f5; }

.preparation-summary { grid-template-columns: repeat(4, 1fr); }.preparation-summary small { display: block; margin-top: 4px; color: #98a3b3; font-size: 10px; }.preparation-panel .table-shell { border-top: 1px solid #edf0f5; }

.warehouse-summary { grid-template-columns: repeat(4, 1fr); }.warehouse-summary small { display: block; margin-top: 4px; color: #98a3b3; font-size: 10px; }.warehouse-panel .table-shell { border-top: 1px solid #edf0f5; }

.order-profit-summary, .analytics-profit-summary { grid-template-columns: repeat(4, 1fr); }.analytics-profit-summary { margin-top: 0; }.analytics-profit-panel { margin-bottom: 18px; }.analytics-profit-panel .panel-heading { padding-bottom: 17px; }.analytics-profit-panel .panel-heading small { color: #98a3b3; font-size: 10px; }.analytics-profit-panel .table-shell { border-top: 1px solid #edf0f5; }

.alert-summary { grid-template-columns: repeat(4, 1fr); }.alert-summary small { display: block; margin-top: 4px; color: #98a3b3; font-size: 10px; }.alert-panel .table-shell { border-top: 1px solid #edf0f5; }

.approval-rule-summary { grid-template-columns: repeat(4, 1fr); }.approval-rule-summary small { display: block; margin-top: 4px; color: #98a3b3; font-size: 10px; }.approval-rule-panel .table-shell { border-top: 1px solid #edf0f5; }

.report-summary { grid-template-columns: repeat(4, 1fr); }.report-summary small { display: block; margin-top: 4px; color: #98a3b3; font-size: 10px; }.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.report-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 13px; align-items: center; min-height: 112px; padding: 18px; }.report-card-icon { display: grid; width: 39px; height: 39px; place-items: center; color: #5c55d9; border-radius: 10px; background: #edecff; font-size: 19px; }.report-card h2, .report-card p { margin: 0; }.report-card h2 { margin: 4px 0 5px; color: #435168; font-size: 14px; }.report-card > div:nth-child(2) > p:last-child { max-width: 300px; color: #8894a6; font-size: 10px; line-height: 1.6; }.report-card .button { min-height: 32px; padding: 0 11px; font-size: 10px; white-space: nowrap; }.report-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; color: #6f778c; font-size: 11px; line-height: 1.65; }.report-note > span { display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; color: #5a53cf; border-radius: 50%; background: #ecebff; font-size: 11px; font-weight: 800; }.report-note p { margin: 0; }

.customer-timeline { margin-top: 19px; }
.customer-timeline-list { display: grid; gap: 1px; overflow: hidden; border: 1px solid #edf0f5; border-radius: 8px; background: #edf0f5; }
.customer-timeline-entry { display: grid; width: 100%; grid-template-columns: 24px minmax(0, 1fr) 12px; gap: 8px; align-items: center; min-height: 48px; padding: 7px 9px; color: inherit; border: 0; background: #fff; text-align: left; }
.customer-timeline-entry:hover { background: #fafbfe; }
.customer-timeline-entry .activity-icon { width: 23px; height: 23px; }
.customer-timeline-entry p, .customer-timeline-entry strong, .customer-timeline-entry small { display: block; min-width: 0; margin: 0; }
.customer-timeline-entry strong, .customer-timeline-entry small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-timeline-entry strong { color: #536176; font-size: 10px; }
.customer-timeline-entry small { margin-top: 3px; color: #9ba6b6; font-size: 9px; }
.customer-timeline-entry i { color: #a3adbb; font-style: normal; font-size: 12px; }

.mail-account i.is-pending { background: #e3a34a; box-shadow: 0 0 0 3px #fff0dc; }.mail-connection > span.is-pending { color: #d2892d; }.mail-connection > span.is-connected { color: #1cab7e; }

.attachments button { display: inline-flex; align-items: center; min-height: 28px; margin: 0 6px 6px 0; padding: 0 9px; color: #5b55d1; border: 1px solid #dfddff; border-radius: 6px; background: #f8f7ff; font-size: 10px; cursor: pointer; }.attachments button:hover { color: #473ec3; border-color: #c9c5ff; background: #efeeff; }.mail-attachment-picker { min-height: 62px; padding: 5px; }.field-hint { display: block; margin-top: 5px; color: #98a3b3; font-size: 10px; line-height: 1.4; }

.lead-import-preview { padding: 2px 0 0; }.lead-import-preview .quote-summary-grid { margin-top: 0; }.lead-import-preview .table-shell { margin-top: 16px; }.import-error-note { margin-top: 15px; color: #805f2e; background: #fff7e8; }.import-error-note ul { margin: 7px 0 0; padding-left: 17px; }.import-error-note li, .import-error-note small { font-size: 10px; line-height: 1.55; }

@media (max-width: 1220px) { .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }.dashboard-grid { grid-template-columns: 1fr; }.analytics-grid { grid-template-columns: 1fr; } }
@media (max-width: 1380px) { .mailbox { grid-template-columns: 178px 268px minmax(300px, 1fr); }.mail-account strong, .mail-account small { max-width: 118px; }.mail-reader-head, .mail-party, .mail-content { padding-right: 20px; padding-left: 20px; }.mail-crm-card { margin-right: 16px; margin-left: 16px; }.mail-crm-card { align-items: flex-start; }.mail-crm-actions { flex-wrap: wrap; justify-content: flex-end; }.mail-reader-head h2 { font-size: 16px; }.to-line { max-width: 115px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }

.mail-auth-fields { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 17px 15px; padding: 14px; border: 1px solid #e4e2ff; border-radius: 9px; background: #fbfaff; }.mail-auth-fields[hidden] { display: none; }.mail-auth-fields > .field:last-child { grid-column: 1 / -1; }

.button-danger { color: #bd3d49; border: 1px solid #f1ccd0; background: #fff8f8; }.button-danger:hover { border-color: #e7afb6; background: #fff1f2; }