:root {
  --canvas: #f3f6f8;
  --surface: #ffffff;
  --surface-soft: #f8fafb;
  --ink: #18212f;
  --muted: #738092;
  --line: #dde4e9;
  --line-strong: #cfd8df;
  --accent: #147b82;
  --accent-soft: #e4f2f2;
  --accent-dark: #0d5f64;
  --danger: #b95e5d;
  --shadow: 0 16px 48px rgba(27, 45, 61, .13);
  --new: #7893a9;
  --planned: #8a79bd;
  --work: #2888a8;
  --deferred: #b68038;
  --control: #bd6565;
  --accounting: #4d936e;
  --invoice-free: #9a8547;
  --sla: #5d74bf;
  font-family: Inter, "SF Pro Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}

* { box-sizing: border-box; }
.is-hidden { display: none !important; }
html, body { margin: 0; min-height: 100%; background: var(--canvas); }
body { overflow: hidden; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 228px minmax(0, 1fr); }
.sidebar { height: 100vh; background: #172530; color: #dbe7eb; display: flex; flex-direction: column; padding: 22px 14px 16px; position: relative; z-index: 20; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 24px; font-size: 16px; letter-spacing: -.01em; }
.brand > img, .mobile-brand > img { width: 34px; height: 34px; display: block; flex: 0 0 auto; object-fit: contain; }
.main-nav { display: grid; gap: 5px; }
.main-nav a { min-height: 44px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 11px; color: #aebdc5; text-decoration: none; padding: 0 11px; border-radius: 10px; font-size: 14px; font-weight: 600; transition: background .16s ease, color .16s ease; }
.main-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.main-nav a.is-active { color: #fff; background: rgba(68, 177, 181, .16); box-shadow: inset 3px 0 #55b8bc; }
.main-nav a em { font-style: normal; min-width: 21px; height: 20px; display: grid; place-items: center; padding: 0 6px; border-radius: 20px; background: rgba(255,255,255,.08); font-size: 11px; }
.main-nav a.is-active em { background: #2f9095; }
.sidebar-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); }
.profile-mini { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: 12px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.profile-mini:hover, .profile-mini[aria-expanded="true"] { background: rgba(255,255,255,.07); }
.profile-mini div { display: grid; gap: 2px; }
.profile-mini strong { font-size: 13px; color: #fff; }
.profile-mini small { color: #8398a4; font-size: 11px; }
.profile-mini > svg { width: 15px; height: 15px; margin-left: auto; color: #8398a4; transform: rotate(-90deg); }

.avatar { flex: 0 0 auto; width: 31px; height: 31px; border-radius: 50%; display: inline-grid; place-items: center; color: #2d4f64; background: #dfe8f0; font-size: 10px; font-weight: 800; box-shadow: 0 0 0 2px #fff; }
.employee-avatar { position: relative; overflow: hidden; isolation: isolate; background-color: var(--employee-avatar-color, #dfe8f0); }
.employee-avatar-fallback { width: 100%; height: 100%; display: grid; place-items: center; border-radius: inherit; }
.employee-avatar > img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: center; }
.avatar-andrey { background: #dce6f6; color: #405d85; }
.avatar-dashi { background: #f2dddc; color: #8b5352; }
.avatar-vlad { background: #dcece5; color: #47725d; }
.avatar-nikolay { background: #ece1f1; color: #745680; }

.workspace { min-width: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.topbar { min-height: 68px; display: grid; grid-template-columns: minmax(300px, 680px) auto; align-items: center; justify-content: space-between; gap: 24px; padding: 11px 28px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.88); backdrop-filter: blur(18px); }
.mobile-brand { display: none; align-items: center; gap: 10px; }
.mobile-brand > img { width: 32px; height: 32px; }
.global-search { height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); color: #8995a3; transition: border .15s ease, box-shadow .15s ease, background .15s ease; }
.global-search:focus-within { background: #fff; border-color: #70aeb2; box-shadow: 0 0 0 3px rgba(20,123,130,.11); }
.global-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; }
.global-search input::placeholder { color: #98a2ad; }
kbd { border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; background: #fff; color: #8a95a0; padding: 2px 6px; font-size: 10px; white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.top-profile-button { display: none; place-items: center; width: 35px; height: 35px; padding: 0; border: 1px solid #dce4e8; border-radius: 50%; background: #fff; cursor: pointer; }
.top-profile-button .avatar { width: 29px; height: 29px; font-size: 10px; }
.connection-status { min-height: 31px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #cfe3dc; border-radius: 999px; padding: 0 10px; background: #f1f9f5; color: #4f7969; font-size: 9.5px; font-weight: 750; white-space: nowrap; }
.connection-status i { width: 7px; height: 7px; border-radius: 50%; background: #56a47e; box-shadow: 0 0 0 3px rgba(86,164,126,.12); }
.connection-status.is-loading { border-color: #d9e1e6; background: #f7f9fa; color: #7d8993; }
.connection-status.is-loading i { background: #9aa6af; box-shadow: 0 0 0 3px rgba(154,166,175,.12); animation: connection-pulse 1.2s ease-in-out infinite; }
.connection-status.is-error { border-color: #edcfca; background: #fff4f2; color: #a45851; }
.connection-status.is-error i { background: #cb6a61; box-shadow: 0 0 0 3px rgba(203,106,97,.12); animation: none; }
@keyframes connection-pulse { 50% { opacity: .35; } }
.icon-button { width: 39px; height: 39px; border: 0; border-radius: 10px; background: transparent; display: inline-grid; place-items: center; cursor: pointer; color: #6f7b88; position: relative; }
.icon-button:hover { background: #edf2f4; color: var(--ink); }
.top-actions .icon-button i { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: #d26b65; border: 2px solid #fff; }
.create-button { height: 42px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 11px; padding: 0 16px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 750; cursor: pointer; box-shadow: 0 6px 16px rgba(20,123,130,.2); }
.create-button:hover { background: var(--accent-dark); }

.page-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 24px 28px 18px; }
.eyebrow { margin: 0 0 5px; color: var(--accent); text-transform: uppercase; font-size: 10px; line-height: 1.2; letter-spacing: .12em; font-weight: 850; }
.page-head h1 { margin: 0; font-size: clamp(23px, 2.1vw, 31px); line-height: 1.08; letter-spacing: -.035em; }
.page-subtitle { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.page-subtitle:empty { display: none; }
.view-switcher { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: #e9eef1; }
.view-switcher button { height: 34px; display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 8px; padding: 0 11px; background: transparent; color: #72808e; cursor: pointer; font-size: 12px; font-weight: 700; }
.view-switcher button svg { width: 16px; height: 16px; }
.view-switcher button.is-active { color: var(--ink); background: #fff; box-shadow: 0 2px 7px rgba(38,54,67,.1); }

.control-bar { margin: 0 28px; min-height: 70px; border: 1px solid var(--line); border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px; position: relative; }
.phase-switcher { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 11px; background: #edf2f4; }
.phase-switcher > button { min-width: 202px; height: 56px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px; border: 0; border-radius: 9px; padding: 0 10px; background: transparent; color: #73808c; text-align: left; cursor: pointer; }
.phase-switcher > button:hover { background: rgba(255,255,255,.62); }
.phase-switcher > button.is-active { background: #fff; color: var(--ink); box-shadow: 0 3px 10px rgba(32,48,61,.1); }
.is-task-dragging .phase-switcher > button:not(.is-active) { outline: 1px dashed #67a9ad; outline-offset: -3px; background: #edf7f7; }
.phase-switcher > button.is-phase-drop-target { outline: 2px solid var(--accent); outline-offset: -3px; background: #dff1f1; color: var(--accent-dark); transform: translateY(-1px); }
.phase-switcher .phase-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #dfe8ec; color: #6d7e89; }
.phase-switcher button.is-active .phase-icon { background: var(--accent-soft); color: var(--accent); }
.phase-switcher .phase-icon svg { width: 16px; height: 16px; }
.phase-switcher button > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.phase-switcher strong { font-size: 12px; }
.phase-switcher small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8c98a2; font-size: 9px; }
.phase-switcher em { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; padding: 0 6px; background: #dfe7eb; color: #63727f; font-style: normal; font-size: 10px; font-weight: 800; }
.phase-switcher button.is-active em { background: var(--accent); color: #fff; }
.toolbar-right { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.quick-views { min-width: 0; display: flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid #e4e9ed; border-radius: 10px; overflow-x: auto; scrollbar-width: none; }
.quick-views::-webkit-scrollbar { display: none; }
.quick-views button { height: 35px; border: 0; border-radius: 7px; padding: 0 10px; background: transparent; color: #74818d; cursor: pointer; white-space: nowrap; font-size: 10.5px; font-weight: 720; }
.quick-views button:hover { background: #f2f5f6; }
.quick-views button.is-active { background: #e7f2f2; color: var(--accent-dark); }
.filters { display: flex; align-items: center; gap: 3px; }
.filters button { height: 41px; display: flex; align-items: center; gap: 7px; border: 1px solid #e3e9ec; border-radius: 9px; padding: 0 10px; background: #fff; color: #677585; cursor: pointer; white-space: nowrap; font-size: 11px; font-weight: 720; }
.filters button:hover { background: #f0f4f6; }
.filters svg { width: 16px; height: 16px; }
.filter-count { min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; padding: 0 4px; background: #e4f0f1; color: var(--accent); font-size: 9px; }
.applied-filters { display: none; align-items: center; gap: 6px; min-height: 42px; margin: 8px 28px 0; padding: 5px 8px; border: 1px solid #dfe7ea; border-radius: 11px; background: rgba(255,255,255,.78); overflow-x: auto; scrollbar-width: none; }
.applied-filters.is-visible { display: flex; }
.applied-filters > span { padding: 0 4px; color: #87939e; white-space: nowrap; font-size: 10px; font-weight: 700; }
.applied-filters button { height: 29px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #cfe0e2; border-radius: 999px; padding: 0 9px; background: #edf6f6; color: var(--accent-dark); white-space: nowrap; cursor: pointer; font-size: 10px; font-weight: 700; }
.applied-filters button svg { width: 12px; height: 12px; }
.applied-filters button.clear-filters { border-color: transparent; background: transparent; color: #7a8792; }
.filter-popover { position: fixed; z-index: 60; top: 180px; right: 28px; width: 360px; display: none; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 22px 60px rgba(23,39,52,.2); overflow: hidden; }
.filter-popover.is-open { display: block; }
.filter-popover-head { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.filter-popover-head h2 { margin: 0; font-size: 19px; }
.filter-popover section { padding: 15px 16px; border-bottom: 1px solid #edf1f3; }
.filter-popover section h3 { margin: 0 0 10px; color: #566473; font-size: 11px; }
.filter-options { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-options button { height: 31px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: #fff; color: #6e7b87; cursor: pointer; font-size: 10.5px; }
.filter-person-avatar { width: 21px; height: 21px; flex: 0 0 auto; border-radius: 50%; background: #e2e9ee; color: #587080; font-size: 6px; font-weight: 850; }
.filter-options button:hover { background: #f5f8f9; }
.filter-options button.is-active { border-color: #8dbec1; background: var(--accent-soft); color: var(--accent-dark); font-weight: 750; }
.filter-popover-foot { display: flex; justify-content: flex-end; gap: 7px; padding: 12px 16px; background: #f7f9fa; }
.filter-popover-foot button { height: 35px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; background: #fff; color: #64717e; cursor: pointer; font-size: 10.5px; font-weight: 720; }
.filter-popover-foot button.filter-done { border-color: var(--accent); background: var(--accent); color: #fff; }

.status-jump { display: none; padding: 14px 18px 4px; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.status-jump::-webkit-scrollbar { display: none; }
.status-jump button { height: 35px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; padding: 0 12px; background: #fff; color: #667382; white-space: nowrap; font-size: 12px; font-weight: 700; }
.status-jump button i { width: 7px; height: 7px; border-radius: 50%; background: var(--status-color); }
.status-jump button.is-active { color: var(--ink); border-color: color-mix(in srgb, var(--status-color) 55%, white); background: color-mix(in srgb, var(--status-color) 9%, white); }

.content-view { display: none; min-height: 0; flex: 1; }
.content-view.is-active { display: block; }

/* Home: a personal work re-entry point, not a second task board or a KPI dashboard. */
.workspace.is-home .view-switcher,
.workspace.is-home .control-bar,
.workspace.is-home .status-jump,
.workspace.is-home .applied-filters { display: none; }
.home-view { padding: 0 28px 28px; overflow: hidden auto; scrollbar-width: thin; scrollbar-color: #cbd5da transparent; }
.home-shell { width: min(1420px, 100%); margin: 0 auto; padding-bottom: 8px; }
.home-welcome { min-height: 132px; display: grid; grid-template-columns: minmax(270px,.72fr) minmax(520px,1.45fr); align-items: center; gap: 28px; border: 1px solid #d7e4e6; border-radius: 18px; padding: 22px 24px; background: linear-gradient(112deg,#f4fbfa 0%,#edf6f6 36%,#fff 76%); box-shadow: 0 8px 28px rgba(29,61,67,.055); overflow: hidden; position: relative; }
.home-welcome::after { content: ""; position: absolute; top: -90px; right: 15%; width: 210px; height: 210px; border-radius: 50%; border: 38px solid rgba(42,145,151,.035); pointer-events: none; }
.home-welcome-copy { min-width: 0; position: relative; z-index: 1; }
.home-welcome-copy h2 { margin: 0; font-size: clamp(23px,2.2vw,32px); line-height: 1.08; letter-spacing: -.035em; }
.home-welcome-copy > p:last-child { max-width: 460px; margin: 9px 0 0; color: #687887; font-size: 12.5px; line-height: 1.5; }
.home-pulse { min-width: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; position: relative; z-index: 1; }
.home-pulse > button { min-width: 0; min-height: 73px; display: grid; grid-template-columns: 35px minmax(0,1fr); align-items: center; gap: 10px; border: 1px solid rgba(201,218,220,.95); border-radius: 13px; padding: 10px 11px; background: rgba(255,255,255,.82); color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 3px 10px rgba(37,60,67,.035); }
.home-pulse > button:hover { border-color: #94bfc2; background: #fff; transform: translateY(-1px); }
.home-pulse > button > span:first-child { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; background: #e3f1f1; color: var(--accent); }
.home-pulse > button.has-warning > span:first-child { background: #fae9e6; color: #b75e58; }
.home-pulse > button.is-calm > span:first-child { background: #e8f3ed; color: #5b8b73; }
.home-pulse svg { width: 17px; height: 17px; }
.home-pulse > button > span:last-child { min-width: 0; display: grid; gap: 4px; }
.home-pulse strong, .home-pulse small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-pulse strong { font-size: 11px; }
.home-pulse small { color: #87949f; font-size: 9px; }

.home-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(310px,.72fr); align-items: start; gap: 16px; margin-top: 16px; }
.home-flow, .home-rail { min-width: 0; display: grid; gap: 16px; }
.home-panel { min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 5px 18px rgba(34,52,65,.035); overflow: hidden; }
.home-section-head { min-height: 67px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 14px; border-bottom: 1px solid #e8edef; }
.home-section-head > div { min-width: 0; display: flex; align-items: center; gap: 10px; }
.home-section-icon { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: #e8f3f3; color: var(--accent); }
.home-section-icon svg { width: 17px; height: 17px; }
.home-section-head p { margin: 0 0 2px; color: #91a0aa; text-transform: uppercase; font-size: 8px; line-height: 1.15; letter-spacing: .1em; font-weight: 800; }
.home-section-head h3 { margin: 0; font-size: 14px; line-height: 1.2; letter-spacing: -.015em; }
.home-section-head > button { min-height: 34px; display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 9px; padding: 0 9px; background: transparent; color: #75848f; cursor: pointer; white-space: nowrap; font-size: 10px; font-weight: 750; }
.home-section-head > button:hover { background: #edf5f5; color: var(--accent-dark); }
.home-section-head > button svg { width: 14px; height: 14px; }

#home-resume { padding: 13px; }
.home-resume-card { width: 100%; min-height: 170px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-content: center; gap: 9px 18px; border: 1px solid color-mix(in srgb,var(--home-status) 22%,#d9e3e7); border-left: 4px solid var(--home-status); border-radius: 14px; padding: 20px 21px; background: linear-gradient(120deg,color-mix(in srgb,var(--home-status) 5%,#fff),#fff 70%); color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 7px 22px rgba(37,55,68,.055); }
.home-resume-card:hover { border-color: color-mix(in srgb,var(--home-status) 42%,#d9e3e7); border-left-color: var(--home-status); box-shadow: 0 12px 28px rgba(37,55,68,.09); transform: translateY(-1px); }
.home-resume-status { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 7px; color: color-mix(in srgb,var(--home-status) 76%,#26343e); text-transform: uppercase; font-size: 8.5px; letter-spacing: .09em; font-weight: 850; }
.home-resume-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--home-status); box-shadow: 0 0 0 4px color-mix(in srgb,var(--home-status) 12%,transparent); }
.home-resume-title { grid-column: 1 / -1; max-width: 790px; font-size: clamp(18px,1.8vw,25px); line-height: 1.18; letter-spacing: -.025em; font-weight: 780; }
.home-resume-context { min-width: 0; display: flex; align-items: center; gap: 7px; color: #697987; font-size: 11px; }
.home-resume-context svg { width: 15px; height: 15px; flex: 0 0 auto; }
.home-resume-context span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-resume-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 7px; padding-top: 13px; border-top: 1px solid #e5ebee; }
.home-resume-foot > span:first-child { min-width: 0; display: flex; align-items: center; gap: 9px; color: #70808c; font-size: 10px; font-weight: 700; }
.home-resume-foot .avatar { width: 27px; height: 27px; font-size: 8px; box-shadow: none; }
.home-resume-foot > em { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-dark); font-style: normal; font-size: 11px; font-weight: 800; }
.home-resume-foot > em svg { width: 15px; height: 15px; }
.home-resume-priority { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; border-radius: 999px; padding: 5px 8px; background: #f8ebe9; color: #a95a55; font-size: 9px; font-weight: 800; }
.home-resume-priority.is-urgent { background: #f8e3e1; color: #a84440; }
.home-resume-priority svg { width: 12px; height: 12px; }

.home-changes { padding: 3px 13px 12px; }
.home-change-row { width: 100%; min-height: 66px; display: grid; grid-template-columns: 4px minmax(0,1fr) auto auto 16px; align-items: center; gap: 12px; border: 0; border-bottom: 1px solid #edf1f3; padding: 8px 7px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.home-change-row:last-child { border-bottom: 0; }
.home-change-row:hover { border-radius: 10px; background: #f3f8f8; }
.home-change-row > i { width: 3px; height: 32px; border-radius: 3px; background: var(--home-status); opacity: .8; }
.home-change-copy, .home-change-meta { min-width: 0; display: grid; gap: 5px; }
.home-change-copy strong, .home-change-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-change-copy strong { font-size: 11.5px; }
.home-change-copy small { color: #8a97a2; font-size: 9.5px; }
.home-change-meta { justify-items: end; }
.home-change-meta em { border-radius: 999px; padding: 4px 7px; background: color-mix(in srgb,var(--home-status) 10%,#fff); color: color-mix(in srgb,var(--home-status) 76%,#34414b); font-style: normal; font-size: 8.5px; font-weight: 780; white-space: nowrap; }
.home-change-meta small { color: #9aa5ad; font-size: 8.5px; white-space: nowrap; }
.home-change-row .avatar-stack { min-width: 32px; justify-content: flex-end; }
.home-change-row .avatar { width: 26px; height: 26px; font-size: 7.5px; }
.home-change-row > svg { width: 14px; height: 14px; color: #a4afb7; }

.home-attention, .home-calendar-list { padding: 5px 10px 10px; }
.home-attention-item, .home-calendar-item { width: 100%; min-height: 61px; display: grid; grid-template-columns: 39px minmax(0,1fr) auto 14px; align-items: center; gap: 9px; border: 0; border-bottom: 1px solid #edf1f3; padding: 7px 5px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.home-attention-item:last-child, .home-calendar-item:last-child { border-bottom: 0; }
.home-attention-item:hover, .home-calendar-item:hover { border-radius: 10px; background: #f1f7f7; }
.home-attention-symbol, .home-calendar-item > span:first-child { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; background: #fae9e6; color: #b25b55; }
.home-attention-symbol svg, .home-calendar-item > span:first-child svg { width: 16px; height: 16px; }
.home-attention-avatar { width: 37px; height: 37px; display: block; }
.home-chat-avatar { width: 37px !important; height: 37px !important; font-size: 9px !important; }
.home-attention-item > span:nth-child(2), .home-calendar-item > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.home-attention-item strong, .home-attention-item small, .home-calendar-item strong, .home-calendar-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-attention-item strong, .home-calendar-item strong { font-size: 10.5px; }
.home-attention-item small, .home-calendar-item small { color: #8b98a3; font-size: 9px; }
.home-attention-item > em { max-width: 94px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a35c57; font-style: normal; font-size: 8px; font-weight: 800; }
.home-attention-item.is-chat > em { min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; padding: 0 6px; background: var(--accent); color: #fff; }
.home-attention-item > svg, .home-calendar-item > svg { width: 13px; height: 13px; color: #a4afb7; }
.home-calendar-item { grid-template-columns: 39px minmax(0,1fr) 14px; }
.home-calendar-item > span:first-child { background: #e6f2f2; color: var(--accent); }

.home-quick-actions { border: 1px solid #dbe4e8; border-radius: 16px; padding: 13px; background: #f8fafb; }
.home-quick-actions > p { margin: 0 0 10px; color: #82909b; text-transform: uppercase; font-size: 8px; letter-spacing: .1em; font-weight: 850; }
.home-quick-actions > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.home-quick-actions button { min-width: 0; min-height: 64px; display: grid; place-items: center; align-content: center; gap: 6px; border: 1px solid #dce5e8; border-radius: 11px; padding: 7px 4px; background: #fff; color: #687884; cursor: pointer; }
.home-quick-actions button:hover { border-color: #9fc6c8; color: var(--accent-dark); background: #f3f9f9; }
.home-quick-actions button span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: #e7f2f2; color: var(--accent); }
.home-quick-actions button svg { width: 14px; height: 14px; }
.home-quick-actions button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8.5px; }

.home-empty { min-height: 92px; display: flex; align-items: center; gap: 12px; padding: 16px; color: #6f7f8b; }
.home-empty > span { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; background: #edf3f4; color: #71838d; }
.home-empty.is-positive > span, .home-attention-empty > span { background: #e7f3ec; color: #5c8e75; }
.home-empty > span svg { width: 17px; height: 17px; }
.home-empty > div { min-width: 0; display: grid; gap: 4px; }
.home-empty strong { font-size: 11px; }
.home-empty p { margin: 0; color: #939fa8; font-size: 9.5px; line-height: 1.4; }
.home-empty > button { margin-left: auto; border: 0; border-radius: 9px; padding: 9px 11px; background: var(--accent); color: #fff; cursor: pointer; font-size: 9px; font-weight: 800; }
.home-attention-empty, .home-calendar-empty { min-height: 115px; padding-inline: 8px; }

.board-view { padding: 12px 28px 22px; overflow: hidden; position: relative; }
.kanban { height: 100%; display: grid; grid-template-columns: repeat(4, minmax(225px, 1fr)); gap: 11px; overflow-x: auto; overflow-y: hidden; padding: 0 0 8px; scroll-snap-type: x proximity; scrollbar-color: #cbd5da transparent; }
.kanban-column { min-width: 0; height: 100%; border: 1px solid var(--line); border-top: 3px solid var(--status-color); border-radius: 12px; background: color-mix(in srgb, var(--status-color) 3.5%, #f7f9fa); display: flex; flex-direction: column; scroll-snap-align: start; overflow: hidden; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.kanban-column.is-drop-target { border-color: var(--status-color); background: color-mix(in srgb, var(--status-color) 9%, #f7f9fa); transform: translateY(-2px); }
.column-head { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 10px 0 12px; border-bottom: 1px solid color-mix(in srgb, var(--status-color) 18%, var(--line)); }
.column-title { display: flex; align-items: center; gap: 7px; min-width: 0; flex-wrap: wrap; }
.column-title h2 { margin: 0; font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.column-title span { min-width: 23px; height: 21px; display: grid; place-items: center; padding: 0 6px; border-radius: 20px; background: color-mix(in srgb, var(--status-color) 12%, white); color: color-mix(in srgb, var(--status-color) 78%, #25313e); font-size: 10px; font-weight: 800; }
.column-title small { width: 100%; color: #a15b58; font-size: 8.5px; }
.column-head button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #8a96a1; cursor: pointer; }
.column-head button:hover { background: #fff; color: var(--accent); }
.column-head button svg { width: 17px; height: 17px; }
.column-drop-copy { display: none; min-height: 34px; align-items: center; justify-content: center; gap: 6px; margin: 7px 8px 0; border: 1px dashed color-mix(in srgb, var(--status-color) 55%, #cbd5da); border-radius: 8px; background: color-mix(in srgb, var(--status-color) 8%, white); color: color-mix(in srgb, var(--status-color) 78%, #26323d); font-size: 9.5px; font-weight: 750; }
.column-drop-copy svg { width: 13px; height: 13px; }
.is-task-dragging .column-drop-copy { display: flex; }
.column-body { flex: 1; overflow-y: auto; padding: 9px; scrollbar-width: thin; scrollbar-color: #d4dde2 transparent; }
.task-card { width: 100%; display: block; border: 1px solid #dfe6ea; border-left: 3px solid transparent; border-radius: 10px; background: #fff; text-align: left; padding: 12px 11px 11px; margin: 0 0 8px; cursor: pointer; position: relative; box-shadow: 0 2px 6px rgba(35, 50, 63, .045); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease; }
.task-card:hover, .task-card:focus-visible { outline: 0; border-color: color-mix(in srgb, var(--status-color) 40%, var(--line)); border-left-color: var(--status-color); box-shadow: 0 8px 18px rgba(35,50,63,.09); }
.task-card.is-selected { border-color: color-mix(in srgb, var(--status-color) 55%, var(--line)); border-left-color: var(--status-color); background: color-mix(in srgb, var(--status-color) 3%, white); }
.task-card.is-dragging { opacity: .38; transform: rotate(1deg) scale(.98); }
.drag-handle { position: absolute; top: 10px; left: 7px; width: 18px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: transparent; color: #96a2ab; opacity: .42; cursor: grab; transition: opacity .15s ease, background .15s ease; }
.task-card:hover .drag-handle, .task-card:focus-visible .drag-handle, .is-task-dragging .drag-handle { opacity: 1; }
.task-card:hover .drag-handle, .task-card:focus-visible .drag-handle { background: #f2f5f6; }
.drag-handle svg { width: 13px; height: 13px; }
.task-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding-left: 22px; }
.task-top h3 { margin: 0; font-size: 14px; line-height: 1.32; letter-spacing: -.008em; font-weight: 760; }
.card-top-actions { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.card-top-actions button { width: 25px; height: 25px; display: grid; place-items: center; border: 0; border-radius: 7px; background: #eaf3f3; color: #4f8b8f; cursor: pointer; opacity: 1; }
.task-card:hover .card-top-actions button, .task-card:focus-visible .card-top-actions button { opacity: 1; }
.card-top-actions button:hover { background: var(--accent-soft); color: var(--accent); }
.card-top-actions button svg { width: 13px; height: 13px; }
.priority-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; background: transparent; }
.priority-dot.high { background: #c68a43; box-shadow: 0 0 0 3px #f8eddc; }
.priority-dot.urgent { background: #b34343; box-shadow: 0 0 0 3px #f5dddd; }
.is-priority-high { --priority-color: #c68a43; }
.is-priority-urgent { --priority-color: #b34343; }
.task-card.is-priority-high::after,
.task-card.is-priority-urgent::after,
.task-row.is-priority-high::after,
.task-row.is-priority-urgent::after,
.focus-task.is-priority-high::after,
.focus-task.is-priority-urgent::after { content: ""; position: absolute; top: -1px; right: 12px; left: 12px; height: 2px; border-radius: 0 0 999px 999px; background: var(--priority-color); pointer-events: none; }
.client-line { min-width: 0; min-height: 20px; display: flex; align-items: center; gap: 6px; margin-top: 9px; color: #637182; font-size: 11.5px; overflow: hidden; }
.client-line svg { width: 14px; height: 14px; flex: 0 0 auto; color: #8693a1; }
.client-line span { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.internal-line { color: #7d6d9e; }
.card-bottom { min-height: 31px; display: flex; align-items: end; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #edf1f3; }
.avatar-stack { display: flex; align-items: center; min-width: 0; }
.avatar-stack .avatar { width: 25px; height: 25px; margin-left: -5px; font-size: 8px; box-shadow: 0 0 0 2px #fff; }
.avatar-stack .avatar:first-child { margin-left: 0; }
.task-date { display: flex; align-items: center; gap: 4px; color: #81909f; font-size: 10.5px; white-space: nowrap; }
.task-date svg { width: 13px; height: 13px; }
.task-date.is-late { color: #b55555; font-weight: 750; }
.created-line { margin-top: 7px; color: #a0a9b2; font-size: 10px; }
.empty-column { height: 94px; display: grid; place-items: center; border: 1px dashed #d5dde2; border-radius: 10px; color: #9ba5ae; font-size: 12px; }

.list-view { padding: 16px 28px 24px; overflow-y: auto; }
.list-status-filter { min-height: 48px; display: flex; align-items: center; gap: 10px; margin-bottom: 9px; border: 1px solid var(--line); border-radius: 11px; padding: 5px 7px 5px 13px; background: #fff; }
.list-status-filter > span { flex: 0 0 auto; color: #89949e; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.list-status-filter > #list-status-buttons { min-width: 0; display: flex; align-items: center; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.list-status-filter > #list-status-buttons::-webkit-scrollbar { display: none; }
.list-status-filter button { height: 34px; display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 8px; padding: 0 10px; background: transparent; color: #73808c; white-space: nowrap; cursor: pointer; font-size: 10.5px; font-weight: 720; }
.list-status-filter button:hover { background: #f1f5f6; }
.list-status-filter button i { width: 6px; height: 6px; border-radius: 50%; background: var(--status-color, #94a0aa); }
.list-status-filter button.is-active { background: color-mix(in srgb, var(--status-color, var(--accent)) 10%, white); color: color-mix(in srgb, var(--status-color, var(--accent)) 80%, #26323d); }
.list-status-mobile { display: none; position: relative; }
.list-status-trigger svg { width: 14px; height: 14px; transform: rotate(90deg); }
.list-status-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 240px; display: none; padding: 5px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: 0 13px 30px rgba(37,51,61,.16); }
.list-status-menu.is-open { display: grid; }
.list-status-menu button { width: 100%; justify-content: start; }
.list-status-menu button > i { background: var(--status-color); }
.list-status-menu button > span { flex: 1; text-align: left; }
.list-status-menu button > svg { width: 15px; height: 15px; color: var(--accent); }
.list-panel { min-width: 880px; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.list-heading, .task-row { display: grid; grid-template-columns: minmax(280px, 1.7fr) minmax(180px, 1fr) 160px 115px 145px; align-items: center; gap: 16px; }
.list-heading { min-height: 43px; padding: 0 16px; background: #f7f9fa; border-bottom: 1px solid var(--line); color: #8a96a2; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.task-row { width: 100%; min-height: 65px; border: 0; border-bottom: 1px solid #edf1f3; background: #fff; text-align: left; padding: 8px 16px; cursor: pointer; position: relative; }
.task-row:last-child { border-bottom: 0; }
.task-row:hover { background: #f8fbfb; }
.task-row-main { min-width: 0; }
.task-row-main strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.task-row-main small, .row-client small { display: block; margin-top: 4px; color: #96a1ab; font-size: 10.5px; }
.row-client { min-width: 0; }
.row-client > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.row-assignees .avatar { width: 27px; height: 27px; margin-left: -5px; font-size: 8px; }
.row-assignees .avatar:first-child { margin-left: 0; }
.row-date { color: #6c7a89; font-size: 11.5px; white-space: nowrap; }
.row-date.is-late { color: #b55555; font-weight: 750; }
.status-pill { width: max-content; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 9px; color: color-mix(in srgb, var(--status-color) 80%, #26323d); background: color-mix(in srgb, var(--status-color) 10%, white); font-size: 10.5px; font-weight: 750; }
.status-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--status-color); }
.list-empty { min-height: 180px; display: grid; place-items: center; color: #8d98a2; font-size: 12px; }

.focus-view { padding: 16px 28px 28px; overflow-y: auto; }
.focus-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; }
.focus-primary, .day-card { border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.focus-intro { min-height: 142px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 27px; background: linear-gradient(120deg, #fff 0 65%, #eaf4f4 100%); border-radius: 14px 14px 0 0; border-bottom: 1px solid var(--line); }
.focus-intro h2 { margin: 0; font-size: 25px; letter-spacing: -.03em; }
.focus-intro p:not(.eyebrow) { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.focus-score { display: flex; align-items: center; gap: 9px; color: var(--accent); }
.focus-score strong { font-size: 42px; line-height: 1; letter-spacing: -.06em; }
.focus-score span { color: #6c7a86; font-size: 10px; line-height: 1.25; text-transform: uppercase; letter-spacing: .05em; font-weight: 750; }
.focus-section { padding: 20px 24px 10px; }
.focus-section + .focus-section { border-top: 1px solid #edf1f3; }
.focus-section h3, .day-card h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #82909d; }
.focus-task { width: 100%; min-height: 68px; display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 11px; border: 0; border-radius: 10px; background: transparent; text-align: left; padding: 8px 9px; cursor: pointer; position: relative; overflow: hidden; }
.focus-task:hover { background: #f5f8f9; }
.focus-check { width: 22px; height: 22px; display: grid; place-items: center; border: 1.5px solid var(--status-color); border-radius: 7px; color: transparent; }
.focus-task:hover .focus-check { color: var(--status-color); background: color-mix(in srgb, var(--status-color) 8%, white); }
.focus-check svg { width: 14px; height: 14px; }
.focus-copy { min-width: 0; }
.focus-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.focus-copy small { display: block; margin-top: 4px; color: #8b96a1; font-size: 10.5px; }
.focus-task time { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; color: #738091; font-size: 11px; }
.focus-priority-dot { width: 7px; height: 7px; border-radius: 50%; background: #c76865; box-shadow: 0 0 0 3px rgba(199,104,101,.1); }
.focus-priority-dot.high { background: #c68a43; box-shadow: 0 0 0 3px rgba(198,138,67,.11); }
.day-rail { display: grid; align-content: start; gap: 13px; }
.day-card { padding: 19px; }
.day-card > strong { display: block; font-size: 27px; letter-spacing: -.035em; }
.day-card > span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.time-bar { height: 5px; margin-top: 15px; border-radius: 5px; background: #e9eef1; overflow: hidden; }
.time-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.day-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.day-card li { display: flex; align-items: center; gap: 10px; }
.day-card li div { display: grid; gap: 2px; }
.day-card li strong { font-size: 12px; }
.day-card li small { color: #8d98a3; font-size: 10px; }

.detail-drawer { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: min(510px, calc(100vw - 52px)); background: #fff; box-shadow: var(--shadow); transform: translateX(105%); transition: transform .24s cubic-bezier(.2,.72,.24,1); display: flex; flex-direction: column; }
.detail-drawer.is-open { transform: translateX(0); }
.drawer-backdrop { position: fixed; z-index: 45; inset: 0; background: rgba(22,31,39,.2); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.drawer-head { min-height: 59px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px 0 22px; border-bottom: 1px solid var(--line); }
.drawer-status { display: flex; align-items: center; gap: 7px; color: #617080; font-size: 11px; font-weight: 750; }
.drawer-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--status-color, var(--work)); }
.drawer-scroll { flex: 1; overflow-y: auto; padding: 22px 25px 35px; }
.drawer-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.task-code { margin: 0 0 6px; color: #8b97a3; font-size: 10px; font-weight: 750; letter-spacing: .06em; }
.drawer-title-row h2 { max-width: 390px; margin: 0; font-size: 23px; line-height: 1.25; letter-spacing: -.025em; }
.drawer-actions { display: flex; gap: 8px; margin: 20px 0; }
.drawer-actions { flex-wrap: wrap; }
.drawer-actions button { min-height: 39px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 12px; background: #fff; cursor: pointer; font-size: 12px; font-weight: 750; }
.drawer-actions button svg { width: 16px; height: 16px; }
.drawer-actions .primary-action { border-color: var(--accent); background: var(--accent); color: #fff; }
.drawer-actions .sla-action { border-color: #7185c8; background: #edf0fb; color: #4e63aa; }
.drawer-actions .request-deletion-action { border-color: #e8cdca; background: #fff8f7; color: #a45550; }
.drawer-actions .request-deletion-action:hover { border-color: #dca6a1; background: #fff1ef; }
.drawer-actions .request-deletion-action:disabled { cursor: wait; opacity: .62; }
.context-line { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 11px; background: #f8fafb; overflow: hidden; }
.context-line > div { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; }
.context-line > div + div { border-left: 1px solid var(--line); }
.context-line > div > svg { width: 17px; height: 17px; flex: 0 0 auto; color: #7e8a96; }
.context-line > div > span { min-width: 0; flex: 1 1 auto; display: grid; gap: 2px; overflow: hidden; }
.context-line > div > span > small { color: #96a0aa; font-size: 9px; }
.context-line > div > span > strong { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.task-client-links { min-width: 0; max-width: 100%; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; overflow: hidden; }
.task-client-link { min-width: 0; max-width: 100%; flex: 1 1 0; display: inline-flex; align-items: center; gap: 3px; border: 0; padding: 0; background: transparent; color: #257a80; overflow: hidden; white-space: nowrap; font: inherit; font-weight: 750; text-align: left; cursor: pointer; }
.task-client-link > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-client-link:hover { color: #145e63; text-decoration: underline; }
.task-client-link:focus-visible { outline: 2px solid rgba(37,122,128,.35); outline-offset: 3px; border-radius: 3px; }
.task-client-link svg { width: 12px; height: 12px; flex: 0 0 auto; color: currentColor; }
.drawer-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid #e9eef1; }
.drawer-section h3 { margin: 0 0 10px; font-size: 12px; }
.drawer-section > p { margin: 0; color: #536170; font-size: 13px; line-height: 1.58; }
.drawer-meta dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 15px 20px; }
.drawer-meta dl div { min-width: 0; }
.drawer-meta dt { color: #96a0aa; font-size: 9.5px; }
.drawer-meta dd { min-height: 25px; margin: 5px 0 0; display: flex; align-items: center; color: #34414e; font-size: 11.5px; font-weight: 650; }
.meta-people { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.meta-person { min-width: 0; display: inline-flex; align-items: center; gap: 7px; line-height: 1.25; }
.meta-person .avatar { width: 25px; height: 25px; font-size: 8px; }
.meta-person > span:last-child { overflow-wrap: anywhere; }
.empty-result { min-height: 90px; display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 10px; background: #f7f9fa; }
.empty-result > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: #e7edef; color: #81909b; }
.empty-result svg { width: 16px; height: 16px; }
.empty-result p { margin: 0; color: #7c8894; font-size: 11px; }
.empty-result button { margin-left: auto; border: 0; background: transparent; color: var(--accent); cursor: pointer; font-size: 11px; font-weight: 750; }
.result-title { justify-content: space-between; }
.result-title button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--accent); cursor: pointer; font-size: 10.5px; font-weight: 750; }
.result-title button svg { width: 13px; height: 13px; }
.result-copy { white-space: pre-wrap; }
.result-factual-range { display: flex; align-items: center; gap: 9px; margin: 13px 0 0; border-radius: 9px; padding: 10px 11px; background: #f2f7f7; color: #536774; }
.result-factual-range > span:first-child { width: 29px; height: 29px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; background: #dceeee; color: var(--accent); }
.result-factual-range svg { width: 15px; height: 15px; }
.result-factual-range > span:last-child { min-width: 0; display: grid; gap: 2px; }
.result-factual-range small { color: #87949e; font-size: 8.5px; }
.result-factual-range strong { overflow-wrap: anywhere; font-size: 10.5px; }
.internal-work-mark { margin-top: 11px !important; color: #81709e !important; font-size: 10.5px !important; }
.work-summary { margin-top: 15px; border-top: 1px solid #edf1f3; }
.work-summary-head, .work-summary-row { min-height: 43px; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 12px; border-bottom: 1px solid #edf1f3; }
.work-summary-head { color: #86929d; font-size: 10px; }
.work-summary-head strong, .work-summary-head em { color: #34414e; font-style: normal; font-size: 11px; }
.work-summary-row { grid-template-columns: 26px minmax(0,1fr) auto auto; }
.work-summary-row .avatar { width: 24px; height: 24px; font-size: 7.5px; }
.work-summary-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.work-summary-row strong { font-size: 10.5px; }
.work-summary-row em { color: #6d7985; font-style: normal; font-size: 10px; }
.checklist-title { justify-content: space-between; }
.checklist-title span { width: auto; min-width: 48px; padding: 0 7px; }
.checklist { display: grid; gap: 4px; }
.checklist-empty, .attachment-empty { margin: 10px 0 0; color: #98a2aa; font-size: 10.5px; }
.checklist-item { min-height: 38px; display: grid; grid-template-columns: 25px minmax(0,1fr) 29px; align-items: center; gap: 7px; border-radius: 9px; padding: 2px 3px; }
.checklist-item:hover { background: #f7f9fa; }
.checklist-toggle { width: 22px; height: 22px; display: grid; place-items: center; border: 1.5px solid #b9c4cb; border-radius: 7px; background: #fff; color: transparent; cursor: pointer; }
.checklist-toggle svg { width: 14px; height: 14px; stroke-width: 2.4; }
.checklist-item.is-done .checklist-toggle { border-color: var(--accent); background: var(--accent); color: #fff; }
.checklist-item input { min-width: 0; height: 31px; border: 0; border-radius: 6px; padding: 0 5px; background: transparent; color: #34414e; outline: 0; font: inherit; font-size: 11.5px; }
.checklist-item input:focus { background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); }
.checklist-item.is-done input { color: #8c979f; text-decoration: line-through; }
.checklist-remove { width: 29px; height: 29px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #a1abb3; cursor: pointer; opacity: 0; }
.checklist-item:hover .checklist-remove, .checklist-remove:focus-visible { opacity: 1; }
.checklist-remove:hover { background: #faeeee; color: #bb5959; }
.checklist-remove svg { width: 14px; height: 14px; }
.checklist-add { min-height: 40px; display: flex; align-items: center; gap: 6px; margin-top: 7px; border: 1px dashed #d4dde2; border-radius: 9px; padding: 4px 4px 4px 10px; }
.checklist-add:focus-within { border-color: #7fbec2; background: #fbfdfd; }
.checklist-add input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 11px; }
.checklist-add button { width: 29px; height: 29px; display: grid; place-items: center; border: 0; border-radius: 7px; background: #e7f3f3; color: var(--accent); cursor: pointer; }
.checklist-add button svg { width: 15px; height: 15px; }
.checklist [disabled], .checklist-add [disabled] { cursor: wait; opacity: .55; }
.attachments-title { justify-content: space-between; }
.attachments-title > button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--accent); cursor: pointer; font-size: 10.5px; font-weight: 750; }
.attachments-title > button svg { width: 14px; height: 14px; }
.attachment-list { display: grid; gap: 7px; margin-top: 11px; }
.attachment-item { min-height: 48px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px; border: 1px solid #e4eaed; border-radius: 10px; padding: 6px 7px; background: #fbfcfc; }
.attachment-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #e8f1f2; color: #4f8f94; }
.attachment-icon svg { width: 16px; height: 16px; }
.attachment-image-preview { width: 34px; height: 34px; overflow: hidden; border: 0; border-radius: 8px; padding: 0; background: #e8f1f2; cursor: zoom-in; }
.attachment-image-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.attachment-copy { min-width: 0; display: grid; gap: 2px; }
.attachment-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #34414e; font-size: 10.5px; }
.attachment-copy small { color: #98a2aa; font-size: 9px; }
.attachment-actions { display: flex; align-items: center; gap: 2px; }
.attachment-actions a, .attachment-actions button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #7d8993; cursor: pointer; }
.attachment-actions a:hover, .attachment-actions button:hover { background: #edf2f4; color: var(--accent); }
.attachment-actions button:hover { background: #faeeee; color: #b95757; }
.attachment-actions svg { width: 14px; height: 14px; }
.attachment-loading { min-height: 48px; border-radius: 10px; background: linear-gradient(90deg,#f3f6f7 25%,#fafbfc 50%,#f3f6f7 75%); background-size: 200% 100%; animation: attachment-loading 1.2s linear infinite; }
@keyframes attachment-loading { to { background-position: -200% 0; } }
.system-fields { margin-top: 20px; border: 1px solid #e7ecef; border-radius: 10px; background: #fafbfb; }
.system-fields summary { min-height: 39px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; color: #89949d; cursor: pointer; list-style: none; font-size: 10.5px; font-weight: 650; }
.system-fields summary::-webkit-details-marker { display: none; }
.system-fields summary::after { content: '+'; color: #9ba5ad; font-size: 16px; font-weight: 400; }
.system-fields[open] summary::after { content: '−'; }
.system-fields dl { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 18px; margin: 0; border-top: 1px solid #e7ecef; padding: 12px; }
.system-fields dt { color: #a0a9b0; font-size: 9px; }
.system-fields dd { margin: 4px 0 0; color: #5d6974; font-size: 10.5px; font-weight: 650; }
.comments-empty { margin: 12px 0 0; color: #98a2aa; font-size: 10.5px; }
.section-title { display: flex; align-items: center; gap: 7px; }
.section-title h3 { margin: 0; }
.section-title span { min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 20px; background: #edf1f3; color: #82909b; font-size: 9px; }
.message { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: start; gap: 10px; margin-top: 13px; }
.message p { min-width: 0; margin: 0; display: grid; gap: 3px; }
.message strong { font-size: 11px; }
.message small { color: #667381; font-size: 11px; line-height: 1.4; white-space: pre-wrap; }
.message time { color: #a0a8b0; font-size: 9px; }
.message-files { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 5px; margin-top: -3px; }
.message-files a, .message-files button { max-width: 100%; display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 7px; padding: 5px 8px; background: #f0f4f5; color: #58717a; cursor: pointer; font: inherit; font-size: 9.5px; font-weight: 650; text-decoration: none; }
.message-files a span, .message-files button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-files .message-image-preview { width: min(230px,100%); display: grid; grid-template-columns: 48px minmax(0,1fr); padding: 4px; text-align: left; cursor: zoom-in; }
.message-image-preview img { width: 48px; height: 42px; display: block; border-radius: 5px; object-fit: cover; }
.message-files svg { width: 12px; height: 12px; flex: 0 0 auto; }
.comment-attachment-draft { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.comment-file-draft { max-width: 100%; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #dfe7ea; border-radius: 8px; padding: 5px 6px 5px 8px; background: #f7f9fa; color: #63717c; font-size: 9.5px; }
.comment-file-draft span { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comment-file-draft button { width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 5px; background: transparent; color: #94a0a9; cursor: pointer; }
.comment-file-draft svg { width: 11px; height: 11px; }
.comment-box { display: grid; grid-template-columns: 30px minmax(0,1fr) 31px; align-items: end; gap: 5px; margin-top: 14px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; }
.comment-box:focus-within { border-color: #84bfc2; box-shadow: 0 0 0 2px rgba(26,134,140,.08); }
.comment-box textarea { min-width: 0; max-height: 110px; resize: none; border: 0; outline: 0; padding: 7px 3px 6px; font: inherit; font-size: 11px; line-height: 1.35; }
.comment-box button { width: 29px; height: 29px; display: grid; place-items: center; border: 0; border-radius: 8px; cursor: pointer; }
.comment-box .comment-attach { background: transparent; color: #81909a; }
.comment-box .comment-attach:hover { background: #edf2f4; color: var(--accent); }
.comment-box .comment-send { background: var(--accent); color: #fff; }
.comment-box button:disabled { cursor: wait; opacity: .55; }
.comment-box svg { width: 15px; height: 15px; }

.undo-toast { position: fixed; z-index: 80; left: 50%; bottom: 22px; min-width: 420px; min-height: 53px; display: grid; grid-template-columns: 30px 1fr auto 34px; align-items: center; gap: 9px; border: 1px solid #263846; border-radius: 12px; padding: 6px 7px 6px 11px; background: #1d2d38; color: #fff; box-shadow: 0 14px 38px rgba(14,25,34,.28); transform: translate(-50%, calc(100% + 40px)); opacity: 0; pointer-events: none; transition: transform .22s cubic-bezier(.2,.75,.25,1), opacity .2s ease; }
.undo-toast.is-visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.undo-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; background: rgba(94,192,166,.16); color: #75cfb5; }
.undo-icon svg { width: 15px; height: 15px; }
.undo-toast p { margin: 0; font-size: 11.5px; font-weight: 650; }
.undo-toast > button:not(.icon-button) { height: 34px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 8px; padding: 0 10px; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; font-size: 10.5px; font-weight: 750; }
.undo-toast button svg { width: 14px; height: 14px; }
.undo-toast .icon-button { width: 34px; height: 34px; color: #aebbc3; }
.undo-toast .icon-button:hover { background: rgba(255,255,255,.08); color: #fff; }
.undo-toast #undo-action.is-hidden { display: none; }

.move-dialog { width: min(760px, calc(100vw - 30px)); max-height: calc(100vh - 36px); border: 0; border-radius: 17px; padding: 0; color: var(--ink); box-shadow: 0 25px 80px rgba(19,31,42,.27); }
.move-dialog::backdrop { background: rgba(22,31,39,.38); backdrop-filter: blur(3px); }
.move-dialog form { padding: 22px; }
.move-dialog .dialog-head { margin-bottom: 5px; }
.move-dialog-copy { margin: 0 0 18px; color: #7a8793; font-size: 11px; }
.postpone-dialog { width: min(520px, calc(100vw - 30px)); border: 0; border-radius: 17px; padding: 0; color: var(--ink); box-shadow: 0 25px 80px rgba(19,31,42,.27); }
.postpone-dialog::backdrop { background: rgba(22,31,39,.42); backdrop-filter: blur(3px); }
.postpone-dialog form { padding: 22px; }
.postpone-dialog-copy { margin: 2px 0 17px; overflow: hidden; color: #687783; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.postpone-dialog label { display: block; color: #536170; font-size: 11px; font-weight: 750; }
.postpone-dialog label span { color: #b85c58; }
.postpone-dialog textarea { width: 100%; min-height: 122px; margin-top: 7px; resize: vertical; border: 1px solid #cad6dc; border-radius: 11px; padding: 11px 12px; color: var(--ink); outline: 0; font: inherit; font-size: 12px; line-height: 1.45; }
.postpone-dialog textarea:focus { border-color: #72adb0; box-shadow: 0 0 0 3px rgba(20,123,130,.08); }
.postpone-dialog .form-error { margin: 9px 0 0; }
.postpone-dialog .dialog-foot { margin-top: 17px; }
.move-status-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.move-status-groups > section { border: 1px solid var(--line); border-radius: 12px; background: #f7f9fa; padding: 10px; }
.move-group-head { min-height: 44px; display: flex; align-items: center; gap: 9px; padding: 2px 3px 10px; }
.move-group-head > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; background: #e6eff1; color: var(--accent); }
.move-group-head svg { width: 15px; height: 15px; }
.move-group-head div { display: grid; gap: 2px; }
.move-group-head strong { font-size: 12px; }
.move-group-head small { color: #8a96a0; font-size: 9px; }
.move-status-list { display: grid; gap: 6px; }
.move-status-list button { min-height: 53px; display: grid; grid-template-columns: 8px minmax(0,1fr) 18px; align-items: center; gap: 9px; border: 1px solid #dfe6e9; border-radius: 9px; padding: 7px 9px; background: #fff; color: #43515f; text-align: left; cursor: pointer; }
.move-status-list button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--status-color) 50%, #dfe6e9); background: color-mix(in srgb, var(--status-color) 5%, white); }
.move-status-list button:disabled { background: #edf1f3; color: #87939d; cursor: default; }
.move-status-list button > i { width: 8px; height: 8px; border-radius: 50%; background: var(--status-color); }
.move-status-list button > span { display: grid; gap: 3px; }
.move-status-list button strong, .move-status-list button > span { font-size: 11px; font-weight: 750; }
.move-status-list button small { color: #98a2aa; font-size: 8.5px; font-weight: 500; }
.move-status-list button > svg { width: 14px; height: 14px; color: #8b97a1; }

.create-dialog { width: min(760px, calc(100vw - 30px)); max-height: calc(100vh - 40px); border: 0; border-radius: 16px; padding: 0; color: var(--ink); box-shadow: 0 25px 80px rgba(19,31,42,.25); overflow: hidden; }
.create-dialog::backdrop { background: rgba(22,31,39,.35); backdrop-filter: blur(3px); }
.create-dialog form { max-height: calc(100vh - 40px); padding: 23px; overflow-y: auto; }
.dialog-head { display: flex; align-items: start; justify-content: space-between; margin-bottom: 20px; }
.dialog-head h2 { margin: 0; font-size: 22px; letter-spacing: -.025em; }
.create-dialog label, .result-dialog label { display: grid; gap: 7px; margin-top: 15px; color: #5e6d7c; font-size: 11px; font-weight: 750; }
.create-dialog label > span, .result-dialog label > span, .assignee-field legend span { color: var(--danger); }
.create-dialog input, .create-dialog textarea, .create-dialog select, .result-dialog textarea, .result-dialog input { width: 100%; border: 1px solid var(--line-strong); border-radius: 9px; padding: 10px 11px; outline: 0; resize: vertical; color: var(--ink); background: #fff; font-size: 13px; font-weight: 450; }
.create-dialog input:focus, .create-dialog textarea:focus, .create-dialog select:focus, .result-dialog textarea:focus, .result-dialog input:focus { border-color: #70aeb2; box-shadow: 0 0 0 3px rgba(20,123,130,.1); }
.form-field { min-width: 0; display: grid; align-content: start; gap: 7px; margin-top: 15px; position: relative; color: #5e6d7c; font-size: 11px; font-weight: 750; }
.form-field > label { display: block; margin: 0; color: inherit; font: inherit; }
.form-field > label span { color: var(--danger); }
.combo-input-wrap { min-height: 40px; display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: center; gap: 7px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 10px; background: #fff; }
.combo-input-wrap:focus-within, .multi-combo-control:focus-within { border-color: #70aeb2; box-shadow: 0 0 0 3px rgba(20,123,130,.1); }
.combo-input-wrap > svg { width: 16px; height: 16px; color: #98a4ae; }
.create-dialog .combo-input-wrap input, .create-dialog .multi-combo-control input { min-width: 0; min-height: 38px; border: 0; border-radius: 0; padding: 7px 0; box-shadow: none; background: transparent; }
.create-dialog .combo-input-wrap input:focus, .create-dialog .multi-combo-control input:focus { border: 0; box-shadow: none; }
.multi-combo-control { min-height: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 4px 8px; background: #fff; }
.multi-combo-control.is-disabled { background: #f5f7f8; }
.multi-combo-control input { flex: 1 1 125px; }
.contact-chips { display: contents; }
.contact-chip { max-width: 100%; min-height: 28px; display: inline-flex; align-items: center; gap: 4px; border-radius: 7px; padding: 0 4px 0 8px; background: #eaf4f4; color: var(--accent-dark); font-size: 10.5px; font-weight: 750; }
.contact-chip button { width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #66888b; cursor: pointer; }
.contact-chip button:hover { background: rgba(20,123,130,.1); }
.contact-chip svg { width: 12px; height: 12px; }
.field-help { margin-top: -2px; color: #98a3ad; font-size: 9.5px; font-weight: 500; }
.combo-suggestions { position: absolute; z-index: 12; top: calc(100% + 4px); left: 0; right: 0; max-height: 245px; display: none; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 5px; background: #fff; box-shadow: 0 14px 32px rgba(34,47,57,.17); }
.combo-suggestions.is-open { display: grid; }
.combo-suggestions > button { min-height: 46px; display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 8px; border: 0; border-radius: 7px; padding: 6px 8px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.combo-suggestions > button:hover, .combo-suggestions > button.is-active { background: #edf5f5; }
.combo-suggestions > button > span:last-child { min-width: 0; display: grid; gap: 2px; }
.combo-suggestions strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.combo-suggestions small { color: #929ea8; font-size: 9px; font-weight: 500; }
.suggestion-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; background: #eff4f5; color: #73848f; }
.suggestion-icon svg { width: 15px; height: 15px; }
.combo-empty { margin: 0; padding: 12px; color: #929da7; text-align: center; font-size: 10.5px; font-weight: 500; }
.deadline-field { z-index: 6; }
.deadline-trigger { width: 100%; min-height: 40px; display: grid; grid-template-columns: 17px minmax(0,1fr) 14px; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 10px; background: #fff; color: #85919c; text-align: left; cursor: pointer; font-size: 12px; }
.deadline-trigger.has-value { color: var(--ink); }
.deadline-trigger:focus { border-color: #70aeb2; box-shadow: 0 0 0 3px rgba(20,123,130,.1); outline: 0; }
.deadline-trigger > svg { width: 16px; height: 16px; color: #8a99a5; }
.deadline-trigger > svg:last-child { width: 13px; height: 13px; transform: rotate(90deg); }
.custom-select-field { z-index: 7; }
.custom-select-field.is-open { z-index: 16; }
.custom-select-trigger { width: 100%; min-height: 40px; display: grid; grid-template-columns: 8px minmax(0,1fr) 14px; align-items: center; gap: 9px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 10px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; font-size: 12px; }
.custom-select-trigger:focus { border-color: #70aeb2; box-shadow: 0 0 0 3px rgba(20,123,130,.1); outline: 0; }
.custom-select-trigger > i, .custom-select-menu button > i { width: 8px; height: 8px; border-radius: 50%; background: var(--option-color); }
.custom-select-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select-trigger > svg { width: 13px; height: 13px; transform: rotate(90deg); color: #87949f; transition: transform .16s ease; }
.custom-select-trigger[aria-expanded="true"] > svg { transform: rotate(-90deg); }
.custom-select-menu { position: absolute; z-index: 18; right: 0; bottom: calc(100% + 5px); left: 0; max-height: 330px; display: none; overflow-y: auto; border: 1px solid var(--line); border-radius: 11px; padding: 5px; background: #fff; box-shadow: 0 14px 32px rgba(34,47,57,.18); }
.custom-select-menu.is-open { display: grid; }
.custom-select-menu button { min-height: 40px; display: grid; grid-template-columns: 8px minmax(0,1fr) 16px; align-items: center; gap: 9px; border: 0; border-radius: 8px; padding: 6px 9px; background: transparent; color: #42515e; text-align: left; cursor: pointer; font-size: 11.5px; font-weight: 700; }
.custom-select-menu button:hover, .custom-select-menu button:focus { background: color-mix(in srgb, var(--option-color) 9%, white); outline: 0; }
.custom-select-menu button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select-menu button > svg { width: 15px; height: 15px; color: var(--accent); }
.deadline-popover { position: fixed; z-index: 90; top: 50%; bottom: auto; left: 50%; width: 340px; display: none; transform: translate(-50%, -50%); border: 1px solid var(--line); border-radius: 13px; padding: 12px; background: #fff; color: var(--ink); box-shadow: 0 16px 38px rgba(31,45,55,.22); }
.deadline-popover.is-open { display: block; }
.deadline-head { min-height: 34px; display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 5px; }
.deadline-head strong { text-align: center; text-transform: capitalize; font-size: 12px; }
.deadline-head button { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; padding: 0; background: transparent; color: #687985; cursor: pointer; }
.deadline-head button:hover { background: #edf3f4; }
.deadline-head svg { width: 15px; height: 15px; }
.deadline-weekdays, .deadline-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.deadline-weekdays { margin: 7px 0 3px; color: #a0a9b1; text-align: center; font-size: 8.5px; }
.deadline-days button { aspect-ratio: 1; border: 0; border-radius: 8px; padding: 0; background: transparent; color: #485866; cursor: pointer; font-size: 10.5px; }
.deadline-days button:hover { background: #edf4f4; }
.deadline-days button.is-outside { color: #b9c0c6; }
.deadline-days button.is-today { box-shadow: inset 0 0 0 1px #8dbec1; color: var(--accent-dark); font-weight: 800; }
.deadline-days button.is-selected { background: var(--accent); box-shadow: none; color: #fff; font-weight: 800; }
.deadline-time { margin-top: 10px; padding-top: 10px; border-top: 1px solid #edf1f3; }
.create-dialog .deadline-time > label, .result-dialog .deadline-time > label { margin: 0 0 6px; font-size: 9.5px; }
.create-dialog .deadline-time > input, .result-dialog .deadline-time > input { min-height: 38px; }
.create-dialog .deadline-time > input.is-invalid, .result-dialog .deadline-time > input.is-invalid { border-color: #d47a72; box-shadow: 0 0 0 3px rgba(190,82,72,.1); }
.deadline-time > div { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; margin-top: 5px; }
.deadline-time button, .deadline-actions button { min-height: 31px; border: 1px solid var(--line); border-radius: 7px; padding: 0 7px; background: #f7f9fa; color: #61707d; cursor: pointer; font-size: 9.5px; font-weight: 700; }
.deadline-time button:hover, .deadline-actions button:hover { background: #edf4f4; }
.deadline-actions { display: grid; grid-template-columns: auto auto auto 1fr; gap: 5px; margin-top: 10px; }
.deadline-actions .deadline-done { justify-self: end; border-color: var(--accent); background: var(--accent); color: #fff; }
.dialog-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 13px; }
.dialog-grid.three { grid-template-columns: 1.2fr 1fr 1fr; }
.form-field-heading { min-height: 25px; display: flex; align-items: end; justify-content: space-between; gap: 8px; margin-top: 15px; }
.create-dialog .form-field-heading label { margin: 0; }
.inline-create-button { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid transparent; border-radius: 7px; padding: 0; background: #eef5f5; color: var(--accent); cursor: pointer; }
.inline-create-button:hover { border-color: #add0d2; background: #e3f1f1; }
.inline-create-button:focus-visible { outline: 2px solid rgba(37,122,128,.3); outline-offset: 2px; }
.inline-create-button:disabled { opacity: .38; cursor: default; }
.inline-create-button[hidden] { display: none; }
.inline-create-button svg { width: 13px; height: 13px; }
.type-toggle { width: max-content; display: flex; gap: 3px; padding: 3px; border-radius: 9px; background: #edf1f3; }
.type-toggle button { height: 31px; border: 0; border-radius: 7px; padding: 0 11px; background: transparent; color: #71808d; cursor: pointer; font-size: 11px; font-weight: 700; }
.type-toggle button.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 5px rgba(40,54,65,.1); }
.client-fields.is-hidden { display: none; }
.form-error { display: none; margin: -5px 0 12px; border: 1px solid #efceca; border-radius: 9px; padding: 10px 12px; background: #fff4f2; color: #a34f49; font-size: 10.5px; line-height: 1.4; }
.form-error:not(:empty) { display: block; }
.assignee-field { margin: 17px 0 0; border: 0; padding: 0; }
.assignee-field legend { color: #5e6d7c; font-size: 11px; font-weight: 750; }
.assignee-options { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; margin-top: 8px; }
.assignee-options label { margin: 0; }
.assignee-options input { position: absolute; opacity: 0; pointer-events: none; }
.assignee-options label > span { min-height: 46px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; padding: 7px; background: #fff; color: #667481; cursor: pointer; }
.assignee-options label > span strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.assignee-options label > span .avatar { width: 27px; height: 27px; font-size: 8px; }
.assignee-options input:checked + span { border-color: #87b8bb; background: #eaf5f4; color: var(--accent-dark); box-shadow: inset 0 0 0 1px #87b8bb; }
.assignee-options input:focus-visible + span { outline: 3px solid rgba(20,123,130,.14); }
.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.dialog-foot button { height: 39px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 14px; background: #fff; cursor: pointer; font-size: 12px; font-weight: 750; }
.dialog-foot .create-confirm { border-color: var(--accent); background: var(--accent); color: #fff; }

.result-dialog { width: min(720px, calc(100vw - 30px)); max-height: calc(100vh - 40px); border: 0; border-radius: 16px; padding: 0; color: var(--ink); box-shadow: 0 25px 80px rgba(19,31,42,.27); overflow: hidden; }
.result-dialog::backdrop { background: rgba(22,31,39,.38); backdrop-filter: blur(3px); }
.result-dialog form { max-height: calc(100vh - 40px); padding: 23px; overflow-y: auto; }
.result-date-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 13px; }
.result-date-field { min-width: 0; }
.result-date-popover { z-index: 100; }
.work-editor { margin-top: 18px; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.work-editor-head { padding: 13px 14px; background: #f7f9fa; border-bottom: 1px solid var(--line); }
.work-editor-head h3 { margin: 0; font-size: 11.5px; }
.work-editor-head p { margin: 4px 0 0; color: #88949e; font-size: 9.5px; }
.work-editor-row { min-height: 62px; display: grid; grid-template-columns: 30px minmax(120px,1fr) 78px 78px 82px; align-items: center; gap: 9px; padding: 8px 12px; border-bottom: 1px solid #edf1f3; }
.work-editor-row .avatar { width: 28px; height: 28px; font-size: 8px; }
.work-editor-row > span { min-width: 0; display: grid; gap: 2px; }
.work-editor-row > span strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.work-editor-row > span small { color: #97a1aa; font-size: 8.5px; }
.work-editor-row label { margin: 0; gap: 4px; color: #929ca5; font-size: 8.5px; }
.work-editor-row input { height: 35px; padding: 6px 8px; text-align: right; }
.work-row-amount { text-align: right; font-size: 10.5px; }
.work-total { min-height: 47px; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 20px; padding: 0 13px; background: #fafbfc; }
.work-total span { color: #687582; font-size: 10px; font-weight: 750; }
.work-total strong { min-width: 82px; text-align: right; font-size: 11px; }
.internal-result-note { display: none; margin: 18px 0 0; border-radius: 9px; padding: 11px 12px; background: #f2eef8; color: #76648f; font-size: 10.5px; }
.internal-result-note.is-visible { display: block; }

/* Chat: messenger-first layout with CRM context available on demand. */
.workspace.is-chat > .topbar,
.workspace.is-chat > .page-head,
.workspace.is-chat > .control-bar,
.workspace.is-chat > .applied-filters,
.workspace.is-chat > .filter-popover,
.workspace.is-chat > .status-jump { display: none; }
.chat-view { padding: 0; overflow: hidden; }
.chat-view.is-active { display: block; }
.chat-shell { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 344px minmax(0,1fr); overflow: clip; overscroll-behavior: none; background: #eaf0f2; }
.chat-roster { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: #fff; }
.chat-list-head { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 18px 10px; }
.chat-list-head h1 { margin: 0; font-size: 25px; line-height: 1; letter-spacing: -.035em; }
.chat-list-head h1 span { min-width: 23px; height: 23px; display: inline-grid; place-items: center; vertical-align: 3px; margin-left: 5px; border-radius: 999px; padding: 0 6px; background: var(--accent); color: #fff; font-size: 10px; letter-spacing: 0; }
.chat-new-button { width: 39px; height: 39px; display: grid; place-items: center; border: 0; border-radius: 11px; background: var(--accent); color: #fff; cursor: pointer; box-shadow: 0 7px 16px rgba(20,123,130,.18); }
.chat-new-button:hover { background: var(--accent-dark); }
.chat-new-button svg { width: 18px; height: 18px; }
.chat-list-search { min-height: 42px; display: flex; align-items: center; gap: 9px; margin: 5px 15px 10px; border: 1px solid #dfe6e9; border-radius: 11px; padding: 0 11px; background: #f4f7f8; color: #8996a1; }
.chat-list-search:focus-within { border-color: #78b2b5; background: #fff; box-shadow: 0 0 0 3px rgba(20,123,130,.09); }
.chat-list-search svg { width: 17px; height: 17px; }
.chat-list-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12.5px; }
.chat-list-search input::placeholder { color: #96a1ab; }
.chat-list-filters { display: flex; gap: 4px; padding: 0 15px 10px; border-bottom: 1px solid #edf1f3; }
.chat-list-filters button { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 8px; padding: 0 10px; background: transparent; color: #7b8792; cursor: pointer; font-size: 10.5px; font-weight: 750; }
.chat-list-filters button:hover { background: #f2f5f6; }
.chat-list-filters button.is-active { background: var(--accent-soft); color: var(--accent-dark); }
.chat-list-filters button span { min-width: 17px; height: 17px; display: grid; place-items: center; border-radius: 999px; background: rgba(20,123,130,.13); font-size: 8.5px; }
.chat-dialog-list { flex: 1; min-height: 0; overflow-y: auto; padding: 7px; scrollbar-width: thin; scrollbar-color: #d5dde1 transparent; }
.chat-dialog { width: 100%; min-height: 72px; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 0; border-radius: 11px; padding: 8px 9px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.chat-dialog:hover { background: #f4f7f8; }
.chat-dialog.is-active { background: #e8f3f3; }
.chat-dialog.is-unread:not(.is-active) .chat-dialog-name { font-weight: 830; }
.chat-dialog-copy { min-width: 0; align-self: center; }
.chat-dialog-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chat-dialog-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 720; }
.chat-dialog-time { flex: 0 0 auto; color: #98a3ad; font-size: 9.5px; }
.chat-dialog.is-active .chat-dialog-time { color: #5a8588; }
.chat-dialog-preview { display: block; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #87939e; font-size: 10.5px; }
.chat-dialog-preview b { color: #60717d; font-weight: 720; }
.chat-dialog-side { align-self: end; min-width: 20px; min-height: 20px; display: grid; place-items: center; }
.chat-dialog-side span { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; padding: 0 6px; background: var(--accent); color: #fff; font-size: 9px; font-weight: 800; }
.chat-dialog-side svg { width: 15px; height: 15px; color: #6ba4a7; }
.chat-list-empty { min-height: 180px; display: grid; place-items: center; padding: 24px; color: #8d99a3; text-align: center; font-size: 11px; }
.chat-avatar { position: relative; flex: 0 0 auto; width: 43px; height: 43px; display: inline-grid; place-items: center; border-radius: 50%; background: #dfe8ef; color: #3f6074; font-size: 11px; font-weight: 850; letter-spacing: -.02em; }
.chat-avatar::after { content: ''; position: absolute; z-index: 2; right: -1px; bottom: 1px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #a9b4bc; }
.chat-avatar.is-online::after { background: #55a87a; }
.chat-avatar.avatar-team { border-radius: 13px; background: #dff0ef; color: #27777b; }
.chat-avatar.avatar-team::after { display: none; }
.chat-avatar.avatar-dashi { background: #f2dddc; color: #8b5352; }
.chat-avatar.avatar-vlad { background: #dcece5; color: #47725d; }
.chat-avatar.avatar-nikolay { background: #ece1f1; color: #745680; }
.chat-avatar.avatar-david { background: #eadff0; color: #725680; }
.chat-avatar.avatar-finance { border-radius: 13px; background: #f3ead5; color: #896b2d; }
.chat-avatar.avatar-finance::after { display: none; }

.chat-conversation { min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; background-color: #e9f0f0; background-image: radial-gradient(circle at center, rgba(68,108,111,.055) 1px, transparent 1px); background-size: 23px 23px; }
.chat-conversation-head { min-height: 68px; display: grid; grid-template-columns: 43px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 8px 14px 8px 18px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(18px); z-index: 5; }
.chat-selection-head { min-height: 68px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.98); z-index: 6; }
.chat-selection-head > button, .chat-selection-head > div button { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #657681; cursor: pointer; }
.chat-selection-head > div { display: flex; align-items: center; gap: 2px; }
.chat-selection-head button:hover { background: #edf3f4; color: var(--accent); }
.chat-selection-head button:disabled { opacity: .32; pointer-events: none; }
.chat-selection-head svg { width: 19px; height: 19px; }
.chat-selection-head strong { font-size: 13.5px; }
.chat-conversation.is-selecting .chat-compose-zone { display: none; }
.chat-back { display: none; }
.chat-peer { min-width: 0; display: grid; gap: 3px; border: 0; padding: 0; background: transparent; text-align: left; cursor: pointer; }
.chat-peer strong, .chat-peer small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-peer strong { font-size: 13.5px; }
.chat-peer small { color: #83909b; font-size: 10px; }
.chat-head-actions { display: flex; gap: 3px; }
.chat-head-actions button, .chat-inline-search button, .chat-info-panel header button, .chat-reply-preview button, .chat-attachment-draft button { width: 37px; height: 37px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: #75838e; cursor: pointer; }
.chat-head-actions button:hover, .chat-info-panel header button:hover { background: #eef2f4; color: var(--ink); }
.chat-head-actions svg, .chat-info-panel header button svg { width: 18px; height: 18px; }
.chat-inline-search { min-height: 50px; display: none; grid-template-columns: 19px minmax(0,1fr) 37px; align-items: center; gap: 8px; padding: 5px 14px 5px 19px; border-bottom: 1px solid var(--line); background: #fff; color: #82909b; z-index: 4; }
.chat-inline-search.is-open { display: grid; }
.chat-inline-search > svg { width: 17px; height: 17px; }
.chat-inline-search input { height: 38px; min-width: 0; border: 0; outline: 0; color: var(--ink); font-size: 12px; }
.chat-pinned { min-height: 48px; display: grid; grid-template-columns: 31px minmax(0,1fr) 18px; align-items: center; gap: 9px; border: 0; border-bottom: 1px solid #dfe7e9; padding: 6px 18px; background: rgba(250,252,252,.95); text-align: left; cursor: pointer; z-index: 3; }
.chat-pinned:hover { background: #fff; }
.chat-pinned > span:first-child { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.chat-pinned svg { width: 14px; height: 14px; }
.chat-pinned > span:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.chat-pinned small { color: #8a96a0; font-size: 8.5px; }
.chat-pinned strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.chat-pinned > svg { color: #929da6; }
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px clamp(14px, 2.2vw, 34px) 20px; scroll-padding-bottom: 20px; scrollbar-width: thin; scrollbar-color: rgba(94,118,121,.3) transparent; }
.chat-message-stream { width: 100%; max-width: 1180px; min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; margin: 0 auto; }
.chat-empty { margin: auto; border-radius: 999px; padding: 7px 11px; background: rgba(91,111,114,.72); color: #fff; font-size: 10px; }
.chat-date-separator { align-self: center; margin: 11px 0; border-radius: 999px; padding: 5px 10px; background: rgba(91,111,114,.72); color: #fff; font-size: 9px; font-weight: 750; box-shadow: 0 2px 7px rgba(45,67,70,.12); }
.chat-unread-separator { display: flex; align-items: center; gap: 10px; margin: 15px 0 12px; color: #a95653; font-size: 9px; font-weight: 820; text-transform: uppercase; letter-spacing: .07em; }
.chat-unread-separator::before, .chat-unread-separator::after { content: ''; height: 1px; flex: 1; background: rgba(185,94,93,.32); }
.chat-message-row { position: relative; display: flex; align-items: flex-end; gap: 5px; margin-top: 4px; }
.chat-message-row.is-own { justify-content: flex-end; }
.chat-message-row.is-first { margin-top: 12px; }
.chat-messages.is-selecting .chat-message-row { min-height: 42px; border-radius: 10px; padding-left: 42px; cursor: pointer; }
.chat-messages.is-selecting .chat-message-row.is-selected { background: rgba(44,142,148,.13); }
.chat-select-control { position: absolute; z-index: 2; left: 1px; bottom: 7px; width: 28px; height: 28px; display: none; place-items: center; border: 0; border-radius: 50%; padding: 0; background: transparent; cursor: pointer; }
.chat-messages.is-selecting .chat-select-control { display: grid; }
.chat-select-control > span { width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid #94a5ad; border-radius: 50%; background: rgba(255,255,255,.92); color: #fff; }
.chat-message-row.is-selected .chat-select-control > span { border-color: var(--accent); background: var(--accent); }
.chat-select-control svg { width: 14px; height: 14px; stroke-width: 2.6; }
.chat-message-row .chat-message-avatar { width: 31px; height: 31px; align-self: flex-start; margin-top: 3px; font-size: 8.5px; }
.chat-message-row.is-grouped .chat-message-avatar { visibility: hidden; }
.chat-bubble { max-width: min(78%, 820px); border: 1px solid rgba(210,220,224,.9); border-radius: 7px 15px 15px 15px; padding: 8px 10px 6px; background: #fff; box-shadow: 0 2px 4px rgba(33,53,65,.055); }
.chat-message-row.is-own .chat-bubble { border-color: #c6dfde; border-radius: 15px 7px 15px 15px; background: #dff0ee; }
.chat-message-row.is-grouped .chat-bubble { border-top-left-radius: 15px; }
.chat-message-row.is-own.is-grouped .chat-bubble { border-top-right-radius: 15px; }
.chat-message-author { display: block; margin-bottom: 4px; color: #2e7f83; font-size: 10px; font-weight: 800; }
.chat-forwarded { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; color: #2f7c80; font-size: 9.5px; }
.chat-forwarded > svg { width: 13px; height: 13px; flex: 0 0 auto; }
.chat-forwarded strong { font-weight: 800; }
.chat-bubble > p { display: inline; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #24313c; font-size: 12.5px; line-height: 1.45; }
.chat-bubble-time { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 6px 0 0 11px; color: #809098; font-size: 8.5px; }
.chat-read-status { min-width: 18px; height: 18px; display: inline-flex; align-items: center; gap: 2px; border: 0; border-radius: 6px; padding: 0 2px; background: transparent; color: #829097; cursor: pointer; }
.chat-read-status:hover { background: rgba(255,255,255,.55); color: var(--accent); }
.chat-read-status.is-read { color: #27878c; }
.chat-read-status b { font-size: 8px; font-weight: 820; }
.chat-checks { position: relative; width: 16px; height: 14px; display: inline-block; }
.chat-checks svg { position: absolute; top: 0; width: 14px; height: 14px; }
.chat-checks svg:first-child { left: 0; }
.chat-checks svg + svg { left: 5px; }
.chat-message-action { position: static; flex: 0 0 32px; align-self: flex-end; width: 32px; height: 32px; display: grid; place-items: center; margin-bottom: 1px; border: 0; border-radius: 50%; background: rgba(255,255,255,.88); color: #71818c; opacity: 0; cursor: pointer; box-shadow: 0 4px 14px rgba(33,53,65,.11); transition: opacity .14s ease, transform .14s ease; }
.chat-message-row.is-own .chat-message-action { order: -1; }
.chat-message-row:hover .chat-message-action, .chat-message-action:focus-visible { opacity: 1; }
.chat-message-action:hover { transform: translateY(-1px); color: var(--accent); }
.chat-message-action svg { width: 15px; height: 15px; }
.chat-quote { display: grid; gap: 2px; margin-bottom: 7px; border-left: 3px solid #55a3a7; padding: 3px 0 3px 8px; }
.chat-quote strong { color: #2f7c80; font-size: 9.5px; }
.chat-quote span { max-width: 310px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #71808a; font-size: 9.5px; }
.chat-reference { width: min(390px, 100%); display: grid; grid-template-columns: 34px minmax(0,1fr) 16px; align-items: center; gap: 9px; margin: 7px 0 2px; border: 1px solid #cfe0e1; border-radius: 10px; padding: 8px; background: rgba(255,255,255,.78); text-align: left; cursor: pointer; }
.chat-reference:hover { border-color: #85b8bb; background: #fff; }
.chat-reference > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.chat-reference svg { width: 15px; height: 15px; }
.chat-reference div { min-width: 0; display: grid; gap: 2px; }
.chat-reference strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.chat-reference small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7d8a95; font-size: 8.5px; }
.chat-reference > svg { color: #8b989f; }
.chat-mention { display: inline-flex; align-items: center; border: 0; border-radius: 5px; padding: 0 4px; background: #dbeeed; color: #176f74; font: inherit; font-weight: 720; line-height: inherit; }
button.chat-mention { cursor: pointer; }
button.chat-mention:hover { background: #c9e4e2; text-decoration: underline; }
button.chat-mention:focus-visible { outline: 2px solid rgba(45,137,142,.42); outline-offset: 1px; }
.chat-image-preview { width: min(320px, 100%); height: 158px; display: block; position: relative; margin-bottom: 6px; overflow: hidden; border: 0; border-radius: 10px; padding: 0; background: #f4f7f8; cursor: zoom-in; box-shadow: inset 0 0 0 1px #d9e2e5; }
.chat-image-preview > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.chat-image-preview .mock-window { position: absolute; inset: 13px; border: 1px solid #cfd9de; border-radius: 7px; background: #fff; box-shadow: 0 8px 18px rgba(35,51,62,.1); }
.chat-image-preview .mock-window::before { content: ''; display: block; height: 18px; border-bottom: 1px solid #dce3e7; background: linear-gradient(90deg, #da6f6b 0 6px, transparent 6px 12px, #e1b253 12px 18px, transparent 18px 24px, #67b27d 24px 30px, transparent 30px); background-repeat: no-repeat; background-position: 7px 6px; }
.chat-image-preview .mock-window::after { content: 'Не удалось провести документ'; position: absolute; left: 18px; right: 18px; top: 51px; border-left: 3px solid #c6605c; padding: 7px 9px; background: #fff1ef; color: #8d4d49; font-size: 9px; font-weight: 730; }
.chat-file { min-width: 250px; display: grid; grid-template-columns: 37px minmax(0,1fr) 31px; align-items: center; gap: 9px; margin-bottom: 3px; }
.chat-file-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; background: #e2eeee; color: var(--accent); }
.chat-file-icon svg { width: 17px; height: 17px; }
.chat-file div { min-width: 0; display: grid; gap: 2px; }
.chat-file strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.chat-file small { color: #829099; font-size: 8.5px; }
.chat-file > a { width: 31px; height: 31px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #71818b; cursor: pointer; }
.chat-file > a:hover { background: #e8f1f1; color: var(--accent); }
.chat-file > a svg { width: 15px; height: 15px; }
.chat-jump-bottom { position: absolute; right: 20px; bottom: 94px; width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid #d5dfe2; border-radius: 50%; background: #fff; color: #60717b; opacity: 0; pointer-events: none; cursor: pointer; box-shadow: 0 6px 18px rgba(35,52,64,.15); transform: translateY(7px); transition: .16s ease; z-index: 4; }
.chat-jump-bottom.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.chat-jump-bottom svg { width: 17px; height: 17px; transform: rotate(90deg); }
.chat-jump-bottom span { position: absolute; top: -5px; right: -4px; min-width: 17px; height: 17px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 999px; background: #cc6461; color: #fff; font-size: 8px; font-weight: 800; }

.chat-compose-zone { position: relative; flex: 0 0 auto; border-top: 1px solid #dbe3e6; background: rgba(255,255,255,.97); backdrop-filter: blur(15px); z-index: 5; }
.chat-composer { min-height: 70px; display: grid; grid-template-columns: 38px minmax(0,1fr) 38px 42px; align-items: end; gap: 5px; padding: 10px clamp(14px, 3vw, 28px) 11px; }
.chat-composer > button { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: #71808b; cursor: pointer; }
.chat-composer > button:hover { background: #eef3f4; color: var(--accent); }
.chat-composer > button svg { width: 19px; height: 19px; }
.chat-composer label { min-width: 0; display: grid; }
.chat-composer textarea { width: 100%; min-height: 40px; max-height: 150px; border: 1px solid #d7e0e3; border-radius: 12px; padding: 9px 12px; outline: 0; resize: none; overflow-y: auto; background: #f7f9fa; color: var(--ink); font-size: 13px; line-height: 1.45; }
.chat-composer textarea:focus { border-color: #76afb2; background: #fff; box-shadow: 0 0 0 3px rgba(20,123,130,.09); }
.chat-composer label > span { margin: 4px 5px 0; color: #a0a9b1; font-size: 8px; }
.chat-composer > button.chat-send { width: 42px; height: 42px; border-radius: 12px; background: var(--accent); color: #fff; box-shadow: 0 5px 13px rgba(20,123,130,.18); }
.chat-composer > button.chat-send:hover { background: var(--accent-dark); color: #fff; }
.chat-reply-preview, .chat-attachment-draft { display: none; align-items: center; gap: 10px; min-height: 55px; padding: 7px clamp(17px, 3vw, 31px); border-bottom: 1px solid #e2e8eb; background: #f8fafb; }
.chat-reply-preview.is-visible, .chat-attachment-draft.is-visible { display: flex; }
.chat-reply-preview > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.chat-reply-preview > span svg { width: 15px; height: 15px; }
.chat-reply-preview div, .chat-attachment-draft div { min-width: 0; flex: 1; display: grid; gap: 1px; }
.chat-reply-preview small { color: #8a96a0; font-size: 8px; }
.chat-reply-preview strong { color: var(--accent-dark); font-size: 10px; }
.chat-reply-preview p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #71808b; font-size: 9.5px; }
.chat-reply-preview button, .chat-attachment-draft button { flex: 0 0 auto; }
.chat-reply-preview button svg, .chat-attachment-draft button svg { width: 15px; height: 15px; }
.chat-reply-preview.is-editing { border-left: 3px solid var(--accent); background: #f4f9f9; }
.chat-reply-preview.is-editing > span { background: #d8eceb; }
.chat-composer > button:disabled { opacity: .38; pointer-events: none; }
.chat-attachment-draft strong { font-size: 10.5px; }
.chat-attachment-draft small { color: #6f9a7d; font-size: 8.5px; }
.chat-attachment-draft { flex-direction: column; align-items: stretch; }
.chat-draft-file { width: 100%; display: flex !important; align-items: center; gap: 10px; }
.chat-draft-file.is-error small { color: #b6534e; }
.chat-load-older { align-self: center; margin: 3px auto 12px; border: 1px solid #d8e2e6; border-radius: 999px; padding: 7px 12px; background: rgba(255,255,255,.92); color: #60727d; font-size: 10px; font-weight: 750; cursor: pointer; }
.chat-load-older:hover { color: var(--accent); border-color: #9fc6c8; }
.chat-search-results-title { padding: 12px 10px 5px; color: #87949e; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.chat-search-result { min-height: 66px; grid-template-columns: 36px minmax(0,1fr); }
.chat-message-row.is-highlighted .chat-bubble { animation: chat-highlight 1.8s ease; }
.chat-edited { margin-left: 5px; color: #8b98a1; font-size: 8px; font-weight: 500; }
@keyframes chat-highlight { 0%, 40% { box-shadow: 0 0 0 4px rgba(34,140,145,.22); } 100% { box-shadow: none; } }
.chat-mention-menu, .chat-emoji-menu { position: absolute; z-index: 8; left: clamp(55px, 5vw, 70px); bottom: calc(100% - 1px); display: none; border: 1px solid var(--line); border-radius: 12px; padding: 6px; background: #fff; box-shadow: 0 13px 35px rgba(28,45,58,.18); }
.chat-mention-menu.is-open, .chat-emoji-menu.is-open { display: grid; }
.chat-mention-menu { width: 310px; gap: 3px; }
.chat-mention-menu button { min-height: 47px; display: grid; grid-template-columns: 33px minmax(0,1fr); align-items: center; gap: 9px; border: 0; border-radius: 8px; padding: 5px 8px; background: transparent; text-align: left; cursor: pointer; }
.chat-mention-menu button:hover { background: #eff5f5; }
.chat-mention-menu button > span:last-child { min-width: 0; display: grid; gap: 2px; }
.chat-mention-menu button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.chat-mention-menu button small { color: #8c97a1; font-size: 8.5px; }
.chat-mention-menu .chat-avatar { width: 31px; height: 31px; font-size: 8px; }
.chat-mention-menu .mention-entity-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; background: #e7f1f1; color: var(--accent); }
.chat-mention-menu .mention-entity-icon svg { width: 15px; height: 15px; }
.chat-emoji-menu { grid-template-columns: repeat(6, 35px); gap: 2px; }
.chat-emoji-menu button { width: 35px; height: 35px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-size: 18px; }
.chat-emoji-menu button:hover { background: #edf3f4; }

.chat-info-panel { position: absolute; z-index: 11; top: 0; right: 0; bottom: 0; width: 330px; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: #fff; box-shadow: -16px 0 38px rgba(27,45,61,.13); overflow-y: auto; transform: translateX(105%); transition: transform .22s cubic-bezier(.2,.72,.24,1); }
.chat-info-panel.is-open { transform: translateX(0); }
.chat-info-panel header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--line); }
.chat-info-panel h2 { margin: 0; font-size: 18px; }
.chat-info-profile { min-height: 145px; display: grid; justify-items: center; align-content: center; gap: 6px; border-bottom: 1px solid #edf1f3; }
.chat-info-profile .chat-avatar { width: 58px; height: 58px; border-radius: 17px; font-size: 15px; }
.chat-info-profile strong { font-size: 14px; }
.chat-info-profile small { color: #89949e; font-size: 10px; }
.chat-info-panel section { padding: 17px 18px; border-bottom: 1px solid #edf1f3; }
.chat-info-panel section h3 { margin: 0 0 11px; color: #7d8993; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.chat-members { display: grid; gap: 9px; }
.chat-member { display: grid; grid-template-columns: 31px minmax(0,1fr) auto; align-items: center; gap: 9px; }
.chat-member .chat-avatar { width: 31px; height: 31px; font-size: 8px; }
.chat-member strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.chat-member small { color: #86939d; font-size: 8.5px; }
.chat-related-task { width: 100%; min-height: 58px; display: grid; grid-template-columns: 34px minmax(0,1fr) 16px; align-items: center; gap: 9px; border: 1px solid #dce5e8; border-radius: 10px; padding: 8px; background: #f8fafb; text-align: left; cursor: pointer; }
.chat-related-task:hover { border-color: #8ebfc1; background: #fff; }
.chat-related-task > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.chat-related-task svg { width: 15px; height: 15px; }
.chat-related-task div { min-width: 0; display: grid; gap: 3px; }
.chat-related-task strong, .chat-related-task small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-related-task strong { font-size: 10px; }
.chat-related-task small { color: #87939c; font-size: 8.5px; }
.chat-related-task > svg { color: #8c979f; }
.chat-materials { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chat-materials button { min-width: 0; display: grid; gap: 6px; border: 0; padding: 0; background: transparent; text-align: left; cursor: pointer; }
.material-thumb { height: 65px; display: grid; place-items: center; border: 1px solid #dde5e8; border-radius: 9px; overflow: hidden; }
.material-image { background: linear-gradient(145deg, #dcebed 0 48%, #a8c4c8 49% 65%, #6e9399 66%); }
.material-file { background: #f1f5f6; color: #74838e; }
.material-file svg { width: 22px; height: 22px; }
.chat-materials strong { font-size: 9px; }
.chat-info-backdrop { position: absolute; z-index: 10; inset: 0; background: rgba(26,38,47,.18); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.chat-info-backdrop.is-open { opacity: 1; pointer-events: auto; }

.chat-message-menu-backdrop { position: fixed; z-index: 510; inset: 0; background: rgba(30,42,50,.06); opacity: 0; pointer-events: none; }
.chat-message-menu-backdrop.is-open { opacity: 1; pointer-events: auto; }
.chat-message-menu { position: fixed; z-index: 520; width: 268px; display: grid; border: 1px solid rgba(214,221,225,.9); border-radius: 21px; padding: 8px; background: rgba(255,255,255,.985); opacity: 0; visibility: hidden; pointer-events: none; box-shadow: 0 18px 52px rgba(24,39,50,.24); transform: translateY(3px) scale(.985); transform-origin: top center; transition: opacity .12s ease, transform .12s ease, visibility .12s ease; backdrop-filter: blur(24px); }
.chat-message-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
.chat-message-menu button { min-height: 46px; display: grid; grid-template-columns: 28px minmax(0,1fr) 16px; align-items: center; gap: 10px; border: 0; border-radius: 10px; padding: 3px 10px; background: transparent; color: #1f2b34; text-align: left; cursor: pointer; }
.chat-message-menu button:hover, .chat-message-menu button:focus-visible { outline: 0; background: #eef1f3; }
.chat-message-menu button > span { width: 28px; height: 28px; display: grid; place-items: center; }
.chat-message-menu button > span svg { width: 21px; height: 21px; stroke-width: 1.8; }
.chat-message-menu button strong { font-size: 14px; font-weight: 630; }
.chat-message-menu button em { display: grid; place-items: center; color: #65727c; }
.chat-message-menu button em svg { width: 18px; height: 18px; }
.chat-message-menu .chat-menu-separator { height: 1px; margin: 4px 6px; background: #e7eaec; }
.chat-message-menu button.is-danger { color: #e0443e; }
.chat-message-menu button.is-danger:hover { background: #fff0ef; }

.chat-forward-sheet footer { display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid #e7ecee; padding: 12px 14px; }
.chat-forward-sheet footer button { min-height: 40px; border: 0; border-radius: 10px; padding: 0 16px; cursor: pointer; font-size: 11px; font-weight: 800; }
.chat-forward-sheet footer button:disabled { opacity: .38; pointer-events: none; }
.chat-forward-confirm { background: var(--accent); color: #fff; }
.chat-forward-list { max-height: min(55vh, 470px); overflow-y: auto; padding: 7px; }
.chat-forward-target { width: 100%; min-height: 62px; display: grid; grid-template-columns: 44px minmax(0,1fr) 28px; align-items: center; gap: 11px; border: 0; border-radius: 12px; padding: 7px 10px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.chat-forward-target:hover, .chat-forward-target.is-selected { background: #eef5f5; }
.chat-forward-target .chat-avatar { width: 42px; height: 42px; font-size: 10px; }
.chat-forward-target > span { min-width: 0; display: grid; gap: 3px; }
.chat-forward-target strong, .chat-forward-target small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-forward-target strong { font-size: 12px; }
.chat-forward-target small { color: #87949d; font-size: 9.5px; }
.chat-forward-target > i { width: 23px; height: 23px; display: grid; place-items: center; border: 2px solid #aab6bd; border-radius: 50%; color: #fff; }
.chat-forward-target.is-selected > i { border-color: var(--accent); background: var(--accent); }
.chat-forward-target > i svg { width: 14px; height: 14px; }

.chat-modal-layer { position: fixed; z-index: 540; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(27,42,52,.34); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility .18s ease; backdrop-filter: blur(3px); }
.chat-modal-layer.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.chat-modal-sheet { width: min(410px, 100%); max-height: min(680px, calc(100dvh - 40px)); border: 1px solid #dce4e7; border-radius: 20px; background: #fff; box-shadow: 0 26px 70px rgba(24,39,50,.25); overflow: hidden; transform: translateY(9px) scale(.985); transition: transform .2s cubic-bezier(.2,.72,.24,1); }
.chat-modal-layer.is-open .chat-modal-sheet { transform: translateY(0) scale(1); }
.chat-modal-sheet > header { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #e7ecee; padding: 12px 12px 12px 18px; }
.chat-modal-sheet > header > div { min-width: 0; display: grid; gap: 2px; }
.chat-modal-sheet > header h2 { margin: 0; font-size: 17px; }
.chat-modal-sheet > header small { color: #7f8d97; font-size: 10px; }
.chat-modal-sheet > header button { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 11px; background: transparent; color: #75838d; cursor: pointer; }
.chat-modal-sheet > header button:hover { background: #eef3f4; color: var(--ink); }
.chat-modal-sheet > header button svg { width: 18px; height: 18px; }
.chat-receipts-list { max-height: min(55vh, 470px); overflow-y: auto; padding: 7px; }
.chat-receipt-person { min-height: 58px; display: grid; grid-template-columns: 42px minmax(0,1fr) 24px; align-items: center; gap: 11px; border-radius: 12px; padding: 7px 10px; }
.chat-receipt-person:hover { background: #f3f7f7; }
.chat-receipt-person .chat-avatar { width: 40px; height: 40px; font-size: 10px; }
.chat-receipt-person > div { min-width: 0; display: grid; gap: 3px; }
.chat-receipt-person strong, .chat-receipt-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-receipt-person strong { font-size: 12px; }
.chat-receipt-person small { color: #82909a; font-size: 9.5px; }
.chat-receipt-person > svg { width: 17px; height: 17px; color: #319096; }
.chat-receipts-empty { min-height: 170px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 25px; color: #84919a; text-align: center; }
.chat-receipts-empty > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: #e9f3f3; color: var(--accent); }
.chat-receipts-empty svg { width: 22px; height: 22px; }
.chat-receipts-empty strong { color: #44535e; font-size: 12px; }
.chat-receipts-empty small { font-size: 10px; }
.chat-receipts-note { margin: 0; border-top: 1px solid #e7ecee; padding: 11px 18px 13px; background: #f8fafb; color: #7c8993; font-size: 9px; line-height: 1.45; }
.chat-receipts-note:empty { display: none; }
.chat-delete-sheet { width: min(380px, 100%); display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 14px; padding: 21px; }
.chat-delete-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: #fdebea; color: #b74f4c; }
.chat-delete-icon svg { width: 21px; height: 21px; }
.chat-delete-sheet h2 { margin: 2px 0 6px; font-size: 18px; }
.chat-delete-sheet p { margin: 0; color: #788690; font-size: 11px; line-height: 1.45; }
.chat-delete-sheet footer { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.chat-delete-sheet footer button { min-width: 100px; min-height: 42px; border: 0; border-radius: 11px; padding: 0 15px; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.chat-modal-cancel { background: #edf2f3; color: #52626d; }
.chat-modal-danger { background: #bc5450; color: #fff; }
.chat-modal-danger:hover { background: #a84643; }
.chat-modal-danger:disabled { opacity: .55; cursor: wait; }

.mobile-nav, .mobile-more-layer { display: none; }

.account-menu { position: fixed; z-index: 340; width: 240px; padding: 8px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 18px 50px rgba(26,43,55,.18); }
.account-menu[hidden] { display: none; }
.account-menu-head { display: flex; align-items: center; gap: 11px; padding: 9px 9px 12px; margin-bottom: 5px; border-bottom: 1px solid var(--line); }
.account-menu-head > div { min-width: 0; display: grid; gap: 2px; }
.account-menu-head strong, .account-menu-head small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-head strong { color: var(--ink); font-size: 13px; }
.account-menu-head small { color: var(--muted); font-size: 11px; }
.account-menu > button { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 9px; padding: 0 10px; background: transparent; color: #4f5e6d; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.account-menu > button:hover { background: #f0f5f6; color: var(--ink); }
.account-menu > button svg { width: 17px; height: 17px; }
#logout-button { color: #a35550; }

.settings-layer { position: fixed; inset: 0; z-index: 410; visibility: hidden; pointer-events: none; }
.settings-layer[aria-hidden="false"] { visibility: visible; pointer-events: auto; }
.settings-backdrop { position: absolute; inset: 0; background: rgba(19,35,45,.28); backdrop-filter: blur(3px); opacity: 0; transition: opacity .18s ease; }
.settings-layer[aria-hidden="false"] .settings-backdrop { opacity: 1; }
.settings-panel { position: absolute; top: 0; right: 0; width: min(440px, 100%); height: 100%; overflow: auto; padding: 25px; background: #fff; box-shadow: -18px 0 55px rgba(22,39,50,.15); transform: translateX(100%); transition: transform .22s ease; }
.settings-layer[aria-hidden="false"] .settings-panel { transform: translateX(0); }
.settings-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.settings-panel h2 { margin: 0; font-size: 24px; letter-spacing: -.03em; }
.settings-user { display: flex; align-items: center; gap: 13px; margin: 26px 0 20px; padding: 17px; border-radius: 15px; background: #f1f6f7; }
.settings-user .avatar { width: 42px; height: 42px; font-size: 13px; }
.settings-user > div { display: grid; gap: 3px; }
.settings-user strong { font-size: 14px; }
.settings-user small { color: var(--muted); font-size: 12px; }
.settings-options { border: 1px solid var(--line); border-radius: 15px; overflow: hidden; }
.settings-options label { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.settings-options label:last-child { border-bottom: 0; }
.settings-options label > span { min-width: 0; display: grid; gap: 4px; }
.settings-options strong { font-size: 13px; }
.settings-options small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.settings-options input { position: absolute; opacity: 0; pointer-events: none; }
.settings-options label > i { position: relative; flex: 0 0 auto; width: 39px; height: 23px; border-radius: 999px; background: #cad4d9; transition: background .15s ease; }
.settings-options label > i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(24,41,52,.25); transition: transform .15s ease; }
.settings-options input:checked + i { background: var(--accent); }
.settings-options input:checked + i::after { transform: translateX(16px); }
.settings-options input:focus-visible + i { outline: 3px solid rgba(20,123,130,.18); outline-offset: 2px; }

.login-layer { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 22px; overflow: auto; background: radial-gradient(circle at 18% 15%, rgba(66,172,176,.16), transparent 34%), #eef3f5; }
.login-layer[aria-hidden="true"] { display: none; }
.login-card { width: min(430px, 100%); padding: 30px; border: 1px solid rgba(200,214,221,.85); border-radius: 23px; background: rgba(255,255,255,.96); box-shadow: 0 25px 70px rgba(29,48,60,.14); }
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-brand > img { width: 42px; height: 42px; display: block; flex: 0 0 auto; object-fit: contain; }
.login-brand > div { display: grid; gap: 2px; }
.login-brand strong { font-size: 16px; }
.login-brand small { color: var(--muted); font-size: 11px; }
.login-copy { margin: 34px 0 24px; }
.login-copy h1 { margin: 0; font-size: 28px; line-height: 1.08; letter-spacing: -.04em; }
.login-copy > p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
#login-form { display: grid; gap: 15px; }
#login-form label { display: grid; gap: 7px; color: #526170; font-size: 12px; font-weight: 750; }
#login-form input { width: 100%; height: 48px; border: 1px solid #cad6dc; border-radius: 12px; padding: 0 14px; outline: 0; background: #fff; color: var(--ink); font: inherit; font-size: 15px; }
#login-form input:focus { border-color: #60a8ac; box-shadow: 0 0 0 4px rgba(20,123,130,.1); }
#login-submit { height: 48px; margin-top: 3px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px rgba(20,123,130,.2); }
#login-submit:hover { background: var(--accent-dark); }
#login-submit:disabled { opacity: .65; cursor: wait; }
.login-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fff1ef; color: #a24e48; font-size: 12px; line-height: 1.4; }
.login-note { margin: 18px 0 0; color: #8b97a1; text-align: center; font-size: 10px; }
/* Calendar: meetings, calls and task deadlines in one readable surface. */
.workspace.is-calendar .view-switcher,
.workspace.is-calendar .control-bar,
.workspace.is-calendar .status-jump,
.workspace.is-calendar .applied-filters { display: none; }
.workspace.is-calendar #create-task { display: none; }
.calendar-view { padding: 0 28px 24px; overflow: hidden; }
.calendar-shell { height: 100%; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 7px 24px rgba(35,52,65,.045); overflow: hidden; }
.calendar-toolbar { min-height: 68px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.calendar-period-controls, .calendar-toolbar-actions { display: flex; align-items: center; gap: 8px; }
.calendar-section-switch { display: flex; align-items: center; gap: 3px; margin-right: 4px; padding: 3px; border-radius: 10px; background: #e8f1f2; }
.calendar-section-switch button { height: 34px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 7px; padding: 0 10px; background: transparent; color: #687985; cursor: pointer; font-size: 10.5px; font-weight: 780; }
.calendar-section-switch button svg { width: 14px; height: 14px; }
.calendar-section-switch button.is-active { background: #fff; color: var(--accent-dark); box-shadow: 0 2px 7px rgba(37,52,64,.1); }
.calendar-section-switch button[hidden] { display: none !important; }
.calendar-period-controls h2 { min-width: 215px; margin: 0 0 0 4px; font-size: 18px; line-height: 1.15; letter-spacing: -.025em; }
.calendar-today, .calendar-arrows button, .calendar-scope-switch button, .calendar-view-switch button, .calendar-add { height: 38px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.calendar-today { border-radius: 9px; padding: 0 12px; color: #526170; font-size: 11px; font-weight: 750; }
.calendar-today:hover, .calendar-arrows button:hover { background: #f4f7f8; color: var(--ink); }
.calendar-arrows { display: flex; align-items: center; }
.calendar-arrows button { width: 35px; display: grid; place-items: center; padding: 0; color: #697887; }
.calendar-arrows button:first-child { border-radius: 9px 0 0 9px; }
.calendar-arrows button:last-child { margin-left: -1px; border-radius: 0 9px 9px 0; }
.calendar-arrows svg { width: 15px; height: 15px; }
.calendar-scope-switch, .calendar-view-switch { display: flex; align-items: center; gap: 3px; padding: 3px; border-radius: 10px; background: #edf2f4; }
.calendar-scope-switch button, .calendar-view-switch button { height: 32px; border: 0; border-radius: 7px; padding: 0 10px; background: transparent; color: #73808c; font-size: 10.5px; font-weight: 750; }
.calendar-scope-switch button.is-active, .calendar-view-switch button.is-active { background: #fff; color: var(--ink); box-shadow: 0 2px 7px rgba(37,52,64,.1); }
.calendar-add { display: inline-flex; align-items: center; gap: 7px; border-color: var(--accent); border-radius: 9px; padding: 0 12px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; }
.calendar-add[hidden], .calendar-day-add[hidden], [data-calendar-scope][hidden], .calendar-delete[hidden] { display: none !important; }
.calendar-add:hover { background: var(--accent-dark); }
.calendar-add svg { width: 15px; height: 15px; }
.calendar-events-pane { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.calendar-events-pane[hidden], .payment-calendar-pane[hidden], .calendar-scope-switch[hidden], .calendar-view-switch[hidden] { display: none !important; }

.calendar-people { display: none; min-height: 58px; flex: 0 0 auto; align-items: center; gap: 6px; padding: 8px 14px; border-bottom: 1px solid #e8edef; overflow-x: auto; scrollbar-width: none; }
.calendar-people::-webkit-scrollbar { display: none; }
.calendar-people.is-visible { display: flex; }
.calendar-people button { min-width: 74px; height: 39px; display: flex; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 10px; padding: 0 9px; background: transparent; color: #73808d; cursor: pointer; }
.calendar-people button > span { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #e5ebf0; color: #607383; font-size: 8px; font-weight: 850; }
.calendar-people button > span svg { width: 14px; height: 14px; }
.calendar-people button strong { font-size: 10.5px; font-weight: 750; }
.calendar-people button:hover { background: #f5f8f9; }
.calendar-people button.is-active { border-color: #b9d7d8; background: #eaf5f5; color: var(--accent-dark); }
.calendar-people button.is-active > span { background: #cfe7e7; color: var(--accent-dark); }
.calendar-people .employee-avatar > img { object-position: center 28%; }
.calendar-mobile-days { display: none; }
.calendar-layout { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0,1fr) 292px; }
.calendar-stage { min-width: 0; min-height: 0; overflow: hidden; border-right: 1px solid var(--line); }

.calendar-day-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #fbfcfc; }
.calendar-day-panel > header { flex: 0 0 auto; padding: 21px 20px 15px; border-bottom: 1px solid #e9eef0; }
.calendar-day-panel h3 { margin: 0; font-size: 20px; line-height: 1.15; letter-spacing: -.035em; }
.calendar-day-panel header > span { display: block; margin-top: 6px; color: #85919c; font-size: 10.5px; }
.calendar-day-list { min-height: 0; flex: 1; display: grid; align-content: start; gap: 8px; padding: 13px; overflow-y: auto; }
.calendar-day-add { min-height: 42px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 13px 13px; border: 1px dashed #9fc7c9; border-radius: 10px; background: #f0f8f8; color: var(--accent-dark); cursor: pointer; font-size: 11px; font-weight: 800; }
.calendar-day-add:hover { border-style: solid; background: #e4f2f2; }
.calendar-day-add svg { width: 15px; height: 15px; }
.calendar-day-empty { min-height: 210px; display: grid; place-items: center; align-content: center; padding: 20px; color: #8e99a3; text-align: center; }
.calendar-day-empty > span { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 11px; border-radius: 14px; background: #edf2f4; color: #7f8f9b; }
.calendar-day-empty strong { color: #697684; font-size: 12px; }
.calendar-day-empty p { max-width: 190px; margin: 6px 0 0; font-size: 10.5px; line-height: 1.4; }

.calendar-item { width: 100%; min-width: 0; min-height: 55px; display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 9px; border: 1px solid color-mix(in srgb, var(--event-color) 25%, #e2e7ea); border-left: 3px solid var(--event-color); border-radius: 10px; padding: 7px 9px; background: color-mix(in srgb, var(--event-color) 6%, white); text-align: left; cursor: pointer; }
.calendar-item:hover { background: color-mix(in srgb, var(--event-color) 11%, white); }
.calendar-item-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--event-color) 15%, white); color: var(--event-color); }
.calendar-item-icon svg { width: 14px; height: 14px; }
.calendar-item > span:last-child { min-width: 0; display: grid; gap: 3px; }
.calendar-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #354351; font-size: 11px; }
.calendar-item small { min-width: 0; display: flex; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #83909b; font-size: 9.5px; }
.calendar-item small > span:first-child { flex: 0 0 auto; }
.calendar-item-owner { min-width: 0; display: inline-flex; align-items: center; gap: 4px; }
.calendar-item-owner > i { color: #a1abb3; font-style: normal; }
.calendar-item-owner > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.calendar-inline-avatar { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%; background: #dfe8ee; color: #536c7c; font-size: 5px; font-weight: 850; }
.calendar-item.is-held { opacity: .72; }
.calendar-item.is-not-held { opacity: .58; text-decoration: line-through; }
.calendar-item-task { --event-color: #768795; }

.calendar-week { height: 100%; min-height: 0; display: grid; grid-template-rows: 56px auto minmax(0,1fr); }
.calendar-week-header { display: grid; grid-template-columns: 54px repeat(var(--calendar-day-count,7),minmax(82px,1fr)); padding-right: var(--calendar-scrollbar-gutter, 0px); border-bottom: 1px solid var(--line); background: #fbfcfc; }
.calendar-week-header > button { border: 0; border-left: 1px solid #eef1f3; background: transparent; color: #727f8c; cursor: pointer; }
.calendar-week-header > button small { display: block; margin-bottom: 2px; color: #9ba5ae; text-transform: uppercase; font-size: 8px; font-weight: 800; }
.calendar-week-header > button strong { width: 27px; height: 27px; display: inline-grid; place-items: center; border-radius: 50%; font-size: 12px; }
.calendar-week-header > button.is-selected { background: #f1f7f7; color: var(--accent-dark); }
.calendar-week-header > button.is-today strong { background: var(--accent); color: #fff; }
.calendar-deadlines { min-height: 37px; display: grid; grid-template-columns: 54px repeat(var(--calendar-day-count,7),minmax(82px,1fr)); padding-right: var(--calendar-scrollbar-gutter, 0px); border-bottom: 1px solid var(--line); background: #fffdf9; }
.calendar-deadlines > span { display: flex; align-items: center; justify-content: center; color: #a08763; text-transform: uppercase; font-size: 7.5px; font-weight: 850; letter-spacing: .06em; }
.calendar-deadline-cell { min-width: 0; display: flex; align-items: center; gap: 3px; padding: 4px; border-left: 1px solid #f0ede7; overflow: hidden; }
.calendar-deadline-cell button { min-width: 0; height: 25px; display: flex; align-items: center; gap: 4px; flex: 1; border: 0; border-radius: 6px; padding: 0 5px; background: #f3eee5; color: #716658; cursor: pointer; }
.calendar-deadline-cell button:not(:first-child) { display: none; }
.calendar-deadline-cell button svg { width: 11px; height: 11px; flex: 0 0 auto; }
.calendar-deadline-cell button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8.5px; }
.calendar-deadline-cell > small { color: #927b5c; font-size: 8px; font-weight: 800; }
.calendar-week-scroll { min-height: 0; display: grid; grid-template-columns: 54px minmax(650px,1fr); overflow: auto; overscroll-behavior: contain; scrollbar-color: #ccd5da transparent; }
.calendar-time-labels { position: relative; height: 896px; background: #fbfcfc; }
.calendar-time-labels span { position: absolute; right: 9px; transform: translateY(-50%); color: #9aa4ad; font-size: 8.5px; }
.calendar-week-days { height: 896px; display: grid; grid-template-columns: repeat(var(--calendar-day-count,7),minmax(82px,1fr)); }
.calendar-week.is-day .calendar-week-scroll { grid-template-columns: 54px minmax(0,1fr); }
.calendar-week-day { position: relative; height: 896px; border-left: 1px solid #edf1f3; background: #fff; }
.calendar-week-day.is-selected { background: rgba(20,123,130,.022); }
.calendar-time-slot { width: 100%; height: 64px; display: block; border: 0; border-bottom: 1px solid #edf1f3; background: transparent; cursor: crosshair; }
.calendar-time-slot:hover { background: rgba(20,123,130,.035); }
.calendar-drag-selection { position: absolute; z-index: 3; right: 4px; left: 4px; min-height: 16px; display: flex; align-items: flex-start; border: 1px solid #238f95; border-left-width: 3px; border-radius: 7px; padding: 5px 7px; background: rgba(48,157,163,.2); color: #155f64; pointer-events: none; box-shadow: 0 4px 12px rgba(30,109,114,.14); }
.calendar-drag-selection strong { font-size: 9px; line-height: 1.2; }
body.is-calendar-dragging { user-select: none; cursor: ns-resize; }
.calendar-week-event { position: absolute; z-index: 2; min-width: 0; overflow: hidden; border: 0; border-left: 3px solid var(--event-color); border-radius: 6px; padding: 5px 5px 4px; background: color-mix(in srgb, var(--event-color) 14%, white); color: color-mix(in srgb, var(--event-color) 66%, #1c2730); text-align: left; cursor: pointer; box-shadow: 0 2px 5px rgba(31,48,61,.08); }
.calendar-week-event:hover { z-index: 4; background: color-mix(in srgb, var(--event-color) 22%, white); }
.calendar-week-event strong, .calendar-week-event small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-week-event strong { font-size: 9px; line-height: 1.22; }
.calendar-week-event small { margin-top: 2px; opacity: .76; font-size: 7.5px; }
.calendar-week-event.is-held { opacity: .7; }
.calendar-week-event.is-not-held { opacity: .5; text-decoration: line-through; }
.calendar-now-line { position: absolute; z-index: 5; right: 0; left: -1px; height: 1px; background: #d85f5f; pointer-events: none; }
.calendar-now-line i { position: absolute; top: -3px; left: -4px; width: 7px; height: 7px; border-radius: 50%; background: #d85f5f; }

.media-viewer { position: fixed; z-index: 250; inset: 0; display: none; color: #fff; }
.media-viewer.is-open { display: block; }
.media-viewer-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: rgba(13,20,25,.94); cursor: zoom-out; }
.media-viewer-toolbar { position: absolute; z-index: 2; top: 0; right: 0; left: 0; min-height: 64px; display: grid; grid-template-columns: minmax(0,1fr) 1fr auto; align-items: center; gap: 15px; padding: 10px 18px; background: linear-gradient(rgba(8,13,17,.72),transparent); }
.media-viewer-toolbar > strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.media-viewer-actions { position: relative; display: flex; align-items: center; gap: 4px; }
.media-viewer-actions > button { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.media-viewer-actions > button:hover { background: rgba(255,255,255,.12); }
.media-viewer-actions svg { width: 19px; height: 19px; }
.media-viewer-stage { position: absolute; inset: 64px 22px 22px; display: grid; place-items: center; pointer-events: none; }
.media-viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: auto; filter: drop-shadow(0 15px 35px rgba(0,0,0,.35)); }
.media-viewer-menu { position: absolute; top: 44px; right: 42px; width: 220px; display: none; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; padding: 5px; background: #263138; box-shadow: 0 18px 45px rgba(0,0,0,.34); }
.media-viewer-menu.is-open { display: block; }
.media-viewer-menu a { min-height: 40px; display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 0 10px; color: #fff; font-size: 11px; font-weight: 680; text-decoration: none; }
.media-viewer-menu a:hover { background: rgba(255,255,255,.09); }
.media-viewer-menu a svg { width: 17px; height: 17px; }
body.has-media-viewer { overflow: hidden; }

.calendar-month { height: 100%; min-height: 0; display: grid; grid-template-rows: 30px minmax(0,1fr); overflow: auto; }
.calendar-month-weekdays { display: grid; grid-template-columns: repeat(7,1fr); border-bottom: 1px solid var(--line); background: #fbfcfc; }
.calendar-month-weekdays span { display: grid; place-items: center; color: #939ea7; text-transform: uppercase; font-size: 8px; font-weight: 850; }
.calendar-month-grid { min-height: 600px; display: grid; grid-template-columns: repeat(7,minmax(100px,1fr)); grid-template-rows: repeat(6,minmax(96px,1fr)); }
.calendar-month-day { min-width: 0; min-height: 96px; padding: 6px; border-right: 1px solid #edf1f3; border-bottom: 1px solid #edf1f3; background: #fff; }
.calendar-month-day:nth-child(7n) { border-right: 0; }
.calendar-month-day.is-outside { background: #fafbfb; opacity: .48; }
.calendar-month-day.is-selected { box-shadow: inset 0 0 0 2px rgba(20,123,130,.28); }
.calendar-month-number { width: 24px; height: 24px; display: grid; place-items: center; margin: 0 0 3px auto; border: 0; border-radius: 50%; background: transparent; color: #657381; cursor: pointer; font-size: 10px; font-weight: 800; }
.calendar-month-day.is-today .calendar-month-number { background: var(--accent); color: #fff; }
.calendar-month-day > div { display: grid; gap: 3px; }
.calendar-month-event { min-width: 0; height: 21px; display: flex; align-items: center; gap: 5px; border: 0; border-radius: 5px; padding: 0 5px; background: color-mix(in srgb, var(--event-color) 10%, white); color: #4d5a67; cursor: pointer; }
.calendar-month-event i { width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: var(--event-color); }
.calendar-month-event span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.calendar-month-more { border: 0; padding: 1px 4px; background: transparent; color: var(--accent); text-align: left; cursor: pointer; font-size: 8px; font-weight: 750; }

.calendar-agenda-list { height: 100%; overflow-y: auto; padding: 12px 18px 30px; }
.calendar-agenda-group { display: grid; grid-template-columns: 175px minmax(0,1fr); gap: 18px; padding: 14px 0; border-bottom: 1px solid #e9eef1; }
.calendar-agenda-group > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; padding-top: 7px; }
.calendar-agenda-group > header strong { color: #576572; text-transform: capitalize; font-size: 11px; line-height: 1.35; }
.calendar-agenda-group > header span { min-width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: #edf2f4; color: #788590; font-size: 8px; font-weight: 800; }
.calendar-agenda-group > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.calendar-empty { min-height: 320px; display: grid; place-items: center; align-content: center; color: #82909a; text-align: center; }
.calendar-empty span { font-size: 15px; font-weight: 800; }
.calendar-empty p { margin: 6px 0 0; font-size: 11px; }

/* Manager-only payment calendar: same section, separate business semantics. */
.payment-calendar-pane { min-height: 0; flex: 1; display: flex; flex-direction: column; background: #f7f9fa; overflow: hidden; }
.payment-summary { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; padding: 13px 14px 10px; }
.payment-summary-card { min-width: 0; min-height: 70px; display: flex; align-items: center; gap: 11px; border: 1px solid #e0e7ea; border-radius: 12px; padding: 11px 13px; background: #fff; }
.payment-summary-card > span { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background: #eef2f4; color: #75838f; }
.payment-summary-card > span svg { width: 16px; height: 16px; }
.payment-summary-card > div { min-width: 0; display: grid; gap: 3px; }
.payment-summary-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #26333e; font-size: 17px; }
.payment-summary-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #82909b; font-size: 9.5px; }
.payment-summary-card.is-overdue > span { background: #fcebec; color: #c55f61; }
.payment-summary-card.is-today > span { background: #fff2d8; color: #b98021; }
.payment-summary-card.is-soon > span { background: #eaf1fc; color: #527fc5; }
.payment-summary-card.is-month > span { background: #e8f5ee; color: #4c9470; }
.payment-controls { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 0 14px 11px; border-bottom: 1px solid #e3e9ec; }
.payment-search { width: 225px; height: 38px; display: flex; align-items: center; gap: 7px; border: 1px solid #d6e0e4; border-radius: 9px; padding: 0 10px; background: #fff; }
.payment-search svg { width: 15px; height: 15px; color: #87949f; }
.payment-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #394754; font: inherit; font-size: 10.5px; }
.payment-status-filter { min-width: 0; display: flex; align-items: center; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.payment-status-filter::-webkit-scrollbar { display: none; }
.payment-status-filter button { height: 32px; flex: 0 0 auto; border: 0; border-radius: 16px; padding: 0 10px; background: transparent; color: #76848f; cursor: pointer; font-size: 9.5px; font-weight: 720; }
.payment-status-filter button.is-active { background: #e3f1f1; color: var(--accent-dark); }
.payment-view-switch { display: flex; align-items: center; gap: 3px; margin-left: auto; padding: 3px; border-radius: 9px; background: #e9eef0; }
.payment-view-switch button { height: 30px; border: 0; border-radius: 7px; padding: 0 9px; background: transparent; color: #74818c; cursor: pointer; font-size: 9.5px; font-weight: 750; }
.payment-view-switch button.is-active { background: #fff; color: #34424e; box-shadow: 0 2px 6px rgba(35,52,65,.09); }
.payment-layout { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0,1fr) 292px; }
.payment-main { min-width: 0; min-height: 0; overflow: auto; padding: 12px 14px 24px; }
.payment-list { display: grid; gap: 8px; }
.payment-card { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: stretch; border: 1px solid #dde5e8; border-left: 4px solid #8b9aa5; border-radius: 11px; background: #fff; overflow: hidden; }
.payment-card.is-overdue { border-left-color: #c95f62; }
.payment-card.is-today { border-left-color: #c28a2a; }
.payment-card.is-soon { border-left-color: #527fc5; }
.payment-card.is-paused { opacity: .66; }
.payment-card-main { min-width: 0; min-height: 68px; display: grid; grid-template-columns: 45px minmax(0,1fr) auto; align-items: center; gap: 11px; border: 0; padding: 8px 13px; background: transparent; text-align: left; cursor: pointer; }
.payment-card-main:hover { background: #f9fbfb; }
.payment-card-date { width: 43px; height: 47px; display: grid; place-items: center; align-content: center; border-radius: 9px; background: #edf2f4; color: #5d6e7b; }
.payment-card-date strong { font-size: 16px; line-height: 1; }
.payment-card-date small { margin-top: 3px; text-transform: uppercase; font-size: 7.5px; font-weight: 850; }
.payment-card-copy { min-width: 0; display: grid; gap: 5px; }
.payment-card-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #34424e; font-size: 11.5px; }
.payment-card-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #83909a; font-size: 9.5px; }
.payment-card-amount { padding-left: 10px; color: #27343e; white-space: nowrap; font-size: 12px; font-weight: 850; }
.payment-paid { min-width: 103px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-left: 1px solid #e5ebed; padding: 0 12px; background: #f2f8f5; color: #4b8b6b; cursor: pointer; font-size: 9.5px; font-weight: 800; }
.payment-paid:hover { background: #e6f3ec; }
.payment-paid.is-confirm { background: #4f9470; color: #fff; }
.payment-paid svg { width: 14px; height: 14px; }
.payment-empty { min-height: 280px; display: grid; place-items: center; align-content: center; color: #7e8b96; text-align: center; }
.payment-empty span { font-size: 15px; font-weight: 800; }
.payment-empty p { margin: 6px 0 0; font-size: 10.5px; }
.payment-history { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-left: 1px solid #e0e7ea; background: #fff; }
.payment-history > header { flex: 0 0 auto; padding: 17px 17px 12px; border-bottom: 1px solid #e8edef; }
.payment-history h3 { margin: 2px 0 0; font-size: 14px; }
.payment-history > div { min-height: 0; overflow-y: auto; padding: 7px 12px 20px; }
.payment-history article { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 10px 4px; border-bottom: 1px solid #edf1f3; }
.payment-history article > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: #eaf5ef; color: #4f9570; }
.payment-history article svg { width: 13px; height: 13px; }
.payment-history article div { min-width: 0; display: grid; gap: 3px; }
.payment-history article strong, .payment-history article small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payment-history article strong { color: #44515d; font-size: 9.5px; }
.payment-history article small { color: #8a969f; font-size: 8.5px; }
.payment-history article b { color: #4b5965; white-space: nowrap; font-size: 9.5px; }
.payment-history-empty { padding: 35px 10px; color: #8a969f; text-align: center; font-size: 10.5px; }
.payment-month { min-width: 680px; min-height: 600px; display: grid; grid-template-rows: 30px minmax(0,1fr); border: 1px solid #e0e7ea; border-radius: 11px; background: #fff; overflow: hidden; }
.payment-month-weekdays { display: grid; grid-template-columns: repeat(7,1fr); border-bottom: 1px solid #e5eaed; background: #f8fafb; }
.payment-month-weekdays span { display: grid; place-items: center; color: #8a969f; font-size: 8px; font-weight: 850; }
.payment-month-grid { display: grid; grid-template-columns: repeat(7,1fr); grid-template-rows: repeat(6,minmax(94px,1fr)); }
.payment-month-day { min-width: 0; padding: 6px; border-right: 1px solid #edf1f3; border-bottom: 1px solid #edf1f3; }
.payment-month-day:nth-child(7n) { border-right: 0; }
.payment-month-day.is-outside { background: #fafbfb; opacity: .5; }
.payment-month-day > strong { width: 23px; height: 23px; display: grid; place-items: center; margin-left: auto; border-radius: 50%; color: #657380; font-size: 9px; }
.payment-month-day.is-today > strong { background: var(--accent); color: #fff; }
.payment-month-day > button { width: 100%; min-width: 0; display: grid; gap: 2px; margin-top: 4px; border: 0; border-left: 3px solid #81919d; border-radius: 5px; padding: 4px 5px; background: #f1f4f5; color: #52606c; text-align: left; cursor: pointer; }
.payment-month-day > button.is-overdue { border-left-color: #c95f62; background: #fff3f3; }
.payment-month-day > button.is-today { border-left-color: #c28a2a; background: #fff8e8; }
.payment-month-day > button.is-soon { border-left-color: #527fc5; background: #f1f5fc; }
.payment-month-day > button span, .payment-month-day > button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payment-month-day > button span { font-size: 7.5px; font-weight: 780; }
.payment-month-day > button small { color: #82909a; font-size: 7px; }
.payment-month-day > small { display: block; margin-top: 4px; color: #7c8a95; font-size: 7.5px; font-weight: 750; }

.payment-dialog { width: min(610px, calc(100% - 28px)); overflow: visible; }
.payment-dialog form { position: relative; overflow: visible; }
.payment-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 15px; }
.payment-form-grid > label { margin: 0; }
.payment-date-field { display: grid; gap: 7px; }
.payment-date-field > label { color: #536170; font-size: 11px; font-weight: 750; }
.payment-date-field > label span { color: #b85c58; }
.payment-date-popover { position: absolute; z-index: 30; top: 205px; right: 18px; width: 365px; display: none; border: 1px solid var(--line); border-radius: 15px; padding: 14px; background: #fff; box-shadow: 0 22px 55px rgba(31,47,59,.2); }
.payment-date-popover.is-open { display: block; }
.payment-recurrence-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.payment-recurrence-options button { min-height: 38px; border: 1px solid var(--line); border-radius: 9px; padding: 0 9px; background: #fff; color: #6d7a87; cursor: pointer; font-size: 10px; }
.payment-recurrence-options button.is-active { border-color: #8ebfc1; background: #eaf5f5; color: var(--accent-dark); font-weight: 750; }
.payment-active-toggle { width: 100%; min-height: 53px; display: grid; grid-template-columns: 35px minmax(0,1fr); align-items: center; gap: 10px; margin-top: 16px; border: 1px solid #d9e1e5; border-radius: 11px; padding: 8px 11px; background: #f8fafb; color: #566572; text-align: left; cursor: pointer; }
.payment-active-toggle > i { width: 34px; height: 20px; position: relative; border-radius: 12px; background: #c8d1d6; }
.payment-active-toggle > i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: transform .18s ease; }
.payment-active-toggle.is-active > i { background: #5da17c; }
.payment-active-toggle.is-active > i::after { transform: translateX(14px); }
.payment-active-toggle > span { display: grid; gap: 3px; }
.payment-active-toggle strong { font-size: 10.5px; }
.payment-active-toggle small { color: #89959f; font-size: 9px; }

.calendar-dialog { width: min(650px, calc(100% - 28px)); overflow: visible; }
.calendar-dialog form { position: relative; max-height: min(780px, calc(100vh - 48px)); overflow-y: auto; }
.calendar-dialog > form > label { margin-top: 15px; }
.calendar-datetime-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 15px; }
.calendar-datetime-field { display: grid; gap: 7px; }
.calendar-datetime-field > label, .calendar-choice-field legend { color: #536170; font-size: 11px; font-weight: 750; }
.calendar-datetime-field label span, .calendar-dialog > form > label > span { color: #b85c58; }
.calendar-datetime-trigger { width: 100%; min-height: 45px; display: grid; grid-template-columns: 19px minmax(0,1fr) 15px; align-items: center; gap: 8px; border: 1px solid #cad6dc; border-radius: 10px; padding: 0 11px; background: #fff; color: #536170; text-align: left; cursor: pointer; }
.calendar-datetime-trigger:hover, .calendar-datetime-trigger.is-open { border-color: #72adb0; box-shadow: 0 0 0 3px rgba(20,123,130,.08); }
.calendar-datetime-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 650; }
.calendar-datetime-trigger svg { width: 15px; height: 15px; color: #82909c; }
.calendar-date-popover { position: absolute; z-index: 20; top: 203px; right: 18px; width: 365px; display: none; border: 1px solid var(--line); border-radius: 15px; padding: 14px; background: #fff; box-shadow: 0 22px 55px rgba(31,47,59,.2); }
.calendar-date-popover.is-open { display: block; }
.calendar-picker-time { display: grid; grid-template-columns: auto 76px minmax(0,1fr); align-items: center; gap: 8px; }
.calendar-picker-time > label { color: #7a8792; font-size: 10px; font-weight: 750; }
.calendar-picker-time > div { display: flex; gap: 4px; }
.calendar-picker-time > div button { min-width: 0; flex: 1; padding-inline: 4px; }
.calendar-choice-field { min-width: 0; margin: 17px 0 0; border: 0; padding: 0; }
.calendar-choice-field legend { margin-bottom: 8px; }
.calendar-status-options, .calendar-reminder-options { display: flex; flex-wrap: wrap; gap: 6px; }
.calendar-status-options button, .calendar-reminder-options button { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 9px; padding: 0 10px; background: #fff; color: #6d7a87; cursor: pointer; font-size: 10.5px; }
.calendar-status-options button i { width: 7px; height: 7px; border-radius: 50%; background: #5e9d83; }
.calendar-status-options button[data-calendar-status="Held"] i { background: #748bb4; }
.calendar-status-options button[data-calendar-status="Not Held"] i { background: #bd6965; }
.calendar-status-options button.is-active, .calendar-reminder-options button.is-active { border-color: #8ebfc1; background: #eaf5f5; color: var(--accent-dark); font-weight: 750; }
.calendar-color-options { display: flex; flex-wrap: wrap; gap: 7px; }
.calendar-color-options button { width: 29px; height: 29px; display: grid; place-items: center; border: 2px solid transparent; border-radius: 50%; padding: 0; background: transparent; cursor: pointer; }
.calendar-color-options button i { width: 19px; height: 19px; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.calendar-color-options button.is-active { border-color: #91bfc1; }
.calendar-color-options button:nth-child(2) i { background: #2b9297; }
.calendar-color-options button:nth-child(3) i { background: #527fc5; }
.calendar-color-options button:nth-child(4) i { background: #8371ba; }
.calendar-color-options button:nth-child(5) i { background: #c96568; }
.calendar-color-options button:nth-child(6) i { background: #ca8840; }
.calendar-color-options button:nth-child(7) i { background: #58a078; }
.calendar-color-options button:nth-child(8) i { background: #7b8c99; }
.calendar-color-options button:nth-child(9) i { background: #6e9fc7; }
.calendar-color-options button:nth-child(10) i { background: #bd719e; }
.calendar-choice-field button:disabled, .calendar-datetime-trigger:disabled { opacity: .65; cursor: default; box-shadow: none; }
.calendar-dialog-foot { grid-template-columns: auto 1fr auto auto; }
.calendar-delete { border-color: #edcfcc !important; color: #aa5651 !important; }
.calendar-delete:hover { background: #fff2f0 !important; }

@media (max-width: 1180px) {
  .calendar-layout { grid-template-columns: minmax(0,1fr) 250px; }
  .calendar-period-controls h2 { min-width: 155px; font-size: 15px; }
  .calendar-add span { display: none; }
  .calendar-add { width: 38px; justify-content: center; padding: 0; }
  .calendar-agenda-group { grid-template-columns: 135px minmax(0,1fr); }
  .payment-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .payment-layout { grid-template-columns: minmax(0,1fr) 250px; }
}

@media (max-width: 1050px) {
  .top-profile-button { display: inline-grid; }
  .app-shell { grid-template-columns: 76px minmax(0,1fr); }
  .sidebar { padding-inline: 10px; }
  .brand { padding-inline: 11px; }
  .brand strong, .main-nav a span, .profile-mini div, .main-nav a em { display: none; }
  .main-nav a { grid-template-columns: 1fr; place-items: center; padding: 0; }
  .profile-mini { justify-content: center; padding: 0; }
  .topbar { padding-inline: 20px; }
  .page-head { padding-inline: 20px; }
  .control-bar { margin-inline: 20px; }
  .applied-filters { margin-inline: 20px; }
  .phase-switcher > button { min-width: 170px; }
  .phase-switcher small { display: none; }
  .board-view { padding-inline: 20px; }
  .filter-popover { right: 20px; }
  .list-view, .focus-view { padding-inline: 20px; }
  .home-view { padding-inline: 20px; }
  .home-welcome { grid-template-columns: minmax(250px,.75fr) minmax(470px,1.35fr); gap: 18px; padding-inline: 20px; }
  .focus-grid { grid-template-columns: minmax(0,1fr) 250px; }
  .chat-shell { grid-template-columns: 300px minmax(0,1fr); }
}

@media (max-width: 980px) and (min-width: 761px) {
  .home-welcome { grid-template-columns: 1fr; align-items: start; }
  .home-pulse { grid-template-columns: repeat(3,minmax(170px,1fr)); }
  .home-layout { grid-template-columns: 1fr; }
  .home-rail { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
  .home-quick-actions { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .connection-status { width: 9px; min-height: 9px; border: 0; padding: 0; background: transparent; }
  .connection-status span { display: none; }
  body { overflow: hidden; font-size: 16px; }
  .app-shell { display: block; }
  .sidebar { display: none; }
  .workspace { height: var(--visual-viewport-height, 100dvh); padding-bottom: 72px; }
  .workspace.is-chat { padding-bottom: 72px; }
  body.is-chat-conversation .workspace.is-chat { padding-bottom: 0; }
  .topbar { min-height: 62px; grid-template-columns: auto 1fr auto; padding: 9px 14px; gap: 10px; }
  .mobile-brand { display: flex; }
  .mobile-brand strong { display: none; }
  .global-search { height: 43px; background: #f2f5f6; }
  .global-search input { font-size: 16px; }
  .global-search kbd { display: none; }
  .top-actions > .icon-button { display: none; }
  .create-button { width: 43px; height: 43px; padding: 0; display: grid; place-items: center; border-radius: 12px; }
  .create-button span { display: none; }
  .page-head { align-items: center; padding: 18px 16px 13px; }
  .page-head h1 { font-size: 24px; }
  .page-subtitle, .page-head .eyebrow { display: none; }
  .workspace.is-home .page-head { padding-bottom: 10px; }
  .view-switcher { padding: 3px; }
  .view-switcher button { width: 40px; height: 38px; padding: 0; display: grid; place-items: center; }
  .view-switcher button svg { width: 18px; height: 18px; }
  .view-switcher button span { display: none; }
  .control-bar { margin: 0 14px; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 7px; padding: 7px; }
  .phase-switcher { width: 100%; min-width: 0; padding: 2px; }
  .phase-switcher > button { min-width: 0; width: 50%; height: 50px; grid-template-columns: 28px minmax(0,1fr) auto; gap: 7px; padding: 0 8px; }
  .phase-switcher .phase-icon { width: 28px; height: 28px; border-radius: 8px; }
  .phase-switcher .phase-icon svg { width: 15px; height: 15px; }
  .phase-switcher strong { font-size: 12px; }
  .phase-switcher small { display: none; }
  .phase-switcher em { min-width: 23px; height: 23px; font-size: 10px; }
  .toolbar-right { grid-column: 1 / -1; justify-content: stretch; }
  .quick-views { flex: 1; }
  .quick-views button { height: 39px; padding: 0 11px; font-size: 11.5px; }
  .filters button { width: 40px; height: 40px; padding: 0; justify-content: center; font-size: 0; position: relative; }
  .filters button:last-child { display: none; }
  .filters .filter-count { position: absolute; top: -5px; right: -5px; font-size: 8px; }
  .applied-filters { min-height: 38px; margin: 7px 14px 0; padding: 4px 6px; }
  .applied-filters > span { display: none; }
  .filter-popover { top: auto; right: 8px; bottom: 72px; left: 8px; width: auto; max-height: 70vh; overflow-y: auto; border-radius: 16px; }
  .status-jump { display: flex; padding: 15px 16px 5px; }
  .status-jump button { height: 39px; padding: 0 14px; font-size: 12.5px; }
  .workspace.is-view-list .status-jump, .workspace.is-view-focus .status-jump { display: none; }
  .content-view { padding-top: 9px; }
  .home-view { padding: 0 14px 22px; overflow-y: auto; }
  .home-shell { padding-bottom: 10px; }
  .home-welcome { min-height: 0; grid-template-columns: 1fr; align-items: start; gap: 16px; border-radius: 15px; padding: 18px 16px 14px; }
  .home-welcome::after { top: -110px; right: -70px; }
  .home-welcome-copy h2 { font-size: 24px; }
  .home-welcome-copy > p:last-child { margin-top: 7px; font-size: 12px; }
  .home-pulse { display: flex; gap: 8px; margin-inline: -2px; padding: 2px 2px 4px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .home-pulse::-webkit-scrollbar { display: none; }
  .home-pulse > button { min-width: min(76vw,270px); min-height: 67px; scroll-snap-align: start; }
  .home-layout { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
  .home-flow, .home-rail { gap: 12px; }
  .home-panel, .home-quick-actions { border-radius: 14px; }
  .home-section-head { min-height: 62px; padding: 10px 12px; }
  .home-section-icon { width: 34px; height: 34px; }
  .home-section-head h3 { font-size: 14px; }
  #home-resume { padding: 10px; }
  .home-resume-card { min-height: 158px; grid-template-columns: 1fr; gap: 8px; padding: 17px 15px; }
  .home-resume-title { font-size: 19px; }
  .home-resume-foot { gap: 8px; padding-top: 11px; }
  .home-resume-foot > span:first-child { overflow: hidden; }
  .home-resume-foot > span:first-child > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .home-resume-priority { display: none; }
  .home-changes { padding-inline: 8px; }
  .home-change-row { min-height: 69px; grid-template-columns: 4px minmax(0,1fr) auto 15px; gap: 9px; padding-inline: 5px; }
  .home-change-row .avatar-stack { display: none; }
  .home-change-meta em { display: none; }
  .home-change-copy strong { font-size: 12px; }
  .home-attention, .home-calendar-list { padding-inline: 8px; }
  .home-attention-item { grid-template-columns: 39px minmax(0,1fr) auto 13px; }
  .home-attention-item.is-task > em { display: none; }
  .home-quick-actions { padding: 12px; }
  .home-quick-actions button { min-height: 62px; }
  .home-empty { min-height: 102px; padding: 14px 10px; }
  .home-empty > button { display: none; }
  .workspace.is-chat .chat-view { height: 100%; padding: 0; }
  .chat-shell { height: 100%; display: block; background: #fff; }
  .chat-roster { width: 100%; height: 100%; border-right: 0; }
  .chat-list-head { min-height: 76px; padding: 15px 16px 9px; }
  .chat-list-head h1 { font-size: 27px; }
  .chat-new-button { width: 43px; height: 43px; border-radius: 12px; }
  .chat-list-search { min-height: 48px; margin: 6px 14px 11px; padding-inline: 13px; }
  .chat-list-search input { font-size: 16px; }
  .chat-list-filters { padding: 0 14px 10px; }
  .chat-list-filters button { min-height: 38px; padding-inline: 12px; font-size: 12px; }
  .chat-dialog-list { padding: 6px 8px 16px; }
  .chat-dialog { min-height: 79px; grid-template-columns: 49px minmax(0,1fr) auto; padding: 8px; }
  .chat-dialog-name { font-size: 14px; }
  .chat-dialog-preview { font-size: 12.5px; }
  .chat-dialog-time { font-size: 10.5px; }
  .chat-dialog .chat-avatar { width: 47px; height: 47px; font-size: 12px; }
  .chat-conversation { position: absolute; z-index: 20; inset: 0; width: 100%; height: 100%; transform: translateX(102%); transition: transform .22s cubic-bezier(.2,.72,.24,1); }
  .chat-shell.has-open .chat-conversation { transform: translateX(0); }
  .chat-conversation-head { min-height: 66px; grid-template-columns: 39px 41px minmax(0,1fr) auto; gap: 8px; padding: max(7px, env(safe-area-inset-top)) 8px 7px 5px; }
  .chat-selection-head { min-height: 66px; grid-template-columns: 40px minmax(0,1fr) auto; padding: max(7px, env(safe-area-inset-top)) 7px 7px; }
  .chat-selection-head strong { font-size: 15px; }
  .chat-back { width: 39px; height: 39px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: #667681; }
  .chat-back svg { width: 21px; height: 21px; }
  .chat-conversation-head .chat-avatar { width: 41px; height: 41px; }
  .chat-peer strong { font-size: 15px; }
  .chat-peer small { font-size: 11px; }
  .chat-head-actions button { width: 36px; height: 36px; }
  #chat-message-search { display: none; }
  .chat-pinned { min-height: 50px; padding: 6px 13px; }
  .chat-pinned small { font-size: 9.5px; }
  .chat-pinned strong { font-size: 11.5px; }
  .chat-messages { padding: 12px 9px 15px; }
  .chat-message-stream { width: 100%; }
  .chat-message-row { gap: 6px; }
  .chat-message-row.is-own { padding: 0; }
  .chat-message-row .chat-message-avatar { width: 29px; height: 29px; }
  .chat-bubble { max-width: 86%; padding: 9px 10px 7px; }
  .chat-bubble > p { font-size: 14px; line-height: 1.43; }
  .chat-message-author { font-size: 11px; }
  .chat-bubble-time { font-size: 9.5px; }
  .chat-message-action { display: none; }
  .chat-reference { min-height: 59px; }
  .chat-reference strong { font-size: 11.5px; }
  .chat-reference small { font-size: 9.5px; }
  .chat-image-preview { height: 145px; }
  .chat-compose-zone { padding-bottom: env(safe-area-inset-bottom); }
  .chat-composer { min-height: 66px; grid-template-columns: 39px minmax(0,1fr) 43px; gap: 5px; padding: 8px 8px 9px; }
  .chat-composer textarea { min-height: 43px; max-height: 150px; padding: 10px 11px; font-size: 16px; }
  .chat-composer label > span, #chat-emoji { display: none; }
  .chat-composer > button.chat-send { width: 43px; height: 43px; }
  .chat-reply-preview, .chat-attachment-draft { min-height: 57px; padding: 7px 11px; }
  .chat-reply-preview strong, .chat-attachment-draft strong { font-size: 11.5px; }
  .chat-reply-preview p, .chat-attachment-draft small { font-size: 10px; }
  .chat-mention-menu { left: 8px; right: 8px; bottom: calc(100% - 1px); width: auto; }
  .chat-mention-menu button { min-height: 52px; }
  .chat-mention-menu button strong { font-size: 12px; }
  .chat-mention-menu button small { font-size: 10px; }
  .chat-emoji-menu { left: 8px; bottom: calc(100% - 1px); grid-template-columns: repeat(6, 38px); }
  .chat-jump-bottom { right: 12px; bottom: 79px; }
  .chat-info-panel { width: 100%; }
  .chat-info-panel header { min-height: 66px; padding-top: max(10px, env(safe-area-inset-top)); }
  .chat-info-panel h2 { font-size: 20px; }
  .chat-info-profile { min-height: 156px; }
  .chat-info-profile strong { font-size: 16px; }
  .chat-info-profile small { font-size: 11px; }
  .chat-info-panel section h3 { font-size: 10px; }
  .chat-member strong, .chat-related-task strong { font-size: 12px; }
  .chat-member small, .chat-related-task small { font-size: 10px; }
  .chat-message-menu-backdrop { background: rgba(27,42,52,.15); backdrop-filter: none; }
  .chat-message-menu { width: min(278px, calc(100vw - 16px)); border-radius: 20px; padding: 7px; transform: translateY(3px) scale(.985); transform-origin: center; }
  .chat-message-menu.is-open { transform: translateY(0) scale(1); }
  .chat-message-menu button { min-height: 48px; grid-template-columns: 30px minmax(0,1fr) 18px; padding-inline: 10px; }
  .chat-message-menu button > span { width: 30px; height: 30px; }
  .chat-message-menu button > span svg { width: 23px; height: 23px; }
  .chat-message-menu button strong { font-size: 15px; }
  .chat-modal-layer { place-items: end center; padding: 0; }
  .chat-modal-sheet { width: 100%; max-height: min(82dvh, 720px); border-width: 1px 0 0; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%); }
  .chat-modal-layer.is-open .chat-modal-sheet { transform: translateY(0); }
  .chat-modal-sheet > header { min-height: 72px; padding: 10px 12px 10px 17px; }
  .chat-modal-sheet > header h2 { font-size: 19px; }
  .chat-modal-sheet > header small { font-size: 11px; }
  .chat-receipt-person { min-height: 66px; grid-template-columns: 47px minmax(0,1fr) 26px; }
  .chat-receipt-person .chat-avatar { width: 45px; height: 45px; font-size: 11px; }
  .chat-receipt-person strong { font-size: 14px; }
  .chat-receipt-person small { font-size: 11px; }
  .chat-receipts-note { padding: 12px 17px 14px; font-size: 10.5px; }
  .chat-forward-target { min-height: 68px; grid-template-columns: 48px minmax(0,1fr) 29px; }
  .chat-forward-target .chat-avatar { width: 46px; height: 46px; font-size: 11px; }
  .chat-forward-target strong { font-size: 14px; }
  .chat-forward-target small { font-size: 10.5px; }
  .chat-forward-sheet footer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .chat-delete-sheet { width: calc(100% - 16px); margin: 0 8px calc(8px + env(safe-area-inset-bottom)); border: 1px solid #dce4e7; border-radius: 19px; padding: 20px; }
  .chat-delete-sheet h2 { font-size: 20px; }
  .chat-delete-sheet p { font-size: 13px; }
  .chat-delete-sheet footer button { min-height: 46px; font-size: 13px; }
  body.is-chat-conversation .mobile-nav { display: none; }
  .board-view { padding: 8px 14px 12px; overflow-y: auto; }
  .kanban { display: block; height: auto; overflow: visible; padding: 0; }
  .kanban-column { display: none; width: 100%; height: auto; border: 0; background: transparent; overflow: visible; }
  .kanban-column.is-mobile-active { display: block; }
  .column-head { display: none; }
  .column-drop-copy { display: none !important; }
  .column-body { overflow: visible; padding: 0; }
  .task-card { border-left-width: 3px; padding: 16px; margin-bottom: 10px; border-radius: 12px; }
  .drag-handle { display: none; }
  .task-top { padding-left: 0; }
  .card-top-actions button { width: 34px; height: 34px; opacity: 1; }
  .card-top-actions button svg { width: 15px; height: 15px; }
  .task-top h3 { font-size: 17px; line-height: 1.35; }
  .client-line { min-height: 24px; font-size: 13.5px; }
  .client-line svg { width: 16px; height: 16px; }
  .card-bottom { min-height: 36px; margin-top: 12px; padding-top: 11px; }
  .avatar-stack .avatar { width: 29px; height: 29px; font-size: 9px; }
  .task-date { font-size: 12px; }
  .task-date svg { width: 14px; height: 14px; }
  .created-line { margin-top: 9px; font-size: 11.5px; }
  .list-view { padding: 8px 14px 14px; overflow-x: hidden; }
  .list-status-filter { min-height: 40px; justify-content: flex-start; margin-bottom: 8px; border: 0; padding: 0; background: transparent; }
  .list-status-filter > span, .list-status-filter > #list-status-buttons { display: none; }
  .list-status-mobile { display: block; width: min(225px, 72vw); overflow: visible; }
  .list-status-trigger { width: 100%; height: 40px; justify-content: start; border: 1px solid #dbe3e6; border-radius: 10px; padding: 0 11px; background: #fff; color: #42515e; box-shadow: 0 1px 2px rgba(30,43,53,.04); font-size: 12.5px; }
  .list-status-trigger > i { flex: 0 0 auto; background: var(--status-color); }
  .list-status-trigger > span { flex: 1; overflow: hidden; text-overflow: ellipsis; text-align: left; }
  .list-status-menu { width: min(280px, calc(100vw - 28px)); max-height: 55vh; overflow-y: auto; }
  .list-status-menu button { min-height: 42px; font-size: 12px; }
  .list-panel { min-width: 0; border: 0; background: transparent; }
  .list-heading { display: none; }
  .task-row { min-height: 88px; grid-template-columns: minmax(0,1fr) 132px; grid-template-rows: auto auto; align-items: start; gap: 7px 10px; margin-bottom: 8px; border: 1px solid var(--line); border-left: 3px solid var(--status-color); border-radius: 10px; padding: 12px; }
  .task-row > .task-row-main { grid-column: 1; grid-row: 1; align-self: center; }
  .task-row > .row-client { grid-column: 1; grid-row: 2; align-self: start; }
  .task-row > .row-assignees { min-width: 132px; min-height: 31px; grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; }
  .task-row > .row-date { width: 132px; grid-column: 2; grid-row: 2; align-self: start; text-align: right; line-height: 1.35; }
  .task-row .row-assignees .avatar { margin-left: -7px; }
  .task-row > .status-pill { display: none; }
  .focus-view { padding: 8px 14px 16px; }
  .focus-grid { display: block; }
  .focus-primary { border: 0; background: transparent; }
  .focus-intro { min-height: 115px; padding: 18px; border: 1px solid var(--line); border-radius: 13px; }
  .focus-intro h2 { font-size: 21px; }
  .focus-score { display: none; }
  .focus-section { margin-top: 10px; padding: 17px 10px 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
  .focus-section + .focus-section { border-top: 1px solid var(--line); }
  .day-rail { display: none; }
  .detail-drawer { width: 100%; top: 8vh; border-radius: 18px 18px 0 0; transform: translateY(105%); }
  .detail-drawer.is-open { transform: translateY(0); }
  .drawer-scroll { padding: 20px 18px 34px; }
  .drawer-title-row h2 { font-size: 22px; }
  .drawer-status { font-size: 12.5px; }
  .drawer-actions button { min-height: 44px; font-size: 13px; }
  .context-line > div > span > small { font-size: 10.5px; }
  .context-line > div > span > strong { font-size: 13px; }
  .drawer-section h3 { font-size: 14px; }
  .drawer-section > p { font-size: 15px; }
  .drawer-meta dt { font-size: 11px; }
  .drawer-meta dd { min-height: 29px; font-size: 13px; }
  .meta-person .avatar { width: 29px; height: 29px; font-size: 9px; }
  .checklist-item { min-height: 45px; grid-template-columns: 29px minmax(0,1fr) 34px; }
  .checklist-toggle { width: 26px; height: 26px; }
  .checklist-item input, .checklist-add input { font-size: 16px; }
  .checklist-remove { width: 34px; height: 34px; opacity: 1; }
  .checklist-add { min-height: 47px; }
  .attachment-item { min-height: 56px; }
  .attachment-copy strong { font-size: 12px; }
  .attachment-copy small { font-size: 10.5px; }
  .attachment-actions a, .attachment-actions button { width: 38px; height: 38px; }
  .system-fields summary { min-height: 46px; font-size: 12px; }
  .system-fields dt { font-size: 10.5px; }
  .system-fields dd { font-size: 12px; }
  .comment-box { min-height: 47px; }
  .comment-box textarea { font-size: 16px; }
  .comment-box button { width: 36px; height: 36px; }
  .message strong { font-size: 12.5px; }
  .message small { font-size: 13px; }
  .message time { font-size: 10px; }
  .context-line { grid-template-columns: 1fr; }
  .context-line > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .mobile-nav { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; height: 72px; display: grid; grid-template-columns: repeat(6,1fr); align-items: center; padding: 5px 8px max(6px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255,255,255,.95); backdrop-filter: blur(18px); }
  .mobile-nav a, .mobile-more-button { height: 54px; display: grid; place-items: center; align-content: center; gap: 4px; border: 0; padding: 0; background: transparent; color: #7d8995; text-decoration: none; position: relative; cursor: pointer; font: inherit; font-size: 10.5px; font-weight: 700; }
  .mobile-nav a svg, .mobile-more-button svg { width: 22px; height: 22px; }
  .mobile-nav a.is-active, .mobile-more-button.is-active, .mobile-more-button[aria-expanded="true"] { color: var(--accent); }
  .mobile-nav a i { position: absolute; top: 3px; right: calc(50% - 17px); min-width: 15px; height: 15px; display: grid; place-items: center; border-radius: 10px; background: #cc6461; color: #fff; font-size: 8px; font-style: normal; }
  .mobile-more-layer { position: fixed; z-index: 145; inset: 0; display: block; visibility: hidden; pointer-events: none; }
  .mobile-more-layer.is-open { visibility: visible; pointer-events: auto; }
  .mobile-more-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(21,37,47,.24); opacity: 0; transition: opacity .18s ease; }
  .mobile-more-layer.is-open .mobile-more-backdrop { opacity: 1; }
  .mobile-more-sheet { position: absolute; right: 8px; bottom: calc(72px + env(safe-area-inset-bottom)); left: 8px; max-width: 430px; margin: 0 auto; border: 1px solid #dce4e7; border-radius: 18px; padding: 7px; background: #fff; box-shadow: 0 18px 55px rgba(23,40,51,.2); transform: translateY(18px) scale(.98); opacity: 0; transition: transform .18s ease, opacity .18s ease; }
  .mobile-more-layer.is-open .mobile-more-sheet { transform: translateY(0) scale(1); opacity: 1; }
  .mobile-more-sheet > header { min-height: 49px; display: flex; align-items: center; justify-content: space-between; padding: 4px 5px 5px 11px; border-bottom: 1px solid #edf1f3; }
  .mobile-more-sheet > header strong { font-size: 17px; }
  .mobile-more-sheet > header button { width: 39px; height: 39px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: #74818d; }
  .mobile-more-sheet > header svg { width: 19px; height: 19px; }
  .mobile-more-sheet nav { display: grid; gap: 2px; padding-top: 5px; }
  .mobile-more-sheet nav > button { min-height: 62px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 11px; border: 0; border-radius: 12px; padding: 8px 11px; background: transparent; color: var(--ink); text-align: left; }
  .mobile-more-sheet nav > button:hover, .mobile-more-sheet nav > button.is-active { background: #edf6f6; }
  .mobile-more-sheet nav > button > span { width: 40px; height: 40px; grid-row: 1 / span 2; display: grid; place-items: center; border-radius: 11px; background: #e7f2f2; color: var(--accent); }
  .mobile-more-sheet nav > button > span svg { width: 20px; height: 20px; }
  .mobile-more-sheet nav > button strong { align-self: end; font-size: 13px; }
  .mobile-more-sheet nav > button small { align-self: start; color: #8b97a1; font-size: 10.5px; }
  .mobile-more-sheet nav > button > svg { width: 17px; height: 17px; grid-column: 3; grid-row: 1 / span 2; color: #99a4ad; }
  .mobile-more-sheet nav > button > em { min-width: 24px; height: 24px; grid-column: 3; grid-row: 1 / span 2; display: grid; place-items: center; border-radius: 999px; padding: 0 7px; background: #e6eff1; color: #64747f; font-size: 10px; font-style: normal; font-weight: 800; }
  .undo-toast { left: 12px; right: 12px; bottom: 77px; min-width: 0; grid-template-columns: 30px 1fr auto; transform: translateY(calc(100% + 110px)); }
  .undo-toast.is-visible { transform: translateY(0); }
  .undo-toast > .icon-button { display: none; }
  .move-dialog, .postpone-dialog { position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: 88vh; margin: 0; border-radius: 18px 18px 0 0; overflow-y: auto; }
  .move-dialog form, .postpone-dialog form { padding: 18px 16px 24px; }
  .media-viewer-toolbar { grid-template-columns: minmax(0,1fr) auto; padding-inline: 10px; }
  .media-viewer-toolbar > span { display: none; }
  .media-viewer-stage { inset: 62px 8px 8px; }
  .media-viewer-menu { right: 42px; }
  .move-status-groups { grid-template-columns: 1fr; }
  .create-dialog, .result-dialog { position: fixed; inset: 0; width: 100%; height: var(--visual-viewport-height, 100dvh); max-width: none; max-height: none; margin: 0; border-radius: 0; }
  .create-dialog form, .result-dialog form { height: 100%; max-height: none; padding: 0 18px; overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 84px 92px; }
  .create-dialog .dialog-head, .result-dialog .dialog-head { position: sticky; z-index: 4; top: 0; margin: 0 -18px 12px; padding: max(16px, env(safe-area-inset-top)) 18px 14px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.98); }
  .dialog-head h2 { font-size: 23px; }
  .create-dialog label, .result-dialog label, .assignee-field legend { font-size: 13px; }
  .create-dialog input, .create-dialog textarea, .create-dialog select, .result-dialog textarea, .result-dialog input { min-height: 48px; font-size: 16px; }
  .create-dialog textarea, .result-dialog textarea { min-height: 116px; }
  .type-toggle { width: 100%; }
  .type-toggle button { width: 50%; height: 42px; font-size: 13px; }
  .assignee-options label > span { min-height: 52px; }
  .assignee-options label > span strong { font-size: 12.5px; }
  .form-error { font-size: 12.5px; }
  .create-dialog .dialog-foot, .result-dialog .dialog-foot { position: sticky; z-index: 4; bottom: 0; margin: 22px -18px 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255,255,255,.98); box-shadow: 0 -8px 22px rgba(35,50,63,.07); }
  .dialog-foot button { min-height: 46px; font-size: 14px; }
  .dialog-grid { grid-template-columns: 1fr; gap: 0; }
  .dialog-grid.three { grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .dialog-grid.three .deadline-field { grid-column: 1 / -1; }
  .form-field-heading { min-height: 31px; }
  .inline-create-button { width: 31px; height: 31px; border-radius: 9px; }
  .combo-input-wrap, .multi-combo-control, .deadline-trigger, .custom-select-trigger { min-height: 48px; }
  .combo-suggestions { position: absolute; z-index: 80; top: calc(100% + 4px); right: 0; left: 0; max-height: min(46vh, 360px); border-radius: 14px; padding: 7px; }
  .combo-suggestions > button { min-height: 54px; }
  .combo-suggestions strong { font-size: 14px; }
  .combo-suggestions small { font-size: 11px; }
  .contact-chip { min-height: 33px; font-size: 12px; }
  .field-help { font-size: 11px; }
  .deadline-popover { position: fixed; z-index: 80; top: auto; right: 12px; bottom: calc(82px + env(safe-area-inset-bottom)); left: 12px; width: auto; max-height: calc(var(--visual-viewport-height, 100dvh) - 105px); transform: none; overflow-y: auto; border-radius: 16px; padding: 14px; }
  .deadline-head strong { font-size: 14px; }
  .deadline-weekdays { font-size: 10px; }
  .deadline-days button { min-height: 40px; font-size: 13px; }
  .create-dialog .deadline-time > input, .result-dialog .deadline-time > input { min-height: 46px; }
  .deadline-time button, .deadline-actions button { min-height: 39px; font-size: 11px; }
  .custom-select-menu { position: fixed; z-index: 80; top: auto; right: 12px; bottom: calc(82px + env(safe-area-inset-bottom)); left: 12px; width: auto; max-height: min(62vh, 440px); border-radius: 15px; padding: 7px; }
  .custom-select-menu button { min-height: 49px; padding-inline: 12px; font-size: 13px; }
  .assignee-options { grid-template-columns: 1fr 1fr; }
  .work-editor-row { grid-template-columns: 28px minmax(0,1fr) 64px 64px; gap: 7px; }
  .work-editor-row > .work-row-amount { grid-column: 2 / -1; padding-top: 5px; border-top: 1px solid #edf1f3; }
  .work-total { gap: 10px; }
  .work-editor-head h3 { font-size: 13px; }
  .work-editor-head p { font-size: 11px; }
  .work-editor-row > span strong { font-size: 12.5px; }
  .result-date-grid { grid-template-columns: 1fr; gap: 0; }
  .result-factual-range small { font-size: 10.5px; }
  .result-factual-range strong { font-size: 12px; }
  .work-editor-row > span small, .work-editor-row label { font-size: 10.5px; }
  .top-profile-button { width: 34px; height: 34px; }
  .account-menu { width: min(260px, calc(100vw - 24px)); }
  .settings-panel { padding: max(20px, env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom)); }
  .login-layer { align-items: stretch; padding: 0; background: #fff; }
  .login-card { width: 100%; min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding: max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom)); border: 0; border-radius: 0; box-shadow: none; }
  .login-copy h1 { font-size: 30px; }
}

@media (max-width: 760px) {
  .workspace.is-calendar .page-head { padding-bottom: 11px; }
  .calendar-view { padding: 0 10px 10px; }
  .calendar-shell { border-radius: 14px; }
  .calendar-toolbar { min-height: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px; }
  .calendar-period-controls { min-width: 0; grid-column: 1 / -1; flex-wrap: wrap; }
  .calendar-section-switch { width: 100%; margin: 0 0 2px; }
  .calendar-section-switch button { flex: 1; justify-content: center; height: 38px; font-size: 12px; }
  .calendar-period-controls h2 { min-width: 0; flex: 1; margin-left: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
  .calendar-today { height: 39px; padding: 0 10px; font-size: 12px; }
  .calendar-arrows button { width: 38px; height: 39px; }
  .calendar-toolbar-actions { grid-column: 1 / -1; justify-content: space-between; }
  .calendar-scope-switch button { min-width: 67px; height: 35px; font-size: 12px; }
  .calendar-view-switch { display: none; }
  .calendar-add { width: auto; height: 39px; padding: 0 12px; }
  .calendar-add span { display: inline; font-size: 12px; }
  .calendar-people { min-height: 55px; padding: 7px 9px; }
  .calendar-people button { min-width: 68px; height: 40px; padding-inline: 7px; }
  .calendar-people button strong { font-size: 11px; }
  .calendar-mobile-days { flex: 0 0 auto; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); padding: 7px 6px; border-bottom: 1px solid var(--line); background: #fbfcfc; }
  .calendar-mobile-days button { position: relative; min-width: 0; min-height: 58px; display: grid; place-items: center; align-content: center; gap: 2px; border: 0; border-radius: 10px; background: transparent; color: #74818e; cursor: pointer; }
  .calendar-mobile-days button small { overflow: hidden; width: 100%; text-overflow: clip; text-transform: uppercase; font-size: 8px; font-weight: 850; }
  .calendar-mobile-days button strong { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-size: 13px; }
  .calendar-mobile-days button i { position: absolute; right: calc(50% - 18px); bottom: 5px; min-width: 13px; height: 13px; display: grid; place-items: center; border-radius: 8px; background: #dce5e9; color: #667683; font-size: 7px; font-style: normal; font-weight: 850; }
  .calendar-mobile-days button i:empty { display: none; }
  .calendar-mobile-days button.is-selected { background: #e9f4f4; color: var(--accent-dark); }
  .calendar-mobile-days button.is-today strong { background: var(--accent); color: #fff; }
  .calendar-layout { display: block; min-height: 0; overflow: hidden; }
  .calendar-stage { display: none; }
  .calendar-day-panel { height: 100%; border: 0; background: #fff; }
  .calendar-day-panel > header { padding: 16px 15px 12px; }
  .calendar-day-panel h3 { font-size: 22px; }
  .calendar-day-panel header > span { font-size: 11px; }
  .calendar-day-list { gap: 9px; padding: 11px 10px; }
  .calendar-item { min-height: 66px; grid-template-columns: 36px minmax(0,1fr); gap: 10px; border-radius: 12px; padding: 9px 10px; }
  .calendar-item-icon { width: 34px; height: 34px; border-radius: 10px; }
  .calendar-item-icon svg { width: 17px; height: 17px; }
  .calendar-item strong { font-size: 13px; }
  .calendar-item small { font-size: 11px; }
  .calendar-day-add { min-height: 47px; margin: 0 10px 10px; border-radius: 11px; font-size: 13px; }
  .calendar-day-empty { min-height: 190px; }

  .calendar-dialog { overflow: hidden; }
  .calendar-dialog form { max-height: none; overflow-y: auto; }
  .calendar-datetime-grid { grid-template-columns: 1fr; gap: 11px; }
  .calendar-datetime-trigger { min-height: 49px; }
  .calendar-datetime-trigger span { font-size: 14px; }
  .calendar-date-popover { position: fixed; z-index: 90; top: auto; right: 12px; bottom: calc(82px + env(safe-area-inset-bottom)); left: 12px; width: auto; max-height: calc(var(--visual-viewport-height, 100dvh) - 104px); overflow-y: auto; border-radius: 16px; padding: 14px; }
  .calendar-picker-time { grid-template-columns: auto 82px; gap: 8px; }
  .calendar-picker-time > div { grid-column: 1 / -1; }
  .calendar-picker-time > div button { min-height: 40px; font-size: 12px; }
  .calendar-status-options, .calendar-reminder-options { display: grid; grid-template-columns: 1fr 1fr; }
  .calendar-status-options button, .calendar-reminder-options button { min-height: 43px; justify-content: center; font-size: 12px; }
  .calendar-status-options button:first-child { grid-column: 1 / -1; }
  .calendar-color-options { gap: 9px; }
  .calendar-color-options button { width: 34px; height: 34px; }
  .calendar-color-options button i { width: 22px; height: 22px; }
  .calendar-dialog-foot { grid-template-columns: 1fr 1fr; }
  .calendar-dialog-foot > span { display: none; }
  .calendar-dialog-foot .calendar-delete { grid-column: 1 / -1; order: 3; }
  .payment-calendar-pane { overflow-y: auto; }
  .payment-summary { grid-template-columns: 1fr 1fr; gap: 7px; padding: 9px 9px 8px; }
  .payment-summary-card { min-height: 66px; gap: 8px; padding: 9px; }
  .payment-summary-card > span { width: 32px; height: 32px; }
  .payment-summary-card strong { font-size: 15px; }
  .payment-summary-card small { white-space: normal; font-size: 8.5px; line-height: 1.25; }
  .payment-controls { position: sticky; z-index: 4; top: 0; display: grid; grid-template-columns: 1fr; gap: 7px; padding: 8px 9px; background: #f7f9fa; }
  .payment-search { width: 100%; height: 43px; }
  .payment-search input { font-size: 13px; }
  .payment-status-filter { width: 100%; }
  .payment-status-filter button { height: 35px; padding-inline: 11px; font-size: 10.5px; }
  .payment-view-switch { display: none; }
  .payment-layout { display: block; }
  .payment-main { overflow: visible; padding: 9px 9px 24px; }
  .payment-history { display: none; }
  .payment-card-main { min-height: 76px; grid-template-columns: 43px minmax(0,1fr); gap: 10px; padding: 9px 10px; }
  .payment-card-copy strong { font-size: 13px; }
  .payment-card-copy small { white-space: normal; font-size: 10.5px; line-height: 1.3; }
  .payment-card-amount { grid-column: 2; padding: 0; font-size: 12.5px; }
  .payment-paid { min-width: 46px; padding: 0 10px; }
  .payment-paid span { display: none; }
  .payment-paid svg { width: 18px; height: 18px; }
  .payment-dialog { overflow: hidden; }
  .payment-dialog form { max-height: none; overflow-y: auto; }
  .payment-form-grid { grid-template-columns: 1fr; }
  .payment-date-popover { position: fixed; z-index: 90; top: auto; right: 12px; bottom: calc(82px + env(safe-area-inset-bottom)); left: 12px; width: auto; max-height: calc(var(--visual-viewport-height, 100dvh) - 104px); overflow-y: auto; }
  .payment-recurrence-options { grid-template-columns: 1fr; }
  .payment-recurrence-options button { min-height: 44px; font-size: 12px; }
}

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

@media (min-width: 761px) {
  body.compact-ui .app-shell { display: block; min-height: 100vh; }
  body.compact-ui .sidebar { width: 100%; height: 56px; flex-direction: row; align-items: center; padding: 7px 12px; position: relative; z-index: 80; }
  body.compact-ui .brand { flex: 0 0 auto; gap: 8px; margin-right: 6px; padding: 0 12px 0 0; border-right: 1px solid rgba(255,255,255,.09); white-space: nowrap; }
  body.compact-ui .brand > img { width: 32px; height: 32px; }
  body.compact-ui .main-nav { min-width: 0; flex: 1; display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; }
  body.compact-ui .main-nav::-webkit-scrollbar { display: none; }
  body.compact-ui .main-nav a { flex: 0 0 auto; min-height: 40px; grid-template-columns: 18px auto auto; gap: 6px; padding: 0 9px; white-space: nowrap; }
  body.compact-ui .main-nav a svg { width: 17px; height: 17px; }
  body.compact-ui .main-nav a.is-active { box-shadow: inset 0 -3px #55b8bc; }
  body.compact-ui .sidebar-foot { flex: 0 0 auto; margin: 0 0 0 8px; padding: 0 0 0 8px; border-top: 0; border-left: 1px solid rgba(255,255,255,.09); }
  body.compact-ui .profile-mini { width: auto; min-height: 40px; padding: 4px 7px; }
  body.compact-ui .top-profile-button { display: none; }
  body.compact-ui .workspace { height: calc(100vh - 56px); }
  body.compact-ui .topbar { min-height: 56px; padding: 7px 22px; }
  body.compact-ui .global-search { height: 38px; }
  body.compact-ui .create-button { height: 38px; }
  body.compact-ui .page-head { padding: 14px 22px 11px; }
  body.compact-ui .page-head h1 { font-size: clamp(22px,1.8vw,27px); }
  body.compact-ui .page-subtitle { margin-top: 4px; }
  body.compact-ui .control-bar { min-height: 58px; margin-inline: 22px; padding: 5px; }
  body.compact-ui .phase-switcher > button { min-width: 184px; height: 46px; }
  body.compact-ui .phase-switcher .phase-icon { width: 29px; height: 29px; }
  body.compact-ui .quick-views button, body.compact-ui .filters button { height: 36px; }
  body.compact-ui .applied-filters { margin-inline: 22px; }
  body.compact-ui .board-view { padding: 9px 22px 16px; }
  body.compact-ui .task-card { margin-bottom: 7px; padding: 10px 11px; }
  body.compact-ui .card-bottom { margin-top: 8px; padding-top: 8px; }
  body.compact-ui .list-view, body.compact-ui .focus-view { padding: 10px 22px 18px; }
  body.compact-ui .home-view { padding: 0 22px 18px; }
  body.compact-ui .home-welcome { min-height: 112px; padding-block: 16px; }
  body.compact-ui .home-pulse > button { min-height: 64px; }
  body.compact-ui .home-layout { margin-top: 12px; gap: 12px; }
  body.compact-ui .home-flow, body.compact-ui .home-rail { gap: 12px; }
  body.compact-ui .home-section-head { min-height: 58px; }
  body.compact-ui .home-resume-card { min-height: 148px; padding-block: 16px; }
  body.compact-ui .home-change-row { min-height: 59px; }
  body.compact-ui .task-row { min-height: 55px; padding-block: 6px; }
  body.compact-ui .focus-intro { min-height: 108px; padding: 17px 22px; }
  body.compact-ui .focus-section { padding-top: 14px; }
  body.compact-ui .focus-task { min-height: 56px; }
  body.compact-ui .chat-list-head { min-height: 64px; padding: 12px 15px 7px; }
  body.compact-ui .chat-list-search { min-height: 39px; }
  body.compact-ui .chat-dialog { min-height: 61px; }
  body.compact-ui .chat-conversation-head { min-height: 57px; }
  body.compact-ui .chat-messages { padding-top: 9px; }
  body.compact-ui .calendar-view, body.compact-ui .clients-view, body.compact-ui .calls-view { padding-inline: 22px; padding-bottom: 18px; }
  body.compact-ui .calendar-toolbar, body.compact-ui .clients-toolbar, body.compact-ui .calls-toolbar { min-height: 55px; padding-block: 6px; }
  body.compact-ui .calendar-people { min-height: 48px; }
  body.compact-ui .client-list-row { min-height: 57px; padding-block: 6px; }
  body.compact-ui .client-detail-head { padding-top: 16px; padding-bottom: 13px; }
  body.compact-ui .calls-phone-layout { padding: 12px; }
  body.compact-ui .phone-status-card { min-height: 70px; padding: 10px 13px; }
  body.compact-ui .phone-person { min-height: 53px; }
  body.compact-ui .call-history-card { padding-block: 8px; }
  body.compact-ui .payment-summary-card { min-height: 70px; }
  body.compact-ui .payment-controls { min-height: 54px; }
  body.compact-ui .detail-drawer { top: 10px; bottom: 10px; }
  body.compact-ui .drawer-scroll { padding-top: 18px; }
  body.compact-ui .drawer-section { padding-block: 15px; }
}