.sidebar-board-popover button.sidebar-board-danger { color: #b85b69; border-top: 1px solid #edf0f5; margin-top: 4px; }
.sidebar-board-popover button.sidebar-board-danger:hover { color: #a53f50; background: #fff0f2; }
html[data-theme="dark"] .sidebar-board-popover { border-color: #3a5273; background: #16263f; box-shadow: 0 18px 42px rgba(0, 0, 0, .42); }
html[data-theme="dark"] .sidebar-board-popover button { color: #c7d5e8; }
html[data-theme="dark"] .sidebar-board-popover button:hover { color: #fff; background: #233c61; }
html[data-theme="dark"] .sidebar-board-popover button.sidebar-board-danger { color: #ff9aa9; border-color: #304764; }
html[data-theme="dark"] .sidebar-board-popover button.sidebar-board-danger:hover { color: #ffd7dd; background: #5b293d; }
.column-sort-trigger { width: 18px; height: 18px; padding: 0; color: #8a98ad; border: 0; border-radius: 4px; background: transparent; font-size: 12px; line-height: 18px; opacity: .7; }
.column-sort-trigger:hover, .column-sort-trigger.active { color: #4f6fe5; background: #eef1ff; opacity: 1; }

:root {
  --navy: #081326;
  --navy-2: #0e1d36;
  --ink: #12213a;
  --muted: #72809a;
  --line: #e6ebf3;
  --surface: #ffffff;
  --page: #f6f8fc;
  --blue: #2574f5;
  --cyan: #16b9d4;
  --violet: #7757f7;
  --green: #1ca77a;
  --amber: #e99145;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--page);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--page); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { display: flex; min-height: 100vh; }
.auth-shell[hidden] { display: none !important; }
.app-shell[hidden] { display: none; }
.auth-shell { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr); min-height: 100vh; background: #f7f9fd; }
.auth-showcase { display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: 42px clamp(30px, 7vw, 110px); color: #fff; background: radial-gradient(circle at 18% 15%, rgba(70, 129, 255, .24), transparent 31%), radial-gradient(circle at 85% 80%, rgba(122, 80, 243, .23), transparent 33%), #081326; overflow: hidden; }
.auth-logo-card { width: min(330px, 100%); padding: 12px 15px; border-radius: 17px; background: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, .16); }.auth-logo-card img { display: block; width: 100%; height: auto; }.auth-showcase-copy { max-width: 540px; margin: auto 0; }.auth-showcase-copy .eyebrow { color: #70c8ff; }.auth-showcase-copy h1 { margin-bottom: 18px; color: #fff; font-size: clamp(38px, 5vw, 70px); line-height: .98; }.auth-showcase-copy > p:last-child { max-width: 420px; margin-bottom: 0; color: #9aaccc; font-size: 16px; line-height: 1.6; }.auth-flow-preview { display: flex; align-items: center; gap: 15px; max-width: 540px; padding: 16px; border: 1px solid rgba(148, 181, 231, .22); border-radius: 15px; background: rgba(17, 38, 68, .68); }.flow-node { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; font-size: 10px; }.flow-node span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; }.flow-node.trigger { color: #b5c9fc; background: #1b3470; }.flow-node.trigger span { color: #77a4ff; background: #254e9d; }.flow-node.action { color: #aeece6; background: #123d4d; }.flow-node.action span { color: #66e2d2; background: #165e6d; }.flow-line { flex: 1; height: 2px; background: #31588c; position: relative; }.flow-line i { position: absolute; left: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #65c8ff; box-shadow: 0 0 14px #65c8ff; animation: flow-light 2.4s infinite; }@keyframes flow-light { 0% { left: 0; opacity: 0; } 15%, 80% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }.auth-footnote { color: #657a9f; font-size: 10px; letter-spacing: .04em; }.auth-card-wrap { display: grid; place-items: center; padding: 32px; }.auth-card { width: min(430px, 100%); padding: clamp(25px, 4vw, 45px); border: 1px solid #e3e8f1; border-radius: 18px; background: #fff; box-shadow: 0 20px 55px rgba(34, 52, 84, .08); }.auth-card h2 { margin: 0 0 7px; color: #152844; font-size: 28px; letter-spacing: -.045em; }.auth-subtitle { margin: 0 0 25px; color: #8190a5; font-size: 12px; }.auth-form { display: grid; gap: 15px; }.auth-form label { display: grid; gap: 7px; color: #4d5d76; font-size: 10px; font-weight: 800; }.auth-form input { width: 100%; padding: 12px 13px; color: #203451; border: 1px solid #dee5ef; border-radius: 8px; outline: 0; background: #fbfcfe; font-size: 12px; }.auth-form input:focus { border-color: #6d8cf0; box-shadow: 0 0 0 3px #edf0ff; }.password-field { position: relative; }.password-field input { padding-right: 58px; }.password-toggle { position: absolute; top: 50%; right: 8px; padding: 4px; color: #6980c5; border: 0; background: transparent; font-size: 10px; transform: translateY(-50%); }.auth-submit { width: 100%; margin-top: 5px; padding: 12px 15px; }.auth-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }.auth-links.single { justify-content: center; }.auth-links button { padding: 0; color: #5a70c4; border: 0; background: transparent; font-size: 10px; }.auth-message { min-height: 18px; margin-top: 18px; color: #c05e50; font-size: 10px; line-height: 1.45; }.auth-message.success { color: #228a6a; }.auth-message.dev-token { padding: 10px; color: #7a5d25; border-radius: 8px; background: #fff6df; }.admin-panel { margin-bottom: 14px; }.admin-badge { padding: 6px 9px; color: #5d58c8; border-radius: 999px; background: #efedff; font-size: 9px; font-weight: 800; }.admin-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 22px 20px; }.admin-summary > div { display: grid; gap: 4px; padding: 14px; border-radius: 10px; background: #f7f9fd; }.admin-summary span { color: #8794a8; font-size: 9px; }.admin-summary strong { color: #1d3355; font-size: 22px; }.admin-table-wrap { overflow-x: auto; border-top: 1px solid var(--line); }.admin-table { width: 100%; min-width: 700px; border-collapse: collapse; }.admin-table th { padding: 11px 20px; color: #9aa6b8; border-bottom: 1px solid var(--line); font-size: 9px; letter-spacing: .08em; text-align: left; text-transform: uppercase; }.admin-table td { padding: 12px 20px; color: #667690; border-bottom: 1px solid #edf0f5; font-size: 10px; }.admin-table tr:last-child td { border-bottom: 0; }.admin-user { display: grid; gap: 3px; }.admin-user strong { color: #253a59; font-size: 11px; }.admin-user small { color: #9aa6b6; font-size: 9px; }.admin-role { color: #5c6fd0; font-size: 9px; font-weight: 700; }.admin-status { padding: 4px 7px; border-radius: 5px; font-size: 9px; font-weight: 700; }.admin-status.active { color: #208961; background: #e4f8ef; }.admin-status.suspended { color: #bb6d49; background: #fff0e9; }.admin-action { padding: 5px 8px; color: #6275c6; border: 1px solid #e0e6f0; border-radius: 6px; background: #fff; font-size: 9px; }
.sidebar { width: 255px; flex: 0 0 255px; display: flex; flex-direction: column; padding: 18px 14px 14px; color: #b5c1d5; background: var(--navy); }
.sidebar-brand { height: 64px; display: flex; align-items: center; padding: 4px 10px; margin-bottom: 15px; border-radius: 13px; background: #fff; overflow: hidden; }
.sidebar-brand img { display: block; width: 100%; height: auto; object-fit: contain; }
.workspace-switcher { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; color: #e8eefb; background: #10213c; border: 1px solid #203351; border-radius: 11px; text-align: left; }
.workspace-mark { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .02em; background: linear-gradient(135deg, #268cff, #7957f9); }
.workspace-copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
.workspace-copy strong { color: #f4f7ff; font-size: 12px; font-weight: 700; }
.workspace-copy small { color: #7f91ae; font-size: 11px; }
.chevron { color: #6f86a6; font-size: 18px; line-height: 1; }
.nav-groups { margin-top: 28px; display: grid; gap: 30px; }
.nav-group { display: grid; gap: 4px; }
.nav-label { padding: 0 12px; margin: 0 0 8px; color: #617493; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.nav-link { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; color: #a5b2c7; background: transparent; border: 0; border-radius: 9px; font-size: 13px; text-align: left; transition: .18s ease; }
.nav-link:hover { color: #f4f7ff; background: #122744; }
.nav-link.active { color: #fff; background: linear-gradient(90deg, #1d57a4, #18355e); box-shadow: inset 3px 0 #48bdff; }
.nav-icon { width: 16px; color: #7d91b1; font-size: 16px; text-align: center; }
.nav-link.active .nav-icon { color: #6dc9ff; }
.nav-count { margin-left: auto; padding: 2px 7px; color: #8ea2c1; border-radius: 999px; background: #172a47; font-size: 10px; }
.nav-count.accent { color: #9eb1ff; background: #29245b; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 16px; }
.admin-card { display: flex; align-items: center; gap: 9px; padding: 12px 10px; border: 1px solid #263c5c; border-radius: 12px; background: linear-gradient(135deg, #132c4b, #11213b); }
.admin-card-icon { display: grid; place-items: center; width: 29px; height: 29px; color: #74d4ff; border-radius: 8px; background: #183e67; }
.admin-card div:nth-child(2) { display: grid; gap: 3px; flex: 1; }
.admin-card strong { color: #e8f4ff; font-size: 11px; }
.admin-card small { color: #7e9aba; font-size: 9px; }
.admin-card > span { color: #6e9ac6; font-size: 18px; }
.profile-row { display: flex; align-items: center; gap: 9px; padding: 6px 5px; }
.profile-copy { display: grid; gap: 2px; flex: 1; }
.profile-copy strong { color: #e5ebf7; font-size: 12px; }
.profile-copy small { color: #71839f; font-size: 10px; }
.main-content { flex: 1; min-width: 0; }
.topbar { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 38px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .86); }
.crumbs { display: flex; align-items: center; gap: 10px; color: #8794a9; font-size: 12px; }
.crumbs strong { color: #263650; font-weight: 700; }
.crumb-separator { color: #c2cada; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.automation-top-button { display: flex; align-items: center; gap: 6px; padding: 8px 10px; color: #596bbf; border: 1px solid #dfe5f4; border-radius: 8px; background: #f7f8ff; font-size: 10px; font-weight: 800; }
.automation-top-button span { display: grid; place-items: center; width: 17px; height: 17px; color: #fff; border-radius: 5px; background: linear-gradient(135deg, #4b8cf4, #7654eb); font-size: 13px; line-height: 1; }
.automation-top-button b { min-width: 16px; padding: 2px 4px; color: #6a62c8; border-radius: 999px; background: #ebeaff; font-size: 8px; text-align: center; }
.automation-top-button:hover, .automation-top-button.active { color: #3e52a1; border-color: #becbfa; background: #edf0ff; }
.search-box { display: flex; align-items: center; gap: 8px; width: 230px; padding: 8px 10px; color: #9daabd; border: 1px solid #e1e7f0; border-radius: 9px; background: #fbfcfe; }
.search-box input { flex: 1; min-width: 0; color: #30405a; border: 0; outline: 0; background: transparent; font-size: 11px; }
.search-box input::placeholder { color: #a1adbf; }
kbd { padding: 2px 5px; color: #99a6b8; border: 1px solid #e1e7ef; border-radius: 4px; background: #fff; font-size: 9px; }
.invite-button, .primary-button, .outline-button, .tool-button { border: 0; border-radius: 8px; font-size: 11px; font-weight: 700; transition: .18s ease; }
.invite-button { padding: 9px 12px; color: #3e52a1; background: #edf0ff; }
.invite-button:hover, .outline-button:hover { background: #e4eaff; }
.invite-button span, .primary-button span { font-size: 15px; vertical-align: -1px; }
.notification-button, .icon-button { display: grid; place-items: center; width: 31px; height: 31px; padding: 0; color: #8c9ab0; border: 0; background: transparent; position: relative; }
.notification-button i { position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; border: 1px solid #fff; border-radius: 50%; background: #ed6c7b; }
.avatar { display: inline-grid; flex: 0 0 auto; place-items: center; width: 29px; height: 29px; color: #fff; border: 2px solid #fff; border-radius: 50%; font-size: 9px; font-weight: 800; }
.avatar.large { width: 34px; height: 34px; font-size: 10px; }
.avatar.small { width: 24px; height: 24px; border-width: 1px; font-size: 8px; }
.avatar-jacob { background: linear-gradient(135deg, #273e88, #655af1); }
.avatar-am { background: linear-gradient(135deg, #f68a6f, #c94871); }
.avatar-ts { background: linear-gradient(135deg, #29b5ad, #16778e); }
.avatar-nk { background: linear-gradient(135deg, #f0ae44, #df7041); }
.content-wrap { max-width: 1500px; margin: 0 auto; padding: 34px 38px 56px; }.welcome-row[hidden], .stats-grid[hidden], .lower-grid[hidden] { display: none !important; }
.welcome-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 27px; }
.eyebrow { margin: 0 0 7px; color: #8d9bb0; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 6px; color: #152540; font-size: clamp(26px, 3vw, 34px); letter-spacing: -.045em; line-height: 1.05; }
h1 span { color: #7a68f3; font-size: 20px; vertical-align: 6px; }
.welcome-copy { margin-bottom: 0; color: #7b899d; font-size: 13px; }
.primary-button { padding: 11px 15px; color: #fff; background: linear-gradient(135deg, #316ff3, #624fe7); box-shadow: 0 8px 18px rgba(66, 85, 224, .2); }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 11px 22px rgba(66, 85, 224, .28); }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat-card { display: flex; align-items: center; gap: 12px; min-height: 110px; padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: 0 8px 25px rgba(43, 61, 93, .035); }
.stat-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; font-size: 17px; }
.stat-icon.blue { color: #4a80ec; background: #edf3ff; }.stat-icon.violet { color: #7964ed; background: #f1edff; }.stat-icon.cyan { color: #1aa6c2; background: #e8fbff; }.stat-icon.amber { color: #db8a39; background: #fff5e8; }
.stat-card > div:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.stat-card span { color: #8290a5; font-size: 10px; white-space: nowrap; }.stat-card strong { color: #172945; font-size: 25px; letter-spacing: -.04em; }.stat-card small { font-size: 9px; white-space: nowrap; }.trend { color: #8a98a9; }.trend.up { color: #22a57e; }
.mini-bars { display: flex; align-items: end; gap: 2px; height: 28px; margin-left: auto; opacity: .75; }.mini-bars i { display: block; width: 4px; border-radius: 3px 3px 0 0; background: currentColor; }.blue-bars { color: #7aa2f3; }.blue-bars i:nth-child(1) { height: 9px; }.blue-bars i:nth-child(2) { height: 15px; }.blue-bars i:nth-child(3) { height: 11px; }.blue-bars i:nth-child(4) { height: 21px; }.blue-bars i:nth-child(5) { height: 16px; }.blue-bars i:nth-child(6) { height: 24px; }.blue-bars i:nth-child(7) { height: 26px; }.violet-bars { color: #a495f5; }.violet-bars i:nth-child(1) { height: 22px; }.violet-bars i:nth-child(2) { height: 16px; }.violet-bars i:nth-child(3) { height: 18px; }.violet-bars i:nth-child(4) { height: 10px; }.violet-bars i:nth-child(5) { height: 15px; }.violet-bars i:nth-child(6) { height: 21px; }.violet-bars i:nth-child(7) { height: 26px; }.cyan-bars { color: #6ccbdc; }.cyan-bars i:nth-child(1) { height: 12px; }.cyan-bars i:nth-child(2) { height: 18px; }.cyan-bars i:nth-child(3) { height: 15px; }.cyan-bars i:nth-child(4) { height: 24px; }.cyan-bars i:nth-child(5) { height: 18px; }.cyan-bars i:nth-child(6) { height: 22px; }.cyan-bars i:nth-child(7) { height: 25px; }
.avatar-stack { display: flex; align-items: center; margin-left: auto; }.avatar-stack span, .avatar-stack b { display: grid; place-items: center; width: 23px; height: 23px; margin-left: -5px; color: #fff; border: 2px solid #fff; border-radius: 50%; background: #4d76e9; font-size: 7px; }.avatar-stack span:nth-child(2) { background: #41aeb2; }.avatar-stack span:nth-child(3) { background: #e49451; }.avatar-stack b { color: #60708a; background: #edf0f5; font-size: 7px; }
.panel { border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 9px 25px rgba(43, 61, 93, .035); overflow: hidden; }.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; }.panel-heading h2 { margin-bottom: 4px; color: #182a46; font-size: 15px; letter-spacing: -.02em; }.panel-heading p { margin-bottom: 0; color: #8b98ab; font-size: 10px; }.board-heading { padding-bottom: 16px; }.heading-title { display: flex; align-items: center; gap: 11px; }.board-symbol { display: grid; place-items: center; width: 32px; height: 32px; color: #5e6ff0; border-radius: 9px; background: #eff0ff; }.heading-actions { display: flex; align-items: center; gap: 7px; }.outline-button { padding: 8px 11px; color: #5b6b83; border: 1px solid #e1e7ef; background: #fff; }.icon-button.quiet { color: #6f819e; }
.section-view { margin-bottom: 14px; }.section-view .panel-heading { border-bottom: 1px solid var(--line); }.section-content { padding: 20px 22px 24px; }.section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.section-card { display: grid; gap: 12px; padding: 17px; border: 1px solid #e5eaf2; border-radius: 11px; background: linear-gradient(145deg, #fff, #fbfcff); }.section-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.section-card h3 { margin: 0 0 4px; color: #203452; font-size: 13px; }.section-card p { margin: 0; color: #8290a5; font-size: 10px; line-height: 1.5; }.section-card-meta { display: flex; flex-wrap: wrap; gap: 7px; color: #708099; font-size: 10px; }.section-status { padding: 4px 7px; color: #208961; border-radius: 5px; background: #e4f8ef; font-size: 9px; font-weight: 800; }.section-status.inactive { color: #9b6b42; background: #fff1df; }.section-list { display: grid; }.section-list-row { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid #edf0f5; }.section-list-row:first-child { border-top: 0; }.section-list-row > div:nth-child(2) { flex: 1; min-width: 0; }.section-list-row strong { display: block; color: #304561; font-size: 11px; }.section-list-row small { display: block; margin-top: 3px; color: #8a98aa; font-size: 9px; }.section-list-row .outline-button { padding: 6px 9px; font-size: 9px; }.section-empty, .empty-state { padding: 24px; color: #8a98aa; font-size: 11px; text-align: center; }.report-metric { display: grid; gap: 4px; padding: 16px; border-radius: 10px; background: #f7f9fd; }.report-metric span { color: #8794a8; font-size: 10px; }.report-metric strong { color: #1d3355; font-size: 23px; }.report-bar { height: 7px; overflow: hidden; border-radius: 99px; background: #e9eef5; }.report-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4b9af4, #6f5ced); }.automation-flow { display: flex; align-items: center; gap: 8px; padding: 10px; color: #65758e; border: 1px dashed #ccd7e7; border-radius: 8px; background: #fbfcff; font-size: 9px; }.automation-flow i { color: #6e72e9; font-style: normal; }.automation-flow b { color: #40548b; }
.board-tabs { display: flex; align-items: center; gap: 21px; padding: 0 22px; border-bottom: 1px solid var(--line); }.board-tab, .add-view { padding: 11px 0 12px; color: #8a98ac; border: 0; border-bottom: 2px solid transparent; background: transparent; font-size: 11px; }.board-tab.active { color: #3f5fc2; border-bottom-color: #4b71ef; font-weight: 800; }.add-view { color: #5b8cde; }.board-tools { display: flex; gap: 8px; margin-left: auto; }.tool-button { padding: 6px 9px; color: #718097; border: 1px solid #e3e8f0; background: #fff; font-size: 10px; font-weight: 600; }.tool-button span { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 4px; color: #5b67d7; border-radius: 50%; background: #eef0ff; font-size: 8px; }
.table-wrap { overflow-x: auto; }.work-table { width: 100%; min-width: 850px; border-collapse: collapse; }.work-table th { padding: 12px 14px; color: #9aa6b8; border-bottom: 1px solid var(--line); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-align: left; text-transform: uppercase; }.work-table td { padding: 13px 14px; color: #728098; border-bottom: 1px solid #edf0f5; font-size: 10px; white-space: nowrap; }.work-table tr:last-child td { border-bottom: 0; }.work-table tr:hover td { background: #fbfcff; }.item-col { width: 31%; }.item-cell { display: flex; align-items: center; gap: 8px; color: #203452 !important; }.item-cell strong { font-size: 11px; font-weight: 700; }.drag-handle { color: #b8c2d0; font-size: 15px; }.item-dot { width: 7px; height: 7px; border-radius: 50%; }.item-dot.purple { background: #8d72eb; }.item-dot.cyan { background: #21b4c8; }.item-dot.orange { background: #e99a55; }.item-dot.green { background: #3dbb8e; }.subtask-count { padding: 2px 5px; color: #8491a6; border-radius: 4px; background: #f0f3f7; font-size: 8px; }.person { display: flex; align-items: center; gap: 6px; color: #55647c; }.status-pill { min-width: 96px; padding: 6px 8px; border: 0; border-radius: 5px; font-size: 9px; font-weight: 700; text-align: left; }.status-pill span { float: right; margin-left: 7px; opacity: .7; }.status-progress { color: #6951cd; background: #f0ecff; }.status-review { color: #b87c30; background: #fff3dd; }.status-done { color: #208961; background: #e4f8ef; }.status-not-started { color: #718099; background: #eef1f5; }.date-chip { color: #64728a; }.date-chip.soon { color: #e3824a; font-weight: 700; }.date-chip.muted { color: #9ca6b5; }.priority { display: inline-flex; align-items: center; gap: 5px; }.priority::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }.priority.high { color: #e17a70; }.priority.high::before { background: #ec897d; }.priority.medium { color: #d59542; }.priority.medium::before { background: #e8ad62; }.priority.low { color: #64a286; }.priority.low::before { background: #79c09f; }.activity-dot { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #52b6de; }.activity-dot.done { background: #35b78d; }.row-menu { padding: 3px 5px; color: #aab4c3; border: 0; background: transparent; }.add-row { display: block; width: 100%; padding: 12px 22px; color: #6885d2; border: 0; border-top: 1px solid #edf0f5; background: #fff; font-size: 10px; text-align: left; }.add-row:hover { color: #3e5fca; background: #fbfcff; }.add-row span { margin-right: 4px; font-size: 14px; }
.inline-add-row { display: flex; align-items: center; gap: 8px; min-width: 850px; padding: 9px 14px; border-top: 1px solid #edf0f5; background: #fff; }.inline-add-row input { flex: 1; min-width: 220px; padding: 8px 9px; color: #30405a; border: 1px solid transparent; border-radius: 7px; outline: 0; background: #fbfcff; font-size: 11px; }.inline-add-row input::placeholder { color: #a0adbf; }.inline-add-row input:focus { border-color: #cbd6f4; background: #fff; box-shadow: 0 0 0 3px #eff2ff; }.inline-add-row button { padding: 7px 10px; color: #6177ca; border: 0; border-radius: 7px; background: #f0f2ff; font-size: 10px; font-weight: 700; }.custom-cell { color: #697991; }
.lower-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; margin-top: 14px; }.activity-list { padding: 0 22px 15px; }.activity-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #edf0f5; }.activity-row p { flex: 1; margin: 0; color: #8290a3; font-size: 10px; line-height: 1.45; }.activity-row p strong, .activity-row p b { color: #40516b; }.activity-row small { display: block; margin-top: 3px; color: #a6b0bf; font-size: 9px; }.activity-icon { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; font-size: 12px; }.activity-icon.cyan { color: #21a3c1; background: #e8faff; }.activity-icon.purple { color: #7961dc; background: #f1edff; }.activity-icon.green { color: #249b77; background: #e8f8f1; }.text-button { color: #5f7ac6; border: 0; background: transparent; font-size: 10px; }.workload-main { display: flex; align-items: center; gap: 18px; padding: 0 22px 19px; }.progress-ring { display: grid; place-items: center; width: 82px; height: 82px; border-radius: 50%; background: conic-gradient(#5b71ee 0 68%, #eaf0f8 68%); position: relative; }.progress-ring::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }.progress-ring span { z-index: 1; color: #2b3f76; font-size: 19px; font-weight: 800; }.progress-ring small { font-size: 10px; }.workload-main > div:last-child { flex: 1; }.workload-main strong { color: #233d63; font-size: 12px; }.workload-main p { margin: 4px 0 11px; color: #8996aa; font-size: 10px; }.progress-bar { height: 5px; overflow: hidden; border-radius: 99px; background: #e9eef5; }.progress-bar i { display: block; width: 68%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4b9af4, #6f5ced); }.workload-footer { display: flex; justify-content: space-between; gap: 10px; padding: 13px 22px; border-top: 1px solid #edf0f5; color: #8794a7; font-size: 9px; }.workload-footer span { white-space: nowrap; }.workload-footer b { margin-left: 3px; color: #3f5069; }.legend-dot { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; }.legend-dot.blue { background: #548bec; }.legend-dot.violet { background: #886ee9; }.legend-dot.green { background: #4bb98e; }
.modal-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(8, 19, 38, .48); z-index: 5; }.modal-backdrop[hidden] { display: none; }.modal { width: min(440px, 100%); padding: 22px; border-radius: 15px; background: #fff; box-shadow: 0 24px 80px rgba(6, 15, 34, .28); }.modal-heading { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 20px; }.modal-heading h2 { margin: 0; color: #1a2c49; font-size: 20px; letter-spacing: -.03em; }.modal form { display: grid; gap: 14px; }.modal label { display: grid; gap: 6px; color: #53627b; font-size: 10px; font-weight: 800; }.modal input, .modal select { width: 100%; padding: 10px 11px; color: #2c3b53; border: 1px solid #dfe6f0; border-radius: 8px; outline: 0; background: #fbfcfe; font-size: 12px; }.modal input:focus, .modal select:focus { border-color: #7690ef; box-shadow: 0 0 0 3px #edf0ff; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.modal-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 8px; }.toast { position: fixed; right: 25px; bottom: 25px; max-width: 320px; padding: 12px 15px; color: #fff; border-radius: 10px; background: #10213c; box-shadow: 0 12px 30px rgba(8, 19, 38, .2); font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(12px); transition: .22s ease; z-index: 10; }.toast.show { opacity: 1; transform: translateY(0); }
@media (max-width: 1100px) { .sidebar { width: 220px; flex-basis: 220px; }.topbar, .content-wrap { padding-left: 25px; padding-right: 25px; }.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .auth-shell { grid-template-columns: 1fr; }.auth-showcase { min-height: auto; padding: 25px; gap: 30px; }.auth-showcase-copy { margin: 18px 0 0; }.auth-showcase-copy h1 { font-size: 42px; }.auth-flow-preview { display: none; }.auth-card-wrap { padding: 25px 16px 40px; }.sidebar { width: 72px; flex-basis: 72px; padding: 14px 9px; }.sidebar-brand { height: 50px; padding: 5px; }.sidebar-brand img { width: 210px; max-width: none; transform: translateX(-2px); }.workspace-switcher { justify-content: center; padding: 8px; }.workspace-copy, .chevron, .nav-label, .nav-link:not(.active)::after, .nav-link { font-size: 0; }.workspace-switcher .workspace-copy, .workspace-switcher .chevron, .nav-count, .admin-card, .profile-copy, .profile-row .icon-button { display: none; }.nav-link { justify-content: center; padding: 12px 0; }.nav-icon { font-size: 17px; }.profile-row { justify-content: center; }.topbar { padding: 0 16px; }.crumbs { display: none; }.search-box { width: 150px; }.invite-button { padding: 9px; }.invite-button { font-size: 0; }.invite-button span { font-size: 17px; }.content-wrap { padding: 25px 16px 40px; }.welcome-row { align-items: start; flex-direction: column; }.welcome-row .primary-button { align-self: stretch; }.stats-grid { grid-template-columns: 1fr; }.lower-grid { grid-template-columns: 1fr; }.board-tabs { gap: 13px; overflow-x: auto; }.board-tools { display: none; }.admin-summary { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .topbar-actions { width: 100%; }.search-box { flex: 1; }.notification-button, .topbar-actions > .avatar { display: none; }.form-row { grid-template-columns: 1fr; } }

.theme-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 31px; padding: 7px 9px; color: #687894; border: 1px solid #e1e7f0; border-radius: 8px; background: #fff; font-size: 10px; font-weight: 700; transition: .18s ease; }
.theme-toggle > span:first-child { font-size: 15px; line-height: 1; }
.theme-toggle:hover { color: #3e52a1; border-color: #becbfa; background: #f0f3ff; }

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { background: #0b1424; }
html[data-theme="dark"] .app-shell { background: #0b1424; }
html[data-theme="dark"] .topbar { border-color: #253650; background: rgba(14, 27, 47, .96); }
html[data-theme="dark"] .crumbs { color: #8da0ba; }
html[data-theme="dark"] .crumbs strong { color: #e3ebf8; }
html[data-theme="dark"] .crumb-separator { color: #526783; }
html[data-theme="dark"] .theme-toggle { color: #d6e4f6; border-color: #385171; background: #172943; }
html[data-theme="dark"] .theme-toggle:hover { color: #fff; border-color: #6b96da; background: #1d3a62; }
html[data-theme="dark"] .search-box { color: #91a6c3; border-color: #344b6c; background: #111f35; }
html[data-theme="dark"] .search-box input { color: #e2ebf8; }
html[data-theme="dark"] .search-box input::placeholder { color: #7589a6; }
html[data-theme="dark"] kbd { color: #92a7c4; border-color: #344b6c; background: #192a45; }
html[data-theme="dark"] .invite-button { color: #d4ddff; background: #263767; }
html[data-theme="dark"] .invite-button:hover { background: #30457e; }
html[data-theme="dark"] .notification-button { color: #9db0cb; }
html[data-theme="dark"] .content-wrap { background: #0b1424; }
html[data-theme="dark"] .eyebrow { color: #8398b4; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3 { color: #e8effa; }
html[data-theme="dark"] .welcome-copy { color: #91a3bd; }
html[data-theme="dark"] .stat-card, html[data-theme="dark"] .section-card, html[data-theme="dark"] .welcome-card { border-color: #2b405e; background: #111f35; box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
html[data-theme="dark"] .stat-card span, html[data-theme="dark"] .section-card p, html[data-theme="dark"] .section-card-meta { color: #91a3bd; }
html[data-theme="dark"] .stat-card strong { color: #e6eef9; }
html[data-theme="dark"] .board-panel { border-color: #2b405e; background: #111f35; box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
html[data-theme="dark"] .board-heading, html[data-theme="dark"] .board-tabs, html[data-theme="dark"] .board-view-nav { border-color: #293e5b; }
html[data-theme="dark"] .board-description, html[data-theme="dark"] .board-view-empty, html[data-theme="dark"] .view-helper { color: #8fa3be; }
html[data-theme="dark"] .board-title-line h2 { color: #edf3fb; }
html[data-theme="dark"] .board-tabs, html[data-theme="dark"] .board-view-nav { background: #111f35; }
html[data-theme="dark"] .board-tab, html[data-theme="dark"] .board-view-tab { color: #93a7c1; }
html[data-theme="dark"] .board-tab:hover, html[data-theme="dark"] .board-view-tab:hover { color: #e7effb; background: #1b3150; }
html[data-theme="dark"] .board-tab.active, html[data-theme="dark"] .board-view-tab.active { color: #a9c5ff; }
html[data-theme="dark"] .view-switcher-toggle { color: #dce8f8; border-color: #3a5273; background: #172943; }
html[data-theme="dark"] .view-picker-menu, html[data-theme="dark"] .view-row-action-menu, html[data-theme="dark"] .filter-panel, html[data-theme="dark"] .status-popover, html[data-theme="dark"] .date-popover, html[data-theme="dark"] .tag-popover, html[data-theme="dark"] .item-action-popover { border-color: #3a5273; background: #16263f; box-shadow: 0 18px 42px rgba(0, 0, 0, .42); }
html[data-theme="dark"] .view-picker-option, html[data-theme="dark"] .view-picker-menu-button, html[data-theme="dark"] .view-row-action-menu button, html[data-theme="dark"] .filter-panel button, html[data-theme="dark"] .status-option, html[data-theme="dark"] .status-edit-labels, html[data-theme="dark"] .status-add-label, html[data-theme="dark"] .status-popover [data-column-action], html[data-theme="dark"] .item-action-popover button { color: #c7d5e8; }
html[data-theme="dark"] .view-picker-option:hover, html[data-theme="dark"] .view-picker-menu-button:hover, html[data-theme="dark"] .view-row-action-menu button:hover, html[data-theme="dark"] .filter-panel button:hover, html[data-theme="dark"] .status-option:hover, html[data-theme="dark"] .status-edit-labels:hover, html[data-theme="dark"] .status-add-label:hover, html[data-theme="dark"] .status-popover [data-column-action]:hover, html[data-theme="dark"] .item-action-popover button:hover { color: #fff; background: #233c61; }
html[data-theme="dark"] .filter-panel-head, html[data-theme="dark"] .filter-panel-foot, html[data-theme="dark"] .filter-panel-actions, html[data-theme="dark"] .filter-panel-links, html[data-theme="dark"] .filter-row, html[data-theme="dark"] .status-editor-actions, html[data-theme="dark"] .status-auto-assign { border-color: #304764; }
html[data-theme="dark"] .filter-panel, html[data-theme="dark"] .filter-panel strong, html[data-theme="dark"] .filter-panel label, html[data-theme="dark"] .status-menu-title, html[data-theme="dark"] .column-menu-title, html[data-theme="dark"] .status-editor-title { color: #dce7f5; }
html[data-theme="dark"] .status-menu-hint { color: #9bb0cb; }
html[data-theme="dark"] .filter-panel select, html[data-theme="dark"] .filter-panel input, html[data-theme="dark"] .view-modal input, html[data-theme="dark"] .view-modal select, html[data-theme="dark"] .modal input, html[data-theme="dark"] .modal select, html[data-theme="dark"] .modal textarea { color: #e2ebf7; border-color: #3b5476; background: #0f1c30; }
html[data-theme="dark"] .filter-panel select option, html[data-theme="dark"] .view-modal select option, html[data-theme="dark"] .modal select option { color: #e2ebf7; background: #0f1c30; }
html[data-theme="dark"] .table-wrap { border-color: #2d435f; background: #101d31; }
html[data-theme="dark"] .work-table { color: #cad7e8; background: #101d31; }
html[data-theme="dark"] .work-table th { color: #96abc6; border-color: #2f4664; background: #14243b; }
html[data-theme="dark"] .work-table td { color: #c6d3e5; border-color: #293f5b; background: #101d31; }
html[data-theme="dark"] .work-table tr:hover td { background: #152943; }
html[data-theme="dark"] .work-table .group-header-row td, html[data-theme="dark"] .group-header-row td { color: #d8e6f7; background: #162945; border-color: #344c6b; }
html[data-theme="dark"] .group-add-row td, html[data-theme="dark"] .group-total-row td, html[data-theme="dark"] .board-total-row td { color: #91a6c1; background: #13233a; border-color: #2b415e; }
html[data-theme="dark"] .group-inline-add input, html[data-theme="dark"] .inline-column-heading-input, html[data-theme="dark"] .inline-item-name-input, html[data-theme="dark"] .board-title-input, html[data-theme="dark"] .board-description-input { color: #e3edf9; border-color: #456487; background: #0d1a2d; }
html[data-theme="dark"] .group-inline-add input::placeholder { color: #7890ae; }
html[data-theme="dark"] .inline-item-name, html[data-theme="dark"] .inline-column-value, html[data-theme="dark"] .group-name-button { color: #dce8f6; }
html[data-theme="dark"] .tool-button, html[data-theme="dark"] .outline-button { color: #b9cced; border-color: #3a5274; background: #1a2c48; }
html[data-theme="dark"] .tool-button:hover, html[data-theme="dark"] .outline-button:hover { color: #fff; background: #254269; }
html[data-theme="dark"] .group-move-select { color: #b9cce4; border-color: #3b5576; background: #172943; }
html[data-theme="dark"] .calendar-view-card, html[data-theme="dark"] .timeline-view, html[data-theme="dark"] .chart-view, html[data-theme="dark"] .visual-view-settings, html[data-theme="dark"] .view-access-box, html[data-theme="dark"] .view-columns { border-color: #304764; background: #13233a; }
html[data-theme="dark"] .calendar-day, html[data-theme="dark"] .timeline-row, html[data-theme="dark"] .chart-row { border-color: #304764; background: #101d31; }
html[data-theme="dark"] .calendar-weekday, html[data-theme="dark"] .timeline-axis, html[data-theme="dark"] .chart-legend { color: #92a8c2; }
html[data-theme="dark"] .modal-backdrop { background: rgba(2, 8, 18, .74); }
html[data-theme="dark"] .modal { border-color: #395170; background: #14243b; box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .modal-heading, html[data-theme="dark"] .modal-heading h2 { color: #e7eff9; border-color: #304764; }
html[data-theme="dark"] .modal label, html[data-theme="dark"] .modal small, html[data-theme="dark"] .modal p { color: #9eb1c8; }
html[data-theme="dark"] .section-empty { color: #91a5bf; border-color: #304764; background: #13233a; }

/* Finish the workspace surfaces so dark mode does not leave white board areas behind. */
html[data-theme="dark"] .app-shell .panel,
html[data-theme="dark"] .app-shell .board-section,
html[data-theme="dark"] .app-shell .section-view { border-color: #2b405e; background: #111f35; box-shadow: 0 12px 30px rgba(0, 0, 0, .2); }
html[data-theme="dark"] .app-shell .panel-heading,
html[data-theme="dark"] .app-shell .board-heading { background: #111f35; }
html[data-theme="dark"] .app-shell .panel-heading h2,
html[data-theme="dark"] .app-shell .board-heading h2,
html[data-theme="dark"] .app-shell .board-heading h3 { color: #e8effa; }
html[data-theme="dark"] .app-shell .panel-heading p,
html[data-theme="dark"] .app-shell .board-heading p { color: #8fa3be; }
html[data-theme="dark"] .app-shell .board-symbol { color: #9db2ff; background: #22355f; }
html[data-theme="dark"] .app-shell .heading-actions .outline-button,
html[data-theme="dark"] .app-shell .board-tools .tool-button { color: #d3e0f2; border-color: #3a5273; background: #172943; }
html[data-theme="dark"] .app-shell .heading-actions .outline-button:hover,
html[data-theme="dark"] .app-shell .board-tools .tool-button:hover { color: #fff; background: #244269; }
html[data-theme="dark"] .app-shell .table-wrap { background: #101d31; scrollbar-color: #536b8d #14253d; }
html[data-theme="dark"] .app-shell .work-table,
html[data-theme="dark"] .app-shell .work-table tbody,
html[data-theme="dark"] .app-shell .work-table tr,
html[data-theme="dark"] .app-shell .work-table td { background: #101d31; }
html[data-theme="dark"] .app-shell .work-table th { background: #14243b; }
html[data-theme="dark"] .app-shell .work-table td:first-child,
html[data-theme="dark"] .app-shell .work-table .item-cell { color: #e1ebf7 !important; }
html[data-theme="dark"] .app-shell .work-table .item-cell strong,
html[data-theme="dark"] .app-shell .work-table .person { color: #d8e5f4; }
html[data-theme="dark"] .app-shell .subtask-count { color: #a8bbd2; background: #243854; }
html[data-theme="dark"] .app-shell .drag-handle { color: #6f87a7; }
html[data-theme="dark"] .app-shell .row-menu,
html[data-theme="dark"] .app-shell .column-menu-trigger { color: #8da5c3; }
html[data-theme="dark"] .app-shell .add-row,
html[data-theme="dark"] .app-shell .inline-add-row,
html[data-theme="dark"] .app-shell .board-group-actions { color: #9db0c8; border-color: #2c435f; background: #13233a; }
html[data-theme="dark"] .app-shell .inline-add-row input,
html[data-theme="dark"] .app-shell .group-inline-add input { color: #dce8f6; border-color: #385170; background: #0e1c30; }
html[data-theme="dark"] .app-shell .inline-add-row input::placeholder,
html[data-theme="dark"] .app-shell .group-inline-add input::placeholder { color: #7891ae; }
html[data-theme="dark"] .app-shell .inline-add-row input:focus,
html[data-theme="dark"] .app-shell .group-inline-add input:focus { border-color: #5b7caf; background: #10223a; box-shadow: 0 0 0 3px rgba(86, 119, 190, .2); }
html[data-theme="dark"] .app-shell .inline-add-row button,
html[data-theme="dark"] .app-shell .group-inline-add button { color: #c6d5ff; background: #263b72; }
html[data-theme="dark"] .app-shell .inline-add-row button:hover,
html[data-theme="dark"] .app-shell .group-inline-add button:hover { color: #fff; background: #34539a; }
html[data-theme="dark"] .app-shell .board-group-actions button { color: #bdd0ff; border-color: #5271aa; background: #1a3155; }
html[data-theme="dark"] .app-shell .board-group-actions button:hover { color: #fff; background: #244574; }
html[data-theme="dark"] .app-shell .group-header-row td { background: #172a47; }
html[data-theme="dark"] .app-shell .group-item-row td { background: #101d31; }
html[data-theme="dark"] .app-shell .group-item-row:hover td { background: #162943; }
html[data-theme="dark"] .app-shell .group-add-row td { background: #13233a; }
html[data-theme="dark"] .app-shell .group-total-row td { background: #142640; }
html[data-theme="dark"] .app-shell .board-total-row td { background: #1a2e4a; }
html[data-theme="dark"] .app-shell .group-total-row strong,
html[data-theme="dark"] .app-shell .board-total-row strong { color: #b8ccef; }
html[data-theme="dark"] .app-shell .group-move-select { color: #b9cce4; background: transparent; }
html[data-theme="dark"] .app-shell .group-move-select:focus { background: #172943; }
html[data-theme="dark"] .app-shell .date-cell,
html[data-theme="dark"] .app-shell .inline-column-value,
html[data-theme="dark"] .app-shell .custom-cell { color: #a6b8cf; }
html[data-theme="dark"] .app-shell .date-cell:hover,
html[data-theme="dark"] .app-shell .inline-column-value:hover { color: #dce8ff; background: #203b62; }
html[data-theme="dark"] .app-shell .date-cell.date-placeholder,
html[data-theme="dark"] .app-shell .column-placeholder,
html[data-theme="dark"] .app-shell .inline-column-value.empty { color: #748ba8; }
html[data-theme="dark"] .app-shell .add-column-header button { color: #aec2df; border-color: #4d6688; background: #172943; }
html[data-theme="dark"] .app-shell .add-column-header button:hover { color: #fff; background: #244269; }
html[data-theme="dark"] .app-shell .status-pill { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
html[data-theme="dark"] .app-shell .automation-builder,
html[data-theme="dark"] .app-shell .automation-node { border-color: #304967; background: #14243b; }
html[data-theme="dark"] .app-shell .automation-builder-head { border-color: #304764; }
html[data-theme="dark"] .app-shell .automation-builder-head h3,
html[data-theme="dark"] .app-shell .automation-node h4 { color: #e6eef9; }
html[data-theme="dark"] .app-shell .automation-builder input,
html[data-theme="dark"] .app-shell .automation-builder select { color: #e2ebf7; border-color: #3b5476; background: #0f1c30; }
html[data-theme="dark"] .app-shell .visual-view-heading,
html[data-theme="dark"] .app-shell .calendar-view-grid,
html[data-theme="dark"] .app-shell .timeline-view,
html[data-theme="dark"] .app-shell .chart-view { background: #13233a; border-color: #304764; }
html[data-theme="dark"] .app-shell .calendar-view-day,
html[data-theme="dark"] .app-shell .calendar-view-card { background: #101d31; border-color: #304764; }
html[data-theme="dark"] .app-shell .calendar-view-card strong,
html[data-theme="dark"] .app-shell .timeline-row > strong,
html[data-theme="dark"] .app-shell .chart-row strong,
html[data-theme="dark"] .app-shell .chart-row b { color: #c9d8eb; }
html[data-theme="dark"] .app-shell .chart-track { background: #263b57; }
html[data-theme="dark"] .app-shell .chart-donut::after { background: #13233a; }
html[data-theme="dark"] .app-shell .chart-donut span,
html[data-theme="dark"] .app-shell .chart-donut small { color: #d9e7f7; }
html[data-theme="dark"] .app-shell .view-modal .modal-actions { background: #14243b; border-color: #304764; }

@media (max-width: 760px) { .theme-toggle-label { display: none; }.theme-toggle { width: 31px; justify-content: center; padding: 7px; } }

/* Board workspace layout: use the available main area and keep scrolling inside the board. */
@media (min-width: 761px) {
  body:has(#board-panel:not([hidden])) .app-shell { height: 100vh; min-height: 100vh; overflow: hidden; }
  body:has(#board-panel:not([hidden])) .main-content { display: flex; flex-direction: column; height: 100vh; min-height: 0; overflow: hidden; }
  body:has(#board-panel:not([hidden])) .content-wrap { display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; max-width: none; min-height: 0; padding: 24px 28px 28px; margin: 0; overflow: hidden; }
  body:has(#board-panel:not([hidden])) #board-panel { display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; min-height: 0; }
  body:has(#board-panel:not([hidden])) #board-panel > .board-heading,
  body:has(#board-panel:not([hidden])) #board-panel > .board-tabs { flex: 0 0 auto; }
  body:has(#board-panel:not([hidden])) #board-panel > .table-wrap { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: auto; }
  body:has(#board-panel:not([hidden])) #board-panel > .table-wrap > .work-table { flex: 0 0 auto; width: max-content; min-width: 100%; }
  body:has(#board-panel:not([hidden])) #board-panel > .table-wrap > .inline-add-row { margin-top: auto; }
}

/* Authentication stays light even when the saved workspace theme is dark. */
html[data-theme="dark"] .auth-shell { color-scheme: light; color: #12213a; background: #f7f9fd; }
html[data-theme="dark"] .auth-card { border-color: #e3e8f1; background: #fff; box-shadow: 0 20px 55px rgba(34, 52, 84, .08); }
html[data-theme="dark"] .auth-card h2 { color: #152844; }
html[data-theme="dark"] .auth-subtitle { color: #8190a5; }
html[data-theme="dark"] .auth-form label { color: #4d5d76; }
html[data-theme="dark"] .auth-form input { color: #203451; border-color: #dee5ef; background: #fbfcfe; }
html[data-theme="dark"] .auth-form input::placeholder { color: #8996a9; }
html[data-theme="dark"] .auth-form input:focus { border-color: #6d8cf0; box-shadow: 0 0 0 3px #edf0ff; }
html[data-theme="dark"] .password-toggle { color: #6980c5; }
html[data-theme="dark"] .auth-links button { color: #5a70c4; }
html[data-theme="dark"] .status-popover .status-label-input { color: #e6effb; border-color: #4b668b; background: #1b2d47; caret-color: #fff; }
html[data-theme="dark"] .status-popover .status-label-input::placeholder { color: #91a7c1; }
html[data-theme="dark"] .status-popover .status-label-input:focus { border-color: #7396d0; outline: 0; box-shadow: 0 0 0 3px rgba(84, 126, 201, .2); }
html[data-theme="dark"] .status-popover .status-color-input { background: transparent; }
html[data-theme="dark"] .status-popover .status-remove-label { color: #ffb7bf; background: #4b2939; }
html[data-theme="dark"] .status-popover .status-remove-label:hover { color: #fff; background: #713648; }
html[data-theme="dark"] .status-popover .inline-cancel { color: #c3d1e4; background: #263a57; }
html[data-theme="dark"] .status-popover .inline-cancel:hover { color: #fff; background: #345071; }
html[data-theme="dark"] .group-color-popover { border-color: #3a5273; background: #16263f; box-shadow: 0 18px 42px rgba(0, 0, 0, .42); }
html[data-theme="dark"] .group-color-picker-title { color: #dce7f5; }
html[data-theme="dark"] .group-color-custom { border-color: #304764; color: #a7b9d0; }
html[data-theme="dark"] .app-shell .automation-canvas { border-color: #304967; background: radial-gradient(circle at 20% 30%, #172b49 0, transparent 38%), radial-gradient(circle at 82% 80%, #1b2a4c 0, transparent 38%), #0e1b2f; }
html[data-theme="dark"] .app-shell .automation-node { color: #d8e6f6; border-color: #3b5678; background: #142943; box-shadow: 0 12px 26px rgba(0, 0, 0, .28); }
html[data-theme="dark"] .app-shell .automation-node-kicker { color: #9bb0cb; }
html[data-theme="dark"] .app-shell .automation-node h4 { color: #e7effa; }
html[data-theme="dark"] .app-shell .automation-node-remove { color: #a9bdd5; }
html[data-theme="dark"] .app-shell .automation-node-remove:hover { color: #fff; background: #233e65; }
html[data-theme="dark"] .app-shell .automation-sentence { color: #d6e3f2; }
html[data-theme="dark"] .app-shell .automation-sentence strong { color: #ecf3fb; }
html[data-theme="dark"] .app-shell .automation-inline-picker,
html[data-theme="dark"] .app-shell .automation-inline-value { color: #a9c5ff !important; border-bottom-color: #6f91e8 !important; }
html[data-theme="dark"] .app-shell .automation-inline-picker:hover,
html[data-theme="dark"] .app-shell .automation-inline-picker:focus,
html[data-theme="dark"] .app-shell .automation-inline-value:focus { color: #d8e5ff !important; border-bottom-color: #a8c1ff !important; }
html[data-theme="dark"] .app-shell .automation-inline-value::placeholder { color: #91a8c4; }
html[data-theme="dark"] .app-shell .automation-inline-picker option { color: #e1ebf8; background: #102139; }
html[data-theme="dark"] .automation-choice-menu { color: #e9f1fb; border-color: #415b7f; background: #172943; box-shadow: 0 20px 48px rgba(0, 0, 0, .48); }
html[data-theme="dark"] .automation-choice-search-wrap { border-color: #304967; background: #102139; }
html[data-theme="dark"] .automation-choice-search-wrap input { color: #e9f1fb; }
html[data-theme="dark"] .automation-choice-category + .automation-choice-category { border-color: #304967; }
html[data-theme="dark"] .automation-choice-category h5 { color: #8ea6c5; }
html[data-theme="dark"] .automation-choice-option { color: #e7eff9; }
html[data-theme="dark"] .automation-choice-option:hover, html[data-theme="dark"] .automation-choice-option.is-selected { background: #244267; }
html[data-theme="dark"] .automation-choice-option small, html[data-theme="dark"] .automation-choice-empty { color: #91a8c4; }
html[data-theme="dark"] .automation-choice-option-icon { color: #a9c5ff; background: #203b61; }
html[data-theme="dark"] .app-shell .automation-action-note,
html[data-theme="dark"] .app-shell .automation-port-labels small { color: #8fa7c3; }
html[data-theme="dark"] .app-shell .automation-empty-slot { border-color: #4b6790; background: rgba(21, 40, 66, .78); }
html[data-theme="dark"] .app-shell .automation-empty-slot button { color: #bdd0ff; }
html[data-theme="dark"] .app-shell .automation-empty-slot button:hover { background: #203b61; }
html[data-theme="dark"] .app-shell .automation-empty-slot button small { color: #91a8c4; }
html[data-theme="dark"] .app-shell .automation-builder-preview { color: #9db1ca; border-color: #405a7c; background: #132640; }
html[data-theme="dark"] .app-shell .automation-builder-preview span { color: #8fa8c5; }
html[data-theme="dark"] .app-shell .automation-builder-preview strong { color: #d5e3f6; }
html[data-theme="dark"] .app-shell .automation-builder-preview.empty p { color: #9aafc8; }
html[data-theme="dark"] .app-shell .automation-connector.waiting button,
html[data-theme="dark"] .app-shell .canvas-add-trigger button { color: #c4d4ff; border-color: #5873a5; background: #172e50; }
html[data-theme="dark"] .app-shell .automation-connector.waiting button:hover,
html[data-theme="dark"] .app-shell .canvas-add-trigger button:hover { color: #fff; border-color: #7d9fe5; background: #24446f; }
html[data-theme="dark"] .app-shell .automation-connector.empty span { color: #91a8c4; }
html[data-theme="dark"] .app-shell .automation-canvas .automation-port { border-color: #142943; }
html[data-theme="dark"] .app-shell .automation-canvas .input-port { background: #d8e7fb; }
html[data-theme="dark"] .app-shell .automation-flow { color: #a9bad0; border-color: #405a7c; background: #172b47; }
html[data-theme="dark"] .app-shell .automation-flow span { color: #a9bad0; }
html[data-theme="dark"] .app-shell .automation-flow b { color: #d6e3f5; }
html[data-theme="dark"] .app-shell .automation-flow i { color: #9eabff; }
.automation-card-actions { display: flex; gap: 8px; }
.automation-card-actions .outline-button { flex: 1; }
.automation-card-actions .danger-button { padding: 8px 12px; color: #b64e58; border: 1px solid #efcfd2; border-radius: 8px; background: #fff; font-size: 11px; font-weight: 700; }
.automation-card-actions .danger-button:hover { color: #a43f4c; background: #fff3f4; }
.automation-card-actions .danger-button:disabled { cursor: wait; opacity: .55; }
html[data-theme="dark"] .app-shell .automation-card-actions .danger-button { color: #ffb9c0; border-color: #713b4b; background: #351f31; }
html[data-theme="dark"] .app-shell .automation-card-actions .danger-button:hover { color: #fff; border-color: #a65665; background: #52293b; }
@media (max-width: 480px) { .automation-top-button { padding: 9px; font-size: 0; }.automation-top-button b { display: none; } }
.modal textarea { width: 100%; padding: 10px 11px; color: #2c3b53; border: 1px solid #dfe6f0; border-radius: 8px; outline: 0; background: #fbfcfe; font: inherit; font-size: 12px; resize: vertical; }.modal textarea:focus { border-color: #7690ef; box-shadow: 0 0 0 3px #edf0ff; }
.sidebar { position: relative; }.workspace-menu { position: absolute; z-index: 12; top: 101px; left: 13px; width: 292px; padding: 10px; border: 1px solid #2a4264; border-radius: 10px; color: #dce7fa; background: #142541; box-shadow: 0 18px 45px rgba(2, 9, 22, .42); }.workspace-menu[hidden] { display: none; }.workspace-search { display: flex; align-items: center; gap: 7px; padding: 8px 9px; border: 1px solid #315071; border-radius: 7px; background: #0d1a30; }.workspace-search span { color: #7692bb; }.workspace-search input { width: 100%; color: #e9f1ff; border: 0; outline: 0; background: transparent; font-size: 11px; }.workspace-search input::placeholder { color: #7c91b0; }.workspace-menu-label { margin: 13px 7px 6px; color: #7187a8; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.workspace-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 7px; color: #c6d2e5; border: 0; border-radius: 7px; background: transparent; text-align: left; }.workspace-menu-item:hover, .workspace-menu-item.active { color: #fff; background: #1d477e; }.workspace-menu-mark { display: grid; place-items: center; width: 24px; height: 24px; color: #fff; border-radius: 6px; background: var(--workspace-color, #4d7cfe); font-size: 8px; font-weight: 800; }.workspace-menu-item > span:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 0; }.workspace-menu-item strong { font-size: 11px; }.workspace-menu-item small { color: #8196b5; font-size: 9px; }.workspace-menu-item i { color: #78caff; font-size: 13px; font-style: normal; }.workspace-menu-action { width: 100%; padding: 10px 7px 4px; margin-top: 5px; color: #86baff; border: 0; border-top: 1px solid #2b4261; background: transparent; font-size: 10px; text-align: left; }.workspace-menu-empty, .sidebar-board-empty { padding: 6px 12px; margin: 0; color: #7890b1; font-size: 10px; }.nav-tree-heading { display: flex; align-items: center; justify-content: space-between; padding-right: 5px; }.nav-tree-heading .nav-label { margin-bottom: 0; }.sidebar-add-button { width: 22px; height: 22px; padding: 0; color: #7fa1cf; border: 1px solid #294360; border-radius: 5px; background: transparent; font-size: 14px; }.sidebar-add-button:hover { color: #fff; border-color: #5a98df; background: #17345b; }.sidebar-board-tree { display: grid; gap: 12px; max-height: 38vh; padding: 4px 0 0 3px; overflow-y: auto; }.sidebar-board-group { display: grid; gap: 2px; }.sidebar-board-group > p { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; margin: 0 0 2px; color: #7188a9; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.sidebar-board-group > p span { color: #577294; font-size: 8px; }.sidebar-board-link { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; color: #a7b8d0; border: 0; border-radius: 7px; background: transparent; font-size: 11px; text-align: left; }.sidebar-board-link:hover { color: #fff; background: #122744; }.sidebar-board-link.active { color: #fff; background: #1d4e88; box-shadow: inset 2px 0 #54c3ff; }.sidebar-board-icon { color: #6da7e7; font-size: 11px; }.sidebar-board-link span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-group-heading { display: flex; align-items: center; gap: 3px; min-width: 0; padding: 0 5px 2px 1px; }.sidebar-group-toggle { width: 18px; height: 19px; padding: 0; color: #8aa6ca; border: 0; background: transparent; font-size: 15px; line-height: 18px; }.sidebar-group-toggle:hover { color: #fff; }.sidebar-group-name { flex: 1; min-width: 0; padding: 3px 2px; overflow: hidden; color: #7188a9; border: 0; background: transparent; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-align: left; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }.sidebar-group-name:hover { color: #fff; }.sidebar-group-name-input { flex: 1; min-width: 0; padding: 3px 5px; color: #fff; border: 1px solid #5b8bc3; border-radius: 4px; outline: 0; background: #10213c; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.sidebar-group-count { color: #577294; font-size: 8px; }.sidebar-group-boards { display: grid; gap: 2px; }.sidebar-group-boards[hidden] { display: none; }.sidebar-board-row { display: flex; align-items: center; gap: 2px; min-width: 0; border-radius: 7px; }.sidebar-board-row.dragging { opacity: .45; }.sidebar-board-row.drag-over, .sidebar-board-group.drag-over { outline: 1px dashed #65bfff; outline-offset: 2px; background: #122f55; }.sidebar-board-row .sidebar-board-link { flex: 1; min-width: 0; }.sidebar-board-menu-button { width: 26px; padding: 4px 2px; color: #8ca6c6; border: 0; border-radius: 5px; background: transparent; font-size: 10px; opacity: 0; }.sidebar-board-row:hover .sidebar-board-menu-button, .sidebar-board-menu-button:focus { opacity: 1; }.sidebar-board-menu-button:hover { color: #fff; background: #1d477e; }.sidebar-board-popover { position: fixed; z-index: 30; width: 174px; padding: 6px; border: 1px solid #dfe6f0; border-radius: 9px; background: #fff; box-shadow: 0 15px 35px rgba(18, 36, 67, .2); }.sidebar-board-popover[hidden] { display: none; }.sidebar-board-popover button { display: block; width: 100%; padding: 8px 9px; color: #4a5a73; border: 0; border-radius: 6px; background: transparent; font-size: 10px; text-align: left; }.sidebar-board-popover button:hover { background: #f0f3fa; color: #3155bd; }
.manage-dropdown { display: grid; gap: 5px; }.manage-dropdown-toggle { display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 10px; color: #dbe8fa; border: 1px solid #263e5f; border-radius: 11px; background: #10213c; text-align: left; }.manage-dropdown-toggle:hover, .manage-dropdown-toggle[aria-expanded="true"] { border-color: #4a77ad; background: #16325a; }.manage-dropdown-icon { display: grid; place-items: center; width: 26px; height: 26px; color: #7bc8ff; border-radius: 7px; background: #183e67; }.manage-dropdown-toggle > span:nth-child(2) { display: grid; gap: 2px; flex: 1; }.manage-dropdown-toggle strong { font-size: 11px; }.manage-dropdown-toggle small { color: #7f97b8; font-size: 9px; }.manage-chevron { color: #8ba2c2; font-size: 17px; transition: transform .18s ease; }.manage-dropdown-toggle[aria-expanded="true"] .manage-chevron { transform: rotate(180deg); }.manage-dropdown-panel { display: grid; gap: 3px; padding: 4px; border: 1px solid #213958; border-radius: 9px; background: #0d1b32; }.manage-dropdown-panel[hidden] { display: none; }.manage-dropdown-panel .nav-link { padding: 8px 9px; font-size: 11px; }.manage-dropdown-panel .nav-icon { font-size: 13px; }
.board-view-empty { padding: 46px 24px; color: #8794a8; text-align: center; }.connected-form-view { max-width: 760px; padding: 28px clamp(18px, 4vw, 48px) 42px; margin: 0 auto; }.connected-form-intro { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid #edf0f5; }.connected-form-intro h3 { margin: 0 0 4px; color: #203452; font-size: 18px; }.connected-form-intro p:last-child { margin: 0; color: #8794a8; font-size: 11px; }.connected-board-form { display: grid; gap: 14px; }.connected-board-form label { display: grid; gap: 6px; color: #53627b; font-size: 10px; font-weight: 800; }.connected-board-form input, .connected-board-form select { width: 100%; padding: 10px 11px; color: #2c3b53; border: 1px solid #dfe6f0; border-radius: 8px; outline: 0; background: #fbfcfe; font-size: 12px; }.connected-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; margin-top: 4px; border-top: 1px solid #edf0f5; }.connected-form-actions span, .view-helper { color: #8c98aa; font-size: 10px; line-height: 1.45; }.view-modal { width: min(560px, 100%); }.view-access-box { display: grid; gap: 8px; padding: 12px; border: 1px solid #e6ebf3; border-radius: 9px; background: #fafbfe; }.view-access-box > strong { color: #44556f; font-size: 10px; }.radio-label, .checkbox-label { display: flex !important; align-items: center; gap: 7px; color: #66758c !important; font-size: 10px !important; font-weight: 600 !important; }.radio-label input, .checkbox-label input { width: auto !important; }.view-columns { display: grid; gap: 7px; padding: 10px 12px; border: 1px solid #e6ebf3; border-radius: 9px; }.view-columns legend { padding: 0 4px; color: #6e7d94; font-size: 9px; font-weight: 800; }.view-member-settings { display: grid; gap: 5px; padding-top: 6px; }
.inline-item-name { padding: 0; color: #203452; border: 0; background: transparent; font-size: 11px; font-weight: 700; text-align: left; }.inline-item-name:hover { color: #4d66cf; text-decoration: underline; }.inline-item-name-input { width: min(250px, 28vw); padding: 5px 7px; color: #203452; border: 1px solid #7890e8; border-radius: 5px; outline: 0; background: #fff; font-size: 11px; font-weight: 700; box-shadow: 0 0 0 3px #eef1ff; }
.board-heading-copy { min-width: 0; }.board-title-line { display: flex; align-items: center; gap: 7px; }.board-title-line h2 { margin-bottom: 4px; }.inline-pencil { padding: 2px 4px; color: #94a0b2; border: 0; border-radius: 5px; background: transparent; font-size: 12px; opacity: .7; }.inline-pencil:hover { color: #4e69ce; background: #eef1ff; opacity: 1; }.inline-edit-actions { display: inline-flex; gap: 5px; }.inline-edit-actions[hidden] { display: none; }.inline-save, .inline-cancel { padding: 4px 8px; border: 0; border-radius: 5px; font-size: 9px; font-weight: 800; }.inline-save { color: #fff; background: #5269dd; }.inline-cancel { color: #69778e; background: #eef1f6; }.board-title-input { width: min(430px, 70vw); padding: 3px 6px; color: #182a46; border: 1px solid #8194ea; border-radius: 5px; outline: 0; font-size: 15px; font-weight: 800; }.board-description-input { display: block; width: min(520px, 78vw); margin-top: 5px; padding: 5px 6px; color: #65758e; border: 1px solid #cfd8ea; border-radius: 5px; outline: 0; font: inherit; font-size: 10px; resize: vertical; }.column-heading { display: inline-flex; align-items: center; gap: 5px; }.column-menu-trigger { padding: 2px 3px; color: #aab4c3; border: 0; border-radius: 4px; background: transparent; opacity: 0; font-size: 9px; }.work-table th:hover .column-menu-trigger { opacity: 1; }.column-menu-trigger:hover { color: #405dc3; background: #eef1ff; }.add-column-header { width: 34px; min-width: 34px; padding-left: 6px !important; padding-right: 6px !important; }.add-column-header button { width: 24px; height: 24px; padding: 0; color: #8491a5; border: 1px dashed #cbd4e1; border-radius: 5px; background: #fff; font-size: 15px; }.add-column-header button:hover { color: #4d66cf; border-color: #8195ed; background: #f0f2ff; }.status-pill { color: var(--status-color, #718099); background: color-mix(in srgb, var(--status-color, #8794a8) 14%, white); border-left: 3px solid var(--status-color, #8794a8); }.status-popover { position: fixed; z-index: 20; width: 190px; padding: 8px; border: 1px solid #dfe5ef; border-radius: 9px; background: #fff; box-shadow: 0 15px 35px rgba(18, 36, 67, .2); }.status-popover[hidden] { display: none; }.status-menu-title, .column-menu-title, .status-editor-title { padding: 5px 7px 8px; color: #7b889c; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.status-option, .status-edit-labels, .status-add-label, .status-popover [data-column-action] { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 7px; color: #4a5a73; border: 0; border-radius: 6px; background: transparent; font-size: 10px; text-align: left; }.status-option:hover, .status-edit-labels:hover, .status-add-label:hover, .status-popover [data-column-action]:hover { background: #f0f3fa; }.status-option i { width: 13px; height: 13px; border-radius: 4px; }.status-edit-labels, .status-add-label { margin-top: 5px; border-top: 1px solid #edf0f5; color: #586dba; }.status-editor-list { display: grid; gap: 6px; max-height: 230px; overflow: auto; }.status-editor-row { display: flex; align-items: center; gap: 5px; }.status-color-input { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; }.status-label-input { flex: 1; min-width: 0; padding: 6px; color: #35465f; border: 1px solid #dfe5ef; border-radius: 5px; outline: 0; font-size: 10px; }.status-remove-label { width: 22px; height: 22px; padding: 0; color: #a16c6c; border: 0; border-radius: 4px; background: #fff0f0; }.status-editor-actions { display: flex; justify-content: flex-end; gap: 5px; padding-top: 8px; margin-top: 7px; border-top: 1px solid #edf0f5; }.status-auto-assign { padding: 9px 2px 2px; margin-top: 7px; color: #7e8797; border-top: 1px solid #edf0f5; font-size: 9px; }
.date-cell { padding: 5px 7px; color: #64728a; border: 0; border-radius: 5px; background: transparent; font: inherit; text-align: left; }
.group-item-row[draggable="true"] { cursor: grab; }.group-item-row[draggable="true"]:active { cursor: grabbing; }.group-item-row.item-dragging { opacity: .45; }.group-header-row.group-drop-active { outline: 2px dashed #5d83e8; outline-offset: -2px; background: #eef2ff; }.group-header-row.group-drop-active .group-name-button { color: #365bc5; }
.date-cell:hover { color: #3f5fc2; background: #f0f3ff; }
.date-cell small { color: #7d8aa0; font-size: 9px; }
.automation-builder { padding: 22px; border: 1px solid #e5eaf2; border-radius: 12px; background: linear-gradient(145deg, #fff, #fbfcff); }
.automation-builder-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid #edf0f5; }
.automation-builder-head h3 { margin: 0 0 5px; color: #203452; font-size: 17px; }
.automation-builder-head p:not(.eyebrow) { max-width: 600px; margin: 0; color: #8390a5; font-size: 10px; line-height: 1.55; }
.automation-builder-form { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 12px; margin-top: 18px; }
.automation-builder label { display: grid; gap: 6px; color: #65748c; font-size: 10px; font-weight: 800; }
.automation-builder input, .automation-builder select { width: 100%; padding: 10px 11px; color: #30425f; border: 1px solid #dfe6f0; border-radius: 8px; outline: 0; background: #fff; font: inherit; font-size: 11px; font-weight: 500; }
.automation-builder input:focus, .automation-builder select:focus { border-color: #8194ea; box-shadow: 0 0 0 3px #eef1ff; }
.automation-board-select { max-width: 310px; margin-top: 12px; }
.automation-canvas { display: grid; grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr); align-items: center; gap: 10px; padding: 27px 10px; margin-top: 18px; border: 1px solid #e5eaf3; border-radius: 12px; background: radial-gradient(circle at 20% 30%, #f7f9ff 0, transparent 38%), radial-gradient(circle at 82% 80%, #f5f6ff 0, transparent 38%), #fbfcff; }
.automation-node { position: relative; display: grid; gap: 10px; min-height: 205px; padding: 18px; border: 1px solid #dce4f2; border-radius: 11px; background: #fff; box-shadow: 0 10px 22px rgba(43, 61, 93, .06); }
.automation-node::before { position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 11px 0 0 11px; background: #5e82ee; content: ""; }
.action-node::before { background: #765de6; }
.automation-node-kicker { display: flex; align-items: center; gap: 7px; color: #8491a7; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.automation-node-icon { display: grid; place-items: center; width: 22px; height: 22px; color: #fff; border-radius: 6px; background: linear-gradient(135deg, #4b8cf4, #6374e5); font-size: 12px; }
.action-node .automation-node-icon { background: linear-gradient(135deg, #8a66ed, #5e59d8); }
.automation-node h4 { margin: 0 0 3px; color: #233956; font-size: 13px; }
.automation-node label { gap: 5px; font-size: 9px; }
.automation-node select { padding: 8px 9px; font-size: 10px; }
.automation-action-note { margin: 0; color: #96a2b4; font-size: 9px; line-height: 1.45; }
.automation-port { position: absolute; top: 50%; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #5e82ee; box-shadow: 0 0 0 2px #b9c9f5; transform: translateY(-50%); }
.automation-port.right { right: -7px; }
.automation-port.left { left: -7px; background: #765de6; box-shadow: 0 0 0 2px #c8bdf4; }
.automation-connector { position: relative; display: grid; justify-items: center; gap: 7px; color: #7685a4; font-size: 9px; font-weight: 800; }
.automation-connector i { width: 100%; height: 2px; background: linear-gradient(90deg, #6c95f0, #8b72ec); box-shadow: 0 0 8px rgba(103, 125, 231, .45); }
.automation-connector b { display: grid; place-items: center; width: 22px; height: 22px; margin-top: -18px; color: #fff; border-radius: 50%; background: #6f6de6; font-size: 17px; line-height: 1; }
.automation-builder-preview { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 14px; margin-top: 15px; color: #7e8ba0; border: 1px dashed #cbd6e8; border-radius: 8px; background: #fafbff; font-size: 10px; }
.automation-builder-preview span { width: 100%; color: #9aa6b8; font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.automation-builder-preview strong { color: #405585; font-size: 10px; }
.automation-builder-preview i { color: #716fe0; font-style: normal; font-size: 15px; }
.automation-builder-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 17px; }
.automation-builder-actions .primary-button:disabled { cursor: not-allowed; opacity: .45; }
@media (max-width: 760px) { .automation-builder-form { grid-template-columns: 1fr; }.automation-canvas { grid-template-columns: 1fr; }.automation-connector { grid-template-columns: 1fr auto; justify-items: stretch; align-items: center; width: 100%; }.automation-connector i { width: 2px; height: 28px; margin-left: 50%; }.automation-connector b { margin: 0; }.automation-connector span { display: none; }.automation-port.right, .automation-port.left { display: none; } }
.date-popover { position: fixed; z-index: 20; width: 278px; padding: 10px; border: 1px solid #dfe5ef; border-radius: 9px; background: #fff; box-shadow: 0 15px 35px rgba(18, 36, 67, .2); }
.date-popover[hidden] { display: none; }
.date-picker-top, .date-picker-heading, .date-picker-actions, .date-picker-time-row { display: flex; align-items: center; gap: 7px; }
.date-picker-top { justify-content: space-between; padding: 2px 2px 10px; }
.date-picker-top strong { flex: 1; color: #3a4963; font-size: 11px; text-align: center; }
.date-picker-top button, .date-picker-heading button { border: 0; border-radius: 5px; background: transparent; }
.date-today-button { padding: 6px 8px; color: #5369c4; border: 1px solid #d6def5 !important; font-size: 10px; }
.date-today-button:hover, .date-picker-heading button:hover { background: #eef1ff; }
.date-clock-toggle { width: 28px; height: 28px; color: #8995a7; font-size: 16px; }
.date-clock-toggle.active { color: #4e64d1; background: #eef1ff; }
.date-picker-heading { justify-content: space-between; margin-bottom: 9px; }
.date-picker-heading button { width: 25px; height: 27px; color: #65738a; font-size: 19px; line-height: 1; }
.date-picker-input { flex: 1; min-width: 0; padding: 6px 7px; color: #61708a; border: 1px solid #d8e0eb; border-radius: 5px; outline: 0; background: #fbfcfe; font-size: 10px; }
.date-picker-input:focus { border-color: #7890e8; box-shadow: 0 0 0 3px #eef1ff; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calendar-weekdays { margin-bottom: 3px; }
.calendar-weekday { padding: 3px 0; color: #9aa6b7; font-size: 9px; text-align: center; }
.calendar-day { width: 100%; height: 28px; padding: 0; color: #53617a; border: 0; border-radius: 6px; background: transparent; font-size: 10px; }
.calendar-day:hover { background: #eef1ff; }
.calendar-day.muted { color: #c2c9d3; }
.calendar-day.today { color: #4e64d1; box-shadow: inset 0 0 0 1px #a9b8ee; }
.calendar-day.selected { color: #fff; background: #4d6de5; box-shadow: none; }
.date-picker-time-row { justify-content: space-between; padding: 9px 0 2px; margin-top: 8px; border-top: 1px solid #edf0f5; }
.date-picker-time-row label { color: #7c899d; font-size: 10px; }
.date-picker-time-row input { padding: 5px 7px; color: #53617a; border: 1px solid #d8e0eb; border-radius: 5px; background: #fbfcfe; font-size: 10px; }
.date-picker-actions { justify-content: flex-end; padding-top: 9px; margin-top: 8px; border-top: 1px solid #edf0f5; }
.date-clear { padding: 5px 8px; color: #8a6870; border: 0; border-radius: 5px; background: #fff3f4; font-size: 9px; }
.date-autofill { padding: 9px 2px 2px; margin-top: 7px; color: #7e8797; border-top: 1px solid #edf0f5; font-size: 9px; text-align: center; }
.tag-cell { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 92px; padding: 3px 5px; color: #8090a6; border: 0; border-radius: 5px; background: transparent; font-size: 9px; text-align: left; }
.tag-cell:hover { background: #f0f3ff; }
.tag-cell.empty { min-height: 24px; color: #a2adbc; }
.tag-chip { padding: 4px 6px; color: var(--tag-color, #4c8dd7); border-radius: 4px; background: color-mix(in srgb, var(--tag-color, #4c8dd7) 15%, white); font-size: 9px; font-weight: 700; }
.tag-popover { width: 225px; }
.tag-menu-search input { width: 100%; padding: 8px 7px; color: #3e4e68; border: 1px solid #dfe5ef; border-radius: 5px; outline: 0; background: #fbfcfe; font-size: 10px; }
.tag-menu-search input:focus { border-color: #7890e8; box-shadow: 0 0 0 3px #eef1ff; }
.tag-options { display: grid; gap: 3px; max-height: 190px; padding: 8px 0; overflow: auto; }
.tag-option { display: flex; align-items: center; gap: 7px; width: 100%; padding: 7px; color: #4a5a73; border: 0; border-radius: 5px; background: transparent; font-size: 10px; text-align: left; }
.tag-option:hover, .tag-option.selected { background: #f0f3fa; }
.tag-option i { width: 13px; height: 13px; border-radius: 4px; background: var(--tag-color, #4c8dd7); }
.tag-option span { flex: 1; }
.tag-option b { color: #4f65d1; font-size: 12px; }
.tag-create, .tag-manage { width: 100%; padding: 8px 7px; color: #586dba; border: 0; border-top: 1px solid #edf0f5; background: transparent; font-size: 10px; text-align: left; }
.tag-create:hover, .tag-manage:hover { background: #f0f3fa; }
.inline-column-value { min-width: 70px; padding: 5px 7px; color: #64728a; border: 0; border-radius: 5px; background: transparent; font-size: 10px; text-align: left; }
.inline-column-value:hover { color: #4d66cf; background: #f0f3ff; }
.inline-column-value.empty { color: #a7b1bf; }
.inline-cell-input { width: min(180px, 20vw); padding: 5px 7px; color: #30405a; border: 1px solid #7890e8; border-radius: 5px; outline: 0; background: #fff; font-size: 10px; box-shadow: 0 0 0 3px #eef1ff; }
.date-cell.date-placeholder { color: #9da9b9; font-style: italic; }
.column-placeholder { color: #9da9b9; font-style: italic; }
.inline-column-heading { padding: 0; color: inherit; border: 0; background: transparent; font: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-align: left; text-transform: inherit; }
.inline-column-heading:hover { color: #4d66cf; }
.inline-column-heading-input { width: min(150px, 16vw); padding: 4px 6px; color: #42536e; border: 1px solid #7890e8; border-radius: 5px; outline: 0; background: #fff; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 0 0 3px #eef1ff; }
.board-group-actions { display: flex; align-items: center; gap: 10px; min-width: 850px; padding: 10px 14px; border-top: 1px solid #edf0f5; background: #fbfcff; }
.board-group-actions button { padding: 6px 9px; color: #5570ce; border: 1px dashed #b8c5e7; border-radius: 6px; background: #fff; font-size: 10px; font-weight: 800; }
.board-group-actions button:hover { color: #304eb3; border-color: #7187df; background: #f3f5ff; }
.board-group-actions span { color: #9aa6b8; font-size: 9px; }
.group-header-row td { padding: 9px 14px; border-bottom: 1px solid #dfe5ef; background: #f6f8fc; }
.group-header-row td { box-shadow: inset 3px 0 0 var(--group-color, #4d7cfe); }
.group-header-content { display: flex; align-items: center; gap: 7px; }
.group-collapse-toggle { width: 20px; padding: 2px; color: #71819a; border: 0; background: transparent; font-size: 15px; line-height: 1; }
.group-color-dot { flex: 0 0 auto; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--group-color, #4d7cfe); box-shadow: 0 0 0 2px color-mix(in srgb, var(--group-color, #4d7cfe) 22%, transparent); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.group-color-dot:hover, .group-color-dot:focus-visible { transform: scale(1.25); box-shadow: 0 0 0 3px color-mix(in srgb, var(--group-color, #4d7cfe) 28%, transparent); outline: 0; }
.group-color-popover { width: 218px; padding: 8px; }
.group-color-picker-title { padding: 4px 6px 8px; color: #65758e; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.group-color-swatch-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; padding: 7px 6px 11px; }
.group-color-swatch { width: 25px; height: 25px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--swatch-color); box-shadow: 0 2px 5px rgba(20, 34, 58, .16); cursor: pointer; }
.group-color-swatch:hover, .group-color-swatch:focus-visible { transform: scale(1.1); outline: 0; }
.group-color-swatch.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--swatch-color), 0 2px 5px rgba(20, 34, 58, .18); }
.group-color-custom { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 6px 4px; border-top: 1px solid #edf0f5; color: #65758e; font-size: 10px; font-weight: 700; }
.group-color-custom input { width: 30px; height: 25px; padding: 0; border: 0; border-radius: 5px; background: transparent; cursor: pointer; }
.group-name-button { padding: 0; color: #29416a; border: 0; background: transparent; font-size: 11px; font-weight: 800; text-align: left; }
.group-name-button:hover { color: #4d66cf; text-decoration: underline; }
.group-count { color: #9aa6b8; font-size: 9px; }
.group-item-row td { background: #fff; }
.group-item-row:hover td { background: #fbfcff; }
.group-total-row td { padding-top: 8px; padding-bottom: 8px; color: #6c7890; background: #fafbfe; font-size: 10px; }
.group-total-row strong { color: #354a70; font-size: 10px; }
.group-add-row td { padding: 0; border-bottom: 1px solid #edf0f5; background: #fff; }
.group-inline-add { display: flex; align-items: center; gap: 8px; padding: 5px 14px 7px 22px; }
.group-inline-add input { flex: 1; min-width: 220px; padding: 7px 8px; color: #30405a; border: 1px solid transparent; border-radius: 6px; outline: 0; background: #fff; font-size: 10px; }
.group-inline-add input::placeholder { color: #a0adbf; }
.group-inline-add input:focus { border-color: #cbd6f4; background: #fbfcff; box-shadow: 0 0 0 3px #eff2ff; }
.group-inline-add button { padding: 6px 9px; color: #6177ca; border: 0; border-radius: 6px; background: #f0f2ff; font-size: 10px; font-weight: 700; }
.group-inline-add button:hover { color: #3e5fca; background: #e7ebff; }
.board-total-row td { border-top: 2px solid #dfe6f0; background: #f1f4fa; }
.group-move-select { max-width: 24px; padding: 3px 0; color: #8290a5; border: 0; background: transparent; font-size: 11px; }
.group-move-select:focus { max-width: 110px; border: 1px solid #cbd6f4; border-radius: 4px; background: #fff; }
.checkbox-label { display: flex !important; align-items: center; grid-template-columns: auto 1fr; gap: 7px !important; font-weight: 600 !important; }
.checkbox-label input { width: auto !important; accent-color: #5269dd; }
.automation-builder { padding: 16px 18px; }
.automation-builder-head { padding-bottom: 13px; }
.automation-builder-head h3 { font-size: 15px; }
.automation-builder-head p:not(.eyebrow) { font-size: 9px; }
.automation-builder-form { grid-template-columns: minmax(0, 1fr) 105px 170px; gap: 10px; margin-top: 13px; }
.automation-builder-form label, .automation-board-select { gap: 4px; color: #7b899f; font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }
.automation-builder input, .automation-builder select { padding: 7px 8px; font-size: 10px; }
.automation-builder-form input, .automation-builder-form select { height: 32px; }
.automation-canvas { grid-template-columns: minmax(0, 1fr) 145px minmax(0, 1fr); gap: 8px; padding: 28px 12px; margin-top: 15px; }
.automation-node.compact-node { min-height: 102px; padding: 14px 16px; }
.compact-node .automation-node-kicker { font-size: 7px; }
.compact-node .automation-node-icon { width: 18px; height: 18px; font-size: 10px; }
.automation-node-remove { padding: 0 3px; margin-left: auto; color: #a9b3c2; border: 0; background: transparent; font-size: 13px; }
.automation-node-remove:hover { color: #5068cc; }
.automation-sentence { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; color: #304663; font-size: 15px; line-height: 1.45; }
.automation-sentence strong { color: #243c62; font-size: 15px; }
.automation-inline-picker { width: auto !important; min-width: 46px; max-width: 145px; padding: 0 0 2px !important; color: #3e63c4 !important; border: 0 !important; border-bottom: 1px solid #5675d1 !important; border-radius: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; font-size: 15px !important; font-weight: 700 !important; appearance: none; cursor: pointer; }
.automation-inline-picker:hover, .automation-inline-picker:focus { color: #2c4da8 !important; border-bottom-color: #2c4da8 !important; }
.automation-inline-value { width: 78px !important; min-width: 55px; padding: 0 0 2px !important; color: #3e63c4 !important; border: 0 !important; border-bottom: 1px solid #5675d1 !important; border-radius: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; font-size: 15px !important; font-weight: 700 !important; }
.automation-inline-value::placeholder { color: #9aa8bd; font-weight: 600; }
.automation-choice-button { display: inline-flex; align-items: center; gap: 6px; max-width: 190px; padding: 3px 6px; color: #3e63c4; border: 0; border-bottom: 1px solid #5675d1; border-radius: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-align: left; }
.automation-choice-button:hover, .automation-choice-button:focus { color: #2c4da8; border-bottom-color: #2c4da8; outline: 0; }
.automation-choice-icon { display: grid; place-items: center; width: 18px; height: 18px; color: #fff; border-radius: 4px; background: linear-gradient(135deg, #4b8cf4, #6374e5); font-size: 10px; }
.automation-choice-chevron { margin-left: auto; color: #8ea0bf; font-size: 12px; }
.automation-choice-menu { position: fixed; z-index: 10000; width: 320px; max-height: min(470px, calc(100vh - 20px)); overflow: hidden; padding: 8px; color: #2a3a55; border: 1px solid #dce4f1; border-radius: 8px; background: #fff; box-shadow: 0 18px 40px rgba(42, 58, 85, .2); }
.automation-choice-search-wrap { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid #dce4f1; border-radius: 5px; background: #f7f9fd; }
.automation-choice-search-wrap > span { color: #7b8da9; font-size: 16px; }
.automation-choice-search-wrap input { width: 100%; padding: 0; color: #263b5b; border: 0; outline: 0; background: transparent; font: inherit; font-size: 11px; }
.automation-choice-results { max-height: 405px; overflow: auto; margin-top: 5px; }
.automation-choice-category { padding: 5px 0; }
.automation-choice-category + .automation-choice-category { border-top: 1px solid #e5eaf2; }
.automation-choice-category h5 { margin: 4px 7px 3px; color: #7889a2; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.automation-choice-option { display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; width: 100%; gap: 8px; padding: 7px; color: #273a58; border: 0; border-radius: 5px; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.automation-choice-option:hover, .automation-choice-option.is-selected { background: #f0f4fc; }
.automation-choice-option-icon { display: grid; place-items: center; width: 22px; height: 22px; color: #4b6ec9; border-radius: 5px; background: #edf2ff; font-size: 11px; font-weight: 800; }
.automation-choice-option strong, .automation-choice-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.automation-choice-option strong { font-size: 10px; }
.automation-choice-option small { margin-top: 2px; color: #8997aa; font-size: 8px; font-weight: 500; }
.automation-choice-empty { padding: 14px 8px; margin: 0; color: #8997aa; font-size: 10px; }
.automation-action-note { margin-top: 2px; font-size: 8px; }
.automation-port { width: 8px; height: 8px; }
.automation-connector { min-width: 110px; }
.automation-connector i { box-shadow: 0 0 11px rgba(103, 125, 231, .55); }
.automation-connector.waiting { gap: 8px; }
.automation-connector.waiting button { padding: 7px 10px; color: #5f70c9; border: 1px dashed #9eace0; border-radius: 7px; background: #f7f8ff; font-size: 9px; font-weight: 800; }
.automation-connector.waiting button:hover { border-color: #6378dc; background: #eef1ff; }
.automation-connector.empty span { color: #a2afc2; font-size: 9px; }
.automation-empty-slot { display: grid; place-items: center; min-height: 102px; padding: 12px; border: 1px dashed #b9c8e5; border-radius: 11px; background: rgba(255, 255, 255, .65); }
.automation-empty-slot button { display: grid; justify-items: center; gap: 5px; padding: 9px 13px; color: #5870ca; border: 0; border-radius: 8px; background: transparent; }
.automation-empty-slot button:hover { background: #f0f3ff; }
.automation-empty-slot button > span { display: grid; place-items: center; width: 27px; height: 27px; color: #fff; border-radius: 50%; background: linear-gradient(135deg, #4d8ff5, #725ce6); font-size: 17px; line-height: 1; }
.automation-empty-slot button strong { font-size: 10px; }
.automation-empty-slot button small { color: #94a1b4; font-size: 8px; font-weight: 500; }
.automation-empty-slot button:disabled { cursor: not-allowed; opacity: .55; }
.automation-builder-preview { padding: 9px 12px; margin-top: 12px; font-size: 9px; }
.automation-builder-preview span { font-size: 7px; }
.automation-builder-preview strong { font-size: 9px; }
.automation-builder-preview.empty p { margin: 0; color: #8997aa; font-size: 9px; }
.automation-builder-actions { padding-top: 12px; }
.automation-canvas#automation-canvas { position: relative; display: block; min-height: 360px; padding: 0; overflow: hidden; }
.automation-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.automation-wire { fill: none; stroke: #6d80e5; stroke-width: 2; filter: drop-shadow(0 0 4px rgba(99, 112, 218, .32)); }
.automation-wire.preview { stroke: #8a98ec; stroke-dasharray: 5 5; opacity: .9; }
.automation-canvas .automation-node { position: absolute; z-index: 2; width: 260px; min-height: 105px; box-sizing: border-box; cursor: grab; }
.automation-canvas .automation-node:active { cursor: grabbing; }
.automation-port-labels { position: absolute; right: -12px; top: 36%; display: grid; gap: 11px; transform: translateX(100%); }
.automation-port-labels small { position: absolute; right: 10px; color: #9aa5b5; font-size: 7px; white-space: nowrap; transform: translateY(-13px); }
.automation-canvas .automation-port { z-index: 4; width: 10px; height: 10px; padding: 0; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #8fa2e4; cursor: crosshair; transform: none; }
.automation-canvas .input-port { left: -7px; top: 50%; background: #fff; }
.automation-canvas .output-port { position: relative; inset: auto; background: #6789ed; }
.automation-canvas .status-port { background: #8468e6; box-shadow: 0 0 0 1px #b2a2e8; }
.automation-canvas .target-port { left: -7px; top: 50%; background: #8569e5; box-shadow: 0 0 0 1px #b2a2e8; }
.automation-start-slot, .automation-action-slot { position: absolute; z-index: 2; width: 260px; }
.automation-start-slot { left: 28px; top: 95px; }
.automation-action-slot { right: 28px; top: 115px; }
.automation-start-slot .automation-empty-slot, .automation-action-slot .automation-empty-slot { position: relative; min-height: 105px; box-sizing: border-box; }
.automation-empty-slot { margin: 0; }
.canvas-add-trigger { position: absolute; z-index: 3; top: 12px; right: 15px; }
.canvas-add-trigger button { padding: 6px 9px; color: #5d71c9; border: 1px dashed #b9c6e6; border-radius: 7px; background: rgba(255, 255, 255, .82); font-size: 9px; font-weight: 800; }
.canvas-add-trigger button:hover { border-color: #6378dc; background: #f0f3ff; }
.automation-node-kicker[data-node-drag-handle] { cursor: grab; }
.automation-node-kicker[data-node-drag-handle]:active { cursor: grabbing; }
@media (max-width: 760px) { .automation-builder-form { grid-template-columns: 1fr 1fr; }.automation-builder-form label:first-child { grid-column: 1 / -1; }.automation-canvas { grid-template-columns: 1fr; padding: 18px 12px; }.automation-connector { min-width: 0; }.automation-connector.empty i, .automation-connector.waiting i { width: 2px; height: 26px; margin: 0 auto; }.automation-connector.waiting { grid-template-columns: 1fr; justify-items: center; }.automation-connector.waiting button { width: fit-content; }.automation-inline-picker { max-width: 130px; } }
@media (max-width: 760px) { .automation-canvas#automation-canvas { min-height: 540px; }.automation-canvas .automation-node, .automation-start-slot, .automation-action-slot { width: calc(100% - 32px); left: 16px; right: auto; }.automation-start-slot { top: 70px; }.automation-action-slot { top: 300px; }.automation-canvas .trigger-node[data-node-id]:nth-of-type(3) { top: 205px; }.canvas-add-trigger { top: 10px; right: 12px; } }
.form-builder-fields { display: grid; gap: 10px; padding: 12px; border: 1px solid #e6ebf3; border-radius: 9px; }.form-builder-fields legend { padding: 0 4px; color: #6e7d94; font-size: 9px; font-weight: 800; }.form-field-config { display: grid; gap: 8px; padding: 9px; border: 1px solid #edf0f5; border-radius: 8px; background: #fff; }.form-field-config:has([data-form-field-enabled]:checked) { border-color: #cdd8fb; background: #fafbff; }.form-field-config > .checkbox-label { color: #3f506b !important; }.form-field-settings { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 8px; padding-left: 23px; }.form-field-settings label { display: grid; gap: 4px; color: #718097; font-size: 9px; font-weight: 700; }.form-field-settings input { padding: 7px 8px; color: #35465f; border: 1px solid #dfe6f0; border-radius: 6px; outline: 0; background: #fff; font-size: 10px; }.form-share-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; margin-bottom: 16px; border: 1px solid #e1e7f2; border-radius: 8px; background: #fafbff; }.form-share-bar > span { color: #52627b; font-size: 10px; font-weight: 800; }.form-share-bar code { flex: 1; min-width: 180px; overflow: hidden; color: #6d7b91; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.form-share-bar .outline-button { padding: 6px 8px; font-size: 9px; }.form-share-bar .text-button { color: #5771ca; font-size: 10px; text-decoration: none; }.public-form-shell { min-height: 100vh; display: grid; place-items: center; padding: 34px 16px; background: radial-gradient(circle at 10% 10%, #edf3ff 0, transparent 38%), #f5f8fc; }.public-form-shell[hidden] { display: none; }.public-form-card { width: min(620px, 100%); padding: 30px clamp(22px, 5vw, 52px) 26px; border: 1px solid #e2e8f1; border-radius: 18px; background: #fff; box-shadow: 0 22px 70px rgba(22, 48, 92, .12); }.public-form-brand img { width: 205px; height: auto; margin-bottom: 24px; }.public-form-card h1 { margin: 4px 0 8px; color: #1c3151; font-size: 27px; letter-spacing: -.04em; }.public-form-intro { margin: 0 0 25px; color: #7a899f; font-size: 12px; line-height: 1.55; }.public-form-card form { display: grid; gap: 15px; }.public-form-card label { display: grid; gap: 6px; color: #4d5d76; font-size: 11px; font-weight: 800; }.public-form-card label small { color: #8794a8; font-size: 10px; font-weight: 500; line-height: 1.4; }.public-form-card input, .public-form-card select { width: 100%; padding: 11px 12px; color: #30425f; border: 1px solid #dce4ef; border-radius: 8px; outline: 0; background: #fbfcfe; font: inherit; font-size: 12px; }.public-form-card input:focus, .public-form-card select:focus { border-color: #7891e5; box-shadow: 0 0 0 3px #eef1ff; }.public-form-card .primary-button { justify-content: center; margin-top: 5px; }.public-form-message { min-height: 17px; margin: 0; font-size: 11px; }.public-form-message.success { color: #168261; }.public-form-message.error { color: #c25353; }.public-form-footer { display: block; margin-top: 22px; color: #a0abba; font-size: 9px; text-align: center; }
.form-tag-options { display: flex; flex-wrap: wrap; gap: 7px; padding: 3px 0; }
.form-field-block { display: grid; gap: 6px; }
.form-field-label { color: inherit; font-size: inherit; font-weight: inherit; }
.form-choice { display: inline-flex !important; align-items: center; gap: 6px !important; width: auto !important; padding: 7px 9px; color: #50617a !important; border: 1px solid #dce4ef; border-radius: 7px; background: #fbfcfe; cursor: pointer; font-size: 10px !important; font-weight: 700 !important; }
.form-choice:hover { border-color: #8ca4e2; background: #f4f7ff; }
.form-choice input { width: auto !important; margin: 0; accent-color: #4e67e9; }
.form-choice-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tag-color, #4c8dd7); }
.form-choice-empty { color: #8c98aa; font-size: 10px; }
.form-branding-settings { display: grid; gap: 10px; padding: 12px; margin-top: 12px; border: 1px solid #e6ebf3; border-radius: 9px; background: #fafbfe; }.form-branding-settings legend { padding: 0 4px; color: #6e7d94; font-size: 9px; font-weight: 800; }.form-branding-settings textarea, .form-branding-settings select, .form-branding-settings input[type="text"], .form-branding-settings input[type="url"] { width: 100%; padding: 7px 8px; color: #35465f; border: 1px solid #dfe6f0; border-radius: 6px; outline: 0; background: #fff; font-size: 10px; }.form-branding-settings input[type="file"] { color: #718097; font-size: 10px; }.form-branding-colors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.form-branding-colors label { display: grid; gap: 4px; color: #718097; font-size: 9px; font-weight: 700; }.form-branding-colors input[type="color"] { width: 100%; height: 30px; padding: 2px; cursor: pointer; }.public-form-shell { background: radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--form-background, #f5f8fc) 75%, #fff 25%) 0, transparent 38%), var(--form-background, #f5f8fc); }.public-form-card { border-top: 4px solid var(--form-accent, #3157e8); }.public-form-card.template-soft { border-radius: 28px; background: #fffdfb; box-shadow: 0 20px 60px rgba(102, 76, 45, .12); }.public-form-card.template-bold { border-radius: 10px; border-top-width: 8px; box-shadow: 12px 14px 0 color-mix(in srgb, var(--form-accent, #3157e8) 15%, transparent); }.public-form-card.template-bold h1 { font-size: 31px; }.public-form-card .primary-button { background: var(--form-button, #3f67ee); }.public-form-card .public-form-brand img { max-height: 64px; width: auto; max-width: 250px; object-fit: contain; }.public-form-card input:focus, .public-form-card select:focus { border-color: var(--form-accent, #7891e5); box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-accent, #7891e5) 14%, transparent); }.connected-form-intro { align-items: flex-start; }.connected-form-intro > .outline-button { margin-left: auto; }
.modal-backdrop { overflow-y: auto; align-items: flex-start; }.modal { max-height: calc(100vh - 40px); overflow-y: auto; margin: auto; }.view-modal { max-height: calc(100vh - 40px); overflow-y: auto; }.view-modal .modal-actions { position: sticky; bottom: -22px; z-index: 2; padding: 12px 0 22px; background: #fff; border-top: 1px solid #edf0f5; }
.item-cell { min-width: 0; }.item-select-checkbox, .board-select-all { width: 14px !important; height: 14px; margin: 0 4px 0 0; accent-color: #4e67e9; cursor: pointer; }.item-selected td { background: #f3f6ff !important; }.bulk-item-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #dfe6f2; background: #f7f9ff; }.bulk-item-toolbar[hidden] { display: none; }.bulk-item-toolbar strong { margin-right: auto; color: #334766; font-size: 10px; }.bulk-item-toolbar select { min-width: 132px; padding: 7px 8px; color: #4d5d76; border: 1px solid #dce4ef; border-radius: 7px; background: #fff; font-size: 10px; }.bulk-item-toolbar .outline-button, .bulk-item-toolbar .danger-button, .bulk-item-toolbar .text-button { padding: 7px 9px; font-size: 10px; }.bulk-item-toolbar .danger-button { color: #b74f58; border: 1px solid #efcfd2; border-radius: 7px; background: #fff; cursor: pointer; }.bulk-item-toolbar .danger-button:hover { background: #fff4f4; }.item-action-popover { min-width: 170px; padding: 8px; }.item-action-popover button { display: block; width: 100%; padding: 8px; color: #b64e58; border: 0; border-radius: 5px; background: transparent; font-size: 10px; text-align: left; cursor: pointer; }.item-action-popover button:hover { background: #fff1f2; }
.item-cell { min-width: 0; }.item-select-checkbox, .board-select-all { width: 14px !important; height: 14px; margin: 0 4px 0 0; accent-color: #4e67e9; cursor: pointer; }.item-selected td { background: #f3f6ff !important; }.bulk-item-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #dfe6f2; background: #f7f9ff; }.bulk-item-toolbar[hidden] { display: none; }.bulk-item-toolbar strong { margin-right: auto; color: #334766; font-size: 10px; }.bulk-item-toolbar select { min-width: 132px; padding: 7px 8px; color: #4d5d76; border: 1px solid #dce4ef; border-radius: 7px; background: #fff; font-size: 10px; }.bulk-item-toolbar .outline-button, .bulk-item-toolbar .danger-button, .bulk-item-toolbar .text-button { padding: 7px 9px; font-size: 10px; }.bulk-item-toolbar .danger-button { color: #b74f58; border: 1px solid #efcfd2; border-radius: 7px; background: #fff; cursor: pointer; }.bulk-item-toolbar .danger-button:hover { background: #fff4f4; }.item-action-popover { min-width: 170px; padding: 8px; }.item-action-popover button { display: block; width: 100%; padding: 8px; color: #b64e58; border: 0; border-radius: 5px; background: transparent; font-size: 10px; text-align: left; cursor: pointer; }.item-action-popover button:hover { background: #fff1f2; }

html[data-theme="dark"] .app-shell .item-selected td { background: #1d3a60 !important; color: #e5effb !important; }
html[data-theme="dark"] .app-shell .item-selected .item-cell,
html[data-theme="dark"] .app-shell .item-selected .item-cell strong,
html[data-theme="dark"] .app-shell .item-selected .person,
html[data-theme="dark"] .app-shell .item-selected .custom-cell,
html[data-theme="dark"] .app-shell .item-selected .date-cell,
html[data-theme="dark"] .app-shell .item-selected .inline-column-value { color: #e5effb !important; }
html[data-theme="dark"] .app-shell .item-selected .subtask-count { color: #c5d6ec; background: #2b4b72; }
html[data-theme="dark"] .app-shell .bulk-item-toolbar { color: #dbe8f7; border-color: #304764; background: #142640; }
html[data-theme="dark"] .app-shell .bulk-item-toolbar strong { color: #dbe8f7; }
html[data-theme="dark"] .app-shell .bulk-item-toolbar select { color: #dbe8f7; border-color: #405a7c; background: #102139; }
html[data-theme="dark"] .app-shell .bulk-item-toolbar .outline-button { color: #d0def2; border-color: #456184; background: #1a3153; }
html[data-theme="dark"] .app-shell .bulk-item-toolbar .text-button { color: #a9c3e9; }
html[data-theme="dark"] .app-shell .bulk-item-toolbar .danger-button { color: #ffb9c0; border-color: #713b4b; background: #351f31; }
html[data-theme="dark"] .app-shell .bulk-item-toolbar .danger-button:hover { color: #fff; background: #52293b; }
.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: #c2cee1 #f5f7fb; scrollbar-width: thin; }
.work-table { width: max-content; min-width: 100%; table-layout: auto; }
.work-table th[data-column-drag], .work-table td { min-width: 128px; }
.work-table th.item-col, .work-table td:first-child { min-width: 280px; }
.work-table th.add-column-header, .work-table th[data-column-fixed="activity"], .work-table td:last-child { min-width: 116px; }
.work-table th[data-column-drag] { cursor: grab; user-select: none; transition: background .15s ease, box-shadow .15s ease; }
.work-table th[data-column-drag]:active, .work-table th.column-dragging { cursor: grabbing; opacity: .7; }
.work-table th.column-drag-over { background: #eef2ff; box-shadow: inset 3px 0 0 #5b72e8; }
.work-table th[data-column-drag], .work-table td { border-right: 1px solid #edf0f5; }
.work-table th[data-column-drag] { position: relative; padding-right: 34px; }
.work-table th[data-column-drag] .column-menu-trigger { position: absolute; top: 50%; right: 9px; opacity: 1; transform: translateY(-50%); }
.column-resize-handle { position: absolute; top: 0; right: 0; bottom: 0; width: 7px; cursor: col-resize; background: transparent; z-index: 2; }
.column-resize-handle:hover, .is-resizing-column .column-resize-handle { background: #6b80ea; }
.is-resizing-column, .is-resizing-column * { cursor: col-resize !important; user-select: none !important; }
.board-tabs { position: relative; }
.board-view-nav { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; overflow: visible; }
.board-view-tabs { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: calc(100% - 55px); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.board-view-tabs::-webkit-scrollbar { display: none; }
.board-view-tab { display: inline-flex; align-items: center; gap: 5px; padding: 11px 8px 12px; color: #8a98ac; border: 0; border-bottom: 2px solid transparent; background: transparent; font-size: 10px; white-space: nowrap; cursor: pointer; }
.board-view-tab:hover { color: #4564ca; }
.board-view-tab.active { color: #3f5fc2; border-bottom-color: #4b71ef; font-weight: 800; }
.board-view-tab small { color: #9aa6b8; font-size: 8px; font-weight: 600; }
.view-switcher { position: relative; }
.view-switcher-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; color: #52647c; border: 1px solid #dfe6f0; border-radius: 6px; background: #fff; font-size: 10px; font-weight: 800; cursor: pointer; }
.view-switcher-toggle span { color: #7f8ca1; }
.view-picker-menu { position: absolute; top: calc(100% + 7px); left: 0; z-index: 15; width: 260px; max-height: 340px; overflow: visible; padding: 7px; border: 1px solid #dfe5ef; border-radius: 9px; background: #fff; box-shadow: 0 15px 35px rgba(18, 36, 67, .18); }
.view-picker-menu[hidden] { display: none; }
.view-picker-row { display: flex; align-items: stretch; gap: 4px; border-radius: 6px; }
.view-picker-row.active { background: #eef2ff; }
.view-picker-option, .view-picker-menu-button, .view-picker-add { border: 0; background: transparent; font-size: 10px; cursor: pointer; }
.view-picker-option { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 8px; padding: 8px; color: #465873; text-align: left; }
.view-picker-option small { color: #9aa6b8; font-size: 8px; }
.view-picker-menu-button { width: 28px; color: #8b98aa; }
.view-picker-menu-button:hover, .view-picker-option:hover { color: #4564ca; background: #f4f6ff; }
.view-picker-add { display: block; width: 100%; padding: 9px 8px 7px; margin-top: 5px; border-top: 1px solid #edf0f5; color: #5c74cf; text-align: left; }
.view-row-action-menu { position: absolute; top: -6px; left: calc(100% + 6px); z-index: 20; width: 205px; padding: 7px; border: 1px solid #dfe5ef; border-radius: 8px; background: #fff; box-shadow: 0 15px 35px rgba(18, 36, 67, .2); }
.view-row-action-menu .column-menu-title { padding: 5px 7px 7px; color: #8b98aa; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.view-row-action-menu button { display: block; width: 100%; padding: 8px 7px; color: #4b5c75; border: 0; border-radius: 5px; background: transparent; font-size: 10px; text-align: left; cursor: pointer; }
.view-row-action-menu button:hover { color: #4564ca; background: #f4f6ff; }
.view-row-action-menu .column-danger { color: #b64e58; }
.view-row-action-menu button[disabled] { color: #b8c0cc; cursor: not-allowed; }
.filter-panel { position: absolute; top: calc(100% + 8px); right: 22px; z-index: 14; width: min(720px, calc(100vw - 50px)); padding: 16px; border: 1px solid #dfe5ef; border-radius: 10px; background: #fff; box-shadow: 0 18px 45px rgba(18, 36, 67, .18); }
.filter-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.filter-panel-head > div:first-child { display: grid; gap: 4px; }
.filter-panel-head strong { color: #354966; font-size: 12px; }
.filter-panel-head span { color: #8c98aa; font-size: 9px; }
.filter-panel-actions { display: flex; align-items: center; gap: 8px; }
.filter-panel-actions button:first-child, .filter-panel-foot button, .filter-panel-links button { padding: 5px 7px; color: #718097; border: 0; background: transparent; font-size: 9px; cursor: pointer; }
.filter-panel-actions .primary-button { padding: 7px 10px; font-size: 9px; }
.filter-mode-switch { display: flex; gap: 14px; padding: 13px 0 9px; margin-top: 8px; border-bottom: 1px solid #edf0f5; }
.filter-mode-switch button { padding: 0 0 6px; color: #8a98ac; border: 0; border-bottom: 2px solid transparent; background: transparent; font-size: 10px; cursor: pointer; }
.filter-mode-switch button.active { color: #4564ca; border-bottom-color: #5474e8; font-weight: 800; }
.filter-advanced-content, .filter-quick-content { display: grid; gap: 8px; padding-top: 12px; }
.filter-row { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(110px, .8fr) minmax(130px, 1fr) 26px; gap: 7px; align-items: center; }
.filter-row select, .filter-row input { width: 100%; padding: 8px; color: #51617a; border: 1px solid #dfe6f0; border-radius: 6px; background: #fbfcfe; font-size: 10px; }
.filter-value-slot { min-width: 0; }
.filter-value-slot select, .filter-value-slot input { width: 100%; padding: 8px; color: #51617a; border: 1px solid #dfe6f0; border-radius: 6px; background: #fbfcfe; font-size: 10px; }
.filter-remove { width: 24px; height: 24px; color: #9a6c72; border: 0; border-radius: 5px; background: #fff1f2; cursor: pointer; }
.filter-empty-row { padding: 13px 8px; color: #94a0b1; border: 1px dashed #dfe5ef; border-radius: 6px; font-size: 10px; }
.filter-panel-links { display: flex; gap: 8px; }
.filter-panel-links button { color: #5873cb; }
.filter-quick-content { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); max-height: 230px; overflow-y: auto; }
.quick-filter-column { display: grid; gap: 7px; padding: 9px; border: 1px solid #edf0f5; border-radius: 7px; background: #fbfcff; }
.quick-filter-column strong { color: #63728a; font-size: 9px; }
.quick-filter-column > div { display: flex; flex-wrap: wrap; gap: 5px; }
.quick-filter-column button { padding: 5px 7px; color: #5970c1; border: 1px solid #dce4fb; border-radius: 5px; background: #f4f6ff; font-size: 9px; cursor: pointer; }
.quick-filter-column button:hover { color: #fff; background: #5873de; }
.filter-panel-foot { display: flex; justify-content: flex-end; padding-top: 10px; margin-top: 8px; border-top: 1px solid #edf0f5; }
.view-action-popover button[disabled] { color: #b8c0cc; cursor: not-allowed; }
.public-view-shell { min-height: 100vh; padding: 34px 16px; background: radial-gradient(circle at 10% 10%, #edf3ff 0, transparent 38%), #f5f8fc; }
.public-view-shell[hidden] { display: none; }
.public-view-card { width: min(1250px, 100%); padding: 24px; margin: 0 auto; border: 1px solid #e1e7f1; border-radius: 16px; background: #fff; box-shadow: 0 22px 70px rgba(22, 48, 92, .1); }
.public-view-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid #edf0f5; }
.public-view-brand img { width: 170px; height: auto; }
.public-view-brand span, .public-view-lock { padding: 6px 9px; color: #5b70c6; border-radius: 999px; background: #eef1ff; font-size: 9px; font-weight: 800; }
.public-view-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 24px 0 20px; }
.public-view-heading h1 { margin: 3px 0 5px; color: #203452; font-size: 25px; }
.public-view-heading p:last-child { margin: 0; color: #8491a5; font-size: 11px; }
.public-view-table-wrap { overflow-x: auto; border: 1px solid #e5eaf2; border-radius: 9px; }
.public-view-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.public-view-table th, .public-view-table td { padding: 11px 13px; border-right: 1px solid #edf0f5; border-bottom: 1px solid #edf0f5; color: #64738a; font-size: 10px; text-align: left; white-space: nowrap; }
.public-view-table th { color: #8b98aa; background: #fafbfe; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.public-view-table tr:last-child td { border-bottom: 0; }
.public-group-row td { color: #334766; background: #f4f6fb; font-weight: 800; }
.public-group-row small { margin-left: 7px; color: #99a4b4; font-weight: 500; }
.public-status-chip { padding: 5px 8px; color: #5370c9; border-radius: 5px; background: #eef1ff; font-weight: 700; }
.public-cell-empty { color: #a9b2bf; }
.public-view-footer { display: block; padding-top: 18px; color: #a0abba; font-size: 9px; text-align: center; }
.public-view-error { max-width: 650px; margin-top: 8vh; text-align: center; }
.public-view-error h1 { color: #203452; }
.public-view-error p { color: #7c899d; font-size: 12px; }
.visual-view-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px; border-bottom: 1px solid #e8edf4; background: #fff; }
.visual-view-heading h3 { margin: 3px 0 5px; color: #263b5a; font-size: 18px; }
.visual-view-heading p:last-child { margin: 0; color: #8491a5; font-size: 10px; }
.calendar-view-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; padding: 18px; background: #f8faff; }
.calendar-view-day { min-height: 150px; padding: 10px; border: 1px solid #e2e8f2; border-radius: 9px; background: #fff; }
.calendar-view-day header { display: flex; justify-content: space-between; padding-bottom: 9px; margin-bottom: 8px; color: #556782; border-bottom: 1px solid #edf0f5; font-size: 10px; }
.calendar-view-day header span { color: #8e9caf; }
.calendar-view-card { display: grid; gap: 4px; padding: 9px; margin-bottom: 7px; border-left: 3px solid #5474e8; border-radius: 6px; background: #f2f5ff; }
.calendar-view-card strong { color: #344766; font-size: 10px; }
.calendar-view-card span { color: #7b89a0; font-size: 9px; }
.timeline-view { padding: 20px 24px 28px; background: #fbfcff; }
.timeline-axis { display: flex; justify-content: space-between; padding: 0 0 14px 190px; color: #8b98aa; font-size: 9px; }
.timeline-row { display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: center; min-height: 45px; }
.timeline-row > strong { overflow: hidden; color: #4b5d78; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.timeline-track { position: relative; height: 10px; border-radius: 999px; background: repeating-linear-gradient(90deg, #e9edf5 0, #e9edf5 1px, transparent 1px, transparent 12.5%); }
.timeline-bar { position: absolute; top: -4px; display: flex; align-items: center; min-width: 24px; height: 18px; padding: 0 8px; overflow: visible; border-radius: 999px; background: linear-gradient(90deg, #627beb, #62b8df); }
.timeline-bar i { color: #fff; font-size: 8px; font-style: normal; white-space: nowrap; }
.chart-view { display: grid; gap: 13px; padding: 25px 28px 34px; }
.chart-row { display: grid; grid-template-columns: 150px 1fr 95px; gap: 12px; align-items: center; }
.chart-row strong { overflow: hidden; color: #52627a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.chart-track { height: 24px; overflow: hidden; border-radius: 5px; background: #eef1f7; }
.chart-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #536fe1, #6ac5c0); }
.chart-row b { color: #4a5e7a; font-size: 10px; text-align: right; }
.kml-view { display: grid; gap: 12px; padding: 18px 24px 24px; background: #f7f9fd; }
.kml-view-toolbar, .kml-map-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.kml-view-toolbar strong { display: block; color: #30435f; font-size: 12px; }
.kml-view-toolbar span, .kml-map-footer > span { display: block; margin-top: 3px; color: #8290a5; font-size: 9px; }
.kml-map { position: relative; height: min(58vh, 520px); min-height: 330px; overflow: hidden; border: 1px solid #d5dfec; border-radius: 12px; background: #dbe7ee; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); cursor: grab; touch-action: none; }
.kml-map::after { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 35%, rgba(25,44,63,.08)); content: ""; }
.kml-map.is-dragging { cursor: grabbing; }
.kml-map-controls { position: absolute; z-index: 5; top: 12px; left: 12px; display: grid; gap: 5px; }
.kml-map-controls button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(42, 66, 95, .7); border-radius: 7px; color: #233b5a; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(20, 37, 58, .2); cursor: pointer; font-size: 18px; font-weight: 800; line-height: 1; }
.kml-map-controls button:hover { border-color: #5278c8; background: #fff; }
.kml-map-controls button:last-child { margin-top: 4px; font-size: 16px; }
.kml-map-hint { position: absolute; z-index: 4; right: 12px; bottom: 10px; padding: 5px 7px; border-radius: 5px; color: #fff; background: rgba(25, 43, 65, .76); font-size: 9px; pointer-events: none; }
.kml-map-layer { position: absolute; }
.kml-map-layer > img { position: absolute; width: 256px; height: 256px; max-width: none; object-fit: cover; }
.kml-map-marker { position: absolute; z-index: 2; display: grid; justify-items: center; gap: 2px; padding: 0; border: 0; background: transparent; color: #243b5b; transform: translate(-50%, -100%); cursor: pointer; filter: drop-shadow(0 2px 2px rgba(21, 39, 61, .3)); }
.kml-map-marker span, .kml-legend-icon { display: grid; place-items: center; width: 25px; height: 25px; color: #fff; border: 2px solid #fff; border-radius: 50% 50% 50% 0; background: #4d70df; font-size: 13px; font-weight: 900; transform: rotate(-45deg); }
.kml-map-marker span { padding-bottom: 2px; }
.kml-map-marker span::first-letter { transform: rotate(45deg); }
.kml-map-marker b { max-width: 140px; padding: 3px 5px; overflow: hidden; border-radius: 4px; color: #fff; background: rgba(25, 43, 65, .86); font-size: 8px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.kml-map-marker.icon-pole span, .kml-legend-icon.icon-pole { border-radius: 4px; background: #e29a35; }
.kml-map-marker.icon-manhole span, .kml-legend-icon.icon-manhole { border-radius: 50%; background: #9a6cdd; }
.kml-map-marker.icon-house span, .kml-legend-icon.icon-house { border-radius: 5px; background: #4caf86; }
.kml-map-marker.icon-fiber span, .kml-legend-icon.icon-fiber { border-radius: 4px; background: #2fa8c8; }
.kml-map-empty { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 7px; color: #667a94; background: rgba(234, 241, 246, .78); text-align: center; }
.kml-map-empty strong { color: #3d5573; font-size: 13px; }
.kml-map-empty span { font-size: 10px; }
.kml-map-footer { padding: 0 2px; }
.kml-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px 12px; }
.kml-legend > span { display: inline-flex; align-items: center; gap: 5px; color: #677a93; font-size: 9px; }
.kml-legend-icon { width: 14px; height: 14px; border-width: 1px; font-size: 8px; }
.kml-selected-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid #d5dfec; border-radius: 8px; background: #fff; }
.kml-selected-item strong { color: #30435f; font-size: 10px; }
.kml-selected-item span { color: #7889a2; font-size: 9px; }
.kml-marker-rules { display: grid; gap: 6px; padding: 10px; margin-top: 10px; border: 1px solid #dce5f0; border-radius: 8px; background: #f8faff; }
.kml-marker-rules legend { padding: 0 4px; color: #6f8097; font-size: 9px; font-weight: 800; }
.kml-marker-rule { display: grid; gap: 6px; padding: 7px 0 9px; color: #536680; font-size: 10px; }
.kml-marker-rule + .kml-marker-rule { border-top: 1px solid #e2e9f2; }
.kml-marker-rule-label { font-weight: 800; }
.kml-marker-source-config { display: grid; gap: 8px; padding: 8px 0 10px; color: #536680; font-size: 10px; }
.kml-marker-source-config + .kml-marker-source-config { border-top: 1px solid #e2e9f2; }
.kml-marker-rule-head { display: grid; gap: 5px; }
.kml-marker-rule-head > span:nth-child(2), .kml-rule-icon > span { color: #7889a2; font-size: 9px; font-weight: 700; }
.kml-conditional-rules { display: grid; gap: 6px; }
.kml-conditional-rule { padding: 7px; border: 1px solid #d5dfec; border-radius: 7px; background: #fff; }
.kml-condition-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 5px; align-items: center; color: #6f8097; font-size: 9px; font-weight: 700; }
.kml-condition-row select, .kml-condition-row input { min-width: 0; width: 100%; }
.kml-remove-rule { width: 24px; height: 24px; padding: 0; border: 1px solid #d5dfec; border-radius: 5px; color: #a45757; background: #fff; cursor: pointer; font-size: 15px; line-height: 1; }
.kml-remove-rule:hover { border-color: #d87777; background: #fff4f4; }
.kml-rule-icon { display: grid; gap: 5px; margin-top: 6px; }
.kml-add-rule { justify-self: start; padding: 5px 8px; border: 1px dashed #a9bad2; border-radius: 6px; color: #4d70df; background: transparent; cursor: pointer; font: inherit; font-size: 9px; font-weight: 800; }
.kml-add-rule:hover { border-color: #4d70df; background: #f2f5ff; }
.kml-icon-value { display: none !important; }
.kml-icon-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 5px; max-height: 170px; padding: 3px; overflow-y: auto; }
.kml-icon-choice { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 5px 6px; overflow: hidden; border: 1px solid #d5dfec; border-radius: 6px; color: #5a6b82; background: #fff; cursor: pointer; font: inherit; text-align: left; }
.kml-icon-choice:hover { border-color: #7693d4; background: #f4f7ff; }
.kml-icon-choice.selected { border-color: #506fe3; color: #273d63; background: #eaf0ff; box-shadow: 0 0 0 1px rgba(80, 111, 227, .2); }
.kml-icon-choice span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kml-preview-icon { display: grid; flex: 0 0 auto; place-items: center; width: 20px; height: 20px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 5px; color: #fff; background: #4d70df; font-size: 11px; font-style: normal; font-weight: 900; line-height: 1; }
.kml-preview-icon.icon-pin, .kml-preview-icon.icon-person { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.kml-preview-icon.icon-pin { background: #4d70df; }
.kml-preview-icon.icon-pole { background: #e29a35; }
.kml-preview-icon.icon-manhole { border-radius: 50%; background: #9a6cdd; }
.kml-preview-icon.icon-cabinet { background: #df6f75; }
.kml-preview-icon.icon-house { background: #4caf86; }
.kml-preview-icon.icon-fiber { background: #2fa8c8; }
.kml-preview-icon.icon-junction { background: #d17a3a; }
.kml-preview-icon.icon-warning { background: #dc5a5a; }
.kml-preview-icon.icon-water { background: #328fc6; }
.kml-preview-icon.icon-tree { background: #4e9b67; }
.kml-preview-icon.icon-camera { background: #697b95; }
.kml-preview-icon.icon-info { background: #507fc2; }
.kml-preview-icon.icon-truck { background: #6f7ed5; }
.kml-preview-icon.icon-person { background: #d36aaa; }
.kml-preview-icon.icon-hospital { background: #d85d73; }
.kml-preview-icon.icon-school { background: #7c73cc; }
.kml-preview-icon.icon-parking { background: #5c789e; }
.kml-preview-icon.icon-fuel { background: #d18b42; }
.kml-preview-icon.icon-star { background: #d7a538; }
.kml-preview-icon.icon-flag { background: #c45d5d; }
.kml-preview-icon.icon-phone { background: #529f88; }
.kml-map-marker.icon-cabinet span, .kml-legend-icon.icon-cabinet { border-radius: 4px; background: #df6f75; }
.kml-map-marker.icon-junction span, .kml-legend-icon.icon-junction { background: #d17a3a; }
.kml-map-marker.icon-warning span, .kml-legend-icon.icon-warning { background: #dc5a5a; }
.kml-map-marker.icon-water span, .kml-legend-icon.icon-water { background: #328fc6; }
.kml-map-marker.icon-tree span, .kml-legend-icon.icon-tree { background: #4e9b67; }
.kml-map-marker.icon-camera span, .kml-legend-icon.icon-camera { background: #697b95; }
.kml-map-marker.icon-info span, .kml-legend-icon.icon-info { background: #507fc2; }
.kml-map-marker.icon-truck span, .kml-legend-icon.icon-truck { background: #6f7ed5; }
.kml-map-marker.icon-person span, .kml-legend-icon.icon-person { background: #d36aaa; }
.kml-map-marker.icon-hospital span, .kml-legend-icon.icon-hospital { background: #d85d73; }
.kml-map-marker.icon-school span, .kml-legend-icon.icon-school { background: #7c73cc; }
.kml-map-marker.icon-parking span, .kml-legend-icon.icon-parking { background: #5c789e; }
.kml-map-marker.icon-fuel span, .kml-legend-icon.icon-fuel { background: #d18b42; }
.kml-map-marker.icon-star span, .kml-legend-icon.icon-star { background: #d7a538; }
.kml-map-marker.icon-flag span, .kml-legend-icon.icon-flag { background: #c45d5d; }
.kml-map-marker.icon-phone span, .kml-legend-icon.icon-phone { background: #529f88; }
html[data-theme="dark"] .app-shell .kml-view { background: #101e32; }
html[data-theme="dark"] .app-shell .kml-view-toolbar strong, html[data-theme="dark"] .app-shell .kml-selected-item strong { color: #dbe8f7; }
html[data-theme="dark"] .app-shell .kml-view-toolbar span, html[data-theme="dark"] .app-shell .kml-map-footer > span, html[data-theme="dark"] .app-shell .kml-legend > span, html[data-theme="dark"] .app-shell .kml-selected-item span { color: #91a8c4; }
html[data-theme="dark"] .app-shell .kml-map { border-color: #304967; background: #182b43; }
html[data-theme="dark"] .app-shell .kml-map-empty { color: #9cb0c9; background: rgba(19, 35, 58, .82); }
html[data-theme="dark"] .app-shell .kml-map-empty strong { color: #d4e2f3; }
html[data-theme="dark"] .app-shell .kml-selected-item, html[data-theme="dark"] .app-shell .kml-marker-rules { border-color: #304967; background: #132640; }
html[data-theme="dark"] .app-shell .kml-marker-rules legend { color: #9cb0c9; }
html[data-theme="dark"] .app-shell .kml-marker-rule { color: #c4d5e9; }
html[data-theme="dark"] .app-shell .kml-marker-source-config + .kml-marker-source-config { border-color: #304967; }
html[data-theme="dark"] .kml-marker-source-config { color: #c4d5e9; }
html[data-theme="dark"] .kml-marker-source-config + .kml-marker-source-config { border-color: #304967; }
html[data-theme="dark"] .app-shell .kml-marker-rule-head > span:nth-child(2), html[data-theme="dark"] .app-shell .kml-rule-icon > span { color: #9cb0c9; }
html[data-theme="dark"] .kml-marker-rule-head > span:nth-child(2), html[data-theme="dark"] .kml-rule-icon > span { color: #9cb0c9; }
html[data-theme="dark"] .app-shell .kml-conditional-rule { border-color: #304967; background: #102038; }
html[data-theme="dark"] .kml-conditional-rule { border-color: #304967; background: #102038; }
html[data-theme="dark"] .app-shell .kml-condition-row { color: #9cb0c9; }
html[data-theme="dark"] .kml-condition-row { color: #9cb0c9; }
html[data-theme="dark"] .app-shell .kml-remove-rule { border-color: #304967; color: #ef9b9b; background: #132640; }
html[data-theme="dark"] .kml-remove-rule { border-color: #304967; color: #ef9b9b; background: #132640; }
html[data-theme="dark"] .app-shell .kml-remove-rule:hover { border-color: #d87777; background: #35233a; }
html[data-theme="dark"] .kml-remove-rule:hover { border-color: #d87777; background: #35233a; }
html[data-theme="dark"] .app-shell .kml-add-rule { border-color: #45617f; color: #9db6ff; }
html[data-theme="dark"] .kml-add-rule { border-color: #45617f; color: #9db6ff; }
html[data-theme="dark"] .app-shell .kml-add-rule:hover { border-color: #7191da; background: #192f4d; }
html[data-theme="dark"] .kml-add-rule:hover { border-color: #7191da; background: #192f4d; }
.csv-import-modal { width: min(760px, 100%); }
.csv-import-summary { margin: -8px 0 14px; color: #718097; font-size: 11px; line-height: 1.45; }
.csv-import-options { display: grid; grid-template-columns: minmax(220px, 340px); margin-bottom: 14px; }
.csv-import-gps { display: grid; gap: 8px; padding: 10px 12px; margin-bottom: 14px; border: 1px solid #d6e0ec; border-radius: 9px; background: #f8faff; }
.csv-import-gps legend { padding: 0 4px; color: #596b85; font-size: 10px; font-weight: 800; }
.csv-import-gps p { margin: 0; color: #718097; font-size: 10px; line-height: 1.4; }
.csv-import-gps .form-row { grid-template-columns: 1fr 1fr 1fr; }
.csv-import-mapping { display: grid; gap: 6px; max-height: min(52vh, 520px); padding: 8px; overflow-y: auto; border: 1px solid #e1e8f1; border-radius: 9px; background: #f8faff; }
.csv-import-mapping-heading, .csv-import-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 260px); gap: 12px; align-items: center; }
.csv-import-mapping-heading { padding: 2px 8px 5px; color: #718097; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.csv-import-row { padding: 7px 8px; border: 1px solid #e1e8f1; border-radius: 7px; background: #fff; }
.csv-import-row > div { min-width: 0; }
.csv-import-row strong { display: block; overflow: hidden; color: #273d5b; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.csv-import-row span { display: block; overflow: hidden; margin-top: 3px; color: #8a98ac; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.csv-import-row select { min-width: 0; }
.csv-import-error { padding: 8px 10px; margin: 12px 0 0; border: 1px solid #efcfd2; border-radius: 7px; color: #b74f58; background: #fff4f4; font-size: 10px; }
html[data-theme="dark"] .csv-import-summary { color: #9db0c8; }
html[data-theme="dark"] .csv-import-gps { border-color: #304764; background: #132640; }
html[data-theme="dark"] .csv-import-gps legend { color: #c9d8eb; }
html[data-theme="dark"] .csv-import-gps p { color: #9db0c8; }
html[data-theme="dark"] .csv-import-mapping { border-color: #304764; background: #102038; }
html[data-theme="dark"] .csv-import-mapping-heading { color: #9db0c8; }
html[data-theme="dark"] .csv-import-row { border-color: #304764; background: #142640; }
html[data-theme="dark"] .csv-import-row strong { color: #e0eaf7; }
html[data-theme="dark"] .csv-import-row span { color: #8fa6c2; }
html[data-theme="dark"] .csv-import-error { border-color: #713b4b; color: #ffb9c0; background: #351f31; }
html[data-theme="dark"] .kml-marker-rules { border-color: #304967; background: #132640; }
html[data-theme="dark"] .kml-marker-rules legend { color: #9cb0c9; }
html[data-theme="dark"] .kml-marker-rule { color: #c4d5e9; }
html[data-theme="dark"] .kml-marker-rule + .kml-marker-rule { border-color: #304967; }
html[data-theme="dark"] .kml-icon-choice { border-color: #304967; color: #b8cbe3; background: #102038; }
html[data-theme="dark"] .kml-icon-choice:hover { border-color: #5579c8; background: #192f4d; }
html[data-theme="dark"] .kml-icon-choice.selected { border-color: #6687f2; color: #e1eaff; background: #203a62; }
html[data-theme="dark"] .kml-map-controls button { border-color: #45617f; color: #d8e6f8; background: rgba(16, 32, 56, .92); }
html[data-theme="dark"] .kml-map-controls button:hover { border-color: #7191da; background: #1b3354; }
.chart-view.line .chart-track { background: repeating-linear-gradient(90deg, #e9edf5 0, #e9edf5 1px, transparent 1px, transparent 10%); }
.chart-view.line .chart-track span { background: linear-gradient(90deg, #65b8e2, #5b72df); }
.chart-donut-layout { display: flex; align-items: center; justify-content: center; gap: 36px; min-height: 220px; }
.chart-donut { display: grid; place-content: center; width: 160px; height: 160px; border-radius: 50%; position: relative; text-align: center; }
.chart-donut::after { content: ""; position: absolute; inset: 24px; border-radius: 50%; background: #fff; }
.chart-donut span, .chart-donut small { position: relative; z-index: 1; color: #334766; text-align: center; }
.chart-donut span { font-size: 22px; font-weight: 800; }
.chart-donut small { font-size: 9px; }
.chart-legend { display: grid; gap: 9px; min-width: 180px; }
.chart-legend div { display: grid; grid-template-columns: 10px 1fr auto; gap: 7px; align-items: center; color: #60718a; font-size: 10px; }
.chart-legend i { width: 9px; height: 9px; border-radius: 3px; }
.chart-legend b { color: #435673; font-size: 10px; }
.visual-empty { padding: 30px; color: #94a0b1; font-size: 11px; text-align: center; }
.visual-view-settings { display: grid; gap: 9px; padding: 12px; margin-top: 10px; border: 1px solid #e6ebf3; border-radius: 9px; background: #fafbfe; }
.visual-view-settings legend { padding: 0 4px; color: #6e7d94; font-size: 9px; font-weight: 800; }
.view-item-picker { display: grid; gap: 6px; max-height: 150px; padding: 7px; overflow-y: auto; border-top: 1px solid #edf0f5; }
.view-item-picker[hidden] { display: none; }
.view-form-settings select[multiple] { min-height: 58px; }
@media (max-width: 760px) { .board-view-nav { max-width: calc(100vw - 32px); }.board-view-tabs { overflow-x: auto; }.timeline-axis { padding-left: 110px; }.timeline-row { grid-template-columns: 95px 1fr; gap: 10px; }.chart-row { grid-template-columns: 90px 1fr 70px; gap: 7px; } }
html[data-theme="dark"] .app-shell .inline-cell-input { color: #e2ebf7; border-color: #5b7caf; background: #0e1c30; box-shadow: 0 0 0 3px rgba(86, 119, 190, .2); }
html[data-theme="dark"] .app-shell .inline-cell-input::placeholder { color: #7891ae; }
html[data-theme="dark"] .app-shell .inline-cell-input:focus { color: #f1f6ff; border-color: #8ba9dd; background: #10223a; box-shadow: 0 0 0 3px rgba(86, 119, 190, .28); }
html[data-theme="dark"] .app-shell input[type="number"]::-webkit-inner-spin-button,
html[data-theme="dark"] .app-shell input[type="number"]::-webkit-outer-spin-button { filter: invert(1) opacity(.8); }
.timeline-view { overflow-x: auto; }
.timeline-wire-caption { display: flex; align-items: center; gap: 7px; padding: 0 0 12px 190px; color: #7f8da2; font-size: 9px; }
.timeline-wire-key { width: 28px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, #5875e9, #59c0da); }
.timeline-row { min-height: 92px; }
.timeline-track { height: 3px; margin-top: 15px; background: repeating-linear-gradient(90deg, #dfe5ef 0, #dfe5ef 1px, transparent 1px, transparent 12.5%); }
.timeline-wire-light { position: absolute; top: -1px; left: 0; width: 34px; height: 5px; border-radius: 999px; background: linear-gradient(90deg, transparent, #fff, #63d5ef, transparent); filter: drop-shadow(0 0 5px #6ecff0); animation: timeline-light-run 3.8s linear infinite; z-index: 4; }
.timeline-event { position: absolute; top: -1px; display: flex; flex-direction: column; align-items: center; width: 112px; transform: translateX(-50%); z-index: 3; pointer-events: auto; }
.timeline-event i { display: block; width: 9px; height: 9px; margin-top: -3px; border: 2px solid #fff; border-radius: 50%; background: #5f7bea; box-shadow: 0 0 0 3px rgba(95, 123, 234, .2); }
.timeline-event i::after { display: block; width: 1px; height: 29px; margin: 7px auto 0; background: currentColor; content: ""; opacity: .55; }
.timeline-event b, .timeline-event small { position: absolute; color: #415572; font-size: 8px; text-align: center; white-space: nowrap; }
.timeline-event b { bottom: 29px; font-weight: 800; }
.timeline-event small { bottom: 17px; color: #8795a8; }
.timeline-event.below b { top: 34px; bottom: auto; }
.timeline-event.below small { top: 46px; bottom: auto; }
.timeline-event.activity i { background: #f0a35b; box-shadow: 0 0 0 3px rgba(240, 163, 91, .2); }
@keyframes timeline-light-run { from { left: -3%; opacity: .1; } 12% { opacity: 1; } 70% { opacity: 1; } to { left: 103%; opacity: .05; } }
html[data-theme="dark"] .app-shell .timeline-wire-caption { color: #92a8c2; }
html[data-theme="dark"] .app-shell .timeline-track { background: repeating-linear-gradient(90deg, #304764 0, #304764 1px, transparent 1px, transparent 12.5%); }
html[data-theme="dark"] .app-shell .timeline-event b { color: #c9d8eb; }
html[data-theme="dark"] .app-shell .timeline-event small { color: #8198b5; }
.timeline-block-picker { display: grid; gap: 8px; padding: 10px; margin: 8px 0; border: 1px solid #dfe6f2; border-radius: 8px; background: #fbfcff; }
.timeline-block-picker legend { padding: 0 4px; color: #667894; font-size: 9px; font-weight: 800; }
.timeline-block-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.timeline-block-option { display: flex; align-items: flex-start; gap: 8px; padding: 9px; border: 1px solid #dfe6f2; border-radius: 7px; background: #fff; cursor: pointer; }
.timeline-block-option:hover, .timeline-block-option.selected { border-color: #7890e8; background: #f0f3ff; }
.timeline-block-option input { margin-top: 2px; accent-color: #4e67e9; }
.timeline-block-option span { display: grid; gap: 3px; }
.timeline-block-option strong { color: #40526c; font-size: 10px; }
.timeline-block-option small { color: #8a98aa; font-size: 8px; }
html[data-theme="dark"] .app-shell .timeline-block-picker { border-color: #304764; background: #13233a; }
html[data-theme="dark"] .app-shell .timeline-block-picker legend { color: #9bb0ca; }
html[data-theme="dark"] .app-shell .timeline-block-option { border-color: #304764; background: #101d31; }
html[data-theme="dark"] .app-shell .timeline-block-option:hover,
html[data-theme="dark"] .app-shell .timeline-block-option.selected { border-color: #5b7caf; background: #1b3558; }
html[data-theme="dark"] .app-shell .timeline-block-option strong { color: #d7e4f4; }
html[data-theme="dark"] .app-shell .timeline-block-option small { color: #8da4bf; }
@media (max-width: 760px) { .timeline-block-options { grid-template-columns: 1fr; } }
html[data-theme="dark"] .view-modal .modal-actions { background: #14243b; border-color: #304764; }
html[data-theme="dark"] .view-modal .modal-actions .outline-button { color: #d3e1f3; border-color: #456184; background: #1a3153; }
html[data-theme="dark"] .view-modal .modal-actions .outline-button:hover { color: #fff; background: #244574; }
html[data-theme="dark"] .view-modal .modal-actions .primary-button { color: #fff; background: linear-gradient(135deg, #416ef0, #5a57e7); }
html[data-theme="dark"] .view-modal .modal-actions .primary-button:hover { background: linear-gradient(135deg, #527df5, #6c68f0); }
html[data-theme="dark"] .view-modal label { color: #c9d8eb; }
html[data-theme="dark"] .view-modal input::placeholder { color: #8399b4; }
html[data-theme="dark"] .view-modal input:focus,
html[data-theme="dark"] .view-modal select:focus,
html[data-theme="dark"] .view-modal textarea:focus { border-color: #8ba9dd; box-shadow: 0 0 0 3px rgba(86, 119, 190, .22); }
html[data-theme="dark"] .view-modal .form-builder-fields,
html[data-theme="dark"] .view-modal .form-branding-settings { border-color: #304764; background: #13233a; }
html[data-theme="dark"] .view-modal .form-builder-fields legend,
html[data-theme="dark"] .view-modal .form-branding-settings legend { color: #9bb0ca; }
html[data-theme="dark"] .view-modal .form-field-config { border-color: #304764; background: #101d31; }
html[data-theme="dark"] .view-modal .form-field-config:has([data-form-field-enabled]:checked) { border-color: #5b7caf; background: #172b49; }
html[data-theme="dark"] .view-modal .form-field-config > .checkbox-label { color: #d7e4f4 !important; }
html[data-theme="dark"] .view-modal .form-field-settings label,
html[data-theme="dark"] .view-modal .form-branding-colors label { color: #9bb0ca; }
html[data-theme="dark"] .view-modal .form-field-settings input,
html[data-theme="dark"] .view-modal .form-branding-settings textarea,
html[data-theme="dark"] .view-modal .form-branding-settings select,
html[data-theme="dark"] .view-modal .form-branding-settings input[type="text"],
html[data-theme="dark"] .view-modal .form-branding-settings input[type="url"] { color: #e2ebf7; border-color: #3b5476; background: #0f1c30; }
html[data-theme="dark"] .view-modal .form-branding-settings input[type="file"] { color: #c4d3e6; background: #0f1c30; }
html[data-theme="dark"] .view-picker-row.active { background: #214771; }
html[data-theme="dark"] .view-picker-row.active .view-picker-option { color: #f1f6ff; }
html[data-theme="dark"] .view-picker-row.active .view-picker-menu-button { color: #b9d2f4; }
html[data-theme="dark"] .view-picker-row.active:hover,
html[data-theme="dark"] .view-picker-row.active .view-picker-option:hover { background: #2b5788; }
.chart-time-settings[hidden], [data-chart-category-settings][hidden] { display: none; }
.time-chart-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 0 0 14px; color: #64758d; font-size: 9px; }
.time-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.time-chart-legend i { width: 8px; height: 8px; border-radius: 50%; }
.time-chart-bars { display: flex; align-items: stretch; gap: 14px; min-height: 250px; padding: 22px 18px 0; border-bottom: 1px solid #dfe6f2; background: repeating-linear-gradient(0deg, transparent 0, transparent 49px, #e8edf5 50px); }
.time-chart-group { display: grid; flex: 1; min-width: 70px; grid-template-rows: 1fr auto; gap: 8px; align-items: end; }
.time-chart-columns { display: flex; align-items: end; justify-content: center; gap: 4px; height: 210px; }
.time-chart-columns span { width: min(26px, 18%); min-height: 0; border-radius: 5px 5px 0 0; box-shadow: 0 4px 12px rgba(47, 82, 170, .13); }
.time-chart-group small { color: #74849a; font-size: 9px; text-align: center; white-space: nowrap; }
.time-chart-line { min-height: 280px; padding: 12px 18px 0; border-bottom: 1px solid #dfe6f2; background: repeating-linear-gradient(0deg, transparent 0, transparent 54px, #e8edf5 55px); }
.time-chart-line svg { display: block; width: 100%; height: 245px; overflow: visible; }
.time-chart-line svg line { stroke: #aab8cb; stroke-width: .5; }
.time-chart-line polyline { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.time-chart-line circle { vector-effect: non-scaling-stroke; }
.time-chart-labels { display: flex; justify-content: space-between; gap: 8px; color: #74849a; font-size: 9px; }
html[data-theme="dark"] .app-shell .time-chart-legend { color: #9db0c8; }
html[data-theme="dark"] .app-shell .time-chart-bars,
html[data-theme="dark"] .app-shell .time-chart-line { border-color: #304764; background: repeating-linear-gradient(0deg, transparent 0, transparent 49px, #253b58 50px); }
html[data-theme="dark"] .app-shell .time-chart-group small,
html[data-theme="dark"] .app-shell .time-chart-labels { color: #8fa6c0; }
html[data-theme="dark"] .app-shell .time-chart-line svg line { stroke: #6f85a3; }

/* Tags stay readable on the dark board and intentionally use the compact,
   colored-text treatment used by the reference board. */
.tag-cell { gap: 9px; min-width: 108px; color: #8496ad; cursor: pointer; }
.tag-cell:hover { background: #edf1fa; }
.tag-chip { padding: 0; color: var(--tag-color, #4c8dd7); border-radius: 0; background: transparent; font-size: 9px; font-weight: 800; line-height: 1.45; white-space: nowrap; user-select: text; cursor: context-menu; }
.tag-menu-search input { color: #3e4e68; background: #fbfcfe; }
.tag-empty { padding: 10px 7px; color: #8997aa; font-size: 10px; }
html[data-theme="dark"] .app-shell .tag-cell { color: #a1b4cd; background: transparent; }
html[data-theme="dark"] .app-shell .tag-cell:hover { background: #1c3557; }
html[data-theme="dark"] .app-shell .tag-cell.empty { color: #8ea5c0; }
html[data-theme="dark"] .app-shell .tag-chip { color: color-mix(in srgb, var(--tag-color, #69a9e8) 58%, white); background: transparent; }
html[data-theme="dark"] .app-shell .tag-popover { color: #dbe8f8; border-color: #385476; background: #13243b; box-shadow: 0 18px 40px rgba(0, 0, 0, .42); }
html[data-theme="dark"] .app-shell .tag-menu-search input { color: #e8f1fc; border-color: #486488; background: #0d1b2e; }
html[data-theme="dark"] .app-shell .tag-menu-search input::placeholder { color: #87a0bd; }
html[data-theme="dark"] .app-shell .tag-menu-search input:focus { border-color: #8ba9dd; box-shadow: 0 0 0 3px rgba(86, 119, 190, .25); }
html[data-theme="dark"] .app-shell .tag-option { color: #d2e0f1; }
html[data-theme="dark"] .app-shell .tag-option:hover,
html[data-theme="dark"] .app-shell .tag-option.selected { background: #1c3a60; }
html[data-theme="dark"] .app-shell .tag-option i { background: color-mix(in srgb, var(--tag-color, #69a9e8) 65%, white); }
html[data-theme="dark"] .app-shell .tag-option b { color: #a9c7ff; }
html[data-theme="dark"] .app-shell .tag-create,
html[data-theme="dark"] .app-shell .tag-manage { color: #9dbbff; border-color: #304764; }
html[data-theme="dark"] .app-shell .tag-create:hover,
html[data-theme="dark"] .app-shell .tag-manage:hover { background: #1c3a60; }
html[data-theme="dark"] .app-shell .tag-empty { color: #8fa6c0; }
/* The tag popover is mounted directly under <body>, outside .app-shell. */
html[data-theme="dark"] .tag-popover .tag-menu-search input { color: #e8f1fc; border-color: #486488; background: #0d1b2e; }
html[data-theme="dark"] .tag-popover .tag-menu-search input::placeholder { color: #87a0bd; }
html[data-theme="dark"] .tag-popover .tag-menu-search input:focus { border-color: #8ba9dd; box-shadow: 0 0 0 3px rgba(86, 119, 190, .25); }
html[data-theme="dark"] .tag-popover .tag-option { color: #d2e0f1; }
html[data-theme="dark"] .tag-popover .tag-option:hover,
html[data-theme="dark"] .tag-popover .tag-option.selected { color: #e8f1fc; background: #1c3a60; }
html[data-theme="dark"] .tag-popover .tag-option i { background: color-mix(in srgb, var(--tag-color, #69a9e8) 65%, white); }
html[data-theme="dark"] .tag-popover .tag-option b { color: #a9c7ff; }
html[data-theme="dark"] .tag-popover .tag-create,
html[data-theme="dark"] .tag-popover .tag-manage { color: #9dbbff; border-color: #304764; }
html[data-theme="dark"] .tag-popover .tag-create:hover,
html[data-theme="dark"] .tag-popover .tag-manage:hover { color: #fff; background: #1c3a60; }
html[data-theme="dark"] .tag-popover .tag-empty { color: #8fa6c0; }

.total-rule-toggle { margin-top: 8px; }
.total-rule-fields { display: grid; gap: 7px; padding: 9px; margin-top: 7px; border: 1px solid #dfe6f2; border-radius: 7px; background: #f8faff; }
.total-rule-fields[hidden] { display: none; }
.total-rule-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; align-items: center; color: #65758e; font-size: 9px; font-weight: 800; }
.total-rule-row select, .total-rule-row input { min-width: 0; width: 100%; padding: 6px; color: #35465f; border: 1px solid #dfe5ef; border-radius: 5px; outline: 0; background: #fff; font-size: 9px; }
.total-rule-row:nth-child(2) { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr); }
.total-rule-fields small { color: #7f8da1; font-size: 8px; line-height: 1.35; }
.group-total-rules { display: grid; gap: 9px; max-height: 260px; padding: 10px; margin-top: 12px; overflow-y: auto; border: 1px solid #e6ebf3; border-radius: 9px; background: #fafbfe; }
.group-total-rules legend { padding: 0 4px; color: #6e7d94; font-size: 9px; font-weight: 800; }
.group-total-rule-card { display: grid; gap: 7px; padding: 9px; border: 1px solid #dfe6f2; border-radius: 7px; background: #fff; }
.group-total-rule-fields { display: grid; gap: 6px; padding-top: 2px; }
.group-total-rule-fields[hidden] { display: none; }
.group-total-rule-preview { color: #70809a; font-size: 9px; line-height: 1.35; }
.group-total-rule-preview.empty { color: #c27b55; }
.total-rule-any-value { display: inline-flex; align-items: center; min-height: 28px; color: #7b8ba3; font-size: 9px; font-style: italic; }
html[data-theme="dark"] .total-rule-fields { border-color: #304764; background: #142640; }
html[data-theme="dark"] .total-rule-row { color: #a7b9d0; }
html[data-theme="dark"] .total-rule-row select,
html[data-theme="dark"] .total-rule-row input { color: #e2ebf7; border-color: #486488; background: #0d1b2e; }
html[data-theme="dark"] .total-rule-fields small { color: #8fa6c0; }
html[data-theme="dark"] .group-total-rules { border-color: #304764; background: #13233a; }
html[data-theme="dark"] .group-total-rules legend { color: #9bb0ca; }
html[data-theme="dark"] .group-total-rule-card { border-color: #304764; background: #101d31; }
html[data-theme="dark"] .group-total-rule-preview { color: #91a8c2; }
html[data-theme="dark"] .group-total-rule-preview.empty { color: #e0a071; }
html[data-theme="dark"] .total-rule-any-value { color: #9bb0ca; }

/* Status label editing: keep the editor wide and make ordering visible. */
.status-popover.status-editor-popover { width: 306px; overflow-x: hidden; }
.status-editor-list { overflow-x: hidden; }
.status-editor-row { width: 100%; min-width: 0; }
.status-drag-handle { flex: 0 0 12px; color: #9aa7b8; font-size: 13px; line-height: 1; cursor: grab; user-select: none; }
.status-drag-handle:active { cursor: grabbing; }
.status-editor-row.status-row-dragging { opacity: .55; }
.status-editor-row.status-row-drop-target { outline: 1px dashed #6e8fe0; outline-offset: 2px; }
html[data-theme="dark"] .status-drag-handle { color: #9eb3cc; }
html[data-theme="dark"] .status-editor-row.status-row-drop-target { outline-color: #82a9f0; }
.status-menu-hint { display: block; padding: 0 7px 7px; color: #7b889c; font-size: 10px; line-height: 1.35; }

/* Public FlowGrid website */
.loader-preview-button { display: inline-flex; align-items: center; gap: 7px; padding: 0; margin-top: 17px; color: #3157e8; border: 0; background: transparent; font-size: 10px; font-weight: 800; }.loader-preview-button:hover { color: #1939b8; }.loader-preview-button span { font-size: 13px; }
.page-loader { position: fixed; z-index: 100; inset: 0; display: grid; place-content: center; gap: 10px; color: #eaf1ff; background: #081326; text-align: center; opacity: 0; pointer-events: none; transition: opacity .28s ease; }.page-loader[hidden] { display: none; }.page-loader.visible { opacity: 1; pointer-events: auto; }.page-loader strong { font-size: 20px; letter-spacing: -.04em; }.page-loader small { color: #87a0c4; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }.flow-loader-mark { position: relative; display: grid; grid-template-columns: repeat(4, 13px); grid-template-rows: repeat(4, 13px); gap: 6px; width: max-content; margin: 0 auto 3px; transform: rotate(-4deg); }.flow-loader-mark::before, .flow-loader-mark::after { position: absolute; content: ""; border-radius: 99px; background: linear-gradient(90deg, #67c7ff, #755af7); opacity: .65; }.flow-loader-mark::before { left: 11px; top: 17px; width: 42px; height: 3px; transform: rotate(-34deg); }.flow-loader-mark::after { left: 22px; top: 29px; width: 37px; height: 3px; transform: rotate(36deg); }.flow-loader-mark span { position: relative; z-index: 1; width: 13px; height: 13px; border: 2px solid #3766b8; border-radius: 50%; background: #10284b; box-shadow: 0 0 0 rgba(103, 199, 255, 0); animation: flow-loader-light 1.5s ease-in-out infinite; }.flow-loader-mark span:nth-child(1) { animation-delay: 0s; }.flow-loader-mark span:nth-child(2) { animation-delay: .08s; }.flow-loader-mark span:nth-child(3) { animation-delay: .16s; }.flow-loader-mark span:nth-child(4) { animation-delay: .24s; }.flow-loader-mark span:nth-child(5) { animation-delay: .32s; }.flow-loader-mark span:nth-child(6) { animation-delay: .4s; }.flow-loader-mark span:nth-child(7) { animation-delay: .48s; }.flow-loader-mark span:nth-child(8) { animation-delay: .56s; }.flow-loader-mark span:nth-child(9) { animation-delay: .64s; }.flow-loader-mark span:nth-child(10) { animation-delay: .72s; }.flow-loader-mark span:nth-child(11) { animation-delay: .8s; }.flow-loader-mark span:nth-child(12) { animation-delay: .88s; }@keyframes flow-loader-light { 0%, 100% { border-color: #3766b8; background: #10284b; box-shadow: 0 0 0 rgba(103,199,255,0); transform: scale(.85); } 30% { border-color: #75d8ff; background: #62b8ff; box-shadow: 0 0 18px rgba(103,199,255,.9); transform: scale(1.12); } 55% { border-color: #947cff; background: #7058f5; box-shadow: 0 0 13px rgba(125,96,255,.7); transform: scale(1); } }
.landing-shell, .contact-shell { min-height: 100vh; color: #14233b; background: #fbfcff; }.landing-shell[hidden], .contact-shell[hidden] { display: none; }.landing-nav { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 28px; width: min(1220px, calc(100% - 56px)); padding: 22px 0; margin: 0 auto; }.landing-brand { display: inline-flex; align-items: center; flex: 0 0 auto; }.landing-brand img { display: block; width: 152px; height: auto; }.landing-links { display: flex; align-items: center; gap: 28px; margin-left: auto; }.landing-links a, .landing-login { color: #5b6b85; border: 0; background: transparent; font-size: 12px; text-decoration: none; }.landing-links a:hover, .landing-login:hover { color: #3157e8; }.landing-nav-actions { display: flex; align-items: center; gap: 13px; }.landing-primary, .landing-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 42px; padding: 0 19px; border: 1px solid transparent; border-radius: 10px; font-size: 12px; font-weight: 800; cursor: pointer; }.landing-primary { color: #fff; background: #3157e8; box-shadow: 0 12px 24px rgba(49,87,232,.2); }.landing-primary:hover { background: #2547ca; transform: translateY(-1px); }.landing-primary span, .landing-secondary span { font-size: 16px; }.landing-secondary { color: #3157e8; border-color: #d3dcf8; background: #fff; }.landing-secondary:hover { border-color: #9fb2f5; background: #f5f7ff; }.landing-primary-large { min-height: 50px; padding: 0 24px; font-size: 13px; }.landing-menu-button { display: none; padding: 7px; color: #3157e8; border: 1px solid #d5def4; border-radius: 8px; background: #fff; }
.landing-hero { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(500px, 1.1fr); align-items: center; gap: 34px; width: min(1220px, calc(100% - 56px)); min-height: 660px; padding: 58px 0 80px; margin: 0 auto; }.landing-hero::before { position: absolute; z-index: -1; top: 8%; left: -14%; width: 58%; height: 80%; border-radius: 50%; background: radial-gradient(circle, rgba(107,127,248,.14), transparent 67%); content: ""; }.landing-hero-copy { max-width: 580px; }.landing-kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px; color: #3157e8; font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }.landing-kicker > span { width: 8px; height: 8px; border-radius: 50%; background: #60c9ed; box-shadow: 10px 0 #705cf5, 20px 0 #f5a341; }.landing-hero h1 { max-width: 620px; margin: 0; color: #10213c; font-size: clamp(48px, 6vw, 78px); font-weight: 700; letter-spacing: -.075em; line-height: .98; }.landing-hero h1 em { color: #3157e8; font-style: normal; }.landing-lede { max-width: 510px; margin: 25px 0 29px; color: #65748d; font-size: 16px; line-height: 1.65; }.landing-actions { display: flex; flex-wrap: wrap; gap: 12px; }.landing-note { display: flex; align-items: center; gap: 8px; margin-top: 20px; color: #8190a5; font-size: 10px; }.landing-note i { width: 3px; height: 3px; border-radius: 50%; background: #b8c2d1; }.note-check { display: grid; place-items: center; width: 17px; height: 17px; color: #fff; border-radius: 50%; background: #2ca67b; font-size: 10px; font-weight: 900; }.landing-hero-visual { position: relative; min-height: 510px; }.hero-orbit { position: absolute; border: 1px solid rgba(104,126,237,.18); border-radius: 50%; transform: rotate(-18deg); }.orbit-one { top: 6%; right: -10%; width: 108%; height: 76%; }.orbit-two { right: 9%; bottom: 0; width: 74%; height: 49%; border-color: rgba(90,205,223,.24); }.hero-board-card { position: absolute; z-index: 2; top: 17%; right: 2%; width: min(590px, 92%); padding: 21px; border: 1px solid #dce4f2; border-radius: 17px; background: rgba(255,255,255,.95); box-shadow: 0 30px 70px rgba(33,60,115,.16), 0 4px 12px rgba(33,60,115,.06); transform: rotate(2deg); }.hero-board-top { display: flex; align-items: flex-start; justify-content: space-between; }.mini-label { display: block; margin-bottom: 5px; color: #8595b1; font-size: 8px; font-weight: 900; letter-spacing: .12em; }.hero-board-top strong { color: #172b4e; font-size: 18px; letter-spacing: -.04em; }.hero-board-menu { color: #9baac0; font-weight: 900; }.hero-board-tabs { display: flex; gap: 18px; padding: 16px 0 13px; margin-top: 12px; border-bottom: 1px solid #edf0f6; color: #9aa9bd; font-size: 9px; }.hero-board-tabs .active { color: #3157e8; border-bottom: 2px solid #3157e8; padding-bottom: 13px; margin-bottom: -15px; font-weight: 800; }.hero-table-head, .hero-table-row { display: grid; grid-template-columns: 1.55fr .55fr 1fr .55fr; align-items: center; gap: 9px; }.hero-table-head { padding: 14px 0 8px; color: #9aa9bd; font-size: 8px; font-weight: 800; text-transform: uppercase; }.hero-table-row { min-height: 50px; border-top: 1px solid #f0f3f7; color: #74839b; font-size: 9px; }.hero-table-row b { display: flex; align-items: center; gap: 7px; color: #304360; font-size: 10px; }.row-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 3px; }.row-dot.violet { background: #715cf4; }.row-dot.cyan { background: #44c6d9; }.row-dot.green { background: #36b482; }.person-chip { display: grid; place-items: center; width: 24px; height: 24px; color: #fff; border-radius: 50%; background: #5f71d8; font-size: 8px; font-weight: 900; }.status-chip { width: max-content; padding: 6px 8px; border-radius: 6px; font-size: 8px; font-weight: 800; }.status-chip.purple { color: #6454d7; background: #eeebff; }.status-chip.cyan { color: #178da0; background: #dff7fb; }.status-chip.green { color: #238a64; background: #ddf8ec; }.hero-board-footer { display: flex; justify-content: space-between; padding-top: 15px; margin-top: 6px; border-top: 1px solid #edf0f6; color: #8b9ab0; font-size: 9px; }.hero-board-footer span i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #38bc89; }.hero-board-footer strong { color: #3157e8; }.hero-float-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #e1e8f4; border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: 0 18px 35px rgba(33,60,115,.13); }.hero-float-card small, .hero-float-card strong { display: block; }.hero-float-card small { margin-bottom: 3px; color: #91a0b5; font-size: 8px; }.hero-float-card strong { color: #2d4161; font-size: 10px; }.float-automation { top: 7%; left: -3%; animation: float-card 5s ease-in-out infinite; }.float-map { right: -1%; bottom: 11%; animation: float-card 5s 1s ease-in-out infinite; }.float-icon, .map-pin { display: grid; place-items: center; width: 28px; height: 28px; color: #fff; border-radius: 8px; background: #705cf4; }.map-pin { background: #32bda7; font-size: 13px; }@keyframes float-card { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.landing-proof { padding: 27px 20px 36px; border-top: 1px solid #edf0f6; border-bottom: 1px solid #edf0f6; text-align: center; }.landing-proof p { margin: 0 0 18px; color: #98a5b7; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.landing-proof > div { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(22px, 5vw, 74px); color: #7889a2; font-size: 13px; font-weight: 900; letter-spacing: .06em; }.landing-section, .landing-process { width: min(1120px, calc(100% - 56px)); padding: 115px 0; margin: 0 auto; }.landing-section-heading { max-width: 650px; }.landing-section-heading h2, .process-copy h2, .landing-cta h2 { max-width: 700px; margin: 0; color: #132541; font-size: clamp(33px, 4vw, 51px); letter-spacing: -.065em; line-height: 1.04; }.landing-section-heading > p:last-child, .process-copy > p:not(.landing-kicker), .landing-cta p { max-width: 520px; margin: 20px 0 0; color: #75849b; font-size: 15px; line-height: 1.65; }.landing-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin-top: 53px; }.landing-feature-grid article { min-height: 258px; padding: 28px; border: 1px solid #e6ebf4; border-radius: 14px; background: #fff; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }.landing-feature-grid article:hover { border-color: #becaf0; box-shadow: 0 18px 45px rgba(34,65,125,.1); transform: translateY(-5px); }.feature-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 24px; border-radius: 10px; font-size: 18px; }.feature-icon.blue { color: #3157e8; background: #e8eeff; }.feature-icon.violet { color: #735af4; background: #efebff; }.feature-icon.cyan { color: #148ba8; background: #e0f8fb; }.landing-feature-grid h3 { margin: 0 0 10px; color: #263a59; font-size: 18px; letter-spacing: -.04em; }.landing-feature-grid p { min-height: 68px; margin: 0 0 17px; color: #7b8aa0; font-size: 12px; line-height: 1.6; }.landing-feature-grid a { color: #3157e8; font-size: 11px; font-weight: 800; text-decoration: none; }.landing-feature-grid a span { margin-left: 6px; font-size: 15px; }.landing-process { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; padding-top: 55px; }.process-copy { padding-top: 22px; }.process-copy .landing-secondary { margin-top: 27px; }.process-steps { display: grid; gap: 0; padding: 25px 0; }.process-step { position: relative; display: grid; grid-template-columns: 43px 16px 1fr; gap: 14px; min-height: 120px; }.process-step > b { color: #3157e8; font-size: 11px; letter-spacing: .08em; }.process-line { position: relative; width: 1px; height: 100%; background: #dce4f2; }.process-step:not(:last-child) .process-line::after { position: absolute; top: 0; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: #60c9ed; box-shadow: 0 35px #705cf4, 0 70px #f5a341; content: ""; }.process-step strong { color: #263a59; font-size: 20px; letter-spacing: -.04em; }.process-step p { max-width: 330px; margin: 8px 0 0; color: #7a8aa1; font-size: 12px; line-height: 1.55; }.landing-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; width: min(1120px, calc(100% - 56px)); padding: 54px 58px; margin: 0 auto 80px; border-radius: 20px; background: linear-gradient(112deg, #152e62, #3157e8 70%, #6379ee); box-shadow: 0 24px 50px rgba(40,77,190,.2); }.landing-cta h2 { color: #fff; font-size: clamp(30px, 4vw, 47px); }.landing-cta .landing-kicker { color: #95e8f4; }.landing-cta p { color: #c5d4ff; }.landing-cta .landing-primary { color: #3157e8; background: #fff; box-shadow: none; white-space: nowrap; }.landing-cta .landing-primary:hover { background: #f0f4ff; }.landing-footer { display: flex; justify-content: space-between; gap: 20px; width: min(1220px, calc(100% - 56px)); padding: 25px 0 32px; margin: 0 auto; color: #91a0b4; border-top: 1px solid #edf0f6; font-size: 10px; }.landing-footer div { display: flex; gap: 20px; }.landing-footer a { color: #6f7e95; text-decoration: none; }.landing-footer a:hover { color: #3157e8; }
.contact-main { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, .75fr); align-items: start; gap: clamp(60px, 10vw, 150px); width: min(1120px, calc(100% - 56px)); padding: 92px 0 120px; margin: 0 auto; }.contact-intro { padding-top: 24px; }.contact-intro h1 { max-width: 520px; margin: 0; color: #132541; font-size: clamp(48px, 6vw, 76px); letter-spacing: -.075em; line-height: .98; }.contact-intro > p:not(.landing-kicker) { max-width: 475px; margin: 27px 0 30px; color: #74849a; font-size: 16px; line-height: 1.65; }.contact-points { display: grid; gap: 13px; color: #52627b; font-size: 12px; }.contact-form { padding: 33px; border: 1px solid #dfe6f1; border-radius: 18px; background: #fff; box-shadow: 0 25px 60px rgba(31,56,109,.1); }.contact-form-head { margin-bottom: 25px; }.contact-form-head > span { color: #3157e8; font-size: 9px; font-weight: 900; letter-spacing: .12em; }.contact-form h2 { margin: 8px 0 7px; color: #172c4d; font-size: 28px; letter-spacing: -.05em; }.contact-form-head p { margin: 0; color: #8492a5; font-size: 11px; }.contact-form label { display: grid; gap: 7px; margin-bottom: 15px; color: #62718a; font-size: 10px; font-weight: 800; }.contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: 12px 13px; color: #273b5b; border: 1px solid #d9e1ee; border-radius: 8px; outline: 0; background: #fbfcff; font-size: 12px; }.contact-form textarea { resize: vertical; }.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: #7a91eb; box-shadow: 0 0 0 3px #edf0ff; }.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }.contact-consent { display: flex !important; grid-template-columns: none !important; align-items: flex-start; gap: 8px !important; color: #7c899e !important; font-weight: 500 !important; line-height: 1.4; }.contact-consent input { width: 14px; height: 14px; margin-top: 1px; }.contact-form-message { min-height: 18px; margin: 14px 0 0; color: #2c9872; font-size: 11px; }.contact-form-message.error { color: #bd5b65; }.contact-nav { border-bottom: 1px solid #edf0f6; }
html[data-theme="dark"] .landing-shell, html[data-theme="dark"] .contact-shell { color: #e7effa; background: #0b1424; }html[data-theme="dark"] .landing-links a, html[data-theme="dark"] .landing-login { color: #a8bad5; }html[data-theme="dark"] .landing-links a:hover, html[data-theme="dark"] .landing-login:hover { color: #8ea7ff; }html[data-theme="dark"] .landing-hero h1, html[data-theme="dark"] .landing-section-heading h2, html[data-theme="dark"] .process-copy h2, html[data-theme="dark"] .contact-intro h1 { color: #eef4ff; }html[data-theme="dark"] .landing-lede, html[data-theme="dark"] .landing-section-heading > p:last-child, html[data-theme="dark"] .process-copy > p:not(.landing-kicker), html[data-theme="dark"] .landing-cta p, html[data-theme="dark"] .contact-intro > p:not(.landing-kicker) { color: #9aacc7; }html[data-theme="dark"] .landing-secondary { color: #b9caff; border-color: #3e5780; background: #142540; }html[data-theme="dark"] .landing-secondary:hover { background: #1d3558; }html[data-theme="dark"] .landing-proof, html[data-theme="dark"] .landing-footer, html[data-theme="dark"] .contact-nav { border-color: #253a5a; }html[data-theme="dark"] .landing-proof p, html[data-theme="dark"] .landing-proof > div, html[data-theme="dark"] .landing-footer { color: #8296b4; }html[data-theme="dark"] .hero-board-card, html[data-theme="dark"] .hero-float-card, html[data-theme="dark"] .landing-feature-grid article, html[data-theme="dark"] .contact-form { border-color: #2d4567; background: #12223a; box-shadow: 0 25px 60px rgba(0,0,0,.22); }html[data-theme="dark"] .hero-board-top strong, html[data-theme="dark"] .hero-table-row b, html[data-theme="dark"] .landing-feature-grid h3, html[data-theme="dark"] .process-step strong, html[data-theme="dark"] .contact-form h2 { color: #e7effa; }html[data-theme="dark"] .hero-board-tabs, html[data-theme="dark"] .hero-board-footer, html[data-theme="dark"] .hero-table-row, html[data-theme="dark"] .contact-form input, html[data-theme="dark"] .contact-form select, html[data-theme="dark"] .contact-form textarea { border-color: #2d4567; }html[data-theme="dark"] .hero-table-row, html[data-theme="dark"] .hero-table-head, html[data-theme="dark"] .hero-float-card small, html[data-theme="dark"] .hero-board-footer, html[data-theme="dark"] .landing-feature-grid p, html[data-theme="dark"] .process-step p, html[data-theme="dark"] .contact-form-head p { color: #92a7c3; }html[data-theme="dark"] .contact-form input, html[data-theme="dark"] .contact-form select, html[data-theme="dark"] .contact-form textarea { color: #e4edfa; background: #0e1c31; }html[data-theme="dark"] .landing-footer a { color: #afc0db; }
@media (max-width: 900px) { .landing-hero { grid-template-columns: 1fr; padding-top: 45px; }.landing-hero-copy { max-width: 680px; }.landing-hero-visual { min-height: 480px; width: min(680px, 100%); margin: 0 auto; }.landing-feature-grid { grid-template-columns: 1fr; }.landing-feature-grid article { min-height: auto; }.landing-process, .contact-main { grid-template-columns: 1fr; gap: 38px; }.contact-main { padding-top: 60px; }.contact-intro { max-width: 650px; }.landing-cta { align-items: flex-start; flex-direction: column; } }
@media (max-width: 680px) { .landing-nav { width: min(100% - 32px, 1220px); padding: 16px 0; }.landing-links, .landing-nav-actions { display: none; }.landing-menu-button { display: block; }.landing-hero, .landing-section, .landing-process, .landing-cta, .contact-main, .landing-footer { width: calc(100% - 32px); }.landing-hero { min-height: auto; padding: 46px 0 70px; }.landing-hero h1 { font-size: 48px; }.landing-lede { font-size: 14px; }.landing-hero-visual { min-height: 370px; transform: scale(.86); transform-origin: top left; width: 116%; margin-bottom: -45px; }.hero-board-card { top: 18%; right: 0; }.float-automation { left: -7%; }.float-map { right: -3%; }.landing-proof > div { gap: 18px 25px; font-size: 10px; }.landing-section, .landing-process { padding: 74px 0; }.landing-cta { padding: 33px 26px; margin-bottom: 48px; }.landing-footer { align-items: flex-start; flex-direction: column; }.contact-form { padding: 24px 19px; }.contact-form .form-row { grid-template-columns: 1fr; gap: 0; }.contact-intro h1 { font-size: 52px; } }
.access-modal{max-width:720px}.access-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}.access-panel{border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:14px;background:var(--panel)}.access-person-row{gap:12px}.access-role-select{min-width:150px;margin-left:auto}.access-member-checklist{display:grid;gap:10px;margin:14px 0;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}.access-member-checklist .checkbox-label{display:flex;align-items:center;gap:8px}.access-member-checklist small{margin-left:auto;color:var(--muted)}.access-lock-toggle{margin:14px 0}.access-seat-note{font-size:12px;color:var(--muted);padding:10px 12px;border-radius:9px;background:var(--surface);margin:12px 0}.share-link-row{display:flex;gap:8px;align-items:center;margin:14px 0}.share-link-row input{flex:1;min-width:0}.status-pill.is-readonly,.date-cell.is-readonly,.inline-column-value.is-readonly,.tag-cell.is-readonly{cursor:default;opacity:.86}.status-pill.is-readonly span{display:none}@media(max-width:760px){.access-summary-grid{grid-template-columns:1fr}.access-person-row{align-items:flex-start;flex-wrap:wrap}.access-role-select{margin-left:0}.share-link-row{flex-direction:column;align-items:stretch}}
/* Account password generation */
.password-field .password-generate { position: absolute; top: 50%; right: 43px; padding: 4px; color: #4168ee; border: 0; background: transparent; font-size: 10px; font-weight: 800; transform: translateY(-50%); cursor: pointer; }
.password-help { display: block; margin-top: 6px; color: #8492a8; font-size: 10px; line-height: 1.4; }
html[data-theme="dark"] .password-help { color: #9fb0ca; }

/* Contextual tutorials and the reusable learning center. */
.tutorial-button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; color: #526681; border: 1px solid #dbe3ef; border-radius: 8px; background: #fff; font-size: 10px; font-weight: 800; cursor: pointer; }
.tutorial-button:hover { color: #3157e8; border-color: #aebdf0; background: #f7f9ff; }
.tutorial-button span { display: grid; place-items: center; width: 16px; height: 16px; color: #fff; border-radius: 50%; background: #3157e8; font-size: 10px; }
.tutorial-tip { position: fixed; z-index: 30; right: 24px; bottom: 24px; width: min(360px, calc(100vw - 32px)); padding: 17px; color: #223756; border: 1px solid #d9e3f2; border-radius: 14px; background: #fff; box-shadow: 0 18px 50px rgba(20, 44, 83, .2); }
.tutorial-tip[hidden] { display: none; }
.tutorial-tip-kicker { display: flex; align-items: center; justify-content: space-between; color: #5272d8; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.tutorial-tip-kicker button { padding: 0; color: #8a9ab1; border: 0; background: transparent; font-size: 18px; cursor: pointer; }
.tutorial-tip h3 { margin: 10px 0 7px; color: #193252; font-size: 17px; letter-spacing: -.035em; }
.tutorial-tip > p { margin: 0; color: #6e7e96; font-size: 11px; line-height: 1.55; }
.tutorial-example, .tutorial-step-example { display: grid; gap: 5px; padding: 10px 11px; margin-top: 13px; border: 1px solid #e3e9f2; border-radius: 9px; background: #f7f9fd; }
.tutorial-example strong, .tutorial-step-example strong { color: #526b9f; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.tutorial-example span { color: #425873; font-size: 10px; line-height: 1.45; }
.tutorial-tip-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.tutorial-tip-actions .outline-button, .tutorial-tip-actions .primary-button { padding: 7px 10px; font-size: 10px; }
.tutorial-modal { width: min(620px, 100%); }
.tutorial-topic-row { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 14px; }
.tutorial-topic-row label:not(.checkbox-label) { display: grid; gap: 6px; color: #63738b; font-size: 10px; font-weight: 800; }
.tutorial-topic-row select { min-width: 0; padding: 10px 11px; color: #2c3b53; border: 1px solid #dfe6f0; border-radius: 8px; outline: 0; background: #fbfcfe; font-size: 11px; }
.tutorial-auto-toggle { white-space: nowrap; }
.tutorial-progress { display: grid; gap: 7px; margin: 21px 0 20px; color: #8290a5; font-size: 9px; font-weight: 800; }
.tutorial-progress > div { height: 5px; overflow: hidden; border-radius: 99px; background: #e8edf6; }
.tutorial-progress i { display: block; width: 33%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #43b9e8, #695cf5); transition: width .22s ease; }
.tutorial-content { min-height: 215px; padding: 4px 2px; }
.tutorial-content h3 { margin: 5px 0 10px; color: #1a3151; font-size: 26px; letter-spacing: -.055em; }
.tutorial-content > p:not(.eyebrow) { max-width: 520px; margin: 0; color: #6d7d95; font-size: 13px; line-height: 1.6; }
.tutorial-step-example { margin-top: 22px; }
.tutorial-step-example p { margin: 0; color: #425873; font-size: 12px; line-height: 1.5; }
.tutorial-step-tip { display: flex; gap: 8px; align-items: flex-start; margin-top: 13px; color: #6d7d95; font-size: 10px; line-height: 1.45; }
.tutorial-step-tip span { color: #695cf5; font-size: 14px; }
.tutorial-step-tip p { margin: 0; }
.tutorial-settings { display: flex; flex-wrap: wrap; gap: 13px; padding-top: 8px; border-top: 1px solid #edf0f5; }
.tutorial-settings .text-button { padding: 0; color: #6379d9; font-size: 10px; }
.tutorial-actions { justify-content: space-between; }
html[data-theme="dark"] .tutorial-button { color: #bfd0e8; border-color: #385274; background: #13243b; }
html[data-theme="dark"] .tutorial-button:hover { color: #fff; border-color: #6f8fe1; background: #1a3150; }
html[data-theme="dark"] .tutorial-tip { color: #e8f1fc; border-color: #385274; background: #12233a; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .tutorial-tip-kicker { color: #a9bbff; }
html[data-theme="dark"] .tutorial-tip-kicker button { color: #9bb0ca; }
html[data-theme="dark"] .tutorial-tip h3, html[data-theme="dark"] .tutorial-content h3 { color: #edf4ff; }
html[data-theme="dark"] .tutorial-tip > p, html[data-theme="dark"] .tutorial-content > p:not(.eyebrow), html[data-theme="dark"] .tutorial-step-tip { color: #a2b5ce; }
html[data-theme="dark"] .tutorial-example, html[data-theme="dark"] .tutorial-step-example { border-color: #385274; background: #0d1b2e; }
html[data-theme="dark"] .tutorial-example strong, html[data-theme="dark"] .tutorial-step-example strong { color: #a9bbff; }
html[data-theme="dark"] .tutorial-example span, html[data-theme="dark"] .tutorial-step-example p { color: #c3d2e5; }
html[data-theme="dark"] .tutorial-topic-row label:not(.checkbox-label), html[data-theme="dark"] .tutorial-progress { color: #9bb0ca; }
html[data-theme="dark"] .tutorial-topic-row select { color: #e5eefb; border-color: #486488; background: #0d1b2e; }
html[data-theme="dark"] .tutorial-progress > div, html[data-theme="dark"] .tutorial-settings { border-color: #304764; background: #1a2c45; }
html[data-theme="dark"] .tutorial-settings { background: transparent; }
@media (max-width: 900px) { .tutorial-button { padding: 7px; }.tutorial-button:not(:hover) { font-size: 0; }.tutorial-button span { font-size: 10px; }.tutorial-topic-row { grid-template-columns: 1fr; align-items: start; }.tutorial-auto-toggle { white-space: normal; } }

/* The public experience and FlowGrid loader stay light even when the workspace uses dark mode. */
.page-loader {
  color: #14233b;
  background: #fbfcff;
}
.page-loader small { color: #71809a; }
.flow-loader-mark span {
  border-color: #3157e8;
  background: #e9f0ff;
}
@keyframes flow-loader-light {
  0%, 100% {
    border-color: #3157e8;
    background: #e9f0ff;
    box-shadow: 0 0 0 rgba(49, 87, 232, 0);
    transform: scale(.85);
  }
  30% {
    border-color: #43b9e8;
    background: #bdeeff;
    box-shadow: 0 0 18px rgba(67, 185, 232, .72);
    transform: scale(1.12);
  }
  55% {
    border-color: #695cf5;
    background: #d9d4ff;
    box-shadow: 0 0 13px rgba(105, 92, 245, .48);
    transform: scale(1);
  }
}

/* People and company administration */
.people-management { display: grid; gap: 14px; }
.people-panel { padding: 20px; }
.people-member-list, .people-share-list { display: grid; }
.people-member-row, .people-share-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid #e7edf5; }
.people-member-row:first-child, .people-share-row:first-child { border-top: 0; }
.people-member-main { flex: 1; min-width: 150px; }
.people-member-main strong, .people-share-row strong { display: block; color: #162b4c; font-size: 12px; }
.people-member-main small, .people-share-row small { display: block; margin-top: 4px; color: #71819a; font-size: 10px; }
.people-role { min-width: 95px; color: #4f6280; font-size: 10px; font-weight: 700; }
.people-role-select { width: 122px; }
.people-member-actions, .people-share-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.people-member-actions .outline-button, .people-share-actions .outline-button, .people-member-actions .danger-button, .people-share-actions .danger-button { padding: 6px 9px; font-size: 9px; }
.share-link-icon { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; color: #fff; border-radius: 9px; background: linear-gradient(135deg, #3157e8, #695cf5); font-size: 16px; font-weight: 800; }
.people-share-row > div:nth-child(2) { flex: 1; min-width: 0; }
.people-share-row code { display: block; max-width: 560px; margin-top: 7px; overflow: hidden; color: #5b6c86; font-family: inherit; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.company-profile-panel { padding-bottom: 24px; }
.company-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.company-detail-grid span { display: grid; gap: 6px; padding: 12px; border: 1px solid #e3eaf4; border-radius: 10px; background: #f8faff; }
.company-detail-grid small { color: #7890ad; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.company-detail-grid strong { overflow: hidden; color: #253c5f; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="dark"] .people-member-row, html[data-theme="dark"] .people-share-row { border-color: #2a405d; }
html[data-theme="dark"] .people-member-main strong, html[data-theme="dark"] .people-share-row strong { color: #edf4ff; }
html[data-theme="dark"] .people-member-main small, html[data-theme="dark"] .people-share-row small, html[data-theme="dark"] .people-share-row code { color: #9fb3cf; }
html[data-theme="dark"] .people-role { color: #b9c9df; }
html[data-theme="dark"] .company-detail-grid span { border-color: #304764; background: #12243b; }
html[data-theme="dark"] .company-detail-grid small { color: #91a8c5; }
html[data-theme="dark"] .company-detail-grid strong { color: #e4edfb; }
@media (max-width: 900px) {
  .people-member-row, .people-share-row { align-items: flex-start; flex-wrap: wrap; }
  .people-member-main, .people-share-row > div:nth-child(2) { min-width: calc(100% - 44px); }
  .people-member-actions, .people-share-actions { width: 100%; justify-content: flex-start; padding-left: 42px; }
  .people-role, .people-role-select { margin-left: 42px; }
  .company-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Long text cells keep the table compact while making multiline notes easy to inspect. */
.long-text-cell {
  display: block;
  width: 100%;
  min-height: 34px;
  max-height: 42px;
  overflow-y: auto;
  padding: 7px 8px;
  color: #40536f;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 10px;
  line-height: 1.45;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.long-text-cell:hover, .long-text-cell:focus-visible { max-height: 105px; border-color: #b8caf0; background: #f7f9ff; outline: 0; }
.long-text-cell.empty { color: #91a0b4; font-style: italic; }
.long-text-cell.is-readonly { cursor: default; }
.inline-cell-textarea { width: 100%; min-height: 116px; resize: vertical; padding: 8px; color: #203655; border: 1px solid #3157e8; border-radius: 6px; background: #fff; font: inherit; font-size: 10px; line-height: 1.45; white-space: pre-wrap; }
html[data-theme="dark"] .long-text-cell { color: #c2d1e4; }
html[data-theme="dark"] .long-text-cell:hover, html[data-theme="dark"] .long-text-cell:focus-visible { border-color: #5478cc; background: #142944; }
html[data-theme="dark"] .long-text-cell.empty { color: #8298b5; }
html[data-theme="dark"] .inline-cell-textarea { color: #e8f1fc; border-color: #6b8cff; background: #0d1b2e; }