:root {
  --ink: #17213a;
  --muted: #74809a;
  --soft: #f6f7fb;
  --line: #e8ebf3;
  --blue: #134289;
  --navy: #002f6d;
  --green: #3bad2d;
  --leaf: #71a850;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--soft);
  font-synthesis: none;
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #d9dde5 transparent; }
*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-thumb { border-radius: 99px; background: #d9dde5; }
body { margin: 0; min-width: 0; overflow: hidden; background: var(--soft); }
img { height: auto; }
button, input { font: inherit; }
button { cursor: default; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.preview-app { width: 100%; height: 100vh; display: flex; overflow: hidden; }
.preview-sidebar { flex: 0 0 196px; display: flex; flex-direction: column; padding: 21px 12px 13px; color: #d9def0; background: var(--navy); }
.preview-logo { width: 124px; margin: 0 10px 22px; }
.workspace-switcher { min-height: 54px; display: flex; align-items: center; gap: 8px; margin: 0 2px 19px; padding: 8px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.06); }
.workspace-switcher > span { width: 28px; height: 28px; display: grid; place-items: center; color: #c7d7ea; border-radius: 8px; background: #17365f; font-size: 10px; font-weight: 800; }
.workspace-switcher div { min-width: 0; flex: 1; }
.workspace-switcher b, .workspace-switcher small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-switcher b { color: #fff; font-size: 10px; }
.workspace-switcher small { margin-top: 2px; color: #9ba6c4; font-size: 8px; }
.workspace-switcher button { color: #a6afc7; border: 0; background: transparent; }
.preview-sidebar nav { display: grid; gap: 2px; }
.preview-sidebar nav button, .sidebar-bottom button { position: relative; min-height: 36px; display: flex; align-items: center; gap: 10px; padding: 0 10px; color: #aeb7cf; border: 0; border-radius: 8px; background: transparent; font-size: 10px; font-weight: 550; text-align: left; }
.preview-sidebar nav button.active { color: #fff; background: #17365f; }
.preview-sidebar nav button.active::before { position: absolute; left: -12px; width: 3px; height: 17px; border-radius: 0 3px 3px 0; background: #c7d7ea; content: ""; }
.preview-sidebar nav button.active svg { color: #c7d7ea; }
.preview-sidebar nav button b { margin-left: auto; padding: 2px 6px; color: #c7d7ea; border-radius: 20px; background: #17365f; font-size: 8px; }
.sidebar-bottom { margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.user-chip { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px; }
.user-chip > span { width: 28px; height: 28px; display: grid; place-items: center; color: #17365f; border-radius: 9px; background: #d4e1ef; font-size: 9px; font-weight: 800; }
.user-chip div { min-width: 0; flex: 1; }
.user-chip b, .user-chip small { display: block; }
.user-chip b { color: #fff; font-size: 9px; }
.user-chip small { margin-top: 2px; color: #8995b4; font-size: 7px; }
.user-chip i { width: 4px; height: 4px; border-radius: 50%; background: #71a850; }

.preview-main { min-width: 0; flex: 1; height: 100vh; display: flex; flex-direction: column; }
.preview-topbar { flex: 0 0 66px; display: flex; align-items: center; gap: 10px; padding: 0 20px; border-bottom: 1px solid #e5e8ee; background: #fff; }
.topbar-logo { display: none; }
.preview-topbar > div:nth-child(2) { margin-right: auto; }
.preview-topbar small { display: block; color: #8c95a6; font-size: 7px; font-weight: 750; letter-spacing: .08em; }
.preview-topbar h1 { margin: 4px 0 0; color: #2d3951; font-size: 16px; font-weight: 720; letter-spacing: -.02em; }
.global-search { width: min(27vw, 250px); height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 10px; color: #778197; border: 1px solid #e0e4eb; border-radius: 8px; background: #f8f9fb; }
.global-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 9px; }
.topbar-icon { position: relative; width: 34px; height: 34px; display: grid; place-items: center; color: #6f7a90; border: 1px solid #e0e4eb; border-radius: 9px; background: #fff; }
.topbar-icon i { position: absolute; top: 6px; right: 7px; width: 5px; height: 5px; border: 1px solid #fff; border-radius: 50%; background: #e06d6d; }
.topbar-avatar { width: 34px; height: 34px; display: grid; place-items: center; color: var(--navy); border-radius: 10px; background: #e1ebf5; font-size: 9px; font-weight: 800; }
.screen { min-height: 0; flex: 1; overflow: hidden; }
.screen[hidden] { display: none; }

.screen-chat { display: grid; grid-template-columns: 235px minmax(350px, 1fr) 218px; margin: 12px; overflow: hidden; border: 1px solid #e1e5ec; border-radius: 12px; background: #fff; box-shadow: 0 8px 22px rgba(28,40,72,.035); }
.conversation-list { min-width: 0; display: flex; flex-direction: column; border-right: 1px solid #e8ebf1; }
.inbox-heading { min-height: 59px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; }
.inbox-heading small, .inbox-heading b { display: block; }
.inbox-heading small { color: #9aa3b2; font-size: 7px; font-weight: 750; letter-spacing: .08em; }
.inbox-heading b { margin-top: 3px; color: #3b4760; font-size: 12px; }
.inbox-heading button { width: 29px; height: 29px; display: grid; place-items: center; color: #778197; border: 1px solid #e1e5ec; border-radius: 8px; background: #fff; }
.list-search { height: 32px; display: flex; align-items: center; gap: 6px; margin: 0 10px; padding: 0 9px; color: #8b95a6; border-radius: 8px; background: #f4f5f8; }
.list-search svg { width: 14px; }
.list-search input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 8px; }
.conversation-tabs { display: flex; gap: 3px; padding: 10px; border-bottom: 1px solid #e9ecf1; }
.conversation-tabs button { min-height: 25px; padding: 0 7px; color: #8790a1; border: 0; border-radius: 6px; background: transparent; font-size: 7px; font-weight: 700; }
.conversation-tabs button.active { color: var(--blue); background: #edf4fb; }
.conversation-tabs b { margin-left: 2px; }
.conversation-items { min-height: 0; overflow: auto; }
.conversation { display: grid; grid-template-columns: 35px 1fr; gap: 9px; padding: 12px 10px; border-bottom: 1px solid #eef0f4; }
.conversation.active { background: #f3f7fb; box-shadow: inset 3px 0 var(--blue); }
.avatar { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; font-size: 9px; font-weight: 800; }
.avatar i { position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #4daf81; }
.avatar.coral, .mini-avatar.coral { color: #aa644f; background: #fde8df; }
.avatar.blue, .mini-avatar.blue { color: #386e9c; background: #e2eff9; }
.avatar.green, .mini-avatar.green { color: #3f8069; background: #e1f4ec; }
.avatar.violet, .mini-avatar.violet { color: #665ca0; background: #ece9fa; }
.conversation > div { min-width: 0; position: relative; }
.conversation header { display: flex; justify-content: space-between; }
.conversation header b { color: #455168; font-size: 9px; }
.conversation header time { color: #a0a7b3; font-size: 7px; }
.conversation small { display: block; margin-top: 2px; color: #929baa; font-size: 7px; }
.conversation p { overflow: hidden; margin: 6px 0; color: #6e788b; font-size: 8px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.conversation em { padding: 3px 5px; color: var(--blue); border-radius: 4px; background: #e9f1f9; font-size: 6px; font-style: normal; font-weight: 700; }
.conversation > div > strong { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--blue); font-size: 7px; }

.chat-panel { min-width: 0; display: flex; flex-direction: column; background: #f7f8fb; }
.chat-header { flex: 0 0 59px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border-bottom: 1px solid #e5e8ee; background: #fff; }
.chat-header > div { min-width: 0; flex: 1; }
.chat-header b, .chat-header small { display: block; }
.chat-header b { color: #3f4b62; font-size: 10px; }
.chat-header small { margin-top: 2px; color: #8c95a5; font-size: 7px; }
.channel-tag { padding: 5px 7px; color: #397e62; border-radius: 5px; background: #e6f5ed; font-size: 6px; font-weight: 800; text-transform: uppercase; }
.chat-header button { color: #7f8898; border: 0; background: transparent; font-size: 11px; }
.chat-utilities { min-height: 49px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border-bottom: 1px solid #e3e7ed; background: #f1f5f9; }
.chat-utilities div { min-width: 0; flex: 1; }
.chat-utilities small, .chat-utilities b { display: block; }
.chat-utilities small { color: #8791a3; font-size: 6px; font-weight: 800; letter-spacing: .08em; }
.chat-utilities b { margin-top: 3px; color: #455168; font-size: 8px; }
.chat-utilities > span { padding: 4px 6px; color: #3d6892; border-radius: 5px; background: #dcebf6; font-size: 6px; font-weight: 750; }
.chat-utilities > button { padding: 0; color: var(--blue); border: 0; background: transparent; font-size: 7px; font-weight: 700; }
.chat-stream { min-height: 0; flex: 1; overflow: auto; padding: 15px 20px; }
.chat-stream > time { display: block; margin-bottom: 13px; color: #a0a7b3; font-size: 6px; font-weight: 750; text-align: center; }
.message { width: fit-content; max-width: 72%; margin-bottom: 9px; padding: 9px 10px 6px; border: 1px solid #e4e7ed; border-radius: 10px 10px 10px 3px; background: #fff; box-shadow: 0 2px 5px rgba(40,50,75,.025); }
.message.outgoing { margin-left: auto; border-color: #cdddeb; border-radius: 10px 10px 3px 10px; background: #e1ebf5; }
.message p { margin: 0; color: #4f5b70; font-size: 8px; line-height: 1.5; }
.message small { display: block; margin-top: 4px; color: #8f98a7; font-size: 6px; text-align: right; }
.attachment { width: min(76%, 270px); display: grid; grid-template-columns: 31px 1fr 24px; align-items: center; gap: 8px; margin: 0 0 9px auto; padding: 8px; border: 1px solid #ccdae7; border-radius: 9px 9px 3px 9px; background: #e1ebf5; }
.attachment > span { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; border-radius: 7px; background: var(--blue); font-size: 7px; font-weight: 800; }
.attachment b, .attachment small { display: block; }
.attachment b { color: #445168; font-size: 7px; }
.attachment small { margin-top: 3px; color: #8190a0; font-size: 6px; }
.attachment button { color: var(--blue); border: 0; background: transparent; }
.composer { flex: 0 0 55px; display: flex; align-items: center; gap: 10px; margin: 0 11px 10px; padding: 0 9px; color: #9099a8; border: 1px solid #dfe3e9; border-radius: 10px; background: #fff; }
.composer > span { flex: 1; font-size: 8px; }
.composer button { width: 30px; height: 30px; display: grid; place-items: center; color: #7c8697; border: 0; border-radius: 8px; background: transparent; }
.composer .send { color: #fff; background: var(--blue); }

.contact-panel { min-width: 0; overflow: auto; border-left: 1px solid #e8ebf1; background: #fff; }
.contact-identity { padding: 19px 13px; text-align: center; border-bottom: 1px solid #e9ecf1; }
.avatar.large { width: 48px; height: 48px; margin: auto; border-radius: 14px; font-size: 11px; }
.contact-identity h2 { margin: 9px 0 2px; color: #3f4b62; font-size: 11px; }
.contact-identity p { margin: 0; color: #8b94a4; font-size: 7px; }
.contact-identity > i { display: inline-block; margin-top: 8px; padding: 4px 7px; color: #397e62; border-radius: 20px; background: #e7f6ef; font-size: 6px; font-style: normal; font-weight: 700; }
.contact-block { padding: 13px; border-bottom: 1px solid #e9ecf1; }
.contact-block header { display: flex; align-items: center; justify-content: space-between; }
.contact-block header b { color: #8b94a4; font-size: 6px; letter-spacing: .08em; }
.contact-block header button { color: var(--blue); border: 0; background: transparent; font-size: 6px; font-weight: 700; }
.person-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.person-row > span { width: 28px; height: 28px; display: grid; place-items: center; color: var(--blue); border-radius: 8px; background: #e1ebf5; font-size: 7px; font-weight: 800; }
.person-row p { margin: 0; }
.person-row b, .person-row small { display: block; }
.person-row b { color: #4a566d; font-size: 8px; }
.person-row small { margin-top: 2px; color: #9098a7; font-size: 6px; }
.contact-block dl { margin: 8px 0 0; }
.contact-block dl div { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #f0f2f5; }
.contact-block dt, .contact-block dd { margin: 0; font-size: 7px; }
.contact-block dt { color: #848e9f; }
.contact-block dd { color: #4b576e; font-weight: 700; }
.contact-block dd.positive { color: #3f8668; }
.contact-block.note { margin: 10px; border: 1px solid #dae6d7; border-radius: 9px; background: #f0f7ed; }
.contact-block.note p { margin: 9px 0 7px; color: #55705a; font-size: 7px; line-height: 1.45; }
.contact-block.note > small { color: #8b9d8d; font-size: 6px; }

.screen-kanban, .screen-reports { padding: 13px 17px 17px; overflow: auto; }
.kanban-toolbar { min-height: 43px; display: grid; grid-template-columns: auto minmax(180px, 1fr) auto auto; gap: 8px; align-items: center; }
.view-switch { display: flex; gap: 2px; padding: 3px; border: 1px solid #dde2eb; border-radius: 8px; background: #eef1f5; }
.view-switch button { min-height: 27px; padding: 0 9px; color: #707b8f; border: 0; border-radius: 6px; background: transparent; font-size: 8px; font-weight: 700; }
.view-switch button.active { color: var(--blue); background: #fff; box-shadow: 0 1px 5px rgba(40,50,78,.09); }
.kanban-toolbar > label { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 10px; color: #7c8698; border: 1px solid #dfe3eb; border-radius: 8px; background: #fff; }
.kanban-toolbar input { min-width: 0; width: 100%; border: 0; outline: 0; font-size: 8px; }
.filter-button, .primary-action, .reports-toolbar button { min-height: 34px; padding: 0 12px; border-radius: 8px; font-size: 8px; font-weight: 730; }
.filter-button, .reports-toolbar button { color: #5f6a7f; border: 1px solid #dfe3eb; background: #fff; }
.primary-action { color: #fff; border: 1px solid var(--blue); background: var(--blue); }
.filter-chips { min-height: 42px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #e2e5eb; }
.filter-chips button { min-height: 25px; padding: 0 8px; color: #7b8597; border: 1px solid #e1e4ea; border-radius: 20px; background: #fff; font-size: 7px; font-weight: 700; }
.filter-chips button.active { color: var(--blue); border-color: #c7d7ea; background: #edf4fb; }
.filter-chips span { flex: 1; }
.filter-chips small { color: #818b9c; font-size: 7px; }
.kanban-board { min-height: calc(100% - 86px); display: grid; grid-template-columns: repeat(4, minmax(215px, 1fr)); gap: 9px; padding-top: 11px; overflow-x: auto; }
.kanban-lane { min-width: 215px; padding: 10px; border: 1px solid #e0e4eb; border-radius: 10px; background: #f7f8fa; }
.kanban-lane > header { display: flex; align-items: center; justify-content: space-between; }
.kanban-lane > header > span { display: grid; grid-template-columns: 8px 1fr; align-items: center; column-gap: 6px; }
.kanban-lane > header i { grid-row: 1 / span 2; width: 7px; height: 7px; border-radius: 50%; background: #d6a969; }
.kanban-lane.active > header i { background: var(--blue); }
.kanban-lane.waiting > header i { background: #63a8c8; }
.kanban-lane.resolved > header i { background: #53ac83; }
.kanban-lane > header b { color: #4c5870; font-size: 9px; }
.kanban-lane > header small { margin-top: 2px; color: #969eae; font-size: 6px; }
.kanban-lane > header em { padding: 4px 6px; color: #7a8495; border-radius: 5px; background: #ebeef2; font-size: 6px; font-style: normal; font-weight: 700; }
.kanban-lane > p { min-height: 25px; margin: 8px 0; color: #8a94a7; font-size: 6px; line-height: 1.35; }
.kanban-lane article { margin-top: 8px; padding: 10px; border: 1px solid #e1e5eb; border-radius: 9px; background: #fff; box-shadow: 0 3px 9px rgba(35,45,70,.04); }
.kanban-lane article.featured { border-color: #c7d7ea; box-shadow: inset 3px 0 var(--blue); }
.kanban-lane article > div:first-child { display: flex; justify-content: space-between; }
.priority { padding: 3px 5px; border-radius: 4px; font-size: 5px; font-weight: 800; }
.priority.high { color: #a75255; background: #fff0f0; }
.priority.normal { color: #64738b; background: #eef1f5; }
.priority.low { color: #8a7854; background: #f8f2e6; }
.priority.done { color: #3e8063; background: #e7f5ed; }
.kanban-lane article time { color: #9aa2b0; font-size: 6px; }
.kanban-lane article h3 { margin: 9px 0 5px; color: #465269; font-size: 9px; line-height: 1.3; }
.kanban-lane article p { min-height: 26px; margin: 0; color: #7d8798; font-size: 7px; line-height: 1.4; }
.tags { display: flex; gap: 3px; margin-top: 7px; }
.tags span { padding: 3px 5px; color: var(--blue); border-radius: 4px; background: #edf4fb; font-size: 5px; font-weight: 700; }
.kanban-lane article footer { display: flex; align-items: center; gap: 6px; margin-top: 9px; padding-top: 8px; border-top: 1px solid #edf0f4; }
.mini-avatar { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; font-size: 6px; font-weight: 800; }
.kanban-lane footer b { min-width: 0; flex: 1; overflow: hidden; color: #69748a; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.progress { display: grid; grid-template-columns: 1fr auto; gap: 7px; align-items: center; margin-top: 8px; }
.progress::before { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--blue) 60%, #e9edf1 60%); content: ""; }
.progress span { color: #798497; font-size: 5px; }

.reports-toolbar { min-height: 44px; display: flex; align-items: center; gap: 9px; }
.reports-toolbar > div { min-width: 0; flex: 1; }
.reports-toolbar small, .reports-toolbar b { display: block; }
.reports-toolbar small { color: #929baa; font-size: 6px; font-weight: 800; letter-spacing: .09em; }
.reports-toolbar b { margin-top: 3px; color: #445168; font-size: 10px; }
.reports-toolbar label { min-height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 10px; color: #657086; border: 1px solid #dfe3eb; border-radius: 8px; background: #fff; font-size: 8px; }
.report-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 10px; }
.report-kpis article, .chart-card, .insights-card, .wave-card { padding: 13px; border: 1px solid #e0e4ec; border-radius: 10px; background: #fff; box-shadow: 0 3px 10px rgba(29,42,72,.03); }
.report-kpis header, .chart-card header, .wave-card header { display: flex; justify-content: space-between; gap: 8px; }
.report-kpis header span { color: #657189; font-size: 7px; font-weight: 650; }
.report-kpis header b { color: #398162; font-size: 6px; }
.report-kpis article > div { min-height: 44px; display: flex; align-items: end; justify-content: space-between; gap: 9px; margin-top: 5px; }
.report-kpis strong { color: #33405a; font-size: 23px; letter-spacing: -.06em; line-height: 1; }
.report-kpis article > small { display: block; margin-top: 8px; color: #8791a4; font-size: 6px; }
.tiny-bars { width: 65px; height: 35px; display: flex; align-items: end; gap: 3px; border-bottom: 1px solid #edf0f5; }
.tiny-bars i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: #d8e3ef; }
.tiny-bars i:last-child { background: var(--blue); }
.tiny-bars.blue i { background: #cfe5f7; }
.tiny-bars.blue i:last-child { background: #5f9dcc; }
.report-ring { position: relative; width: 37px; height: 37px; border-radius: 50%; background: conic-gradient(var(--blue) var(--ring), #e8edf1 0); }
.report-ring.green { background: conic-gradient(#5cac88 var(--ring), #e8edf1 0); }
.report-ring i { position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.report-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 9px; margin-top: 9px; }
.chart-card, .insights-card { min-height: 210px; }
.chart-card header b, .chart-card header span, .wave-card header b, .wave-card header span, .insights-card header b, .insights-card header span { display: block; }
.chart-card header b, .wave-card header b, .insights-card header b { color: #42506a; font-size: 9px; }
.chart-card header span, .wave-card header span, .insights-card header span { margin-top: 3px; color: #8892a4; font-size: 6px; }
.chart-card header em, .wave-card header em { color: var(--blue); font-size: 6px; font-style: normal; font-weight: 700; }
.stage-bars { display: grid; gap: 15px; margin-top: 20px; }
.stage-bars div { display: grid; grid-template-columns: 72px 1fr 16px; gap: 8px; align-items: center; }
.stage-bars span, .stage-bars strong { color: #68748a; font-size: 6px; }
.stage-bars i { height: 7px; border-radius: 8px; background: #edf0f4; }
.stage-bars i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), #8ca9cc); }
.insights-card ul { display: grid; gap: 13px; margin: 17px 0 0; padding: 0; list-style: none; }
.insights-card li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; }
.insights-card li > i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; font-size: 8px; font-style: normal; font-weight: 800; }
.insights-card li > i.up, .insights-card li > i.ok { color: #397e62; background: #e8f6ef; }
.insights-card li > i.warn { color: #a47a37; background: #fbf3df; }
.insights-card li b, .insights-card li span { display: block; }
.insights-card li b { color: #46536d; font-size: 7px; }
.insights-card li span { margin-top: 3px; color: #7f899b; font-size: 6px; line-height: 1.4; }
.wave-card { grid-column: 1 / -1; min-height: 235px; }
.wave-card svg { width: 100%; height: 150px; margin-top: 10px; overflow: visible; }
.wave-card .area { fill: url(#area); }
.wave-card .line { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; }
.axis { display: flex; justify-content: space-between; color: #939baa; font-size: 6px; }

@media (max-width: 900px) {
  .preview-sidebar { flex-basis: 150px; }
  .preview-logo { width: 105px; }
  .preview-sidebar nav button, .sidebar-bottom button { gap: 7px; padding: 0 7px; font-size: 8px; }
  .screen-chat { grid-template-columns: 205px minmax(310px, 1fr); }
  .contact-panel { display: none; }
  .kanban-board { grid-template-columns: repeat(4, 215px); }
}

@media (max-width: 620px) {
  .preview-sidebar { display: none; }
  .preview-topbar { flex-basis: 58px; padding: 0 11px; }
  .topbar-logo { width: 92px; display: block; margin-right: 5px; }
  .preview-topbar > div:nth-child(2) { display: none; }
  .global-search { display: none; }
  .screen-chat { grid-template-columns: 1fr; margin: 7px; }
  .conversation-list { display: none; }
  .chat-stream { padding: 12px; }
  .screen-kanban, .screen-reports { padding: 8px; }
  .kanban-toolbar { grid-template-columns: 1fr auto; }
  .kanban-toolbar > label, .filter-button { display: none; }
  .filter-chips small { display: none; }
  .report-kpis { grid-template-columns: 1fr 1fr; }
  .report-grid { grid-template-columns: 1fr; }
  .wave-card { grid-column: auto; }
}

/* Enlarged presentation type without changing the preview's usable canvas. */
.workspace-switcher > span, .topbar-avatar { font-size: 11px; }
.workspace-switcher b, .preview-sidebar nav button, .sidebar-bottom button { font-size: 12px; }
.workspace-switcher small, .user-chip small { font-size: 9px; }
.preview-sidebar nav button b { font-size: 9px; }
.user-chip > span, .user-chip b { font-size: 10px; }
.preview-topbar small { font-size: 8px; }
.preview-topbar h1 { font-size: 19px; }
.global-search input, .list-search input { font-size: 10px; }
.inbox-heading small { font-size: 8px; }
.inbox-heading b { font-size: 14px; }
.conversation-tabs button { font-size: 8px; }
.conversation header b, .chat-header b { font-size: 11px; }
.conversation header time, .conversation small, .chat-header small { font-size: 8px; }
.conversation p, .message p, .composer > span { font-size: 10px; }
.conversation em, .channel-tag, .chat-utilities > span { font-size: 7px; }
.chat-utilities small { font-size: 7px; }
.chat-utilities b, .attachment b, .person-row b { font-size: 9px; }
.chat-utilities > button { font-size: 8px; }
.chat-stream > time, .message small, .attachment small, .person-row small { font-size: 7px; }
.contact-identity h2 { font-size: 13px; }
.contact-identity p, .contact-block dt, .contact-block dd { font-size: 8px; }
.contact-block header b, .contact-block header button, .contact-block.note > small { font-size: 7px; }
.contact-block.note p { font-size: 8px; }
.view-switch button, .kanban-toolbar input, .filter-button, .primary-action, .reports-toolbar button, .reports-toolbar label { font-size: 10px; }
.filter-chips button, .filter-chips small { font-size: 8px; }
.kanban-lane > header b, .chart-card header b, .wave-card header b, .insights-card header b { font-size: 11px; }
.kanban-lane > header small, .kanban-lane > header em, .kanban-lane > p, .kanban-lane article time { font-size: 7px; }
.kanban-lane article h3 { font-size: 11px; }
.kanban-lane article p, .insights-card li b { font-size: 8px; }
.priority, .tags span, .mini-avatar, .kanban-lane footer b, .progress span { font-size: 7px; }
.reports-toolbar small, .report-kpis header b, .report-kpis article > small, .chart-card header span, .wave-card header span, .insights-card header span, .chart-card header em, .wave-card header em, .stage-bars span, .stage-bars strong, .insights-card li span, .axis { font-size: 7px; }
.reports-toolbar b { font-size: 12px; }
.report-kpis header span { font-size: 8px; }
.report-kpis strong { font-size: 27px; }

/* Fictional commercial previews: projects and automation illustrate the product surface without tenant data. */
.screen-projects { overflow: auto; padding: 14px 17px 18px; }
.project-toolbar { min-height: 58px; display: flex; align-items: center; gap: 13px; padding: 0 3px 13px; border-bottom: 1px solid #e2e6ed; }.project-toolbar > div { min-width: 0; flex: 1; }.project-toolbar small, .project-toolbar h2, .project-toolbar p { display: block; margin: 0; }.project-toolbar small { color: #7a879a; font-size: 7px; font-weight: 800; letter-spacing: .1em; }.project-toolbar h2 { margin-top: 4px; color: #35415a; font-size: 14px; letter-spacing: -.03em; }.project-toolbar p { margin-top: 3px; color: #8892a4; font-size: 7px; }.project-toolbar > span { padding: 7px 9px; color: #397e62; border-radius: 7px; background: #e9f7ef; font-size: 8px; font-weight: 750; }.project-toolbar > button, .project-deliverables header button, .project-approvals header button { min-height: 32px; padding: 0 10px; color: var(--blue); border: 1px solid #d5e2ef; border-radius: 7px; background: #fff; font-size: 8px; font-weight: 750; }
.project-layout { display: grid; grid-template-columns: minmax(390px, 1fr) 225px; gap: 11px; margin-top: 13px; }.project-workbench { display: grid; gap: 10px; }.project-workbench > article, .project-side-panel > article { padding: 13px; border: 1px solid #e0e5ed; border-radius: 10px; background: #fff; box-shadow: 0 3px 10px rgba(29,42,72,.025); }.project-workbench header, .project-side-panel header { display: flex; align-items: start; justify-content: space-between; gap: 8px; }.project-workbench header div, .project-side-panel header { min-width: 0; }.project-workbench header b, .project-workbench header span, .project-side-panel header b, .project-side-panel header small { display: block; }.project-workbench header b, .project-side-panel header b { color: #435069; font-size: 10px; }.project-workbench header span, .project-side-panel header small { margin-top: 3px; color: #8992a3; font-size: 7px; }.project-brief-card header em { color: #5f8b74; font-size: 7px; font-style: normal; }.project-brief-card > p { margin: 12px 0; color: #657187; font-size: 9px; line-height: 1.45; }.project-brief-card > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }.project-brief-card > div span { padding: 8px; border-radius: 7px; background: #f5f7fa; }.project-brief-card small, .project-brief-card b { display: block; }.project-brief-card small { color: #8993a4; font-size: 6px; font-weight: 800; }.project-brief-card b { margin-top: 4px; color: #4d596f; font-size: 8px; }.project-deliverables header button, .project-approvals header button { min-height: 28px; font-size: 7px; }.deliverable-row { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 9px; align-items: center; margin-top: 9px; padding: 8px; border: 1px solid #e8ebf0; border-radius: 7px; }.deliverable-row > i { width: 8px; height: 8px; border-radius: 50%; background: #7f9fca; }.deliverable-row div b, .deliverable-row div small { display: block; }.deliverable-row div b { color: #4d5970; font-size: 8px; }.deliverable-row div small { margin-top: 3px; color: #8b94a5; font-size: 6px; }.deliverable-row > span, .approval-item > span { padding: 5px 6px; color: #387d61; border-radius: 5px; background: #e9f7ef; font-size: 6px; font-weight: 760; white-space: nowrap; }.deliverable-row > span.waiting { color: #9a743f; background: #fcf2df; }.deliverable-row > span.done { color: #3d6890; background: #e8f1f9; }.approval-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 9px; padding: 8px; border: 1px solid #e7ebf0; border-radius: 7px; }.approval-item > i { width: 25px; height: 25px; display: grid; place-items: center; color: var(--blue); border-radius: 7px; background: #e5eef8; font-size: 8px; font-style: normal; font-weight: 800; }.approval-item div b, .approval-item div small { display: block; }.approval-item div b { color: #4b576e; font-size: 8px; }.approval-item div small { margin-top: 3px; color: #8993a4; font-size: 6px; }.approval-item > span.revision { color: #a25d5c; background: #fff0f0; }
.project-side-panel { display: grid; align-content: start; gap: 10px; }.project-side-panel ol { display: grid; gap: 11px; margin: 12px 0 0; padding: 0; list-style: none; }.project-side-panel li { display: grid; grid-template-columns: 23px 1fr; gap: 8px; align-items: start; }.project-side-panel li i { width: 22px; height: 22px; display: grid; place-items: center; color: #7b8798; border: 1px solid #e0e5eb; border-radius: 50%; background: #f5f7fa; font-size: 7px; font-style: normal; font-weight: 800; }.project-side-panel li.done i, .project-side-panel li.active i { color: #fff; border-color: var(--blue); background: var(--blue); }.project-side-panel li div b, .project-side-panel li div span { display: block; }.project-side-panel li div b { color: #4b576d; font-size: 8px; }.project-side-panel li div span { margin-top: 3px; color: #9099a8; font-size: 6px; line-height: 1.3; }.project-team > div { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 8px; border-radius: 7px; background: #f5f7fa; }.project-team > div > span { width: 23px; height: 23px; display: grid; place-items: center; color: var(--blue); border-radius: 7px; background: #e1ebf5; font-size: 7px; font-weight: 800; }.project-team p { margin: 0; }.project-team p b, .project-team p small { display: block; }.project-team p b { color: #536076; font-size: 7px; }.project-team p small { margin-top: 2px; color: #9099a8; font-size: 6px; }

.screen-flow { display: grid; grid-template-columns: 150px minmax(420px, 1fr) 210px; gap: 10px; padding: 12px; overflow: hidden; }.flow-library, .flow-inspector, .flow-workspace { min-width: 0; border: 1px solid #e1e5ed; border-radius: 10px; background: #fff; }.flow-library { padding: 12px; }.flow-library header small, .flow-library header b { display: block; }.flow-library header small, .flow-inspector header small { color: #8b94a4; font-size: 6px; font-weight: 800; letter-spacing: .1em; }.flow-library header b, .flow-inspector header b { margin-top: 4px; color: #465269; font-size: 10px; }.flow-library > div { display: grid; gap: 6px; margin-top: 13px; }.flow-library > div span { min-height: 34px; display: flex; align-items: center; padding: 0 8px; color: #536077; border: 1px solid #e3e7ed; border-radius: 7px; background: #fafbfc; font-size: 7px; font-weight: 720; }.flow-library > div span::before { width: 7px; height: 7px; margin-right: 6px; border-radius: 2px; background: #d6e5f4; content: ""; }.flow-library > div span:nth-child(2)::before { background: #bfdbef; }.flow-library > div span:nth-child(3)::before { background: #e8ce9f; }.flow-library > div span:nth-child(4)::before { border-radius: 50%; background: #d4e8c6; }.flow-library > div span:nth-child(5)::before { background: #bce4d2; }.flow-library > div span:nth-child(6)::before { background: #efd1d1; }.flow-workspace { display: flex; flex-direction: column; overflow: hidden; background: #f8f9fc; }.flow-toolbar { min-height: 51px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border-bottom: 1px solid #e1e5ed; background: #fff; }.flow-toolbar > div { min-width: 0; flex: 1; }.flow-toolbar b, .flow-toolbar small { display: block; }.flow-toolbar b { color: #445168; font-size: 9px; }.flow-toolbar small { margin-top: 3px; color: #8993a4; font-size: 6px; }.flow-toolbar > span { padding: 5px 7px; color: #397e62; border-radius: 6px; background: #e8f6ef; font-size: 7px; font-weight: 750; }.flow-toolbar button { min-height: 28px; padding: 0 9px; color: #fff; border: 0; border-radius: 7px; background: var(--blue); font-size: 7px; font-weight: 750; }.flow-canvas { position: relative; min-height: 0; flex: 1; overflow: hidden; background-image: radial-gradient(#d9e1eb 1px, transparent 1px); background-size: 15px 15px; }.flow-node { position: absolute; z-index: 2; width: 138px; padding: 10px; border: 1px solid #dce2eb; border-radius: 8px; background: #fff; box-shadow: 0 4px 12px rgba(30,45,77,.06); }.flow-node small, .flow-node b { display: block; }.flow-node small { color: #6f87aa; font-size: 6px; font-weight: 820; letter-spacing: .08em; }.flow-node b { margin-top: 4px; color: #43516a; font-size: 8px; }.flow-node p { margin: 7px 0 0; color: #7d889a; font-size: 6px; line-height: 1.45; }.flow-start { top: 42%; left: 5%; }.flow-menu { top: 26%; left: 35%; border-color: #abc4df; box-shadow: inset 3px 0 var(--blue), 0 4px 12px rgba(30,45,77,.06); }.flow-route { right: 7%; }.route-a { top: 10%; }.route-b { top: 40%; }.route-c { top: 71%; }.flow-line { position: absolute; z-index: 1; height: 1px; border-top: 1px solid #7e9abb; transform-origin: left center; }.line-start { top: 51%; left: 25%; width: 11%; }.line-a { top: 37%; left: 56%; width: 19%; transform: rotate(-25deg); }.line-b { top: 50%; left: 56%; width: 19%; }.line-c { top: 60%; left: 56%; width: 20%; transform: rotate(23deg); }.flow-inspector { overflow: auto; padding: 13px; }.flow-inspector header { padding-bottom: 10px; border-bottom: 1px solid #e6eaf0; }.flow-inspector label { display: grid; gap: 5px; margin-top: 12px; color: #68748a; font-size: 7px; font-weight: 720; }.flow-inspector textarea { min-height: 59px; resize: none; padding: 8px; color: #526077; border: 1px solid #dfe4ec; border-radius: 7px; outline: 0; background: #f9fafc; font: inherit; font-size: 7px; line-height: 1.35; }.flow-inspector > div { display: grid; gap: 6px; margin-top: 12px; }.flow-inspector > div b { color: #536077; font-size: 8px; }.flow-inspector > div span { padding: 8px; color: #68748a; border: 1px solid #e1e6ed; border-radius: 6px; background: #fafbfc; font-size: 7px; }

@media (max-width: 900px) { .project-layout { grid-template-columns: minmax(385px, 1fr) 195px; }.screen-flow { grid-template-columns: minmax(390px, 1fr) 195px; }.flow-library { display: none; }.flow-menu { left: 30%; }.flow-start { left: 3%; } }
@media (max-width: 620px) { .screen-projects { padding: 8px; }.project-toolbar > span { display: none; }.project-layout { grid-template-columns: minmax(360px, 1fr); }.project-side-panel { display: none; }.project-brief-card > div { grid-template-columns: 1fr 1fr; }.project-toolbar h2 { font-size: 13px; }.screen-flow { display: block; padding: 8px; }.flow-inspector { display: none; }.flow-workspace { height: 100%; }.flow-node { width: 115px; }.flow-menu { top: 24%; left: 34%; }.flow-start { left: 2%; }.flow-route { right: 2%; }.flow-line { display: none; } }