:root {
  color-scheme: light;
  --ink: #17302c;
  --ink-2: #29443f;
  --muted: #788784;
  --soft: #f5f6f2;
  --canvas: #f2f3ee;
  --surface: #ffffff;
  --line: #e1e5df;
  --green: #1f6b5a;
  --green-soft: #e7f3ef;
  --lime: #a9c25a;
  --amber: #e6ad42;
  --amber-soft: #fff3d9;
  --red: #c85c50;
  --red-soft: #fdebe8;
  --blue: #4d7f9d;
  --blue-soft: #eaf2f6;
  --purple: #71658f;
  --purple-soft: #f0edf7;
  --shadow: 0 18px 50px rgba(27, 49, 44, .15);
  --nav-height: calc(62px + max(7px, env(safe-area-inset-bottom, 0px)));
}

* { box-sizing: border-box; }
.position-editor { margin-bottom:20px;padding:16px;border:1px solid #dbe7e0;border-radius:18px;background:#f3f8f5; }
.position-editor .field { margin:0; }
.position-editor-actions { display:flex;align-items:center;gap:12px;margin-top:12px; }
.position-editor-actions .primary-button { width:auto;min-height:40px;margin:0;padding:10px 18px; }
.position-form-error { margin:8px 0 0;color:var(--red);font-size:12px;line-height:1.4; }
.position-form-error:empty { display:none; }
.position-count { margin:16px 2px 10px;color:var(--muted);font-size:12px; }
.position-list { display:grid;gap:8px; }
.position-row { display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 10px;border:1px solid var(--line);border-radius:16px;background:#fff; }
.position-row-icon { width:34px;height:34px;display:grid;place-items:center;border-radius:11px;color:var(--green);background:var(--green-soft); }
.position-row-copy { min-width:0; }
.position-row-copy b { display:block;font-size:13px;line-height:1.4;overflow-wrap:anywhere; }
.position-row-copy small { display:block;margin-top:4px;color:var(--muted);font-size:10px;line-height:1.4; }
.position-row-actions { display:flex;gap:2px; }
.position-row-actions .icon-button { width:32px;height:36px; }
.position-row-actions .position-delete { color:var(--red); }
.position-row-actions button:disabled { opacity:.35;cursor:default; }
.position-delete-confirm { grid-column:1/-1;padding:12px;border-radius:12px;background:var(--red-soft); }
.position-delete-confirm p { margin:0 0 10px;font-size:12px;line-height:1.5; }
.position-confirm-button,.position-cancel-button { padding:9px 12px;border:0;border-radius:10px;font-size:12px;font-weight:700; }
.position-confirm-button { margin-right:8px;color:#fff;background:var(--red); }
.position-cancel-button { color:var(--green);background:#e7eeea; }
.position-empty { padding:20px 8px;color:var(--muted);font-size:13px;line-height:1.5;text-align:center; }
[hidden] { display: none !important; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html { background: #e3e6df; }
body { margin: 0; color: var(--ink); font-family: Inter, "SF Pro Display", "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; background: radial-gradient(circle at 15% 14%, rgba(169,194,90,.2), transparent 28%), radial-gradient(circle at 84% 86%, rgba(230,173,66,.18), transparent 26%), #e8ebe5; }
button, input, textarea, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button, select, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid rgba(31,107,90,.65); outline-offset: 2px; }
svg { width: 20px; height: 20px; stroke-width: 2; }

.desktop-stage { position:fixed; inset:0 0 auto; height:var(--app-height, 100dvh); display:flex; justify-content:center; }
.app-shell { --header-height:90px; width:min(100%, 480px); height:var(--app-height, 100dvh); position:relative; overflow:hidden; background:var(--canvas); box-shadow:var(--shadow); }
.status-bar { height: 27px; padding: 7px 22px 0; display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 800; background: rgba(242,243,238,.94); }
.status-icons { display: flex; align-items: center; gap: 6px; }
.status-icons svg { width: 14px; height: 14px; stroke-width: 2.4; }
.signal-bars { height: 11px; display: flex; align-items: flex-end; gap: 1.5px; }
.signal-bars i { width: 2.2px; display: block; border-radius: 2px; background: var(--ink); }
.signal-bars i:nth-child(1) { height: 3px; }.signal-bars i:nth-child(2) { height: 5px; }.signal-bars i:nth-child(3) { height: 7px; }.signal-bars i:nth-child(4) { height: 9px; }

.app-header { height: 63px; padding: 7px 16px 10px; position: relative; z-index: 15; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(218,223,216,.9); background: rgba(242,243,238,.92); backdrop-filter: blur(17px); }
.space-button { min-width: 0; padding: 0; margin-right: 5px; display: flex; align-items: center; gap: 9px; border: 0; background: none; text-align: left; }
.space-icon { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border-radius: 12px; color: #f5d989; background: var(--ink); box-shadow: 0 7px 16px rgba(23,48,44,.2); }
.space-icon svg { width: 19px; }
.space-button > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.space-button small { margin-bottom: 2px; color: var(--muted); font-size: 8px; line-height: 1; font-weight: 850; letter-spacing: 1px; }
.space-button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.15; }
.space-button .chevron { width: 14px; flex: none; color: var(--muted); }
.header-actions { display: flex; flex: none; align-items: center; gap: 5px; }
.icon-button { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 13px; background: transparent; transition: .2s; }
.icon-button:hover { background: #e7e9e4; }
.icon-button:active { transform: scale(.94); }
.icon-button.soft { color: #6e7d79; background: #e9ebe6; }
.notifications-button { position:relative; }
.notifications-badge { min-width:17px; height:17px; padding:0 3px; position:absolute; top:-1px; right:-2px; display:grid; place-items:center; border:2px solid var(--canvas); border-radius:10px; color:white; background:var(--red); font-size:8px; line-height:1; }
.notifications-intro { margin:0 0 18px; color:var(--muted); font-size:12px; line-height:1.6; }
.push-notification-card { min-height:68px; margin:0 0 12px; padding:10px; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:9px; border:1px solid #cfded7; border-radius:16px; background:linear-gradient(135deg,#f0f8f5,#f8fbf9); }
.push-notification-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:#18735c; background:#dcefe8; }.push-notification-icon svg { width:18px; }
.push-notification-card > span:nth-child(2) { min-width:0; }.push-notification-card b { display:block; font-size:9px; line-height:1.3; }.push-notification-card small { display:block; margin-top:3px; color:#687a75; font-size:7px; line-height:1.35; }
.push-notification-card button { min-height:34px; padding:0 10px; display:flex; align-items:center; justify-content:center; gap:4px; border:0; border-radius:10px; color:#fff; background:var(--green); font-size:7px; font-weight:850; white-space:nowrap; }.push-notification-card button svg { width:13px; }.push-notification-card button:disabled { color:#26705d; background:#d7ece4; }
.push-notification-card.enabled { border-color:#a8cfc0; background:linear-gradient(135deg,#e8f6f1,#f5fbf8); }.push-notification-card.blocked { border-color:#efcbc8; background:#fff5f4; }.push-notification-card.blocked .push-notification-icon { color:#a34c47; background:#fbe2e0; }.push-notification-card.unsupported { border-color:var(--line); background:#f5f6f3; }.push-notification-card.unsupported .push-notification-icon { color:#76827e; background:#e7eae5; }
.notifications-list { display:grid; gap:8px; }
.notification-row { width:100%; padding:14px 12px; display:flex; align-items:center; gap:11px; border:1px solid var(--line); border-radius:16px; background:#f7f9f5; text-align:left; }
.notification-row:hover { background:#edf3e9; }
.notification-icon { width:37px; height:37px; display:grid; place-items:center; flex:none; border-radius:12px; color:var(--green); background:#e4eee6; }
.notification-copy { min-width:0; flex:1; }
.notification-copy b { display:block; font-size:13px; line-height:1.4; }
.notification-copy small { display:block; margin-top:4px; color:var(--muted); font-size:10px; line-height:1.5; }
.notification-count { min-width:23px; padding:4px 6px; border-radius:8px; color:var(--green); background:#e1eee3; text-align:center; font-size:11px; }
.notification-row > svg { flex:none; color:var(--muted); }
.notification-section-title { margin:12px 3px 3px; color:var(--muted); font-size:11px; font-weight:700; }
.notification-progress .notification-icon { color:#8750ac; background:#f0e9f7; }
.notification-task-title { display:block; color:var(--ink); font-size:15px; font-weight:850; line-height:1.4; }
.notification-stage { display:block; margin-top:6px; color:#6d6479; font-size:11px; line-height:1.5; }
.notification-progress .notification-copy { overflow-wrap:anywhere; }
.notifications-empty { padding:28px 10px 34px; display:grid; justify-items:center; gap:12px; text-align:center; }
.notifications-empty > span { width:54px; height:54px; display:grid; place-items:center; border-radius:18px; color:var(--green); background:#e7f1e9; }
.notifications-empty b { font-size:15px; }
.notifications-empty p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
@media (max-width:370px) { .app-header { padding-inline:12px; }.space-button { gap:6px; }.space-icon { width:32px; height:32px; }.header-actions { gap:3px; }.header-actions .icon-button { width:32px; }.header-actions .avatar-button { width:32px; height:34px; } }
.avatar-button { width: 37px; height: 37px; padding: 0; position: relative; display: grid; place-items: center; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(145deg,#3f756b,#245247); box-shadow: 0 6px 14px rgba(31,107,90,.2); }
.avatar-button > span { font-size: 9px; font-weight: 850; }
.online-dot { width: 9px; height: 9px; position: absolute; right: -1px; bottom: 0; border: 2px solid var(--canvas); border-radius: 50%; background: var(--lime); }
.sync-status { width:28px;height:28px;position:relative;display:grid;place-items:center;border-radius:10px;color:#687975;background:#e4e8e2;transition:.2s; }
.sync-status svg { width:14px;height:14px; }
.sync-status b { width:7px;height:7px;position:absolute;right:-1px;bottom:-1px;border:2px solid var(--canvas);border-radius:50%;background:#9aa5a2; }
.sync-status.online { color:#17634f;background:#e2f1eb; }.sync-status.online b { background:#43a47e; }
.sync-status.syncing { color:#805f17;background:#fbf0d4; }.sync-status.syncing svg { animation:syncPulse 1s ease-in-out infinite; }.sync-status.syncing b { background:#e6ad42; }
.sync-status.offline,.sync-status.error { color:#9d4138;background:#fae7e4; }.sync-status.offline b,.sync-status.error b { background:#c85c50; }
@keyframes syncPulse { 50% { opacity:.35;transform:translateY(-1px); } }

.view { height:calc(var(--app-height, 100dvh) - var(--header-height) - var(--keyboard-inset, 0px)); padding-bottom:calc(var(--nav-height) + 25px); display:none; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; }
.view::-webkit-scrollbar { display: none; }
.view.is-active { display: block; animation: viewIn .24s ease both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(3px); } }

.pull-refresh { --pull-offset:0px;--pull-progress:0;width:max-content;max-width:calc(100% - 32px);height:38px;padding:0 13px 0 6px;position:absolute;z-index:14;top:var(--header-height);left:50%;display:flex;align-items:center;gap:8px;border:1px solid #d9e5dc;border-radius:19px;color:#587069;background:rgba(255,255,255,.96);box-shadow:0 8px 24px rgba(23,48,44,.13);opacity:0;pointer-events:none;transform:translate(-50%,calc(-48px + var(--pull-offset)));transition:opacity .16s,transform .16s; }
.pull-refresh.active { opacity:1;transition:opacity .12s; }
.pull-refresh > span { width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:var(--green);background:var(--green-soft); }
.pull-refresh svg { width:15px;height:15px;transform:rotate(calc(240deg * var(--pull-progress))); }
.pull-refresh b { font-size:10px;white-space:nowrap; }
.pull-refresh.armed > span { color:#8a6518;background:var(--amber-soft); }
.pull-refresh.refreshing > span { color:#fff;background:var(--green); }
.pull-refresh.refreshing svg { animation:pullRefreshSpin .75s linear infinite; }
.pull-refresh.done > span { color:#fff;background:#3d9277; }
@keyframes pullRefreshSpin { to { transform:rotate(360deg); } }

.board-topline { padding: 3px 17px 11px; display: flex; align-items: center; justify-content: space-between; }
.role-context { display: flex; align-items: center; gap: 8px; }
.role-context > span:first-child { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: var(--green); background: var(--green-soft); }
.role-context svg { width: 14px; }
.role-context > span:last-child { display: flex; flex-direction: column; }
.role-context small { margin-bottom: 1px; color: #95a09d; font-size: 7px; font-weight: 850; letter-spacing: .75px; }
.role-context strong { font-size: 10px; }
.ghost-button { height: 30px; padding: 0 9px; display: flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 10px; color: #667572; background: rgba(255,255,255,.7); font-size: 8px; font-weight: 800; }
.ghost-button svg { width: 13px; }

.workflow-tabs { padding: 2px 17px 8px; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.workflow-tabs::-webkit-scrollbar { display: none; }
.workflow-tab { min-width: 103px; height: 51px; padding: 7px 8px; position: relative; flex: none; display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 6px; scroll-snap-align: start; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.68); text-align: left; transition: .2s; }
.workflow-tab.active { color: #fff; border-color: var(--ink); background: var(--ink); box-shadow: 0 8px 18px rgba(23,48,44,.16); }
.workflow-tab-number { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 9px; color: var(--stage-color); background: var(--stage-soft); font-size: 9px; font-weight: 900; }
.workflow-tab.active .workflow-tab-number { color: var(--ink); background: #f2d482; }
.workflow-tab b { display: block; font-size: 8.5px; line-height: 1.1; }
.workflow-tab small { display: block; margin-top: 2px; color: #909a97; font-size: 7px; }
.workflow-tab.active small { color: #b9c6c2; }
.tab-count { min-width: 16px; height: 16px; padding: 0 4px; position: absolute; top: -4px; right: -3px; display: grid; place-items: center; border: 2px solid var(--canvas); border-radius: 8px; color: #fff; background: var(--stage-color); font-size: 7px; font-weight: 850; }

.board-title-row { padding: 14px 18px 7px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.eyebrow { margin: 0 0 6px; color: #8c9894; font-size: 8px; font-weight: 850; letter-spacing: 1.05px; }
h1,h2,h3,p { margin-top: 0; }
.board-title-row h1, .page-heading h1 { margin: 0 0 5px; font-size: 25px; line-height: 1.1; letter-spacing: -.75px; }
.board-description { max-width: 315px; margin: 0; color: #75827f; font-size: 9px; line-height: 1.45; }

.board-summary { margin: 0 18px 10px; min-height: 57px; padding: 11px 12px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; border: 1px solid #dfe3dc; border-radius: 16px; background: rgba(255,255,255,.76); }
.summary-symbol { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--stage-color); background: var(--stage-soft); }
.summary-symbol svg { width: 17px; }
.board-summary b { display: block; margin-bottom: 3px; font-size: 11px; }
.board-summary p { margin: 0; color: var(--muted); font-size: 8px; }
.board-summary > strong { font-size: 20px; letter-spacing: -.5px; }
.board-summary.home-overview { min-height: 68px; padding: 9px; grid-template-columns: repeat(3,1fr); gap: 4px; }
.home-stat { min-width: 0; padding: 6px 5px; display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 6px; border-right: 1px solid var(--line); }
.home-stat:last-child { border-right: 0; }
.home-stat > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; }
.home-stat.work > span { color: var(--blue); background: var(--blue-soft); }
.home-stat.done > span { color: var(--green); background: var(--green-soft); }
.home-stat.rejected > span { color: var(--red); background: var(--red-soft); }
.home-stat svg { width: 13px; }
.home-stat b { display: block; margin: 0; font-size: 13px; line-height: 1; }
.home-stat small { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 6.5px; white-space: nowrap; text-overflow: ellipsis; }
.permission-note { margin: 0 18px 12px; padding: 9px 10px; display: none; align-items: flex-start; gap: 7px; border-radius: 11px; color: #5f6e6b; background: #e7ebe5; font-size: 8px; line-height: 1.4; }
.permission-note.show { display: flex; }
.permission-note.warning { color: #916619; background: var(--amber-soft); }
.permission-note svg { width: 13px; height: 13px; flex: none; }

.card-toolbar { padding: 1px 18px 11px; display: flex; align-items: center; justify-content: space-between; }
.segmented-filter { padding: 3px; display: flex; border-radius: 10px; background: #e5e8e2; }
.segmented-filter button { height: 27px; padding: 0 11px; border: 0; border-radius: 8px; color: #84908d; background: transparent; font-size: 8px; font-weight: 800; }
.segmented-filter button.active { color: var(--ink); background: #fff; box-shadow: 0 2px 7px rgba(28,47,43,.07); }
.sort-button { height: 30px; padding: 0 8px; display: flex; align-items: center; gap: 5px; border: 0; color: #778480; background: transparent; font-size: 8px; font-weight: 750; }
.sort-button svg { width: 12px; }

.request-list { padding: 0 18px 20px; }
.request-card { width: 100%; margin: 0 0 10px; padding: 13px; position: relative; overflow: hidden; display: block; border: 1px solid #dfe3dc; border-radius: 17px; background: #fff; text-align: left; box-shadow: 0 4px 13px rgba(32,54,49,.055); transition: .2s; }
.request-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(32,54,49,.09); }
.request-card:active { transform: scale(.987); }
.request-card::before { content:""; width: 3px; position: absolute; left: 0; top: 12px; bottom: 12px; border-radius: 0 3px 3px 0; background: var(--stage-color); }
.request-card.locked::before { background: #9aa4a1; }
.request-card-head { margin:0 0 8px; display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.request-card-head h3 { min-width:0; flex:1; margin:1px 0 0; padding:0; }
.request-card-head .card-row { flex:none; }
.card-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.card-row > span:last-child { display:flex; align-items:flex-start; gap:5px; }
.status-chip { height: 20px; padding: 0 7px; display: inline-flex; align-items: center; gap: 4px; border-radius: 7px; color: var(--chip-color,#566d68); background: var(--chip-bg,#edf2ef); font-size: 7px; font-weight: 850; letter-spacing: .25px; text-transform: uppercase; }
.status-chip svg { width: 10px; height: 10px; }
.status-chip.rejected { --chip-color:#ac4e46;--chip-bg:var(--red-soft); }
.status-chip.done { --chip-color:#27735f;--chip-bg:var(--green-soft); }
.status-chip.urgent { --chip-color:#9b6719;--chip-bg:var(--amber-soft); }
.card-status-stack { display:inline-flex; flex-direction:column; align-items:flex-end; gap:3px; }
.completion-badge { min-height:17px; padding:0 6px; display:inline-flex; align-items:center; gap:3px; border-radius:6px; font-size:6.5px; font-weight:850; text-transform:uppercase; white-space:nowrap; }
.completion-badge svg { width:9px; height:9px; }
.completion-badge.on-time { color:#27735f; background:var(--green-soft); }
.completion-badge.late { color:#ae493f; background:var(--red-soft); }
.request-card h3 { font-size: 13px; line-height: 1.32; letter-spacing: -.2px; }
.vehicle-line { margin: 0 0 12px; display: flex; align-items: center; gap: 5px; color: #6f7e7a; font-size: 8px; }
.vehicle-line svg { width: 12px; height: 12px; }
.card-flow-state { margin: 0 0 11px; padding: 7px 8px; display: flex; align-items: center; gap: 6px; border-radius: 9px; color: #5c6d69; background: #f2f5f1; font-size: 8px; }
.card-flow-state.warning { color: #a14c44; background: var(--red-soft); }
.card-flow-state.success { color: #2b745f; background: var(--green-soft); }
.card-flow-state svg { width: 12px; height: 12px; flex: none; }
.card-footer { display: flex; align-items: center; justify-content: space-between; }
.card-meta { display: flex; align-items: center; gap: 9px; color: #909a97; font-size: 8px; }
.card-meta span { display: flex; align-items: center; gap: 4px; }
.card-meta svg { width: 11px; height: 11px; }
.author-chip { display: flex; align-items: center; gap: 5px; color: #71807c; font-size: 7px; font-weight: 750; }
.mini-avatar { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: #567e75; font-size: 7px; font-weight: 850; }
.empty-board { min-height: 200px; padding: 37px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px dashed #cfd5cd; border-radius: 18px; background: rgba(255,255,255,.38); }
.empty-board span { width: 50px; height: 50px; margin-bottom: 12px; display: grid; place-items: center; border-radius: 17px; color: #82908c; background: #e5e9e2; }
.empty-board h3 { margin: 0 0 5px; font-size: 12px; }
.empty-board p { max-width: 245px; margin: 0; color: var(--muted); font-size: 8px; line-height: 1.5; }

.page-heading { padding: 14px 18px 17px; display: flex; align-items: flex-start; justify-content: space-between; gap: 13px; }
.page-heading > div > p:last-child { max-width: 290px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.page-symbol { width: 42px; height: 42px; display: grid; place-items: center; flex: none; border-radius: 14px; color: var(--green); background: var(--green-soft); }
.page-symbol.people { color: var(--blue); background: var(--blue-soft); }.page-symbol.settings { color: var(--purple); background: var(--purple-soft); }
.route-progress { margin: 0 18px 16px; padding: 11px 0; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.route-progress span { border-right: 1px solid var(--line); color: #5e6d69; text-align: center; font-size: 8px; font-weight: 800; }.route-progress span:last-child { border: 0; }
.route-map { margin: 0 18px 21px; }
.route-step { position: relative; display: grid; grid-template-columns: 41px 1fr; gap: 11px; }
.route-step:not(:last-child)::before { content:""; width: 2px; position: absolute; top: 40px; bottom: 0; left: 19px; background: #d6dbd4; }
.route-step-symbol { width: 40px; height: 40px; position: relative; z-index: 1; display: grid; place-items: center; border: 4px solid var(--canvas); border-radius: 14px; color: var(--stage-color); background: var(--stage-soft); box-shadow: 0 0 0 1px #dfe3dd; }
.route-step-symbol svg { width: 16px; }
.route-step-card { margin-bottom: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.route-step-card > div { display: flex; align-items: center; justify-content: space-between; }
.route-step-card h3 { margin: 0; font-size: 10px; }.route-step-card b { color: #97a09d; font-size: 8px; }
.route-step-card p { margin: 5px 0 0; color: #75827e; font-size: 8px; line-height: 1.45; }
.route-branch { margin: -1px 0 9px; padding: 6px 9px; display: flex; align-items: center; gap: 5px; border-radius: 8px; color: #a5544c; background: var(--red-soft); font-size: 7px; }
.route-branch svg { width: 11px; }
.section-heading { margin: 0 18px 10px; display: flex; align-items: center; justify-content: space-between; }
.section-heading h2 { margin: 0; font-size: 13px; }.section-heading button,.section-heading > span { padding: 0; border: 0; color: var(--green); background: none; font-size: 8px; font-weight: 750; }
.activity-list { margin: 0 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.activity-item { padding: 11px; display: grid; grid-template-columns: 29px 1fr auto; gap: 8px; align-items: start; border-bottom: 1px solid var(--line); }.activity-item:last-child { border-bottom: 0; }
.activity-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: var(--green); background: var(--green-soft); }.activity-icon svg { width: 13px; }
.activity-item b { display: block; margin-bottom: 2px; font-size: 8px; }.activity-item p { margin: 0; color: var(--muted); font-size: 7.5px; line-height: 1.35; }.activity-item time { color: #a1aaa7; font-size: 7px; }

.kanban-heading { padding-bottom: 13px; }
.route-heading-actions { display:flex;align-items:center;gap:8px; }
.route-view-toggle { flex:none;width:46px;height:50px;padding:0;display:grid;place-items:center;border:1px solid #d9dfda;border-radius:13px;color:#64736f;background:#f4f6f2; }
.route-view-toggle svg { width:20px;height:20px; }
.route-view-toggle.active { color:var(--green);border-color:#b8d6ca;background:var(--green-soft);box-shadow:inset 0 0 0 1px rgba(31,107,90,.08); }
.route-view-toggle:active { transform:scale(.96); }
.archive-button { flex:none;width:56px;min-height:54px;padding:5px 7px 6px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;border:1px solid #bcd4ca;border-radius:16px;color:#245b4e;background:linear-gradient(145deg,#f6fbf8,#dceee6);box-shadow:0 6px 16px rgba(31,107,90,.11),inset 0 1px 0 #fff;transition:transform .16s,box-shadow .16s; }
.archive-button:hover { box-shadow:0 8px 20px rgba(31,107,90,.15),inset 0 1px 0 #fff; }
.archive-button:active { transform:scale(.96); }
.archive-button-icon { width:31px;height:29px;position:relative;display:grid;place-items:center;border-radius:10px;color:#2a6858;background:rgba(255,255,255,.66); }
.archive-button-icon svg { width:18px;height:18px; }
.archive-button > span:last-child { font-size:8.5px;font-weight:850; }
.archive-button-icon > b { min-width:18px;height:18px;padding:0 4px;position:absolute;top:-8px;right:-9px;display:grid;place-items:center;border:2px solid #f2f7f3;border-radius:10px;color:#fff;background:#d9564d;box-shadow:0 3px 8px rgba(185,62,54,.25);font-size:8px;line-height:1; }
.archive-sheet { max-height:94%;padding-bottom:25px;background:#fbfcfa; }.archive-intro { margin:0 20px 14px;color:#71807b;font-size:11px;line-height:1.55; }
.archive-search { height:46px;margin:0 18px 10px;padding:0 13px;display:flex;align-items:center;gap:9px;border:1px solid #e1e6e1;border-radius:14px;background:#f0f3f0; }
.archive-search > svg { width:18px;flex:none;color:#50655f; }.archive-search input { width:100%;min-width:0;border:0;outline:0;color:var(--ink);background:none;font-size:12px; }.archive-search input::placeholder { color:#87938f; }
.archive-status-tabs { margin:0 18px 10px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px; }
.archive-status-tabs button { min-width:0;min-height:48px;padding:7px 8px;display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:5px;border:1px solid #e4e8e3;border-radius:14px;color:#586a65;background:#f2f4f2;text-align:left; }
.archive-status-tabs button > svg { width:17px;height:17px; }.archive-status-tabs button b { overflow:hidden;font-size:8px;white-space:nowrap;text-overflow:ellipsis; }.archive-status-tabs button span { font-size:8px; }
.archive-status-tabs button.active { border-color:#b9ddce;color:#17634f;background:linear-gradient(135deg,#e9f7f1,#f5fbf8);box-shadow:inset 0 0 0 1px rgba(31,107,90,.05); }
.archive-control-row { margin:0 18px 10px;display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.archive-filter-button,.archive-sort-button { min-width:0;min-height:52px;padding:8px 10px;display:grid;grid-template-columns:25px minmax(0,1fr) auto;align-items:center;gap:7px;border:1px solid #e0e5e0;border-radius:14px;color:#536660;background:#f2f5f2;text-align:left; }
.archive-filter-button > svg,.archive-sort-button > svg:first-child { width:19px;height:19px; }.archive-filter-button span,.archive-sort-button span { min-width:0; }.archive-filter-button b,.archive-sort-button b { display:block;font-size:10px; }.archive-filter-button small,.archive-sort-button small { display:block;margin-top:3px;overflow:hidden;color:#7d8b86;font-size:7px;white-space:nowrap;text-overflow:ellipsis; }
.archive-filter-button em { min-width:20px;height:20px;display:grid;place-items:center;border-radius:10px;color:#fff;background:var(--green);font-size:8px;font-style:normal;font-weight:850; }.archive-filter-button.active { border-color:#bdd8ce;background:#eef8f3; }
.archive-sort-button > svg:last-child { width:14px;height:14px;transition:transform .18s; }.archive-sort-button.oldest > svg:last-child { transform:rotate(180deg); }
.archive-filter-panel { margin:0 18px 14px;padding:13px;border:1px solid #d6e3dd;border-radius:18px;background:linear-gradient(155deg,#fff 0%,#f8fbf9 100%);box-shadow:0 8px 24px rgba(29,72,58,.07); }.archive-filter-panel > header { margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:8px; }.archive-filter-panel > header > div { min-width:0;display:flex;align-items:center;gap:8px; }.archive-filter-panel > header > div > span { width:30px;height:30px;display:grid;place-items:center;flex:none;border-radius:10px;color:var(--green);background:#e4f2ec; }.archive-filter-panel > header svg { width:15px;height:15px; }.archive-filter-panel h3 { margin:0;font-size:13px;line-height:1.1; }.archive-filter-panel > header small { display:block;margin-top:3px;color:#84918c;font-size:7px; }.archive-filter-panel > header > button { min-height:28px;padding:0 9px;border:1px solid #dce8e2;border-radius:9px;color:var(--green);background:#fff;font-size:7.5px;font-weight:800;white-space:nowrap; }
.archive-filter-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }.archive-filter-field { min-width:0;min-height:58px;padding:8px 9px;position:relative;display:grid;grid-template-columns:27px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;column-gap:8px;border:1px solid #e0e8e3;border-radius:13px;background:#f5f8f6; }.archive-filter-field > svg { width:27px;height:27px;padding:6px;grid-row:1 / 3;align-self:center;border-radius:9px;color:#407266;background:#e7f1ed; }.archive-filter-field > span { min-width:0;color:#7a8984;font-size:7px;line-height:1.2; }.archive-filter-grid select { width:100%;min-width:0;margin-top:2px;padding:0 14px 0 0;border:0;outline:0;color:var(--ink);background:transparent;font-size:9px;font-weight:800;text-overflow:ellipsis;-webkit-appearance:none;appearance:none; }.archive-filter-field::after { content:'⌄';position:absolute;right:9px;bottom:10px;color:#6d7d77;font-size:11px;line-height:1;pointer-events:none; }.archive-board-filter { grid-column:1 / -1; }
.archive-period-filter { width:100%;max-width:100%;min-width:0;min-inline-size:0;grid-column:1 / -1;margin:0;padding:10px;border:1px solid #cfe2d9;border-radius:15px;background:linear-gradient(135deg,#edf8f3 0%,#f8fbf9 72%);box-shadow:inset 0 1px 0 rgba(255,255,255,.8); }.archive-period-head { width:100%;max-width:100%;display:flex;align-items:center;gap:8px;color:var(--ink); }.archive-period-head > span:first-child { width:29px;height:29px;display:grid;place-items:center;flex:none;border-radius:10px;color:#176b55;background:#d9eee5; }.archive-period-head svg { width:14px;height:14px; }.archive-period-head > span:last-child { min-width:0; }.archive-period-head b,.archive-period-head small { display:block; }.archive-period-head b { font-size:10px; }.archive-period-head small { margin-top:2px;color:#74847e;font-size:6.8px;font-weight:500; }.archive-period-range { width:100%;max-width:100%;min-width:0;margin-top:9px;display:grid;grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);grid-template-rows:auto 40px;align-items:center;column-gap:6px;row-gap:4px; }.archive-period-range > label { width:100%;max-width:100%;min-width:0;margin:0 0 0 2px;padding:0;align-self:end;color:#657a72;background:transparent;font-size:7px;font-weight:700;line-height:1; }.archive-period-from-label { grid-column:1;grid-row:1; }.archive-period-to-label { grid-column:3;grid-row:1; }.archive-period-range > svg { width:14px;height:14px;margin:0;grid-column:2;grid-row:2;align-self:center;justify-self:center;color:#789087; }.archive-period-range input { display:block;width:100%;max-width:100%;min-width:0;min-height:40px;height:40px;inline-size:100%;max-inline-size:100%;min-inline-size:0;align-self:center;padding:0 7px;border:1px solid #d3e0da;border-radius:10px;outline:0;color:var(--ink);background:#fff;box-shadow:0 2px 7px rgba(24,82,64,.06);font-family:inherit;font-size:10px;font-weight:750;line-height:40px;color-scheme:light; }.archive-period-range #archiveDateFrom { grid-column:1;grid-row:2; }.archive-period-range #archiveDateTo { grid-column:3;grid-row:2; }.archive-period-range input::-webkit-date-and-time-value { min-width:0;height:38px;padding:0;display:flex;align-items:center;line-height:38px;text-align:left; }.archive-period-range input::-webkit-calendar-picker-indicator { margin:0;padding:2px;align-self:center;opacity:.72; }.archive-period-range input:focus { border-color:#69a991;box-shadow:0 0 0 2px rgba(28,125,90,.1); }
@media (max-width:370px) { .archive-period-range { grid-template-columns:minmax(0,1fr);grid-template-rows:auto 40px auto 40px;align-items:center;column-gap:0;row-gap:4px; }.archive-period-from-label { grid-column:1;grid-row:1; }.archive-period-range #archiveDateFrom { grid-column:1;grid-row:2; }.archive-period-to-label { grid-column:1;grid-row:3;margin-top:5px!important; }.archive-period-range #archiveDateTo { grid-column:1;grid-row:4; }.archive-period-range > svg { display:none; }.archive-period-range input { padding-inline:8px;font-size:10px; } }
.archive-active-filters { margin-top:11px;padding-top:10px;border-top:1px solid #e8eeea; }.archive-active-filters:empty { display:none; }.archive-active-filters > small { color:#75857f;font-size:7px;font-weight:700; }.archive-active-filters > div { margin-top:7px;display:flex;flex-wrap:wrap;gap:6px; }.archive-active-filters > div button { min-width:0;min-height:27px;padding:0 7px;display:flex;align-items:center;gap:5px;border:1px solid #cde2d9;border-radius:9px;color:#23644f;background:#e8f5ef;font-size:7.5px;font-weight:800; }.archive-active-filters > div button span { max-width:150px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }.archive-active-filters > div button svg:first-child { width:11px;height:11px;flex:none; }.archive-active-filters > div button svg:last-child { width:10px;height:10px;flex:none;color:#5f8275; }
.archive-results-head { margin:0 18px 9px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#697873;font-size:9px; }.archive-results-head > span b { color:var(--ink);font-size:12px; }.archive-results-head > div { padding:3px;display:flex;border-radius:11px;background:#eef1ee; }.archive-results-head button { width:31px;height:29px;padding:0;display:grid;place-items:center;border:0;border-radius:9px;color:#7c8985;background:transparent; }.archive-results-head button.active { color:var(--green);background:#dfeee7; }.archive-results-head svg { width:14px;height:14px; }
.archive-list { display:grid;gap:8px;margin:0 18px; }.archive-card { width:100%;min-width:0;padding:11px;display:grid;grid-template-columns:37px minmax(0,1fr) 15px;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:0 3px 12px #17302c06; }
.archive-card.archive-new { border-color:#e0a62f;box-shadow:inset 0 0 0 2px #efbd54,0 7px 20px rgba(194,133,25,.17);animation:archive-new-card .5s ease-in-out infinite alternate; }
@keyframes archive-new-card { from { background:#fffaf0; } to { background:#ffefc8; } }
@media (prefers-reduced-motion:reduce) { .archive-card.archive-new { animation:none;background:#fff3d5; } }
.archive-card-symbol { width:37px;height:37px;display:grid;place-items:center;border-radius:12px;color:var(--green);background:var(--green-soft); }.archive-card-symbol svg { width:17px;height:17px; }.archive-card-content { min-width:0; }.archive-card > svg:last-child { width:14px;color:#72807b; }
.archive-card-head { margin:0 0 3px;display:flex;align-items:flex-start;justify-content:space-between;gap:7px; }.archive-card-title { min-width:0;display:block;flex:1;color:var(--ink);font-size:11px;line-height:1.35;overflow-wrap:anywhere; }.archive-card-vehicle { display:block;margin-bottom:7px;overflow:hidden;color:#788681;font-size:8px;white-space:nowrap;text-overflow:ellipsis; }
.archive-status { min-height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;flex:none;border-radius:8px;font-size:7px;font-weight:850;white-space:nowrap; }.archive-status.completed { color:#237158;background:#e6f4ed; }.archive-status.rejected { color:#b43d38;background:#fdebea; }.archive-status svg { width:11px;height:11px; }
.archive-timing { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:8px; font-size:10px; font-weight:800; color:#728078; background:#edf0ec; white-space:nowrap; }
.archive-timing.on-time { color:#287459; background:#e7f3ec; }.archive-timing.late { color:#b3443b; background:#fdecea; }
.archive-card-meta { display:flex;flex-wrap:wrap;gap:5px 10px; }.archive-card-meta > span { min-width:0;display:flex;gap:4px;align-items:center; }.archive-card-meta svg { width:11px;height:11px;flex:none;color:#82948b; }.archive-card-meta small { display:none; }.archive-card-meta b { display:block;max-width:120px;overflow:hidden;color:#60706a;font-size:7px;font-weight:650;white-space:nowrap;text-overflow:ellipsis; }
.archive-card-footer { margin-top:7px;padding-top:6px;display:flex;align-items:center;justify-content:space-between;gap:6px;border-top:1px solid #edf0eb;color:#809087;font-size:7px; }.archive-card-footer > span:last-child { display:flex;align-items:center;gap:4px; }.archive-card-footer .archive-timing { padding:3px 6px;font-size:7px; }.archive-card-footer svg { width:10px;height:10px; }
.archive-list.grid-view { grid-template-columns:repeat(2,minmax(0,1fr)); }.archive-list.grid-view .archive-card { padding:11px;grid-template-columns:32px minmax(0,1fr);align-items:start; }.archive-list.grid-view .archive-card-symbol { width:32px;height:32px; }.archive-list.grid-view .archive-card > svg:last-child { display:none; }.archive-list.grid-view .archive-card-head { display:block; }.archive-list.grid-view .archive-status { margin-top:6px; }.archive-list.grid-view .archive-card-meta { display:grid;gap:4px; }.archive-list.grid-view .archive-card-footer { display:grid;justify-items:start; }
.archive-back { display:flex; align-items:center; gap:7px; min-height:42px; margin:10px 18px 0; padding:0 10px; border:0; border-radius:9px; background:#eef3ec; color:#315f55; font-size:12px; font-weight:700; }
.archive-detail-meta { margin:14px 18px; padding:14px; border:1px solid var(--line); border-radius:14px; background:#f6f8f3; }.archive-detail-meta > .archive-card-meta { margin-top:14px; }
.delete-card-button { display:flex; align-items:center; gap:5px; min-height:36px; padding:7px 9px; border:0; border-radius:9px; color:#b3443b; background:#fcefea; font-size:11px; font-weight:750; }
.detail-head-actions { display:flex; align-items:center; gap:7px; }
.task-context-menu { position:fixed; z-index:150; width:190px; padding:6px; border:1px solid var(--line); border-radius:13px; background:white; box-shadow:0 8px 32px #17302c30; }.task-context-menu[hidden] { display:none; }
.task-context-menu button { width:100%; min-height:43px; display:flex; align-items:center; gap:9px; padding:10px; border:0; border-radius:8px; background:#fff4ef; color:#af4037; font-size:13px; text-align:left; }
.delete-task-sheet { padding-bottom:22px; }.delete-task-warning { margin:0 20px 20px; padding:15px; border:1px solid #eed5cc; border-radius:13px; color:#815a51; background:#fff5ee; font-size:13px; line-height:1.5; }.delete-task-warning b { display:block; margin-bottom:7px; overflow-wrap:anywhere; }
.direct-chat-tools { display:flex; justify-content:flex-end; margin:0 0 10px; }.direct-chat-tools button { min-height:36px; display:flex; align-items:center; gap:6px; padding:7px 10px; border:1px solid #eddcd4; border-radius:10px; background:#fff6f0; color:#a45845; font-size:11px; font-weight:700; }.direct-chat-tools button:disabled { opacity:.45; cursor:default; }
.kanban-legend { margin: 0 18px 13px; padding: 9px 10px; display: flex; align-items: center; gap: 14px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.74); scrollbar-width: none; }
.kanban-legend::-webkit-scrollbar { display:none; }
.kanban-legend span { display:flex; align-items:center; gap:5px; flex:none; color:#73817d; font-size:7.5px; font-weight:750; }
.legend-dot { width:7px; height:7px; display:block; border-radius:3px; }.legend-dot.work { background:var(--blue); }.legend-dot.done { background:var(--green); }.legend-dot.rejected { background:var(--red); }
.kanban-scroll { padding: 0 18px 20px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.kanban-scroll::-webkit-scrollbar { display:none; }
.kanban-grid { width:max-content; display:flex; align-items:stretch; gap:11px; padding-right:32px; }
.kanban-grid.route-workflow-unconfigured { width:100%; display:block; padding:0; }
.route-workflow-empty { min-height:360px;padding:44px 26px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid #dce4dd;border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(235,243,237,.86));box-shadow:0 12px 32px rgba(31,51,46,.06); }
.route-workflow-empty > span,.workflow-settings-empty > span { width:58px;height:58px;display:grid;place-items:center;border-radius:19px;color:var(--green);background:#e3f1e8; }
.route-workflow-empty > small { margin-top:15px;color:#70817b;font-size:8px;font-weight:850;letter-spacing:1.4px; }
.route-workflow-empty h2 { margin:7px 0 8px;font-size:20px;letter-spacing:-.35px; }
.route-workflow-empty p { max-width:330px;margin:0;color:var(--muted);font-size:11px;line-height:1.6; }
.workflow-settings-empty { min-height:230px;padding:28px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px dashed #cad8cf;border-radius:18px;background:#f6faf6; }
.workflow-settings-empty > span { width:52px;height:52px;border-radius:17px; }
.workflow-settings-empty h3 { margin:12px 0 6px;font-size:15px; }
.workflow-settings-empty p { max-width:260px;margin:0;color:var(--muted);font-size:11px;line-height:1.55; }
.kanban-column { width:min(76vw,320px); min-height:515px; display:flex; flex-direction:column; scroll-snap-align:start; border:1px solid #dfe3dd; border-radius:17px; background:#e9ece6; overflow:hidden; }
.kanban-column-head { min-height:59px; padding:10px;position:relative;z-index:3;display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:8px; border-bottom:1px solid #dde2dc; background:#fff;will-change:transform; }
.kanban-column-head.is-floating { border-radius:16px 16px 12px 12px;box-shadow:0 9px 20px rgba(27,49,44,.16); }
.kanban-stage { width:30px; height:30px; display:grid; place-items:center; border-radius:10px; color:var(--stage-color); background:var(--stage-soft); font-size:9px; font-weight:900; }
.kanban-stage svg { width:15px; height:15px; }
.kanban-column-head b { display:block; font-size:10px; }.kanban-column-head small { display:block; margin-top:2px; color:var(--muted); font-size:7px; }
.kanban-count { min-width:22px; height:22px; padding:0 5px; display:grid; place-items:center; border-radius:8px; color:var(--stage-color); background:var(--stage-soft); font-size:8px; font-weight:850; }
.kanban-column-body { flex:1; padding:9px; }
.kanban-card { width:100%; margin-bottom:8px; padding:11px; display:block; border:1px solid #dfe3dd; border-left:3px solid var(--stage-color); border-radius:13px; background:#fff; text-align:left; box-shadow:0 3px 10px rgba(31,51,46,.05); }
.kanban-card-head { margin-bottom:8px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:6px; }
.kanban-card-head > b { min-width:0; margin-top:1px; font-size:10.5px; line-height:1.35; overflow-wrap:anywhere; }
.kanban-card-top { display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.kanban-deadline { width:max-content; min-height:20px; margin:-2px 0 8px auto; padding:0 7px; display:flex; align-items:center; gap:4px; border-radius:7px; color:#537068; background:#edf3ef; font-size:7px; font-weight:800; }
.kanban-deadline svg { width:11px; }.kanban-deadline.urgent { color:#b3443b; background:var(--red-soft); }.kanban-deadline.overdue,.kanban-deadline.stopped { color:#a65048; background:var(--red-soft); }.kanban-deadline.done { color:#2c745f; background:var(--green-soft); }
.kanban-card > small { display:block; overflow:hidden; color:#7c8985; font-size:7px; white-space:nowrap; text-overflow:ellipsis; }
.kanban-card-foot { margin-top:10px; display:flex; align-items:center; justify-content:space-between; }.kanban-card-foot > span:first-child { display:flex; align-items:center; gap:4px; color:#919b98; font-size:7px; }.kanban-card-foot svg { width:10px; }.kanban-card-foot .mini-avatar { width:21px; height:21px; }
.kanban-empty { height:115px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:#97a29e; font-size:8px; }
.route-list-mode .kanban-legend { padding:0;gap:8px;border:0;background:transparent; }
.route-list-mode .kanban-legend span { min-height:39px;padding:0 13px;border:1px solid #dfe4df;border-radius:13px;background:#fff;box-shadow:0 3px 10px rgba(31,51,46,.04);font-size:8px; }
.route-list-mode .legend-dot { width:9px;height:9px;border-radius:50%; }
.route-list-mode .kanban-scroll { padding:0 18px 24px;overflow-x:hidden;scroll-snap-type:none; }
.route-list-mode .kanban-grid { width:100%;display:block;padding:0; }
.route-list-layout { width:100%; }
.route-stage-tabs { margin-bottom:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;overflow:visible; }
.route-stage-tabs button { min-width:0;min-height:47px;padding:7px 8px;display:grid;grid-template-columns:30px minmax(0,1fr) 22px;align-items:center;gap:7px;border:1px solid #dfe4df;border-radius:14px;color:#52615d;background:#fff;text-align:left;box-shadow:0 3px 10px rgba(31,51,46,.04); }
.route-stage-tabs button > span { width:30px;height:30px;display:grid;place-items:center;border-radius:10px;color:var(--stage-color);background:var(--stage-soft); }
.route-stage-tabs button > span svg { width:15px;height:15px; }
.route-stage-tabs button b { min-width:0;overflow-wrap:anywhere;font-size:8.5px;line-height:1.15; }
.route-stage-tabs button i { min-width:22px;height:22px;display:grid;place-items:center;border-radius:8px;color:#53635f;background:#f0f3f0;font-size:8px;font-style:normal;font-weight:850; }
.route-stage-tabs button.active { border-color:var(--stage-color);color:var(--ink);box-shadow:inset 0 0 0 1px var(--stage-color),0 5px 14px rgba(31,51,46,.06); }
.route-stage-tabs button.active i { color:var(--stage-color);background:var(--stage-soft); }
.route-selected-stage > header { min-height:58px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:12px; }
.route-selected-stage > header h2 { margin:0;font-size:20px;line-height:1.15;letter-spacing:-.4px; }
.route-selected-stage > header small { display:block;margin-top:5px;color:var(--muted);font-size:9px; }
.route-list-symbol { width:42px;height:42px;display:grid;place-items:center;border:1px solid #dfe4df;border-radius:13px;color:#71807b;background:#f5f7f4; }
.route-list-symbol svg { width:18px;height:18px; }
.route-stage-cards { display:grid;gap:9px; }
.route-list-mode .route-stage-cards .kanban-card { min-height:92px;margin:0;padding:14px 14px 12px;border-left-width:4px;border-radius:17px;box-shadow:0 5px 16px rgba(31,51,46,.06); }
.route-list-mode .route-stage-cards .kanban-card-head { margin-bottom:10px; }
.route-list-mode .route-stage-cards .kanban-card-head > b { font-size:13px; }
.route-list-mode .route-stage-cards .kanban-card > small { font-size:9px; }
.route-list-mode .route-stage-cards .kanban-card-foot { margin-top:12px; }
.route-list-mode .route-stage-cards .kanban-card-foot > span:first-child { font-size:8px; }
.route-list-mode .route-stage-cards .mini-avatar { width:30px;height:30px;font-size:7px; }
@media (max-width:370px) {
  .route-stage-tabs { gap:6px; }
  .route-stage-tabs button { min-height:44px;padding:6px;grid-template-columns:27px minmax(0,1fr) 20px;gap:5px; }
  .route-stage-tabs button > span { width:27px;height:27px;border-radius:9px; }
  .route-stage-tabs button b { font-size:7.7px; }
  .route-stage-tabs button i { min-width:20px;height:20px;font-size:7.5px; }
}

@media (max-width:520px), (pointer:coarse) {
  .route-list-mode .route-selected-stage > header { min-height:54px;margin:0 -3px 10px;padding:7px 3px;position:relative;z-index:8;border-bottom:1px solid rgba(217,226,220,.9);border-radius:12px;background:rgba(242,243,238,.96);backdrop-filter:blur(14px);will-change:transform; }
  .route-list-mode .route-selected-stage > header.is-floating { box-shadow:0 9px 20px rgba(27,49,44,.14); }
}

.my-task-summary { margin:0 18px 14px; padding:12px 0; display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:15px; background:#fff; }
.my-task-summary div { display:flex; flex-direction:column; align-items:center; border-right:1px solid var(--line); }.my-task-summary div:last-child { border-right:0; }.my-task-summary b { font-size:16px; }.my-task-summary span { margin-top:2px; color:var(--muted); font-size:7px; }
.my-task-tabs { margin:0 18px 12px; padding:3px; display:grid; grid-template-columns:repeat(3,1fr); gap:3px; border-radius:11px; background:#e4e8e1; }
.my-task-tabs button { position:relative; }
.my-task-tab-badge { min-width:18px; height:18px; padding:0 4px; position:absolute; top:-10px; right:-2px; display:grid; place-items:center; border:2px solid var(--canvas); border-radius:10px; color:#b72c34; background:#ffebe9; font-size:9px; line-height:1; }
.my-task-tab-badge.done { color:#23744c; background:#e4f3ec; }
.my-task-tabs button { min-height:31px; padding:0 5px; border:0; border-radius:8px; color:#85908d; background:transparent; font-size:7.5px; font-weight:800; }.my-task-tabs button.active { color:var(--ink); background:#fff; box-shadow:0 2px 7px rgba(28,47,43,.07); }
.my-task-list { margin:0 18px; }
.my-task-card { width:100%; min-height:69px; margin-bottom:8px; padding:10px; display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:9px; border:1px solid var(--line); border-radius:15px; background:#fff; text-align:left; }
.my-task-stage { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; color:var(--stage-color); background:var(--stage-soft); }.my-task-stage svg { width:16px; }
.my-task-info { min-width:0; overflow-wrap:anywhere; }.my-task-info small { display:block; margin-bottom:3px; color:var(--stage-color); font-size:7px; font-weight:750; }.my-task-info b { display:block; font-size:9px; line-height:1.3; }.my-task-info i { display:block; margin-top:3px; color:var(--muted); font-size:7px; font-style:normal; }
.my-task-card-with-progress { display:block; padding:0; overflow:hidden; border-radius:19px; }
.my-task-card-main { width:100%; min-height:77px; padding:12px; display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:9px; border:0; background:#fff; text-align:left; }
.my-task-card-main .my-task-stage { width:32px; height:32px; border-radius:10px; }.my-task-card-main .my-task-info b { font-size:11px; }.my-task-card-main .my-task-info i { font-size:8px; }
.my-task-card-main:focus-visible { outline-offset:-3px; border-radius:17px; }
.task-progress { --progress-accent:#a435d4; --progress-soft:#f0e2f8; margin:0 8px 8px; border-radius:15px; color:#2d2935; background:#f6f4f9; }
.task-progress.returned { --progress-accent:#a66a1c; --progress-soft:#faecd6; }.task-progress.rejected { --progress-accent:#b24b48; --progress-soft:#f8e4e3; }.task-progress.complete { --progress-accent:#26785f; --progress-soft:#e3f1e9; }
.task-progress-summary { padding:14px 11px 8px; display:block; cursor:pointer; list-style:none; }.task-progress-summary::-webkit-details-marker { display:none; }.task-progress-summary:focus-visible { outline:2px solid var(--progress-accent); outline-offset:-2px; border-radius:15px; }
.task-progress-track { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); padding-bottom:14px; }
.task-progress-stop { min-width:0; position:relative; display:grid; place-items:center; }
.task-progress-stop:not(:last-child)::after { content:''; height:1px; position:absolute; left:calc(50% + 14px); right:calc(-50% + 14px); top:16px; background:#e1dce9; }
.task-progress-stop.done::after { background:#b9b0c5; }
.task-progress-icon { width:28px; height:32px; position:relative; z-index:1; display:grid; place-items:center; border-radius:10px; color:#c3bdcf; background:#fff; }
.task-progress-stop.done .task-progress-icon { color:#35303e; }.task-progress-stop.current .task-progress-icon,.task-progress-stop.returned .task-progress-icon,.task-progress-stop.rejected .task-progress-icon { color:var(--progress-accent); box-shadow:0 0 0 1.5px var(--progress-accent),0 4px 10px #6036820d; }
.task-progress.complete .task-progress-stop.done .task-progress-icon { color:var(--progress-accent); }
.task-progress-check { width:11px; height:11px; position:absolute; right:-2px; bottom:-2px; display:grid; place-items:center; border:2px solid #f6f4f9; border-radius:50%; color:#fff; background:#5d526d; }.task-progress-check svg { stroke-width:3; }.task-progress.complete .task-progress-check { background:var(--progress-accent); }
.task-progress-caption { padding-top:11px; display:flex; align-items:flex-start; gap:9px; border-top:1px solid #fff; }.task-progress-copy { min-width:0; flex:1; }.task-progress-copy > small { display:block; margin-bottom:4px; color:#82758e; font-size:8px; font-weight:750; letter-spacing:.3px; }.task-progress-copy > strong { display:block; font-size:12px; line-height:1.4; font-weight:750; overflow-wrap:anywhere; }.task-progress-caption time { max-width:85px; padding-top:16px; flex:none; color:#847c91; font-size:9px; line-height:1.5; text-align:right; overflow-wrap:anywhere; }
.task-progress-note { margin-top:5px; display:block; color:var(--progress-accent); font-size:9px; line-height:1.5; }
.task-progress-toggle { min-height:24px; margin-top:6px; display:flex; justify-content:center; align-items:center; gap:4px; color:#8b7f9b; font-size:8px; }.task-progress-toggle > svg { transition:transform .18s; }.task-progress-hide { display:none; }.task-progress[open] .task-progress-hide { display:inline; }.task-progress[open] .task-progress-show { display:none; }.task-progress[open] .task-progress-toggle > svg { transform:rotate(180deg); }
.task-progress-list { margin:0; padding:0 12px 12px; list-style:none; }.task-progress-list li { min-height:44px; padding:7px 0; position:relative; display:grid; grid-template-columns:23px minmax(0,1fr); align-items:center; gap:10px; }.task-progress-list li:not(:last-child)::after { content:''; width:1px; position:absolute; top:33px; bottom:-10px; left:11px; background:#e1dce9; }
.task-progress-number { width:23px; height:23px; position:relative; z-index:1; display:grid; place-items:center; border:1px solid #e2dce9; border-radius:8px; color:#90869e; background:#f6f4f9; font-size:9px; font-weight:800; }
.task-progress-list b { display:block; color:#797182; font-size:10px; line-height:1.4; font-weight:600; }.task-progress-list small { margin-top:2px; display:block; color:#8e859a; font-size:8px; line-height:1.3; }.task-progress-list .done b { color:#39323f; }.task-progress-list .done .task-progress-number { color:#554a61; border-color:#d8cfdf; background:#eee9f3; }
.task-progress-list .current b,.task-progress-list .returned b,.task-progress-list .rejected b { color:var(--progress-accent); font-weight:750; }.task-progress-list .current .task-progress-number,.task-progress-list .returned .task-progress-number,.task-progress-list .rejected .task-progress-number { color:var(--progress-accent); border-color:var(--progress-accent); background:var(--progress-soft); }
.empty-board.compact { min-height:180px; }

.page-symbol.chat { color:#4f7894; background:var(--blue-soft); }
.chat-tabs { margin:0 18px 12px; padding:3px; display:grid; grid-template-columns:repeat(3,1fr); gap:3px; border-radius:12px; background:#e4e8e1; }
.chat-tabs button { min-width:0; min-height:36px; padding:0 5px; position:relative; display:flex; align-items:center; justify-content:center; gap:5px; border:0; border-radius:9px; color:#7d8985; background:transparent; font-size:7.3px; font-weight:820; white-space:nowrap; }.chat-tabs button svg { width:13px; }.chat-tabs button.active { color:var(--ink); background:#fff; box-shadow:0 2px 8px rgba(28,47,43,.08); }.chat-tabs button.active svg { color:var(--green); }
.chat-tab-badge { min-width:16px; height:16px; padding:0 4px; position:absolute; z-index:2; top:-7px; left:calc(50% + 14px); display:grid; place-items:center; border:2px solid #e4e8e1; border-radius:9px; color:#fff; background:var(--red); font-size:6px; line-height:1; font-weight:900; }.chat-tabs button.active .chat-tab-badge { border-color:#fff; }.chat-tab-badge[hidden] { display:none; }
.chat-content { margin:0 18px 20px; }.chat-panel { overflow:hidden; border:1px solid var(--line); border-radius:17px; background:#fff; box-shadow:0 4px 14px rgba(31,51,46,.04); }
.chat-dropdown { min-height:57px; margin:0 0 10px; padding:8px 38px 8px 10px; position:relative; display:block; border:1px solid var(--line); border-radius:13px; background:#fff; box-shadow:0 3px 10px rgba(31,51,46,.035); }.chat-dropdown > span { margin-bottom:4px; display:flex; align-items:center; gap:5px; color:var(--muted); font-size:6.5px; font-weight:780; }.chat-dropdown > span svg { width:13px; color:var(--green); }.chat-dropdown select { width:100%; padding:0; border:0; outline:0; appearance:none; color:var(--ink); background:transparent; font:inherit; font-size:9px; font-weight:820; cursor:pointer; }.chat-dropdown > svg:last-child { width:15px; position:absolute; right:12px; top:21px; color:#85918d; pointer-events:none; }
.chat-room-head { min-height:58px; padding:10px 11px; display:grid; grid-template-columns:36px 1fr; align-items:center; gap:9px; border-bottom:1px solid var(--line); background:#fafbf8; }.chat-room-head > span { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; color:var(--green); background:var(--green-soft); }.chat-room-head > span svg { width:17px; }.chat-room-head b { display:block; font-size:9px; }.chat-room-head small { display:block; margin-top:3px; color:var(--muted); font-size:7px; }
.chat-messages { max-height:385px; min-height:250px; padding:12px 10px; overflow-y:auto; display:flex; flex-direction:column; gap:9px; background:#f4f6f2; scrollbar-width:none; }.chat-messages::-webkit-scrollbar { display:none; }
.chat-message { display:grid; grid-template-columns:28px minmax(0,1fr) 23px; align-items:end; gap:7px; }.chat-message .mini-avatar { width:28px; height:28px; font-size:6.5px; }.chat-message > div { width:max-content; max-width:100%; padding:8px 9px; border:1px solid #dfe4de; border-radius:12px 12px 12px 4px; background:#fff; }.chat-message.own > div { border-color:#a9cabc; border-radius:12px 12px 4px 12px; background:var(--green-soft); }.chat-message.own { padding-left:28px; }.chat-message-meta { display:flex; align-items:center; gap:6px; }.chat-message-meta b { color:#53645f; font-size:7px; }.chat-message-meta time { color:#99a39f; font-size:6px; }.chat-message p { margin:4px 0 0; color:#4f615c; font-size:8px; line-height:1.45; overflow-wrap:anywhere; }
.message-reply-button { width:23px; height:23px; padding:0; display:grid; place-items:center; align-self:center; border:0; border-radius:8px; color:#64746f; background:rgba(255,255,255,.52); opacity:.58; box-shadow:none; }.message-reply-button:hover,.message-reply-button:focus-visible { opacity:1; color:var(--green); background:#fff; }.message-reply-button svg { width:12px; }
.chat-reply-quote,.comment-reply-quote { margin:5px 0 2px; padding:5px 6px; display:block; overflow:hidden; border-left:2px solid #80a499; border-radius:3px 7px 7px 3px; background:rgba(31,107,90,.07); }.chat-reply-quote b,.comment-reply-quote b { display:block; color:#397263; font-size:6.5px; }.chat-reply-quote small,.comment-reply-quote small { margin-top:2px; display:block; overflow:hidden; color:#6f7d79; font-size:6.5px; white-space:nowrap; text-overflow:ellipsis; }
.chat-message-files { margin-top:5px; display:flex; flex-wrap:wrap; gap:4px; }.chat-message-files > span,.chat-message-files > a { max-width:180px; padding:4px 6px; display:inline-flex; align-items:center; gap:3px; overflow:hidden; border:1px solid #ccd8d1; border-radius:7px; color:#526a63; background:rgba(255,255,255,.65); font-size:6.5px; font-weight:760; white-space:nowrap; text-overflow:ellipsis; }.chat-message-files svg { width:10px; flex:none; }
.chat-empty { min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:var(--muted); text-align:center; }.chat-empty svg { width:20px; color:#8da099; }.chat-empty b { font-size:9px; }.chat-empty span { font-size:7px; }.chat-empty.standalone { min-height:180px; border:1px dashed var(--line); border-radius:15px; }
.chat-compose { padding:9px; display:grid; grid-template-columns:minmax(0,1fr) 40px 40px; align-items:end; gap:7px; border-top:1px solid var(--line); background:#fff; }.chat-compose textarea { width:100%; min-height:40px; max-height:92px; padding:10px 11px; resize:none; border:1px solid #dbe1da; outline:0; border-radius:12px; color:var(--ink); background:#f7f9f5; font:inherit; font-size:9px; line-height:1.4; }.chat-compose textarea:focus { border-color:#80a499; box-shadow:0 0 0 3px rgba(31,107,90,.08); }.chat-compose > button[type="submit"] { width:40px; height:40px; padding:0; display:grid; place-items:center; border:0; border-radius:12px; color:#fff; background:var(--ink); box-shadow:0 5px 13px rgba(23,48,44,.16); }.chat-compose > button[type="submit"] svg { width:16px; }
.chat-attach-button { width:40px; height:40px; position:relative; display:grid; place-items:center; border:1px solid #d6ddd7; border-radius:12px; color:#64746f; background:#f3f6f1; cursor:pointer; }.chat-attach-button input { width:1px; height:1px; position:absolute; opacity:0; pointer-events:none; }.chat-attach-button svg { width:16px; }.chat-attach-button.has-files { border-color:#80a499; color:var(--green); background:var(--green-soft); }.chat-attach-button b { min-width:15px; height:15px; padding:0 3px; position:absolute; top:-5px; right:-5px; display:grid; place-items:center; border:2px solid #fff; border-radius:8px; color:#fff; background:var(--red); font-size:5.5px; }.chat-attach-button b[hidden] { display:none; }
.reply-preview { grid-column:1 / -1; min-height:34px; padding:5px 6px 5px 8px; display:flex; align-items:center; justify-content:space-between; gap:7px; border-left:3px solid var(--green); border-radius:8px; background:var(--green-soft); }.reply-preview[hidden] { display:none; }.reply-preview > span { min-width:0; display:flex; align-items:center; gap:6px; }.reply-preview > span > span { min-width:0; }.reply-preview b,.reply-preview small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.reply-preview b { color:#356b5d; font-size:6.5px; }.reply-preview small { max-width:250px; margin-top:1px; color:#6e7b77; font-size:6.5px; }.reply-preview > button { width:25px; height:25px; padding:0; display:grid; place-items:center; flex:none; border:0; border-radius:7px; color:#687772; background:transparent; box-shadow:none; }.reply-preview > button svg { width:12px; }
.task-chat-intro { margin-bottom:10px; padding:10px; display:flex; align-items:flex-start; gap:8px; border-radius:12px; color:#536f68; background:var(--green-soft); font-size:7.5px; line-height:1.4; }.task-chat-intro > svg { width:15px; flex:none; }.task-chat-intro b { display:block; margin-bottom:2px; font-size:8px; }.task-chat-intro > i { min-width:24px; height:24px; margin-left:auto; display:grid; place-items:center; flex:none; border-radius:8px; color:#fff; background:var(--red); font-size:8px; font-style:normal; font-weight:900; }.private-intro { color:#596879; background:var(--blue-soft); }.private-intro > svg { color:var(--blue); }
.task-chat-list { display:grid; gap:8px; }.task-chat-row { width:100%; min-height:78px; padding:9px; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:9px; border:1px solid var(--line); border-radius:14px; background:#fff; text-align:left; }.task-chat-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:var(--chat-stage); background:var(--chat-soft); }.task-chat-icon svg { width:16px; }.task-chat-row > span:nth-child(2) { min-width:0; }.task-chat-title { display:flex; align-items:center; justify-content:space-between; gap:7px; }.task-chat-title b { overflow:hidden; font-size:8.5px; white-space:nowrap; text-overflow:ellipsis; }.task-chat-title i { flex:none; color:var(--green); font-size:6.5px; font-style:normal; font-weight:800; }.task-chat-row small { margin-top:4px; display:block; overflow:hidden; color:#697873; font-size:7px; white-space:nowrap; text-overflow:ellipsis; }.task-chat-row em { margin-top:3px; display:block; overflow:hidden; color:#9aa39f; font-size:6.5px; font-style:normal; white-space:nowrap; text-overflow:ellipsis; }.task-chat-row > .status-chip { align-self:start; }
.task-chat-row.unread { border-color:#a8cabc; box-shadow:inset 3px 0 0 var(--green); }.task-chat-row.unread .task-chat-title i { padding:3px 5px; border-radius:6px; color:#fff; background:var(--red); }
.direct-chat-list { display:grid; gap:8px; }.direct-chat-row { width:100%; min-height:70px; padding:9px 10px; display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:9px; border:1px solid var(--line); border-radius:14px; background:#fff; text-align:left; }.direct-chat-row.unread { border-color:#a8cabc; box-shadow:inset 3px 0 0 var(--green); }.direct-chat-row .member-avatar { width:40px; height:40px; }.direct-chat-row > span:nth-child(2) { min-width:0; }.direct-chat-row b { display:block; font-size:9px; }.direct-chat-row small { display:block; margin-top:3px; overflow:hidden; color:#667570; font-size:7px; white-space:nowrap; text-overflow:ellipsis; }.direct-chat-row i { display:block; margin-top:3px; overflow:hidden; color:#9aa39f; font-size:6.5px; font-style:normal; white-space:nowrap; text-overflow:ellipsis; }.direct-chat-row > span:last-child { color:#9aa39f; font-size:6.5px; white-space:nowrap; }.direct-chat-row > span:last-child svg { width:14px; }.direct-chat-row .direct-unread { min-width:20px; height:20px; padding:0 5px; display:grid; place-items:center; border-radius:10px; color:#fff; background:var(--red); font-size:7px; }
.task-chat-sheet { padding-bottom:20px; }.task-chat-sheet-head h2 { max-width:290px; font-size:17px; }.task-chat-context { margin:-4px 0 10px; padding:8px 0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 9px; border-bottom:1px solid var(--line); }.task-chat-context > span:not(.status-chip) { display:flex; align-items:center; gap:4px; color:var(--muted); font-size:7px; }.task-chat-context svg { width:11px; }.task-chat-messages { min-height:245px; max-height:46vh; border:1px solid var(--line); border-radius:14px 14px 0 0; }.task-chat-compose { border:1px solid var(--line); border-top:0; border-radius:0 0 14px 14px; }.task-chat-sync { margin:8px 2px 0; display:flex; align-items:center; gap:5px; color:var(--muted); font-size:7px; }.task-chat-sync svg { width:11px; }
.direct-chat-person { display:flex; align-items:center; gap:9px; }.direct-chat-person .member-avatar { width:42px; height:42px; }.direct-chat-person span:last-child p { margin:0 0 2px; }.direct-chat-person h2 { margin:0 0 2px; font-size:16px; }.direct-chat-person small { display:block; color:var(--muted); font-size:7px; }.private-chat-notice { margin:2px 0 10px; padding:8px 9px; display:flex; align-items:center; gap:6px; border-radius:10px; color:#56697a; background:var(--blue-soft); font-size:7px; }.private-chat-notice svg { width:13px; flex:none; }.direct-chat-messages { min-height:280px; }

.space-list { display:grid; gap:8px; }
.space-choice { width:100%; min-height:68px; padding:9px 10px; display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:10px; border:1px solid var(--line); border-radius:14px; background:#fff; text-align:left; }
.space-choice.active { border-color:#85a69c; background:var(--green-soft); }
.space-choice-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:#fff; box-shadow:0 5px 12px rgba(27,48,43,.13); }.space-choice-icon svg { width:19px; }
.space-choice b { display:block; font-size:10px; }.space-choice small { display:block; margin-top:2px; color:var(--muted); font-size:7px; line-height:1.3; }.space-choice span > i { display:block; margin-top:4px; color:var(--green); font-size:7px; font-style:normal; font-weight:750; }.space-choice > svg { width:15px; color:var(--green); }

.role-legend { margin: 0 18px 15px; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.role-legend button { min-height: 81px; padding: 9px 7px; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-align: left; }
.legend-icon { width: 29px; height: 29px; margin-bottom: 7px; display: grid; place-items: center; flex: none; border-radius: 9px; }.legend-icon svg { width: 14px; }
.legend-icon.author { color: #9a6f21; background: var(--amber-soft); }.legend-icon.editor { color: var(--blue); background: var(--blue-soft); }.legend-icon.admin { color: var(--green); background: var(--green-soft); }
.role-legend b { display: block; font-size: 8.5px; }.role-legend small { display: block; margin-top: 2px; color: #8a9692; font-size: 6.8px; line-height: 1.25; }
.team-access-note { margin: 0 18px 16px; padding: 10px; display: flex; gap: 7px; border-radius: 11px; color: #6d7875; background: #e7ebe5; font-size: 8px; line-height: 1.4; }.team-access-note.restricted { color: #986918; background: var(--amber-soft); }.team-access-note svg { width: 13px; flex: none; }
.member-list { margin: 0 18px 13px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.member-row { min-height: 64px; padding: 9px 11px; display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); }.member-row:last-child { border-bottom: 0; }
.member-avatar { width: 38px; height: 38px; display: grid; place-items: center; position: relative; border-radius: 12px; color: #fff; background: var(--avatar,#5b8077); font-size: 9px; font-weight: 850; }.member-avatar::after { content:""; width: 8px; height: 8px; position: absolute; right: -1px; bottom: -1px; border: 2px solid #fff; border-radius: 50%; background: var(--lime); }
.member-row b { display: block; margin-bottom: 2px; font-size: 9px; }.member-row small { display: block; color: var(--muted); font-size: 7px; }
.role-pill { height: 21px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: 7px; color: var(--role-color); background: var(--role-bg); font-size: 7px; font-weight: 850; }
.role-pill.author { --role-color:#90661c;--role-bg:var(--amber-soft); }.role-pill.editor { --role-color:#447a99;--role-bg:var(--blue-soft); }.role-pill.admin { --role-color:#26705e;--role-bg:var(--green-soft); }
.role-pill.manager { --role-color:#6d5489;--role-bg:#f0eaf7; }
.role-context > span.manager, .legend-icon.manager { color:#6d5489; background:#f0eaf7; }
.invite-button { width: calc(100% - 36px); min-height: 57px; margin: 0 18px; padding: 9px 11px; display: grid; grid-template-columns: 35px 1fr auto; gap: 10px; align-items: center; border: 1px dashed #bfc9c1; border-radius: 15px; color: var(--green); background: rgba(255,255,255,.55); text-align: left; }
.invite-button > svg:first-child { width: 35px; height: 35px; padding: 9px; border-radius: 11px; background: var(--green-soft); }.invite-button > svg:last-child { width: 15px; }.invite-button b { display: block; font-size: 9px; }.invite-button small { display: block; margin-top: 2px; color: var(--muted); font-size: 7px; }
.invite-button[disabled] { opacity: .48; cursor: not-allowed; }

.settings-lock { margin: 0 18px; padding: 28px 20px; display: flex; flex-direction: column; align-items: center; border: 1px solid var(--line); border-radius: 18px; background: #fff; text-align: center; }.settings-lock span { width: 49px; height: 49px; margin-bottom: 12px; display: grid; place-items: center; border-radius: 16px; color: #a07124; background: var(--amber-soft); }.settings-lock h2 { margin: 0 0 6px; font-size: 13px; }.settings-lock p { max-width: 280px; margin: 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.settings-group { margin: 0 18px 15px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }.settings-group-title { padding: 12px 12px 8px; color: #929c99; font-size: 7px; font-weight: 850; letter-spacing: .9px; }
.setting-row { min-height: 57px; padding: 9px 11px; display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; border-top: 1px solid var(--line); }.setting-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--green); background: var(--green-soft); }.setting-icon svg { width: 16px; }.setting-row b { display: block; font-size: 9px; }.setting-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 7px; }.setting-row > svg { width: 15px; color: #a2aaa8; }
.setting-action { width:100%; border-right:0; border-bottom:0; border-left:0; background:#fff; text-align:left; }.setting-action:hover { background:#f7f9f5; }
.switch { width: 31px; height: 18px; padding: 2px; display: flex; justify-content: flex-end; border-radius: 10px; background: var(--green); }.switch i { width: 14px; height: 14px; border-radius: 50%; background: #fff; }

.fab { width: 50px; height: 50px; padding: 0; position: absolute; z-index: 21; right: 17px; bottom: calc(var(--nav-height) + 6px); display: grid; place-items: center; border: 0; border-radius: 17px; color: var(--ink); background: #f0c45c; box-shadow: 0 12px 25px rgba(205,154,49,.34); transition: .2s; }.fab:hover { transform: translateY(-2px); }.fab:active { transform: scale(.94); }.fab svg { width: 23px; stroke-width: 2.5; }
.fab[hidden] { display: none; }
.bottom-nav { height:var(--nav-height); padding:7px 6px max(7px,env(safe-area-inset-bottom,0px)); position:absolute; z-index:20; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid rgba(212,218,210,.92); background:rgba(255,255,255,.94); backdrop-filter:blur(18px); }
.bottom-nav button { min-width:0; padding:0 2px; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:0; color:#99a29f; background:none; font-size:6.8px; font-weight:780; line-height:12px; white-space:nowrap; }
.bottom-nav .nav-icon { width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:10px; background:transparent; }
.bottom-nav .nav-icon svg { display:block; width:18px; height:18px; }
.bottom-nav button.active { color:var(--green); }
.bottom-nav button.active .nav-icon { background:var(--green-soft); }
.bottom-nav button:focus-visible { outline:none; }
.bottom-nav button:focus-visible .nav-icon { outline:2px solid var(--green); outline-offset:2px; }
.nav-badge { min-width:17px; height:17px; padding:0 4px; position:absolute; top:0; left:calc(50% + 7px); z-index:2; display:grid; place-items:center; border:2px solid #fff; border-radius:9px; color:#fff; background:var(--red); font-size:6.5px; line-height:1; font-weight:900; }.nav-badge[hidden] { display:none; }
.task-done-badge { color:#23744c; background:#e4f3ec; font-size:8px; }
.task-work-badge { left:auto; right:calc(50% + 7px); color:#b72c34; background:#ffebe9; font-size:8px; }

.modal-layer { position: absolute; z-index: 50; inset: 0; overflow:hidden; visibility: hidden; pointer-events: none; }.modal-layer.open { visibility: visible; pointer-events: auto; }
.modal-backdrop { position: absolute; inset: 0; opacity: 0; background: rgba(15,34,30,.5); backdrop-filter: blur(2px); transition: opacity .25s; }.modal-layer.open .modal-backdrop { opacity: 1; }
.bottom-sheet { max-height: 91%; padding: 0 18px max(24px,env(safe-area-inset-bottom)); position: absolute; left: 0; right: 0; bottom: 0; overflow-y: auto; visibility:hidden;pointer-events:none;border-radius: 25px 25px 0 0; background: #fff; box-shadow: 0 -12px 40px rgba(19,38,34,.2); transform: translateY(105%); transition: transform .34s cubic-bezier(.2,.75,.25,1); scrollbar-width: none; }.bottom-sheet::-webkit-scrollbar { display:none; }.bottom-sheet.active { visibility:visible;pointer-events:auto;transform: translateY(0); }
.sheet-handle { width: 37px; height: 4px; margin: 9px auto 16px; border-radius: 4px; background: #d8ddd7; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.sheet-head p { margin: 0 0 5px; color: #8b9793; font-size: 7.5px; font-weight: 850; letter-spacing: 1px; }.sheet-head h2 { margin: 0 0 16px; font-size: 20px; line-height: 1.25; letter-spacing: -.45px; }
.sheet-intro { margin: -5px 0 15px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.automation-banner { margin: 0 0 15px; padding: 10px; display: grid; grid-template-columns: 31px 1fr; gap: 9px; border-radius: 13px; background: var(--green-soft); }.automation-banner > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: #2c7562; background: #d3e9e1; }.automation-banner svg { width: 15px; }.automation-banner p { margin: 0; color: #55716a; font-size: 8px; line-height: 1.4; }.automation-banner b { display: block; color: var(--ink); font-size: 8.5px; }
.field { margin-bottom: 11px; display: block; }.field > span,.field-title { margin: 0 0 6px; display: block; color: #697875; font-size: 8px; font-weight: 750; }.field input,.field textarea,.field select { width: 100%; padding: 10px 11px; border: 1px solid #dde2dc; outline: 0; border-radius: 12px; color: var(--ink); background: #f8f9f6; font-size: 10px; }.field textarea { resize: none; line-height: 1.45; }.field input { height: 40px; }.field select { height: 40px; }.field input:focus,.field textarea:focus,.field select:focus { border-color: #80a499; box-shadow: 0 0 0 3px rgba(31,107,90,.08); }.field input:disabled,.field textarea:disabled,.field select:disabled { color: #7c8885; background: #eff1ed; }
.field input[type="datetime-local"]:not(:disabled) { cursor:pointer; }.field textarea.validation-error { border-color:#c8655c; background:var(--red-soft); box-shadow:0 0 0 3px rgba(166,83,75,.1); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.create-photo-upload { min-height:58px; margin:0 0 14px; padding:9px 10px; display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:9px; border:1px dashed #bdc9c2; border-radius:13px; background:#f7f9f5; cursor:pointer; }
.create-photo-upload input { display:none; }.create-photo-upload > span:nth-child(3) b { display:block; font-size:8.5px; }.create-photo-upload > span:nth-child(3) small { display:block; max-width:225px; margin-top:3px; overflow:hidden; color:var(--muted); font-size:7px; white-space:nowrap; text-overflow:ellipsis; }.create-photo-upload > svg { width:15px; color:#87938f; }
.create-photo-upload.has-file { border-style:solid; border-color:#86ae9e; background:var(--green-soft); }.create-photo-upload.has-file .upload-symbol { color:#2b745f; background:#d5eae2; }.create-photo-upload.has-file > svg { color:var(--green); }
.primary-button,.secondary-button,.danger-button { min-height: 44px; padding: 0 13px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 13px; font-size: 9px; font-weight: 850; }.primary-button { border: 0; color: #fff; background: var(--ink); box-shadow: 0 7px 17px rgba(23,48,44,.18); }.primary-button:disabled { color: #99a39f; background: #e3e6e1; box-shadow: none; cursor: not-allowed; }.secondary-button { border: 1px solid var(--line); color: #596964; background: #fff; }.danger-button { border: 0; color: #a64e47; background: var(--red-soft); }.danger-button:disabled { color:#a9a4a1; background:#eceeeb; cursor:not-allowed; opacity:.72; }.primary-button svg,.secondary-button svg,.danger-button svg { width: 15px; }

.detail-sheet { padding-bottom: 27px; }.detail-headline { padding: 0 4px 14px; }.detail-headline-top { display: flex; align-items: center; justify-content: space-between; }.detail-headline h2 { margin: 9px 0 6px; max-width: 340px; font-size: 20px; line-height: 1.24; letter-spacing: -.45px; }.detail-headline > p { margin: 0; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; }.detail-headline > p svg { width: 12px; }
.locked-banner,.decision-banner,.comment-banner { margin-bottom: 13px; padding: 10px; display: flex; align-items: flex-start; gap: 8px; border-radius: 12px; font-size: 8px; line-height: 1.4; }.locked-banner { color: #6d7775; background: #edf0ec; }.decision-banner.approved { color: #2c705f; background: var(--green-soft); }.decision-banner.rejected,.comment-banner { color: #a04c45; background: var(--red-soft); }.locked-banner svg,.decision-banner svg,.comment-banner svg { width: 14px; flex:none; }.decision-banner b,.comment-banner b { display:block; margin-bottom:2px; font-size:8.5px; }
.detail-meta { margin-bottom: 16px; padding: 7px 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.meta-cell { min-height: 51px; padding: 8px; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 7px; }.meta-cell:nth-child(odd) { border-right: 1px solid var(--line); }.meta-cell > svg { width: 15px; color: #8d9895; }.meta-cell small { display: block; margin-bottom: 2px; color: #909a97; font-size: 7px; }.meta-cell b { display:block; font-size:8.5px; }
.author-meta { min-height:66px; }.author-meta a { width:max-content; margin-top:4px; display:flex; align-items:center; gap:4px; color:var(--green); font-size:7px; font-weight:800; text-decoration:none; }.author-meta a svg { width:10px; }
.detail-section { margin-bottom: 16px; }.detail-section h3 { margin: 0 0 8px; display: flex; align-items: center; justify-content: space-between; font-size: 11px; }.detail-section h3 small { color: var(--muted); font-size: 7px; font-weight: 650; }.detail-copy { margin: 0; color: #667572; font-size: 9px; line-height: 1.5; }
.detail-status-stack { align-items:flex-start; }
.readonly-object h3 small { display:flex; align-items:center; gap:4px; }.readonly-object h3 small svg { width:10px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.choice-button { min-height: 67px; padding: 10px; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--line); border-radius: 13px; background: #fff; text-align:left; }.choice-button span { width: 25px; height: 25px; margin-bottom: 7px; display:grid;place-items:center;border-radius:8px; }.choice-button span svg { width:14px; }.choice-button b { font-size:9px; }.choice-button small { margin-top:2px;color:var(--muted);font-size:7px; }.choice-button.approve span { color:#2c745f;background:var(--green-soft); }.choice-button.reject span { color:#a6534b;background:var(--red-soft); }.choice-button.selected { border-width:2px; }.choice-button.selected.approve { border-color:#5fa08e; }.choice-button.selected.reject { border-color:#cc746c; }.choice-button:disabled { opacity:.72;cursor:default; }
.upload-group { display:grid;gap:8px; }.upload-card { width:100%;min-height:52px;padding:9px 10px;display:grid;grid-template-columns:32px 1fr auto;gap:9px;align-items:center;border:1px dashed #cdd4cc;border-radius:12px;background:#fafbf8;cursor:pointer;text-align:left; }.upload-card.required { border-color:#dabf87; }.upload-card.has-file { border-style:solid;border-color:#9bbbad;background:#f1f8f5; }.upload-card.locked { border-style:solid;background:#f1f3ef;cursor:default; }.upload-card.viewable { cursor:pointer;transition:.18s; }.upload-card.viewable:hover { border-color:#6d9b8d;background:#eaf5f0; }.upload-symbol { width:32px;height:32px;display:grid;place-items:center;border-radius:10px;color:#687a76;background:#e8ece6; }.upload-symbol svg { width:15px; }.upload-card.has-file .upload-symbol { color:#2b745f;background:var(--green-soft); }.upload-card b { display:block;font-size:8.5px; }.upload-card small { display:block;margin-top:2px;color:var(--muted);font-size:7px;max-width:185px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.upload-card em { display:block;margin-top:3px;color:var(--green);font-size:6.5px;font-style:normal;font-weight:800; }.upload-card > svg { width:15px;color:#97a19e; }.upload-card.viewable > svg { color:var(--green); }.upload-card input { display:none; }.required-mark { color:#bd584f; }
.radio-pick { display:grid;grid-template-columns:1fr 1fr;gap:8px; }.radio-pick label { min-height:48px;padding:9px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;background:#fff; }.radio-pick input { width:16px;height:16px;accent-color:var(--green); }.radio-pick b { font-size:8.5px; }.radio-pick small { display:block;color:var(--muted);font-size:7px; }.radio-pick label:has(input:checked) { border-color:#79a495;background:var(--green-soft); }.radio-pick label.disabled { opacity:.5; }
.readonly-box { padding:10px;border:1px solid var(--line);border-radius:12px;background:#f2f4f0; }.readonly-box small { display:block;margin-bottom:3px;color:var(--muted);font-size:7px; }.readonly-box p { margin:0;color:#596965;font-size:8.5px;line-height:1.45; }
.detail-actions { position:sticky;bottom:-27px;margin:18px -18px -27px;padding:11px 18px max(16px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:8px;border-top:1px solid var(--line);background:rgba(255,255,255,.96);backdrop-filter:blur(14px); }.detail-actions.single { grid-template-columns:1fr; }
.comments-disclosure { margin:4px 0 16px; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#fff; }
.comments-disclosure.requires-comment { border-color:#d28a82; box-shadow:0 0 0 3px rgba(179,68,59,.07); }
.comments-disclosure summary { min-height:52px; padding:10px 11px; display:grid; grid-template-columns:1fr auto 15px; align-items:center; gap:8px; cursor:pointer; list-style:none; }
.comments-disclosure summary::-webkit-details-marker { display:none; }
.comments-disclosure summary > span { display:flex; align-items:center; gap:7px; }.comments-disclosure summary > span > svg { width:15px; color:var(--green); }.comments-disclosure summary b { font-size:10px; }.comments-disclosure summary i { min-width:19px; height:19px; padding:0 5px; display:grid; place-items:center; border-radius:7px; color:var(--green); background:var(--green-soft); font-size:7px; font-style:normal; font-weight:850; }
.comments-disclosure summary small { color:var(--muted); font-size:7px; }.comments-disclosure summary > svg { width:15px; color:#8b9793; transition:transform .18s; }.comments-disclosure[open] summary > svg { transform:rotate(180deg); }
.comments-content { padding:0 11px 11px; border-top:1px solid var(--line); }.comment-history { max-height:235px; padding:10px 0; overflow-y:auto; display:grid; gap:10px; }
.comment-history-row { display:grid; grid-template-columns:28px 1fr; gap:8px; align-items:start; }.comment-history-row .mini-avatar { width:28px; height:28px; font-size:7px; }.comment-history-row > span:last-child { min-width:0; }.comment-history-row b { font-size:8px; }.comment-history-row time { margin-left:6px; color:#9ca5a2; font-size:6.5px; }.comment-history-row p { margin:3px 0 0; color:#667572; font-size:8px; line-height:1.42; overflow-wrap:anywhere; }
.comments-empty { min-height:66px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:var(--muted); font-size:7.5px; }.comments-empty svg { width:18px; }
.comment-form { padding-top:10px; border-top:1px solid var(--line); }.comment-form .field { margin-bottom:8px; }.comment-form .secondary-button,.comment-form .danger-button { width:100%; min-height:39px; }
.history-disclosure { margin-bottom:20px; }.history-content { padding:11px; }.history-content .history-list { gap:9px; }
.legal-actions { gap:8px; }
.history-list { display:grid;gap:7px; }.history-row { display:grid;grid-template-columns:8px 1fr auto;gap:8px;align-items:start; }.history-dot { width:7px;height:7px;margin-top:3px;border-radius:3px;background:#9eb0aa; }.history-row b { display:block;font-size:8px; }.history-row p { margin:2px 0 0;color:var(--muted);font-size:7px;line-height:1.35; }.history-row time { color:#a1aaa7;font-size:7px;white-space:nowrap; }

.account-list { display:grid;gap:9px; }.account-space-group { overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#f5f8f3; }.account-space-group > summary { min-height:64px;padding:10px 11px;display:grid;grid-template-columns:38px minmax(0,1fr) 17px;align-items:center;gap:10px;list-style:none;cursor:pointer;background:#fff; }.account-space-group > summary::-webkit-details-marker { display:none; }.account-space-group > summary .space-choice-icon { width:38px;height:38px;border-radius:12px; }.account-space-group > summary b { display:block;font-size:11px; }.account-space-group > summary small { display:block;margin-top:3px;color:var(--muted);font-size:8px; }.account-space-group > summary > svg { width:16px;color:#86938e;transition:transform .18s; }.account-space-group[open] { border-color:#a9c4bb;box-shadow:0 3px 12px rgba(31,74,62,.05); }.account-space-group[open] > summary { border-bottom:1px solid var(--line); }.account-space-group[open] > summary > svg { transform:rotate(180deg); }.account-space-members { padding:7px;display:grid;gap:6px; }.account-choice { min-height:64px;padding:9px 10px;display:grid;grid-template-columns:39px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:left; }.account-choice.active { border-color:#80a79b;background:var(--green-soft); }.account-choice .member-avatar { width:39px;height:39px; }.account-choice b { display:block;font-size:9px; }.account-choice small { display:block;margin-top:2px;color:var(--muted);font-size:7px; }.account-choice span > i { display:block;margin-top:3px;color:var(--green);font-size:6.5px;font-style:normal;font-weight:750; }.account-choice > svg { width:16px;color:var(--green); }.account-group-empty { min-height:58px;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:8px; }
.member-manager-list { margin-bottom:12px; display:grid; gap:7px; }.member-manager-row { width:100%; min-height:63px; padding:8px 9px; display:grid; grid-template-columns:38px 1fr auto 16px; align-items:center; gap:9px; border:1px solid var(--line); border-radius:14px; background:#fff; text-align:left; }.member-manager-row b { display:block; font-size:9px; }.member-manager-row small { display:block; margin-top:3px; color:var(--muted); font-size:7px; }.member-manager-row > svg { width:14px; color:#899691; }.member-add-button { width:100%; margin-top:4px; }.member-manager-sheet { padding-bottom:26px; }
.passwords-sheet { padding-bottom:max(28px,env(safe-area-inset-bottom)); }
.passwords-intro { margin-bottom:13px; }
.passwords-security-note { margin:0 0 14px;padding:13px;display:flex;align-items:flex-start;gap:10px;border:1px solid #acd2c5;border-radius:15px;color:#526a63;background:linear-gradient(135deg,#eef9f5,#f9fcfa);font-size:9px;line-height:1.55; }
.passwords-security-note > svg { width:21px;height:21px;flex:none;color:#08725e; }
.passwords-security-note b { display:block;margin-bottom:2px;color:var(--ink);font-size:10px; }
.passwords-toolbar { margin-bottom:12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px; }
.passwords-search { min-width:0;height:43px;padding:0 11px;display:flex;align-items:center;gap:8px;border:1px solid #d5ddd8;border-radius:12px;background:#fff;transition:border-color .16s,box-shadow .16s; }
.passwords-search:focus-within { border-color:#88b7a8;box-shadow:0 0 0 3px rgba(31,107,90,.09); }
.passwords-search svg { width:17px;flex:none;color:#8b9995; }
.passwords-search input { width:100%;min-width:0;border:0;outline:0;color:var(--ink);background:transparent;font-size:10px; }
.passwords-search input::placeholder { color:#9aa5a2; }
.password-add-button { min-height:43px;padding:0 13px;display:flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:12px;color:#fff;background:linear-gradient(135deg,#16836c,#076752);font-size:9px;font-weight:800;white-space:nowrap;box-shadow:0 6px 15px rgba(12,111,88,.18); }
.password-add-button svg { width:17px;height:17px; }
.password-editor-panel { margin:0 0 12px;padding:12px;border:1px solid #b9d8ce;border-radius:16px;background:linear-gradient(145deg,#f3faf7,#fff);box-shadow:0 8px 24px rgba(27,69,58,.08); }
.password-editor-panel[hidden] { display:none; }
.password-editor-panel > header { margin-bottom:11px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px; }
.password-editor-panel > header small { display:block;margin-bottom:3px;color:#7b8b86;font-size:6.5px;font-weight:850;letter-spacing:.7px; }
.password-editor-panel > header b { display:block;font-size:11px; }
.password-editor-panel > header em { display:block;margin-top:3px;color:var(--muted);font-size:7.5px;font-style:normal;line-height:1.4; }
.password-editor-panel > header .icon-button { width:30px;height:30px;flex:none;border-radius:10px; }
.password-editor-panel form { display:grid;grid-template-columns:1fr 1fr;gap:9px; }
.password-editor-panel form > .field:first-child,.password-editor-person,.password-editor-actions { grid-column:1 / -1; }
.password-editor-panel .field { margin:0; }
.password-editor-panel .field > span { font-size:7px; }
.password-editor-panel .field input,.password-editor-panel .field select { min-height:40px;font-size:10px; }
.password-editor-person { min-height:48px;padding:7px 9px;display:flex;align-items:center;gap:9px;border:1px solid #dce6e0;border-radius:12px;background:#fff; }
.password-editor-person[hidden] { display:none; }
.password-editor-person .member-avatar { width:34px;height:34px;border-radius:10px;font-size:8px; }
.password-editor-person b,.password-editor-person small { display:block; }.password-editor-person b { font-size:9px; }.password-editor-person small { margin-top:2px;color:var(--muted);font-size:7px; }
.password-editor-secret { position:relative; }
.password-editor-secret input { padding-right:39px; }
.password-editor-secret > button { width:32px;height:32px;padding:0;position:absolute;right:4px;bottom:4px;display:grid;place-items:center;border:0;border-radius:9px;color:#60726c;background:transparent; }
.password-editor-secret > button svg { width:15px; }
.password-editor-actions { display:flex;justify-content:flex-end;gap:8px; }
.password-editor-actions button { min-height:39px;padding:0 13px;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:11px;font-size:8px;font-weight:800; }
.password-editor-actions .primary-button { width:auto; }
.password-editor-cancel { border:1px solid #d8dfdb;color:#62716d;background:#fff; }
.password-table-head,.password-account-row { display:grid;grid-template-columns:minmax(0,1.6fr) minmax(70px,.82fr) 58px 113px;align-items:center;gap:8px; }
.password-table-head { min-height:35px;padding:0 10px;border-radius:12px;color:#5f6f6b;background:#f1f4f2;font-size:7.5px; }
.password-accounts-list { margin-top:5px;display:grid;gap:5px; }
.password-account-row { min-height:58px;padding:7px 8px;border:1px solid #e0e6e2;border-radius:13px;background:#fff;box-shadow:0 3px 11px rgba(28,55,48,.035); }
.password-member { min-width:0;display:flex;align-items:center;gap:8px; }
.password-member .member-avatar { width:36px;height:36px;position:relative;flex:none;border-radius:11px;font-size:8px; }
.password-member-status { width:9px;height:9px;position:absolute;right:-2px;bottom:-2px;border:2px solid #fff;border-radius:50%;background:#aab3b0; }
.password-account-row.configured .password-member-status { background:#9abc47; }
.password-member > span:last-child { min-width:0; }
.password-member b,.password-member small { display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }
.password-member b { font-size:8.5px;line-height:1.25; }.password-member small { margin-top:2px;color:var(--muted);font-size:7px; }
.password-login { min-width:0;overflow:hidden;color:#50635e;font-size:7.5px;white-space:nowrap;text-overflow:ellipsis; }
.password-value { color:#273f3a;font-size:9px;font-weight:850;letter-spacing:1.2px;white-space:nowrap; }.password-value.empty { color:#9a7060;font-size:7px;font-weight:750;letter-spacing:0; }
.password-row-actions { display:flex;align-items:center;justify-content:flex-end;gap:4px; }
.password-row-actions button { width:27px;height:29px;padding:0;display:grid;place-items:center;flex:none;border:0;border-radius:9px;color:#36534b;background:transparent; }
.password-row-actions button:hover { background:#edf5f1; }.password-row-actions button:disabled { color:#bec6c3; }
.password-row-actions button svg { width:14px;height:14px; }
.password-row-actions .password-edit-button { width:auto;min-width:62px;padding:0 8px;display:flex;gap:5px;border:1px solid #d8e0dc;background:#fff;font-size:7px;font-weight:800; }
.passwords-empty-search { min-height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--muted);text-align:center; }
.passwords-empty-search svg { width:22px; }.passwords-empty-search b { color:var(--ink);font-size:10px; }.passwords-empty-search small { font-size:8px; }
.passwords-footer { margin-top:12px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;color:#5e6e69;font-size:8px; }
.passwords-footer > span { white-space:nowrap; }
.passwords-footer > label { height:37px;padding:0 6px 0 10px;display:flex;align-items:center;gap:6px;border:1px solid #dbe2de;border-radius:11px;background:#fff;white-space:nowrap; }
.passwords-footer select { min-width:45px;height:27px;border:1px solid #d7dfdb;border-radius:8px;outline:0;color:var(--ink);background:#fff;font-size:8px; }
.passwords-pagination { display:flex;align-items:center;gap:3px; }
.passwords-pagination button { width:29px;height:29px;padding:0;display:grid;place-items:center;border:1px solid #dce4df;border-radius:9px;color:var(--green);background:#f6faf8; }
.passwords-pagination button:disabled { color:#bcc5c1;background:#f7f8f7; }.passwords-pagination button svg { width:14px; }.passwords-pagination span { min-width:34px;text-align:center;font-size:7px;white-space:nowrap; }
.passwords-loading { min-height:160px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:10px; }
.passwords-loading svg { animation:passwordLoadingSpin .8s linear infinite; }
@keyframes passwordLoadingSpin { to { transform:rotate(360deg); } }
@media (max-width:420px) { .passwords-toolbar { grid-template-columns:1fr; }.password-add-button { width:100%; }.password-table-head { display:none; }.password-account-row { grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:5px 8px; }.password-member { grid-column:1;grid-row:1; }.password-row-actions { grid-column:2;grid-row:1; }.password-login { grid-column:1;grid-row:2;padding-left:44px; }.password-value { grid-column:2;grid-row:2;text-align:right; }.password-editor-panel form { grid-template-columns:1fr; }.password-editor-panel form > * { grid-column:1 !important; }.passwords-footer { grid-template-columns:1fr auto; }.passwords-footer > label { grid-column:1 / -1;justify-self:end; }.passwords-pagination { justify-self:end; } }
@media (max-width:350px) { .password-row-actions .password-edit-button span { display:none; }.password-row-actions .password-edit-button { min-width:29px;padding:0; }.passwords-footer { grid-template-columns:1fr; }.passwords-pagination,.passwords-footer > label { justify-self:start; } }
.member-space-groups { gap:8px; }.member-space-group { overflow:hidden; border:1px solid var(--line); border-radius:15px; background:#f7f9f5; }.member-space-group > summary { min-height:53px; padding:8px 10px; display:grid; grid-template-columns:34px 1fr 16px; align-items:center; gap:8px; list-style:none; cursor:pointer; background:#fff; }.member-space-group > summary::-webkit-details-marker { display:none; }.member-space-group > summary .space-choice-icon { width:34px; height:34px; border-radius:10px; }.member-space-group > summary b { display:block; font-size:9px; }.member-space-group > summary small { display:block; margin-top:2px; color:var(--muted); font-size:7px; }.member-space-group > summary > svg { width:15px; color:#8c9894; transition:transform .18s; }.member-space-group[open] { border-color:#a9c4bb; box-shadow:0 3px 11px rgba(31,74,62,.05); }.member-space-group[open] > summary { border-bottom:1px solid var(--line); }.member-space-group[open] > summary > svg { transform:rotate(180deg); }.member-space-group > div { padding:7px; display:grid; gap:6px; }.member-space-group .member-manager-row { min-height:58px; border-radius:11px; }.member-space-empty { min-height:55px; display:flex; align-items:center; justify-content:center; gap:6px; color:var(--muted); font-size:7px; }.member-space-empty svg { width:15px; }
.member-space-picker { margin:0 0 14px; padding:0; border:0; }.member-space-picker legend { color:#697875; font-size:8px; font-weight:750; }.member-space-picker > p { margin:3px 0 7px; color:var(--muted); font-size:7px; }.member-space-picker > div { display:grid; gap:5px; }.member-space-picker label { min-height:48px; padding:7px 8px; position:relative; display:grid; grid-template-columns:24px 31px 1fr; align-items:center; gap:8px; border:1px solid var(--line); border-radius:11px; background:#fff; cursor:pointer; }.member-space-picker input { width:1px; height:1px; position:absolute; opacity:0; }.member-space-picker .space-choice-icon { width:31px; height:31px; border-radius:9px; }.member-space-picker b { display:block; font-size:8px; }.member-space-picker small { display:block; margin-top:2px; color:var(--muted); font-size:6.5px; }.member-space-picker input:checked + .privacy-check { border-color:var(--green); color:#fff; background:var(--green); }.member-space-picker label:has(input:checked) { border-color:#a8c7bc; background:var(--green-soft); }
.board-privacy-sheet { padding-bottom:18px; }.privacy-admin-note { margin:-4px 0 12px; padding:10px; display:flex; align-items:flex-start; gap:8px; border-radius:12px; color:#526a63; background:var(--green-soft); }.privacy-admin-note > svg { width:15px; flex:none; color:var(--green); }.privacy-admin-note b { display:block; margin-bottom:2px; font-size:8px; }.privacy-admin-note span { font-size:7px; line-height:1.4; }.privacy-board-list { display:grid; gap:7px; }.privacy-board-card { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#fff; }.privacy-board-card summary { min-height:58px; padding:9px 10px; display:grid; grid-template-columns:36px 1fr 16px; align-items:center; gap:9px; cursor:pointer; list-style:none; }.privacy-board-card summary::-webkit-details-marker { display:none; }.privacy-board-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; color:var(--privacy-color); background:var(--privacy-soft); }.privacy-board-icon svg { width:15px; }.privacy-board-card summary b { display:block; font-size:9px; }.privacy-board-card summary small { display:block; margin-top:3px; color:var(--muted); font-size:7px; }.privacy-board-card summary > svg { width:15px; color:#8c9894; transition:transform .18s; }.privacy-board-card[open] { border-color:#a9c4bb; box-shadow:0 3px 11px rgba(31,74,62,.05); }.privacy-board-card[open] summary { background:#fbfcfa; }.privacy-board-card[open] summary > svg { transform:rotate(180deg); }.privacy-position-list { padding:7px 9px 9px; display:grid; gap:5px; border-top:1px solid var(--line); background:#f7f9f5; }.privacy-position { min-height:43px; padding:7px 8px; position:relative; display:grid; grid-template-columns:24px 1fr; align-items:center; gap:8px; border:1px solid #e0e5df; border-radius:10px; background:#fff; cursor:pointer; }.privacy-position input { width:1px; height:1px; position:absolute; opacity:0; }.privacy-check { width:24px; height:24px; display:grid; place-items:center; border:1px solid #cdd6d0; border-radius:8px; color:transparent; background:#f5f7f3; }.privacy-check svg { width:11px; }.privacy-position input:checked + .privacy-check { border-color:var(--green); color:#fff; background:var(--green); }.privacy-position:has(input:checked) { border-color:#a8c7bc; background:var(--green-soft); }.privacy-position b { display:block; font-size:8px; }.privacy-position small { display:block; margin-top:2px; color:var(--muted); font-size:6.5px; }.privacy-save-button { width:100%; margin-top:12px; position:sticky; bottom:0; box-shadow:0 -8px 18px 10px #fff; }
.space-privacy-choice { grid-template-columns:24px 31px 1fr; }.space-privacy-choice .space-choice-icon { width:31px; height:31px; border-radius:9px; }.compact-space-lock { margin:0; padding:23px 18px; }
.role-picker { margin:0 0 14px;padding:0;border:0; }.role-picker legend { margin-bottom:7px;color:#697875;font-size:8px;font-weight:750; }.role-picker label { min-height:57px;padding:8px 9px;display:grid;grid-template-columns:0 31px 1fr auto;gap:8px;align-items:center;border:1px solid var(--line);border-bottom:0;background:#fff;overflow:hidden; }.role-picker label:nth-of-type(1) { border-radius:13px 13px 0 0; }.role-picker label:last-child { border-bottom:1px solid var(--line);border-radius:0 0 13px 13px; }.role-picker input { opacity:0; }.role-picker .legend-icon { width:31px;height:31px;margin:0; }.role-picker b { display:block;font-size:8.5px; }.role-picker small { display:block;margin-top:2px;color:var(--muted);font-size:7px; }.role-picker label > svg { width:15px;opacity:0;color:var(--green); }.role-picker label:has(input:checked) { position:relative;z-index:1;border-color:#7ca296;background:var(--green-soft); }.role-picker label:has(input:checked) > svg { opacity:1; }

.search-panel { padding:38px 15px 17px;position:absolute;inset:0 0 auto;background:#fff;box-shadow:0 12px 34px rgba(20,40,35,.18);transform:translateY(-105%);transition:transform .3s ease; }.search-panel.active { transform:translateY(0); }.search-box { height:42px;padding:0 8px 0 12px;display:flex;align-items:center;gap:8px;border-radius:13px;background:#eef1ec; }.search-box > svg { width:17px;color:#8c9894; }.search-box input { flex:1;border:0;outline:0;background:transparent;color:var(--ink);font-size:10px; }.search-box button { width:28px;height:28px;padding:0;display:grid;place-items:center;border:0;border-radius:9px;background:#dfe4dd; }.search-box button svg { width:13px; }.search-panel > p { margin:10px 3px 7px;color:var(--muted);font-size:7.5px; }.search-results { max-height:48vh;overflow:auto; }.search-result { width:100%;padding:10px 3px;display:grid;grid-template-columns:7px 1fr auto;gap:9px;align-items:center;border:0;border-bottom:1px solid var(--line);background:#fff;text-align:left; }.search-result > i { width:7px;height:7px;border-radius:3px;background:var(--stage-color); }.search-result b { display:block;font-size:8.5px; }.search-result small { display:block;margin-top:2px;color:var(--muted);font-size:7px; }.search-result > span:last-child { color:#899591;font-size:7px; }.search-empty { padding:25px;color:var(--muted);text-align:center;font-size:8px; }
.file-preview-panel { position:absolute; z-index:85; inset:0; display:flex; align-items:center; justify-content:center; padding:12px; opacity:0; transition:opacity .18s; }.file-preview-panel.open { opacity:1; }.file-preview-backdrop { position:absolute; inset:0; background:rgba(12,28,24,.72); backdrop-filter:blur(5px); }
.file-preview-card { width:100%; max-height:calc(var(--app-height, 100dvh) - 24px); position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:20px; background:#fff; box-shadow:0 20px 55px rgba(10,26,22,.3); transform:translateY(8px) scale(.98); transition:transform .18s; }.file-preview-panel.open .file-preview-card { transform:none; }
.file-preview-card header { min-height:67px; padding:13px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); }.file-preview-card header small { display:block; margin-bottom:4px; color:#939d9a; font-size:6.5px; font-weight:850; letter-spacing:.8px; }.file-preview-card header b { display:block; font-size:12px; }
.file-preview-content { min-height:300px; padding:16px; display:grid; place-items:center; background:#eef1ec; }.file-preview-content img { width:100%; max-height:390px; object-fit:contain; border-radius:12px; box-shadow:0 6px 22px rgba(25,44,39,.13); }.document-preview-symbol { width:100%; min-height:230px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; border:1px solid #dfe4de; border-radius:15px; background:#fff; text-align:center; }.document-preview-symbol > svg { width:42px; height:42px; color:var(--green); }.document-preview-symbol b { display:block; max-width:240px; font-size:11px; overflow-wrap:anywhere; }.document-preview-symbol small { display:block; margin-top:4px; color:var(--muted); font-size:7px; }
.file-preview-card > p { margin:0; padding:11px 14px; display:flex; align-items:center; gap:7px; color:#687672; background:#f7f8f5; font-size:7.5px; line-height:1.4; }.file-preview-card > p svg { width:13px; flex:none; color:var(--green); }
.file-preview-card header { flex:none; }.file-preview-card header > span { min-width:0; }.file-preview-card header b { overflow-wrap:anywhere; font-size:13px; }.file-preview-card header button { flex:none; }
.file-preview-content { min-height:150px; overflow:auto; overscroll-behavior:contain; padding:10px; }
.file-preview-content img { max-height:calc(var(--app-height, 100dvh) - 220px); }
.pdf-preview { width:100%; height:calc(var(--app-height, 100dvh) - 240px); min-height:240px; border:0; border-radius:8px; background:#fff; }
.preview-hint { margin:10px 3px 2px; color:var(--muted); font-size:11px; line-height:1.5; text-align:center; }
.text-file-preview { width:100%; margin:0; padding:12px; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink); background:#fff; border-radius:8px; font-size:13px; line-height:1.6; }
.document-preview-symbol { min-height:180px; padding:20px; }.document-preview-symbol > p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.file-preview-actions { padding:10px 12px; display:flex; flex:none; gap:8px; }.file-preview-actions:empty { display:none; }.file-preview-actions a { min-height:42px; flex:1; padding:8px; text-decoration:none; font-size:11px; }
.upload-file-actions { display:grid; gap:5px; }.replace-file-button { width:max-content; min-height:32px; margin-left:auto; padding:6px 10px; position:relative; display:flex; align-items:center; gap:5px; color:var(--green); border:1px solid #c9dbd2; border-radius:9px; background:#f6faf7; font-size:10px; cursor:pointer; }
.replace-file-button input { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }.replace-file-button:focus-within { outline:2px solid var(--green); outline-offset:2px; }
.chat-message-files > button { max-width:100%; min-height:32px; padding:7px 9px; display:inline-flex; align-items:center; gap:5px; border:1px solid #ccd8d1; border-radius:9px; color:#355e50; background:rgba(255,255,255,.8); font-size:11px; line-height:1.4; overflow-wrap:anywhere; text-align:left; }
.settings-section-intro { margin:0 0 16px; color:var(--muted); font-size:12px; line-height:1.6; }
.card-fields-list { display:grid; gap:9px; }.card-field-row { padding:13px; display:flex; gap:11px; border:1px solid var(--line); border-radius:15px; background:#f8faf6; }.card-field-row > span { width:25px; height:25px; flex:none; display:grid; place-items:center; border-radius:8px; color:var(--green); background:#e4eee6; font-size:11px; font-weight:800; }.card-field-row h3 { margin:0 0 5px; font-size:13px; }.card-field-row p { margin:0 0 8px; color:var(--muted); font-size:11px; line-height:1.5; }.card-field-row small,.card-field-row em { display:block; margin-top:4px; font-size:10px; line-height:1.4; }.card-field-row em { color:var(--green); font-style:normal; }
.settings-log-search { margin-bottom:13px; padding:10px 12px; display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:12px; background:#f2f6ef; }.settings-log-search svg { width:18px; flex:none; color:var(--muted); }.settings-log-search input { width:100%; min-width:0; border:0; outline:0; color:var(--ink); background:none; font-size:16px; }
.settings-log-list { display:grid; gap:10px; }.settings-log-group { border:1px solid var(--line); border-radius:14px; overflow:hidden; }.settings-log-group summary { padding:14px; display:flex; align-items:center; justify-content:space-between; gap:9px; background:#f7faf4; list-style:none; cursor:pointer; }.settings-log-group summary::-webkit-details-marker { display:none; }.settings-log-group summary b { display:block; font-size:13px; line-height:1.45; }.settings-log-group summary small { display:block; margin-top:5px; color:var(--muted); font-size:10px; }.settings-log-group summary > svg { flex:none; color:var(--muted); }.settings-log-group[open] summary > svg { transform:rotate(180deg); }.settings-log-group .history-list { margin:0; padding:14px; }.settings-log-group .history-row b { font-size:11px; }.settings-log-group .history-row p { font-size:10px; }.settings-log-group .history-row time { font-size:9px; }.settings-log-open { width:100%; padding:11px 14px; display:flex; align-items:center; justify-content:center; gap:6px; border:0; border-top:1px solid var(--line); color:var(--green); background:#fff; font-size:12px; }.settings-log-empty { padding:35px 12px; color:var(--muted); text-align:center; font-size:12px; line-height:1.6; }
.toast { min-width:160px;height:42px;padding:0 15px;position:absolute;z-index:100;left:50%;bottom:84px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:13px;color:#fff;background:var(--ink);font-size:8.5px;font-weight:800;box-shadow:0 10px 25px rgba(23,48,44,.24);opacity:0;transform:translate(-50%,14px);pointer-events:none;transition:.25s; }.toast.show { opacity:1;transform:translate(-50%,0); }.toast svg { width:15px;color:#b9d66a; }

@media (min-width:521px) { .app-shell { border-left:1px solid rgba(255,255,255,.75);border-right:1px solid rgba(255,255,255,.75); } }
@media (max-width:370px) { .space-button strong { font-size:12px; }.workflow-tabs,.board-topline { padding-inline:14px; }.board-title-row,.card-toolbar,.page-heading { padding-inline:14px; }.board-summary,.permission-note,.request-list,.route-progress,.route-map,.section-heading,.activity-list,.role-legend,.team-access-note,.member-list,.invite-button,.settings-group,.settings-lock { margin-left:14px;margin-right:14px; }.request-list { padding-left:0;padding-right:0; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important; } }
/* Native shells use the real system status bar instead of the prototype bar. */
.native-app .status-bar {
  display: none;
}

.native-app .desktop-stage {
  min-height: 100%;
}

.native-app .app-shell {
  --header-height:63px;
}

.server-gate { position:absolute;z-index:100;inset:0;padding:24px;display:grid;place-items:center;background:radial-gradient(circle at 20% 15%,rgba(169,194,90,.22),transparent 34%),rgba(242,243,238,.98);backdrop-filter:blur(16px);transition:.25s; }
.server-gate[hidden] { display:none; }
.server-gate-card { width:min(100%,380px);padding:28px 24px;border:1px solid rgba(255,255,255,.8);border-radius:25px;background:#fff;box-shadow:0 24px 70px rgba(23,48,44,.16);text-align:center; }
.server-gate-logo { width:58px;height:58px;margin:0 auto 16px;display:grid;place-items:center;border-radius:18px;color:#f4d27a;background:var(--ink);box-shadow:0 12px 24px rgba(23,48,44,.2); }
.server-gate-logo svg { width:26px;height:26px; }
.server-gate h1 { margin:4px 0 8px;font-size:24px; }.server-gate-card > p:not(.eyebrow) { margin:0 0 18px;color:var(--muted);font-size:13px;line-height:1.55; }
.server-gate form { text-align:left; }.server-gate .primary-button { width:100%;margin-top:12px;text-decoration:none; }
.server-setup-link { display:flex!important; }.server-setup-link[hidden] { display:none!important; }
.server-retry-button { width:100%;margin-top:10px;padding:12px;display:flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:12px;color:var(--green);background:var(--green-soft);font-weight:800; }
.server-retry-button[hidden] { display:none; }.server-retry-button svg { width:14px;height:14px; }
.server-gate-note { margin-top:16px;display:flex;align-items:flex-start;justify-content:center;gap:6px;color:#81908d;font-size:10px;line-height:1.4; }.server-gate-note svg { width:12px;height:12px;flex:none; }
.chat-message-files a { color:inherit;text-decoration:none; }.document-preview-symbol a { margin-top:7px;display:inline-flex;align-items:center;gap:5px;color:var(--green);font-size:11px;font-weight:800;text-decoration:none; }

@media (max-width: 520px) {
  .status-bar {
    display: none;
  }

  .app-shell {
    --header-height:63px;
  }
}

/* The document does not pan/zoom on focus. The sheet scrolls above the keyboard. */
.bottom-sheet { overscroll-behavior:contain; scroll-padding-block:20px; -webkit-overflow-scrolling:touch; }
.keyboard-open .bottom-sheet.active { bottom:var(--keyboard-inset, 0px); max-height:calc(var(--app-height, 100dvh) - var(--keyboard-inset, 0px) - 12px); padding-bottom:20px; transition:none; }
.keyboard-open .bottom-nav, .keyboard-open .fab { visibility:hidden; pointer-events:none; }
.keyboard-open .view { padding-bottom:18px; animation:none; }
.keyboard-open .server-gate { bottom:var(--keyboard-inset, 0px); overflow-y:auto; place-items:start center; padding:12px; transition:none; }
.keyboard-open .toast { bottom:calc(var(--keyboard-inset, 0px) + 12px); }
.member-manager-row:disabled { opacity:.7; cursor:default; }
.direct-inbox-head { margin:4px 0 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.direct-eyebrow { color:var(--green); font-size:8px; font-weight:850; letter-spacing:1.25px; }
.direct-inbox-head h2 { margin:5px 0; font-size:23px; font-weight:800; letter-spacing:-.6px; }
.direct-inbox-head h2 small { padding:3px 7px; position:relative; top:-2px; border-radius:8px; color:var(--green); background:var(--green-soft); font-size:11px; letter-spacing:0; }
.direct-inbox-head p { margin:0; color:var(--muted); font-size:11px; }
.new-direct-button { width:49px; height:49px; display:grid; place-items:center; flex:none; border:0; border-radius:17px; color:#f6df9d; background:var(--ink); box-shadow:0 8px 18px #17302c20; transition:transform .18s; }
.new-direct-button:hover { background:var(--green); }.new-direct-button:active { transform:scale(.95); }
.direct-inbox-empty { min-height:285px; padding:30px 18px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:24px; background:linear-gradient(150deg,#fff,#f4f8f2); text-align:center; }
.direct-empty-icon { width:76px; height:76px; margin-bottom:18px; display:grid; place-items:center; border:1px solid #fff; border-radius:25px; color:var(--green); background:#e7efe1; box-shadow:0 7px 25px #4866440b; }
.direct-empty-icon svg { width:32px; height:32px; stroke-width:1.5; }
.direct-inbox-empty h3 { margin:0 0 8px; font-size:17px; letter-spacing:-.4px; }.direct-inbox-empty p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.direct-empty-action { margin-top:21px; padding:10px 14px; display:flex; align-items:center; gap:8px; border:1px solid #c9d9cc; border-radius:11px; color:var(--green); background:#fff; font-size:12px; font-weight:750; }
.direct-inbox-note { margin:16px 7px; display:flex; align-items:center; justify-content:center; gap:6px; color:#8a9892; font-size:10px; line-height:1.5; text-align:center; }.direct-inbox-note svg { flex:none; }
.direct-chat-list .direct-chat-row { min-height:86px; padding:13px; grid-template-columns:45px minmax(0,1fr) auto; gap:11px; border-radius:16px; }
.direct-chat-list .member-avatar { width:45px; height:45px; border-radius:15px; font-size:13px; }
.direct-chat-list .direct-chat-row b { font-size:13px; }.direct-chat-list .direct-chat-row small { font-size:11px; }.direct-chat-list .direct-chat-row i { font-size:9px; }.direct-chat-list .direct-chat-row > span:last-child { max-width:80px; white-space:normal; text-align:right; font-size:9px; }
.direct-contacts-sheet { padding-bottom:24px; }.direct-contacts-sheet .sheet-head h2 { font-size:24px; letter-spacing:-.6px; }
.direct-contact-search { height:48px; padding:0 13px; display:flex; align-items:center; gap:9px; border:1px solid #dce4db; border-radius:15px; background:#f1f5ee; }
.direct-contact-search svg { width:18px; flex:none; color:#82938a; }.direct-contact-search input { width:100%; min-width:0; padding:0; border:0; outline:0; background:none; color:var(--ink); font-size:16px; }
.direct-contacts-intro { margin:12px 3px 18px; color:var(--muted); font-size:11px; line-height:1.55; }
.direct-contact-groups { display:grid; gap:10px; }.direct-contact-group { overflow:hidden; border:1px solid var(--line); border-radius:17px; background:#fff; }
.direct-contact-group > summary { min-height:74px; padding:13px; display:grid; grid-template-columns:42px minmax(0,1fr) 18px; align-items:center; gap:11px; cursor:pointer; list-style:none; }.direct-contact-group > summary::-webkit-details-marker { display:none; }.direct-contact-group > summary .space-choice-icon { width:42px; height:42px; border-radius:13px; }
.direct-contact-group > summary b { display:block; font-size:14px; }.direct-contact-group > summary small { display:block; margin-top:5px; color:var(--muted); font-size:11px; }.direct-contact-group > summary > svg { width:17px; color:var(--muted); transition:transform .2s; }.direct-contact-group[open] > summary { background:#f7faf4; border-bottom:1px solid var(--line); }.direct-contact-group[open] > summary > svg { transform:rotate(180deg); }
.direct-contact { width:100%; min-height:70px; padding:12px 14px; display:grid; grid-template-columns:38px minmax(0,1fr) 17px; align-items:center; gap:11px; border:0; border-bottom:1px solid #eef1eb; background:#fff; text-align:left; }.direct-contact:last-child { border-bottom:0; }.direct-contact:hover { background:#f4f8f1; }
.direct-contact .member-avatar { width:38px; height:38px; border-radius:13px; font-size:11px; }.direct-contact b { display:block; font-size:13px; }.direct-contact small { display:block; margin-top:4px; color:var(--muted); font-size:10px; }.direct-contact > svg { width:16px; color:#739482; }
.direct-contact-empty { min-height:190px; display:grid; place-content:center; justify-items:center; gap:10px; color:var(--muted); text-align:center; }.direct-contact-empty b { color:var(--ink); font-size:15px; }.direct-contact-empty p { margin:0; font-size:12px; }
.member-space-access { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#f7f9f5; }
.member-space-picker .member-space-choice { border:0; border-radius:0; }
.member-space-picker .member-space-role { min-height:46px; padding:8px 10px; display:grid; grid-template-columns:minmax(0, 1fr) minmax(125px, 48%); gap:8px; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; font-size:9px; }
.member-space-role select { width:100%; min-width:0; min-height:36px; padding:5px 7px; color:var(--ink); border:1px solid #ccd8d1; border-radius:8px; background:white; font-size:12px; }
.member-space-role select:disabled { color:var(--muted); background:#ecefe9; }
.member-space-picker input:focus-visible + .privacy-check { outline:2px solid var(--green); outline-offset:2px; }
.field input[readonly] { background:#edf1eb; color:var(--muted); }
@media (max-width:520px), (pointer:coarse) {
  /* 16px avoids automatic iOS input zoom without disabling user pinch zoom. */
  .app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .app-shell textarea, .app-shell select { font-size:16px; }
  .app-shell textarea { line-height:1.45; }
}

/* v28.7 · dashboard-style home */
.view-board { background:#fbfcfa; }
.view-board .board-topline { padding:20px 18px 8px; }
.view-board .role-context { gap:10px; }
.view-board .role-context > span:first-child { width:38px;height:38px;border-radius:13px; }
.view-board .role-context svg { width:18px;height:18px; }
.view-board .role-context small { margin-bottom:3px;font-size:8px;letter-spacing:1px; }
.view-board .role-context strong { font-size:13px; }
.view-board .ghost-button { height:42px;padding:0 13px;gap:8px;border-radius:13px;background:#fff;font-size:11px;box-shadow:0 2px 9px rgba(24,48,43,.04); }
.view-board .ghost-button svg { width:16px;height:16px; }
.view-board .board-title-row { padding:18px 18px 16px;align-items:center; }
.view-board .board-title-row h1 { margin:0 0 7px;font-size:32px;letter-spacing:-1.1px; }
.view-board .board-description { color:#71807b;font-size:13px; }
.view-board #boardMenuButton { width:44px;height:44px;border:1px solid var(--line);border-radius:15px;background:#f7f9f6; }
.home-attention { width:calc(100% - 36px);min-height:78px;margin:0 18px 14px;padding:13px;display:grid;grid-template-columns:44px minmax(0,1fr) 18px;align-items:center;gap:12px;border:1px solid #f0c8c3;border-radius:18px;color:#452f2d;background:linear-gradient(100deg,#fff8f6,#fffafa);text-align:left; }
.home-attention-icon { width:44px;height:44px;display:grid;place-items:center;border-radius:14px;color:#d64639;background:#fdebea; }
.home-attention-icon svg { width:22px;height:22px; }
.home-attention b { display:block;margin-bottom:7px;color:#263532;font-size:14px; }
.home-attention small { display:block;color:#697672;font-size:9px;line-height:1.45; }
.home-attention small em { color:#d13e35;font-style:normal;font-weight:850; }
.home-attention small i { margin:0 6px;color:#7f8c88;font-style:normal; }
.home-attention > svg { width:18px;color:#6f7d78; }
.home-attention.calm { border-color:#cae1d7;background:linear-gradient(100deg,#f4fbf7,#fbfdfb); }
.home-attention.calm .home-attention-icon { color:var(--green);background:var(--green-soft); }
.home-attention.calm small em { color:var(--green); }
.view-board .board-summary.home-overview { margin:0 18px 23px;min-height:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border:0;background:transparent; }
.view-board .home-stat { min-width:0;min-height:112px;padding:13px 12px 10px;position:relative;display:block;border:1px solid #e4e8e2;border-radius:18px;color:var(--ink);background:#fff;box-shadow:0 5px 15px rgba(28,49,43,.07);text-align:left;transition:transform .16s,box-shadow .16s; }
.view-board .home-stat:active { transform:translateY(1px);box-shadow:0 2px 8px rgba(28,49,43,.08); }
.view-board .home-stat:focus-visible { outline:2px solid rgba(31,107,90,.55);outline-offset:2px; }
.view-board .home-stat > span { width:32px;height:32px;margin-bottom:9px;display:grid;place-items:center;border-radius:11px; }
.view-board .home-stat.requests > span:first-child { color:#218263;background:#e7f5ef; }
.view-board .home-stat.tasks > span:first-child { color:#2878af;background:#eaf3fb; }
.view-board .home-stat.rejected > span:first-child { color:#d94c42;background:#fdecea; }
.view-board .home-stat-label { width:auto;height:auto;margin:0;position:absolute;top:14px;left:50px;display:block;border-radius:0;background:none!important; }.view-board .home-stat-label strong,.view-board .home-stat-label small { display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }.view-board .home-stat-label strong { color:#172b28;font-size:10px;line-height:1.1; }.view-board .home-stat-label small { margin-top:3px;color:#53645f;font-size:8px;line-height:1; }
.view-board .home-stat.rejected .home-stat-label { top:13px;left:44px;right:0;width:auto;max-width:none;text-align:center; }.view-board .home-stat.rejected .home-stat-label strong { font-size:10px;line-height:1.1;letter-spacing:0; }
.view-board .home-stat b { display:block;margin:0 0 7px;font-size:27px;line-height:1;letter-spacing:-1px; }
.view-board .home-stat > svg { width:100%;height:22px;overflow:visible;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round; }
.view-board .home-stat.requests > svg { stroke:#31b98d; }
.view-board .home-stat.tasks > svg { stroke:#59a9df; }
.view-board .home-stat.rejected > svg { stroke:#f26f69; }
.home-section-heading { margin:0 18px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px; }
.home-section-heading h2 { margin:0;font-size:17px;letter-spacing:-.35px; }
.home-section-heading button { padding:5px 0;display:flex;align-items:center;gap:5px;border:0;color:#62716c;background:none;font-size:10px; }
.home-section-heading button svg { width:15px;height:15px; }
.view-board .permission-note { display:none !important; }
.view-board .card-toolbar { padding:0 18px 10px;gap:6px;flex-wrap:wrap; }
.view-board .segmented-filter { background:#eef1ed; }
.view-board .segmented-filter button { height:30px;padding:0 10px;font-size:8px; }
.view-board .request-list { margin:0 18px 24px;padding:0;overflow:hidden;border:1px solid #e2e6e0;border-radius:18px;background:#fff;box-shadow:0 4px 14px rgba(27,49,43,.055); }
.home-request-card { width:100%;min-height:76px;padding:11px 12px;display:grid;grid-template-columns:42px minmax(0,1fr) auto 15px;align-items:center;gap:10px;border:0;border-bottom:1px solid #e9ece7;background:#fff;text-align:left; }
.home-request-card:last-child { border-bottom:0; }
.home-request-card:active { background:#f5f8f4; }
.home-request-symbol { width:42px;height:42px;display:grid;place-items:center;border-radius:13px;color:var(--stage-color);background:var(--stage-soft); }
.home-request-symbol svg { width:20px;height:20px; }
.home-request-copy { min-width:0; }
.home-request-copy b { display:block;overflow-wrap:anywhere;color:#263532;font-size:11px;line-height:1.35; }
.home-request-copy small { display:block;margin-top:5px;overflow:hidden;color:#788681;font-size:8px;white-space:nowrap;text-overflow:ellipsis; }
.home-request-status { min-height:28px;padding:0 9px;display:inline-flex;align-items:center;gap:4px;border-radius:10px;color:#3275a4;background:#eaf3fb;font-size:7px;font-weight:800;white-space:nowrap; }
.home-request-status.warning,.home-request-status.rejected { color:#b34f46;background:var(--red-soft); }
.home-request-status.done { color:#26735e;background:var(--green-soft); }
.home-request-status svg { width:10px;height:10px; }
.home-request-card > svg { width:15px;height:15px;color:#71807b; }
.home-request-card.task-pulse,.my-task-card.task-pulse,.my-task-card-main.task-pulse { position:relative;z-index:1;background:#fff3c9 !important;box-shadow:inset 0 0 0 2px #e6ad42,0 5px 16px rgba(181,125,24,.18);animation:task-card-pulse .55s ease-in-out infinite alternate; }
@keyframes task-card-pulse { from { background:#fff8e5; } to { background:#ffe9a3; } }
@media (prefers-reduced-motion:reduce) { .home-request-card.task-pulse,.my-task-card.task-pulse,.my-task-card-main.task-pulse { animation:none; } }
@media (max-width:370px) {
  .view-board .board-topline,.view-board .board-title-row { padding-inline:14px; }
  .home-attention { width:calc(100% - 28px);margin-inline:14px; }
  .view-board .board-summary.home-overview,.view-board .request-list { margin-inline:14px; }
  .home-section-heading { margin-inline:14px; }
  .view-board .card-toolbar { padding-inline:14px; }
  .view-board .home-stat { padding-inline:9px; }
  .view-board .home-stat-label { left:44px;max-width:calc(100% - 49px); }
  .view-board .home-stat-label strong { font-size:9px; }
  .view-board .home-stat-label small { font-size:7.5px; }
  .view-board .home-stat.rejected .home-stat-label { left:41px; }
  .view-board .home-stat.rejected .home-stat-label strong { font-size:9px; }
  .home-request-card { grid-template-columns:38px minmax(0,1fr) auto 13px;gap:7px;padding-inline:9px; }
  .home-request-symbol { width:38px;height:38px; }
  .home-request-status { padding-inline:6px;font-size:6.5px; }
}

/* v28.31 · per-board card notifications */
.notification-board-move .notification-icon { color:var(--notification-color);background:var(--notification-soft); }
.card-notifications-note { margin:-4px 0 12px;padding:10px 11px;display:flex;align-items:flex-start;gap:8px;border-radius:12px;color:#526a63;background:var(--green-soft);font-size:8px;line-height:1.45; }
.card-notifications-note > svg { width:15px;height:15px;flex:none;color:var(--green); }
.card-notification-board > summary { grid-template-columns:36px minmax(0,1fr) auto 16px; }
.card-notification-faces { min-width:18px;display:flex;align-items:center;justify-content:flex-end; }
.card-notification-avatar,.card-notification-more { width:25px;height:25px;margin-left:-7px;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;color:#fff;background:var(--avatar,#537d70);font-size:6.5px;font-weight:850;box-shadow:0 1px 4px rgba(23,48,43,.14); }
.card-notification-avatar:first-child { margin-left:0; }
.card-notification-more { color:var(--green);background:#e5f1e9; }
.card-notification-no-faces { padding-right:4px;color:#a2aaa7;font-size:12px; }
.card-notification-recipient-list { padding:7px 9px 9px;display:grid;gap:6px;border-top:1px solid var(--line);background:#f7f9f5; }
.card-notification-recipient { min-height:52px;padding:7px 9px;position:relative;display:grid;grid-template-columns:25px 36px minmax(0,1fr);align-items:center;gap:9px;border:1px solid #dfe5df;border-radius:12px;background:#fff;cursor:pointer;transition:border-color .16s,background .16s; }
.card-notification-recipient > input { width:1px;height:1px;position:absolute;opacity:0; }
.card-notification-check { width:25px;height:25px;display:grid;place-items:center;border:1px solid #cbd5ce;border-radius:8px;color:transparent;background:#f4f7f3; }
.card-notification-check svg { width:11px;height:11px; }
.card-notification-recipient .member-avatar { width:36px;height:36px;border-radius:11px;font-size:8px; }
.card-notification-recipient b { display:block;overflow:hidden;font-size:9px;white-space:nowrap;text-overflow:ellipsis; }
.card-notification-recipient small { display:block;margin-top:3px;overflow:hidden;color:var(--muted);font-size:7px;white-space:nowrap;text-overflow:ellipsis; }
.card-notification-recipient:has(input:checked) { border-color:#98bcae;background:#eef7f1; }
.card-notification-recipient input:checked + .card-notification-check { border-color:var(--green);color:#fff;background:var(--green); }
.card-notification-recipient input:focus-visible + .card-notification-check { outline:2px solid rgba(31,107,90,.45);outline-offset:2px; }
.card-notification-empty { padding:18px;color:var(--muted);font-size:8px;text-align:center; }
.card-owners-note { color:#4b6578;background:#edf4f9; }
.card-owners-note > svg { color:#3e799e; }
.card-owner-board[open] { border-color:#9eb9ca; }
.card-owner-board[open] summary { background:#f8fbfd; }
@media (max-width:370px) {
  .card-notification-board > summary { grid-template-columns:34px minmax(0,1fr) auto 14px;gap:7px; }
  .card-notification-avatar,.card-notification-more { width:22px;height:22px;font-size:6px; }
  .card-notification-faces > :nth-child(n+4) { display:none; }
}