:root {
  --blue: #1769df;
  --blue-dark: #105bcc;
  --purple: #b752e8;
  --ink: #1d2940;
  --muted: #7d8aa2;
  --line: #e7ebf2;
  --paper: #fff;
  --stage: #f4f7fb;
  --shadow: 0 8px 22px rgba(32, 51, 82, .1), 0 2px 5px rgba(32, 51, 82, .05);
  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; height: 100vh; overflow: hidden; background: var(--stage); }
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.auth-screen { display: grid; place-items: center; width: 100%; min-height: 100vh; padding: 24px; overflow: auto; background: radial-gradient(ellipse at 82% 12%, #dce9ff 0, transparent 34%), radial-gradient(ellipse at 14% 90%, #f3e2ff 0, transparent 32%), #f5f7fb; }
.auth-card { width: min(100%, 430px); padding: 37px 38px 28px; border: 1px solid #e8edf4; border-radius: 20px; background: rgba(255,255,255,.96); box-shadow: 0 22px 70px rgba(36,55,86,.11); }
.auth-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 37px; color: #29364c; font: 800 19px Manrope, sans-serif; letter-spacing: -.65px; }
.auth-brand .brand-mark { background: #b450e4; }.auth-brand .brand-mark span { background: white; }
.auth-kicker { color: #8e65c9; font-size: 9px; font-weight: 800; letter-spacing: 1.5px; }
.auth-card h1 { margin: 8px 0 7px; color: #243149; font: 800 25px/1.25 Manrope, sans-serif; letter-spacing: -.65px; }
.auth-copy { margin: 0 0 24px; color: #7e8ba1; font-size: 12px; line-height: 1.65; }
.auth-form { display: flex; flex-direction: column; }
.auth-form .field-label { margin: 14px 0 7px; font-size: 11px; }
.auth-input { height: 42px; font-size: 12px; }
.auth-submit { width: 100%; height: 43px; margin-top: 22px; color: white; background: #1769df; font-size: 12px; }
.auth-submit:hover { background: #105bcc; }.auth-submit:disabled { cursor: wait; opacity: .62; transform: none; }
.google-auth-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 43px; padding: 0 14px; border: 1px solid #dfe5ed; border-radius: 8px; color: #35435a; background: #fff; font-size: 12px; font-weight: 600; transition: border-color .15s, background .15s, box-shadow .15s; }
.google-auth-button:hover { border-color: #b9c3d1; background: #fafbfc; box-shadow: 0 2px 8px rgba(35,52,77,.06); }
.google-auth-button:disabled { cursor: wait; opacity: .62; }
.google-auth-button svg { width: 18px; height: 18px; flex: none; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 1px; color: #9aa5b5; font-size: 10px; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: #e9edf3; }
.auth-links { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; }
.auth-link { padding: 4px 0; border: 0; color: #66768f; background: transparent; font-size: 10px; }
.auth-link:hover { color: #1769df; text-decoration: underline; }
.auth-status { min-height: 17px; margin: 13px 0 0; color: #697890; font-size: 11px; line-height: 1.5; }
.auth-status.error { color: #c94f5b; }.auth-status.success { color: #34846d; }
.auth-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 20px; padding-top: 17px; border-top: 1px solid #edf0f5; color: #96a1b2; font-size: 9px; }
.auth-secure span { color: #59a48b; font-size: 14px; }
.app-shell { display: grid; grid-template-columns: 298px minmax(0, 1fr); width: 100%; height: 100vh; transition: grid-template-columns .2s ease; }
.inbox-panel { position: relative; z-index: 3; display: flex; flex-direction: column; min-height: 0; padding: 20px 15px 14px; color: #fff; background: linear-gradient(155deg, #bd5aed 0%, #aa43db 100%); overflow: hidden; }
.inbox-panel::before { content: ''; position: absolute; right: -110px; top: 150px; width: 230px; height: 470px; border: 1px solid rgba(255,255,255,.1); border-radius: 48%; transform: rotate(24deg); pointer-events: none; }
.inbox-panel::after { content: ''; position: absolute; right: -157px; top: 183px; width: 225px; height: 440px; border: 1px solid rgba(255,255,255,.09); border-radius: 48%; transform: rotate(24deg); pointer-events: none; }
.brand-row, .inbox-intro, .inbox-list-heading, .inbox-list, .sidebar-bottom { position: relative; z-index: 1; }
.brand-row { height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 3px; }
.brand-mark { width: 25px; height: 25px; background: #fff; border-radius: 8px; display: flex; gap: 2px; align-items: end; justify-content: center; padding: 5px 5px; box-shadow: 0 3px 9px #6a2a9a3a; }
.brand-mark span { display: block; width: 4px; border-radius: 2px; background: #ad4add; }
.brand-mark span:nth-child(1) { height: 8px; }.brand-mark span:nth-child(2) { height: 13px; }.brand-mark span:nth-child(3) { height: 10px; }
.brand-name { font-family: Manrope, sans-serif; font-weight: 800; letter-spacing: -.65px; font-size: 19px; }
.panel-collapse { margin-left: auto; color: #fff !important; opacity: .8; font-size: 25px !important; line-height: 1; }
.icon-button { border: 0; background: transparent; color: inherit; padding: 5px; border-radius: 6px; }
.icon-button:hover { background: rgba(255,255,255,.15); }
.inbox-intro { margin-top: 31px; }
.inbox-title-row { display: flex; align-items: center; justify-content: space-between; margin: 0 3px 12px; }
.inbox-title { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; letter-spacing: .1px; }
.inbox-glyph { display: grid; place-items: center; width: 21px; height: 21px; font-size: 15px; border: 1.6px solid rgba(255,255,255,.87); border-radius: 5px; line-height: 1; }
.inbox-count { font-size: 11px; font-weight: 700; min-width: 23px; text-align: center; padding: 3px 7px; border-radius: 20px; background: rgba(92,25,137,.22); }
.quick-add { padding: 11px 12px 8px; border-radius: 11px; color: var(--ink); background: #fff; box-shadow: 0 7px 18px rgba(73,28,103,.16); }
.quick-add input { display: block; width: 100%; border: 0; outline: 0; color: var(--ink); font-size: 13px; }
.quick-add input::placeholder { color: #8a96aa; }
.quick-add-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; color: #94a0b1; font-size: 10px; }
.quick-add-foot kbd, .topbar kbd, .board-footer kbd { font-family: inherit; font-size: 10px; background: #f0f2f7; color: #70809a; border: 1px solid #e8ebf1; border-radius: 4px; padding: 1px 4px; }
.quick-add-foot button { border: 0; background: #f2e7fa; color: #a240d2; border-radius: 6px; width: 27px; height: 24px; font-size: 20px; line-height: 1; }
.quick-add-foot button:hover { background: #edd8f8; }
.inbox-list-heading { display: flex; justify-content: space-between; align-items: center; margin: 23px 4px 9px; color: rgba(255,255,255,.72); font-size: 9px; letter-spacing: 1.15px; font-weight: 700; }
.text-button { border: 0; background: transparent; color: rgba(255,255,255,.76); font-size: 10px; padding: 2px 4px; }
.text-button:hover { color: white; }
.inbox-list { min-height: 0; overflow-y: auto; padding: 0 1px 12px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; }
.inbox-item { position: relative; padding: 12px 12px 10px; margin-bottom: 8px; border-radius: 10px; color: var(--ink); background: #fff; box-shadow: 0 3px 9px rgba(81,27,116,.1); cursor: grab; transition: transform .16s, box-shadow .16s; }
.inbox-item:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(64,21,96,.17); }
.inbox-item:active { cursor: grabbing; }
.inbox-item-title { font-size: 12px; line-height: 1.42; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inbox-item-meta { display: flex; align-items: center; gap: 7px; margin-top: 9px; color: #8b98ac; font-size: 10px; }
.inbox-item-meta .source-icon { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; color: #7854da; background: #f1ecff; font-size: 11px; }
.inbox-item-meta .move-hint { margin-left: auto; opacity: 0; font-size: 11px; transition: opacity .15s; }
.inbox-item:hover .move-hint { opacity: 1; }
.inbox-empty { border: 1px dashed rgba(255,255,255,.35); border-radius: 10px; color: rgba(255,255,255,.78); text-align: center; padding: 17px 10px; font-size: 11px; line-height: 1.5; }
.inbox-empty strong { display: block; font-size: 12px; color: white; margin-bottom: 3px; }
.sidebar-bottom { margin-top: auto; border-top: 1px solid rgba(255,255,255,.18); padding-top: 12px; }
.boards-label { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 7px; color: rgba(255,255,255,.72); font-size: 9px; letter-spacing: 1px; font-weight: 700; }
.tiny-add { color: rgba(255,255,255,.9); border: 0; background: transparent; font-size: 17px; line-height: 1; border-radius: 5px; padding: 0 4px; }
.tiny-add:hover { background: rgba(255,255,255,.15); }
.board-nav { max-height: 99px; overflow-y: auto; }
.board-nav-item { display: flex; gap: 9px; align-items: center; width: 100%; border: 0; background: transparent; color: rgba(255,255,255,.86); text-align: left; border-radius: 7px; padding: 8px 9px; font-size: 11px; transition: background .15s; }
.board-nav-item:hover, .board-nav-item.active { color: white; background: rgba(94,21,137,.26); }
.board-nav-item .nav-board-icon { font-size: 12px; opacity: .9; }
.board-nav-item .nav-board-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.user-row { display: flex; align-items: center; gap: 9px; margin-top: 13px; padding: 10px 3px 1px; border-top: 1px solid rgba(255,255,255,.15); }
.user-avatar { width: 29px; height: 29px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); background: #ffd7b7; color: #79452d; font-size: 11px; font-weight: 700; }
.user-info { display: flex; flex-direction: column; gap: 2px; font-size: 10px; }.user-info strong { font-size: 10px; }.user-info span { color: rgba(255,255,255,.65); font-size: 9px; }
.user-more { margin-left: auto; color: rgba(255,255,255,.78); letter-spacing: 0; font-size: 9px !important; }.user-more:hover { color: #fff; text-decoration: underline; }
.app-shell.inbox-collapsed { grid-template-columns: 58px minmax(0, 1fr); }
.inbox-collapsed .inbox-panel { padding-left: 15px; padding-right: 15px; }
.inbox-collapsed .brand-name, .inbox-collapsed .inbox-intro, .inbox-collapsed .inbox-list-heading, .inbox-collapsed .inbox-list, .inbox-collapsed .sidebar-bottom { display: none; }
.inbox-collapsed .brand-row { flex-direction: column; height: auto; gap: 20px; }
.inbox-collapsed .panel-collapse { display: block; margin-left: 0; }

.workspace { position: relative; min-width: 0; display: flex; flex-direction: column; background: var(--stage); }
.topbar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding: 0 31px; color: white; background: var(--blue); box-shadow: 0 4px 14px rgba(17,79,169,.13); }
.topbar::after { content: ''; position: absolute; width: 170px; height: 75px; left: 18%; bottom: -35px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; transform: rotate(28deg); pointer-events: none; }
.topbar-left, .topbar-actions { position: relative; z-index: 1; display: flex; align-items: center; min-width: 0; }
.breadcrumb { display: flex; gap: 10px; align-items: center; white-space: nowrap; font-size: 12px; color: rgba(255,255,255,.68); }
.breadcrumb span:last-child { max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: #fff; font-weight: 600; }
.crumb-sep { opacity: .55; }
.topbar-actions { gap: 14px; }
.search-box { display: flex; align-items: center; width: 210px; height: 34px; gap: 8px; padding: 0 9px; background: rgba(7,71,158,.33); border: 1px solid rgba(255,255,255,.18); border-radius: 7px; transition: background .2s, width .2s; }
.search-box:focus-within { width: 255px; background: rgba(7,71,158,.55); }
.search-icon { color: rgba(255,255,255,.78); font-size: 23px; line-height: 1; transform: rotate(-20deg); }
.search-box input { min-width: 0; width: 100%; color: #fff; outline: none; border: 0; background: transparent; font-size: 11px; }
.search-box input::placeholder { color: rgba(255,255,255,.68); }
.search-box kbd { color: rgba(255,255,255,.68); background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.1); white-space: nowrap; font-size: 9px; }
.top-icon { position: relative; border: 0; width: 29px; height: 29px; border-radius: 7px; color: white; background: transparent; font-size: 19px; line-height: 1; }
.top-icon:hover { background: rgba(255,255,255,.15); }
.filter-dot { display: none; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #ffc568; }
.filter-dot.visible { display: block; }
.avatar-stack { display: flex; margin-left: 1px; padding-left: 2px; }
.member-avatar { display: grid; place-items: center; width: 26px; height: 26px; margin-left: -4px; border: 2px solid var(--blue); border-radius: 50%; color: #31405b; font-size: 8px; font-weight: 700; }
.avatar-peach { background: #ffd7b7; }.avatar-lilac { background: #dbd0ff; }.avatar-mint { background: #c4f0dc; font-size: 7px; }
.primary-button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; border: 0; border-radius: 7px; background: #fff; color: #1764d4; font-weight: 700; transition: transform .15s, box-shadow .15s, background .15s; }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 5px 13px rgba(8,57,133,.2); }
.top-add { height: 34px; padding: 0 12px; font-size: 11px; box-shadow: 0 3px 9px rgba(10,58,126,.14); }
.top-add > span:first-child { font-size: 17px; line-height: 1; }
.top-add kbd { color: #8da0bd; background: #f2f5f9; border-color: #e8edf4; font-size: 9px; }
.mobile-inbox-button { display: none; }

.board-stage { position: relative; isolation: isolate; flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 28px 30px 13px; overflow: hidden; }
.board-stage::before { content: ''; position: absolute; z-index: -1; right: -150px; top: 100px; width: 390px; height: 600px; border: 1px solid #e6ebf3; border-radius: 48%; transform: rotate(24deg); pointer-events: none; }
.board-stage::after { content: ''; position: absolute; z-index: -1; right: -190px; top: 128px; width: 390px; height: 570px; border: 1px solid #e8edf4; border-radius: 48%; transform: rotate(24deg); pointer-events: none; }
.board-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 0 2px 22px; }
.board-title-line { display: flex; align-items: center; gap: 9px; }
.board-emoji { display: grid; place-items: center; width: 27px; height: 27px; background: #fff1d9; border-radius: 8px; font-size: 16px; color: #e29a36; }
.board-heading h1 { max-width: min(50vw, 450px); margin: 0; color: #202c43; font: 800 22px/1.2 Manrope, sans-serif; letter-spacing: -.7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rename-board { display: grid; place-items: center; width: 25px; height: 25px; border: 0; border-radius: 6px; background: transparent; color: #92a0b4; opacity: 0; transition: opacity .15s, background .15s; }
.board-title-line:hover .rename-board, .rename-board:focus { opacity: 1; }.rename-board:hover { background: #e9eef5; color: #52637d; }
.board-heading p { margin: 5px 0 0 36px; color: #8390a5; font-size: 11px; }
.board-heading-actions { display: flex; gap: 7px; align-items: center; }
.view-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 31px; min-width: 33px; padding: 0 9px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #76859b; font-size: 12px; }
.view-button:hover { background: #edf1f7; }.view-button.active { background: #e7effe; color: #1769df; font-size: 10px; font-weight: 700; }
.board-scroll { flex: 1; min-height: 0; overflow: auto hidden; display: flex; align-items: flex-start; gap: 12px; padding: 0 2px 15px; scrollbar-width: thin; scrollbar-color: #cbd4e2 transparent; }
.columns-track { display: flex; align-items: flex-start; gap: 12px; width: max-content; min-height: 100%; }
.column { position: relative; display: flex; flex-direction: column; flex: none; width: 268px; max-height: 100%; border: 1px solid rgba(226,231,239,.95); border-radius: 11px; background: rgba(255,255,255,.95); box-shadow: 0 4px 12px rgba(36,54,83,.045); transition: box-shadow .18s, background .18s; }
.column.drop-target { background: #f2f7ff; box-shadow: 0 0 0 2px #76a8fa, 0 9px 20px #466da322; }
.column-head { position: relative; display: flex; align-items: center; padding: 12px 12px 10px 15px; gap: 8px; }
.column-color-dot { width: 8px; height: 8px; flex: none; border-radius: 3px; background: var(--column-color, #6c9ef3); }
.column-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #29364f; font-size: 12px; font-weight: 700; }
.column-count { display: grid; place-items: center; min-width: 19px; height: 19px; margin-left: 1px; padding: 0 5px; border-radius: 6px; color: #7d8ba2; background: #f0f3f7; font-size: 9px; font-weight: 600; }
.column-spacer { flex: 1; }
.column-sort, .column-more { border: 0; background: transparent; color: #8995a7; border-radius: 5px; width: 22px; height: 22px; font-size: 13px; }.column-sort:hover, .column-more:hover { background: #f0f3f7; color: #465772; }
.column-more { font-size: 17px; letter-spacing: -1px; line-height: 1; }
.cards-list { min-height: 58px; overflow-y: auto; padding: 0 8px 6px; scrollbar-width: thin; scrollbar-color: #d6deea transparent; }
.empty-column { min-height: 48px; display: grid; place-items: center; padding: 9px 10px; border: 1px dashed #e2e7ef; border-radius: 7px; color: #a0aabc; text-align: center; font-size: 9px; line-height: 1.45; }
.task-card { position: relative; margin: 0 0 7px; padding: 11px 11px 10px; border: 1px solid #e9edf3; border-radius: 8px; background: #fff; box-shadow: 0 2px 5px rgba(34,49,74,.04); cursor: grab; transition: transform .15s, box-shadow .15s, border-color .15s; }
.task-card:hover { transform: translateY(-2px); border-color: #dce4ef; box-shadow: 0 7px 15px rgba(36,54,83,.11); }
.task-card:active { cursor: grabbing; }.task-card.dragging { opacity: .38; transform: rotate(1deg); }
.task-title { margin: 0; color: #344158; font-size: 11px; line-height: 1.45; font-weight: 600; }
.task-description { display: -webkit-box; margin: 5px 0 0; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #8995a8; font-size: 10px; line-height: 1.45; }
.task-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.task-label { display: inline-block; padding: 3px 6px; border-radius: 4px; background: #f0edff; color: #7657c8; font-size: 8px; line-height: 1; font-weight: 600; }
.task-label:nth-child(3n + 2) { background: #e8f7f4; color: #398879; }.task-label:nth-child(3n + 3) { background: #fff1e9; color: #bd7143; }
.task-meta { display: flex; align-items: center; gap: 7px; margin-top: 9px; color: #91a0b5; font-size: 9px; }
.task-due { display: inline-flex; align-items: center; gap: 4px; }.task-due::before { content: '◷'; font-size: 12px; }.task-due.overdue { color: #d85966; font-weight: 700; }.task-due.soon { color: #c38a2e; }
.priority { display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px; border-radius: 4px; font-size: 8px; font-weight: 700; }.priority::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }.priority.high { color: #cc5361; background: #fff0f0; }.priority.medium { color: #bf882d; background: #fff7e7; }.priority.low { color: #528f7d; background: #eaf7f1; }
.task-assignee { display: grid; place-items: center; width: 19px; height: 19px; margin-left: auto; border-radius: 50%; color: #52618a; background: #e8eaff; font-size: 8px; font-weight: 700; }
.task-more { display: none; position: absolute; right: 7px; top: 7px; width: 22px; height: 21px; border: 0; border-radius: 5px; background: #f5f7fb; color: #7e8ba0; line-height: 1; }.task-card:hover .task-more { display: block; }
.task-action-menu { position: absolute; z-index: 6; top: 27px; right: 7px; width: 135px; padding: 4px; border: 1px solid #e7ebf1; border-radius: 8px; background: white; box-shadow: 0 10px 24px rgba(26,43,71,.16); }
.task-action-menu button { display: flex; align-items: center; gap: 7px; width: 100%; padding: 7px; border: 0; border-radius: 5px; background: transparent; color: #526078; text-align: left; font-size: 9px; }.task-action-menu button:hover { background: #f2f5f9; }.task-action-menu button.danger { color: #d35662; }
.add-card-button { display: flex; align-items: center; gap: 7px; width: calc(100% - 16px); margin: 0 8px 8px; padding: 8px 8px; border: 0; border-radius: 6px; background: transparent; color: #76849a; text-align: left; font-size: 10px; font-weight: 600; transition: color .15s, background .15s; }.add-card-button span { font-size: 16px; line-height: 1; color: #7e91aa; }.add-card-button:hover { color: #1769df; background: #f3f7fd; }.add-card-button:hover span { color: #1769df; }
.column-menu { position: absolute; z-index: 5; top: 40px; right: 7px; width: 180px; padding: 5px; border: 1px solid #e7ebf1; border-radius: 9px; background: white; box-shadow: 0 12px 30px rgba(26,43,71,.17); }
.column-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 9px; border: 0; border-radius: 6px; background: transparent; color: #526078; text-align: left; font-size: 10px; }.column-menu button:hover { background: #f2f5f9; }.column-menu button.danger { color: #d35662; }
.menu-color-row { display: flex; gap: 6px; padding: 7px 8px; }.menu-color { width: 15px; height: 15px; border: 2px solid white; border-radius: 50%; box-shadow: 0 0 0 1px #dfe5ee; cursor: pointer; }.menu-color:hover { transform: scale(1.15); }
.add-column { flex: none; display: flex; align-items: center; gap: 8px; width: 214px; margin-top: 1px; padding: 12px 13px; border: 1px dashed #ccd5e3; border-radius: 10px; background: rgba(255,255,255,.48); color: #74829a; text-align: left; font-size: 11px; transition: border-color .15s, background .15s, color .15s; }.add-column:hover { background: white; color: #1769df; border-color: #8cb3ee; }.add-column-plus { font-size: 17px; line-height: 1; color: #7d8ca3; }
.board-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px 0; color: #98a4b6; font-size: 9px; }
.sync-indicator { display: inline-flex; align-items: center; gap: 6px; }.sync-indicator i { width: 6px; height: 6px; border-radius: 50%; background: #5ec6a0; box-shadow: 0 0 0 3px #5ec6a01c; }
.sync-indicator.saving i { background: #e8a94b; box-shadow: 0 0 0 3px #e8a94b26; }.sync-indicator.error i { background: #d95d69; box-shadow: 0 0 0 3px #d95d6926; }
.board-heading-actions { position: relative; }
.board-menu { position: absolute; z-index: 7; top: 38px; right: 0; width: 184px; padding: 5px; border: 1px solid #e7ebf1; border-radius: 9px; background: white; box-shadow: 0 12px 30px rgba(26,43,71,.17); }
.board-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 9px; border: 0; border-radius: 6px; background: transparent; color: #526078; text-align: left; font-size: 10px; }.board-menu button:hover { background: #f2f5f9; }.board-menu button.danger { color: #d35662; }

.filter-popover { display: none; position: fixed; z-index: 10; top: 60px; right: 238px; width: 205px; padding: 9px; border: 1px solid #e6ebf2; border-radius: 10px; background: white; box-shadow: 0 12px 35px rgba(21,42,79,.18); }.filter-popover.open { display: block; }.popover-backdrop { display: none; position: fixed; z-index: 9; inset: 0; }.popover-backdrop.open { display: block; }.popover-title { display: flex; align-items: center; justify-content: space-between; padding: 4px 5px 9px; border-bottom: 1px solid #edf0f5; color: #35435a; font-size: 11px; font-weight: 700; }.popover-title button { border: 0; background: transparent; color: #8e9aab; font-size: 18px; line-height: 1; }
.filter-option { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 3px; padding: 8px 7px; border: 0; border-radius: 6px; background: transparent; color: #5e6c82; font-size: 10px; text-align: left; }.filter-option:hover, .filter-option.selected { background: #f0f5ff; color: #1769df; }.filter-option span:last-child { font-size: 12px; }

.modal { width: min(480px, calc(100vw - 28px)); max-height: min(94vh, 790px); padding: 23px 25px 21px; border: 1px solid rgba(222,229,239,.85); border-radius: 16px; color: var(--ink); background: #fff; box-shadow: 0 24px 80px rgba(21,35,60,.25); overflow-y: auto; }
.modal::backdrop { background: rgba(18,31,52,.42); backdrop-filter: blur(3px); }
.modal-topline { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }.modal-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #1769df; background: #eaf2ff; font-size: 18px; }.column-icon { color: #8e4fcb; background: #f4eaff; }.board-icon { color: #d38a2e; background: #fff3df; }
.modal-close { width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: #929db0; font-size: 21px; line-height: 1; }.modal-close:hover { background: #f2f4f8; color: #5c6980; }
.modal h2 { margin: 0; font: 800 20px/1.3 Manrope, sans-serif; letter-spacing: -.45px; }.modal-description { margin: 4px 0 19px; color: #8491a5; font-size: 11px; }
.field-label { display: block; margin: 12px 0 6px; color: #536179; font-size: 10px; font-weight: 700; }.required-dot { color: #e46972; }.field-optional { margin-left: 4px; color: #a0aabc; font-weight: 400; }
.field-input { width: 100%; padding: 9px 10px; border: 1px solid #e2e7ef; border-radius: 7px; outline: 0; color: #344158; background: white; font-size: 11px; transition: border .15s, box-shadow .15s; }.field-input:focus { border-color: #76a4eb; box-shadow: 0 0 0 3px rgba(58,127,224,.1); }.field-input::placeholder { color: #a0aabc; }.title-input { height: 40px; font-size: 12px; }.field-input textarea, textarea.field-input { resize: vertical; min-height: 72px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.field-grid .field-input { height: 36px; }.field-grid input[type=date] { color: #65748b; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 23px; padding-top: 14px; border-top: 1px solid #edf0f5; }.secondary-button { height: 35px; padding: 0 13px; border: 1px solid #e0e6ee; border-radius: 7px; color: #68778e; background: white; font-size: 10px; font-weight: 600; }.secondary-button:hover { background: #f7f8fa; }.modal-actions .primary-button { height: 35px; padding: 0 14px; color: white; background: #1769df; font-size: 10px; }.modal-actions .primary-button:hover { background: #105bcc; }.modal-actions .primary-button span { opacity: .72; }
.compact-modal { width: min(420px, calc(100vw - 28px)); }.color-label { margin-top: 15px; }.color-picker { display: flex; gap: 10px; padding: 3px 2px; }.color-picker button { width: 20px; height: 20px; border: 2px solid white; border-radius: 50%; box-shadow: 0 0 0 1px #dce3ed; }.color-picker button.selected { box-shadow: 0 0 0 2px #4c85dd; }
.toast { position: fixed; z-index: 20; right: 24px; bottom: 21px; max-width: min(360px, calc(100vw - 40px)); padding: 11px 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; color: white; background: #26364e; box-shadow: 0 8px 25px rgba(20,33,53,.23); font-size: 11px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s, transform .2s; }.toast.show { opacity: 1; transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 1120px) {
  .app-shell { grid-template-columns: 265px minmax(0, 1fr); }.inbox-panel { padding-left: 13px; padding-right: 13px; }
  .topbar { padding: 0 21px; }.topbar-actions { gap: 9px; }.search-box { width: 175px; }.search-box:focus-within { width: 205px; }.avatar-stack { display: none; }
  .board-stage { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 820px) {
  body { overflow: auto; }.app-shell { height: 100vh; min-height: 600px; grid-template-columns: 1fr; grid-template-rows: minmax(180px, 28vh) minmax(0, 1fr); }
  .inbox-panel { padding: 13px 14px 9px; min-height: 0; }.brand-row { height: 27px; }.brand-name { font-size: 16px; }.panel-collapse { display: none; }
  .inbox-intro { margin-top: 11px; }.inbox-title-row { margin-bottom: 7px; }.inbox-title { font-size: 13px; }.quick-add { padding: 7px 9px 5px; }.quick-add-foot { margin-top: 4px; }
  .inbox-list-heading { margin: 10px 3px 6px; }.inbox-list { display: flex; gap: 7px; overflow-x: auto; overflow-y: hidden; padding-bottom: 5px; }.inbox-item { min-width: 190px; max-width: 220px; margin: 0; padding: 8px 9px; }.inbox-item-meta { margin-top: 5px; }.inbox-empty { min-width: 200px; padding: 10px; }
  .app-shell.inbox-collapsed { grid-template-columns: 1fr; grid-template-rows: 42px minmax(0, 1fr); }.inbox-collapsed .inbox-panel { padding: 7px 12px; }.inbox-collapsed .brand-row { flex-direction: row; gap: 9px; }.inbox-collapsed .brand-name { display: inline; }.inbox-collapsed .panel-collapse { display: none; }
  .app-shell.inbox-compact { grid-template-rows: 43px minmax(0, 1fr); }.inbox-compact .inbox-panel { flex-direction: row; align-items: center; padding: 6px 12px; gap: 10px; }.inbox-compact .brand-row { flex: none; }.inbox-compact .inbox-intro { display: none; }.inbox-compact .inbox-list-heading { display: none; }.inbox-compact .inbox-list { display: none; }
  .sidebar-bottom { display: none; }.workspace { min-height: 0; }.topbar { min-height: 54px; padding: 0 14px; }.breadcrumb { display: none; }.mobile-inbox-button { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 6px; background: rgba(7,71,158,.3); color: white; padding: 6px 9px; font-size: 12px; }.mobile-inbox-button span { min-width: 17px; padding: 2px 4px; border-radius: 9px; background: rgba(255,255,255,.17); font-size: 9px; }
  .topbar-actions { gap: 6px; }.search-box { width: 145px; height: 31px; }.search-box:focus-within { width: 175px; }.search-box kbd, .top-icon#shareButton { display: none; }.top-add { height: 31px; padding: 0 9px; }.top-add kbd { display: none; }
  .board-stage { padding: 17px 12px 9px; }.board-heading { padding-bottom: 13px; }.board-heading h1 { font-size: 18px; max-width: 50vw; }.board-heading p { margin-left: 35px; font-size: 10px; }.view-button.active span { display: none; }.board-footer { padding-top: 6px; }.board-footer > span:last-child { display: none; }
  .column { width: 252px; }.add-column { width: 194px; }.filter-popover { top: 45px; right: 95px; }.task-more { display: block; opacity: .75; }
}
@media (max-width: 460px) {
  .auth-screen { padding: 15px; }.auth-card { padding: 29px 23px 22px; border-radius: 15px; }.auth-brand { margin-bottom: 29px; }.auth-card h1 { font-size: 22px; }
  .app-shell { grid-template-rows: 188px minmax(0, 1fr); }.inbox-list-heading { font-size: 8px; }.inbox-item { min-width: 174px; }.topbar { padding: 0 9px; }.topbar-actions { gap: 3px; }.search-box { width: 115px; padding: 0 6px; }.search-box:focus-within { width: 135px; }.search-box input { font-size: 10px; }.search-icon { font-size: 18px; }.top-add { font-size: 10px; gap: 4px; }.top-add > span:first-child { font-size: 15px; }.top-add > span:nth-child(2) { max-width: 52px; overflow: hidden; white-space: nowrap; }
  .board-heading h1 { font-size: 16px; }.board-emoji { width: 24px; height: 24px; }.board-heading p { max-width: 235px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.board-heading-actions { gap: 1px; }.view-button { padding: 0 6px; }
  .field-grid { gap: 7px; }.modal { padding: 19px 18px 16px; }
}