:root{font-family:"Segoe UI",Arial,sans-serif;color:#263b34;background:#f7f8f5;font-synthesis:none;--green:#235c47;--deep:#173e35;--muted:#819087;--border:#e4e9e1;--surface:#fff;--mint:#c8eed0;--accent:#b7e7a3}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{color:inherit}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid #74b58e;outline-offset:3px}input:focus,select:focus,textarea:focus{outline:2px solid #6fa788;outline-offset:1px}a{color:inherit;text-decoration:none}button{border:0;background:none}h1,h2,h3,p{margin:0}button .icon{flex-shrink:0}.icon{width:20px;height:20px;vertical-align:middle;flex-shrink: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}.boot{padding:16vh 24px;text-align:center;line-height:2}.boot .btn{margin-top:20px}.muted{color:#738178}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:41px;padding:10px 17px;background:white;border:1px solid #dce3da;border-radius:9px;font-size:13px;font-weight:600;transition:background .15s,transform .15s;white-space:nowrap}.btn:hover{background:#f0f5ed}.btn.primary{background:var(--green);color:white;border-color:var(--green);box-shadow:0 2px 3px #183d3310}.btn.primary:hover{background:#1b4838}.btn .icon{width:17px;height:17px}.btn.wide{width:100%;padding:14px;justify-content:space-between}.btn.destructive{background:#b6423d;border-color:#b6423d;color:white}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;border-radius:8px}.icon-btn:hover{background:#e8eee5}.icon-btn.bordered{border:1px solid var(--border)}.text-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--green);padding:3px 0}.text-link:hover{text-decoration:underline}.text-link .icon{width:16px;height:16px}.text-link.subtle{font-size:12px;color:#6d7f72}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.7px;color:#6d8273}.eyebrow.light{color:#b7d4bd}.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:650;letter-spacing:-.7px;white-space:nowrap}.brand-dot{font-size:10px;align-self:flex-start;padding-top:5px;margin-left:-5px}.logo-mark{display:grid;width:33px;height:33px;border-radius:9px;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:4px;padding:8px;background:#bee8b1;flex-shrink:0}.logo-mark i{display:block;background:#254f3b;border-radius:1px}.logo-mark i:first-child{grid-column:1/3}.avatar{width:31px;height:31px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:10px;font-weight:650;background:#dce9dc;color:#426147;line-height:1}.avatar.color-0{background:#dbe7fe;color:#1e40af}.avatar.color-1{background:#ecddc9;color:#94714b}.avatar.color-2{background:#d6e4ee;color:#4e7589}.avatar.color-3{background:#d2f4ef;color:#0f766e}.avatar.color-4{background:#d4e8d0;color:#567748}.avatar.color-5{background:#f0e5b7;color:#8b7435}.avatar-stack{display:inline-flex;align-items:center;padding-left:0}.avatar-stack .avatar{border:2px solid #fff;width:30px;height:30px;margin-left:-7px;font-size:9px}.avatar-stack .avatar:first-child{margin-left:0}.avatar.more{background:#edf1e8;color:#66735e}.tag{display:inline-flex;font-size:10px;font-weight:650;padding:5px 9px;border-radius:5px;letter-spacing:.15px}.tag.green{background:#eaf4e8;color:#4f7e4f}.tag.gray{background:#eff0ed;color:#7a8178}.count{display:inline-flex;align-items:center;justify-content:center;min-width:23px;height:22px;padding:2px 6px;background:#edf0e9;color:#798373;border-radius:6px;font-size:11px;font-weight:500}.stat-icon{height:42px;width:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center}.mint{background:#eaf3e5;color:#65835b}.lavender{background:#e6eefc;color:#3b6fd8}.peach{background:#fbefdf;color:#bb9668}.gray{background:#eeefeb;color:#8a9385}.empty{text-align:center;padding:48px 24px}.empty-icon{width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;background:#f0f4ec;border-radius:16px;color:#8a9f7a;margin-bottom:16px}.empty-icon .icon{width:25px;height:25px}.empty h3{font-size:16px;font-weight:600;margin-bottom:8px}.empty p{font-size:12px;line-height:1.7;color:#84907f;max-width:320px;margin:0 auto}.empty .btn{margin-top:22px}.form-error{font-size:12px;color:#b4473e;line-height:1.6;margin:10px 0}.form-error:empty{margin:0}.danger{color:#b1493f!important}.field-label{font-size:12px;font-weight:600;display:block;margin-bottom:9px}.field-hint{font-size:11px;color:#84917d;line-height:1.7;margin:10px 0}.optional{font-size:11px;font-weight:400;color:#8b9688;margin-left:5px}label{display:block;font-size:12px;font-weight:600}input:not([type=checkbox]):not([type=radio]),textarea,select{width:100%;border:1px solid #dfe5da;background:#fff;border-radius:8px;padding:11px 12px;color:#334331;font-size:13px;margin-top:7px}textarea{resize:vertical;line-height:1.6}input::placeholder,textarea::placeholder{color:#a0aa9c}input[type=checkbox],input[type=radio]{width:16px;height:16px;accent-color:var(--green);flex-shrink:0;cursor:pointer}form>label{margin-bottom:18px}
/* Welcome */
.auth-layout{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}.auth-story{background:#193f34;color:white;padding:43px 50px 28px;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:760px}.auth-story:before{content:"";position:absolute;width:720px;height:720px;border-radius:50%;border:1px solid #ffffff08;top:100px;left:-290px;pointer-events:none}.auth-story:after{content:"";position:absolute;width:600px;height:600px;border-radius:50%;border:1px solid #ffffff07;top:160px;left:-230px;pointer-events:none}.auth-story .brand{position:relative;z-index:1}.auth-pitch{margin:auto 0;position:relative;padding:48px 0 22px;z-index:1}.auth-pitch .eyebrow{font-size:9px;letter-spacing:1.5px}.auth-pitch h1{font-size:clamp(44px,4.6vw,70px);font-weight:470;line-height:1.08;letter-spacing:-2.5px;margin:22px 0}.auth-pitch h1 em{font-family:Georgia,serif;font-weight:400;color:#bfe5a7}.auth-pitch>p{font-size:13px;color:#adc6b7;line-height:1.8}.auth-art{height:220px;position:relative;max-width:450px;margin-top:30px}.art-card{position:absolute;background:#fafcf6;color:#2c4938;box-shadow:0 12px 35px #00000018;border-radius:12px}.art-chat{top:0;left:0;width:330px;display:flex;align-items:center;gap:13px;padding:18px 20px;transform:rotate(-4deg);z-index:2}.art-icon{background:#e3efda;border-radius:10px;width:39px;height:39px;display:grid;place-items:center;color:#64844f}.art-chat b{font-size:12px;display:block}.art-chat small{font-size:10px;color:#8e9a84;display:block;margin-top:5px}.art-dot{width:7px;height:7px;border-radius:50%;background:#8abd73;margin-left:auto}.art-task{top:70px;left:65px;width:300px;padding:18px;transform:rotate(4deg)}.art-task-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#8c9b83}.art-task .tag{font-size:8px}.art-task>b{font-size:13px}.art-progress{height:5px;border-radius:5px;background:#e9eee3;margin:16px 0}.art-progress i{display:block;background:#9ebc87;width:70%;height:100%;border-radius:5px}.art-task-foot{display:flex;align-items:center;justify-content:space-between;font-size:8px;color:#929d8a}.art-avatars{display:flex}.art-avatars i{width:24px;height:24px;border-radius:50%;background:#e3d6ba;border:2px solid white;display:grid;place-items:center;font-size:8px;font-style:normal;color:#8d755b}.art-avatars i+i{margin-left:-6px;background:#d6e4e2}.art-avatars i:last-child{background:#d6e4f5}.auth-bottom{display:flex;justify-content:space-between;gap:15px;color:#8eaf9b;font-size:9px;z-index:1}.auth-form-panel{display:flex;justify-content:center;flex-direction:column;align-items:center;position:relative;background:#fafbf7;padding:50px 36px}.auth-form-wrap{width:100%;max-width:350px;margin:auto}.auth-form-wrap h2{font-size:31px;font-weight:550;letter-spacing:-1px;margin:16px 0 11px}.auth-form-wrap>p{font-size:13px}.auth-tabs{display:flex;background:#edf0e8;border:1px solid #e5eadd;padding:4px;border-radius:9px;gap:4px;margin:30px 0 25px}.auth-tabs button{flex:1;padding:10px;border-radius:6px;font-size:12px;font-weight:550;color:#86917f}.auth-tabs button.active{background:white;color:#36533c;box-shadow:0 1px 5px #2b492412}.auth-form-wrap input{padding:13px;margin-top:9px}.auth-form-wrap form>label{margin-bottom:21px}.auth-note{font-size:11px!important;line-height:1.8;text-align:center;color:#95a08b;margin-top:24px}.auth-note .icon{width:13px;height:13px;margin-right:5px}.auth-footer{font-size:10px;color:#9ba68e;text-align:center;padding-top:50px}.auth-footer span{color:#6b805c;margin-left:6px}
/* Workspace frame */
.app-shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}.sidebar{background:#193c33;color:#e6eee6;padding:31px 19px 18px;position:fixed;inset:0 auto 0 0;width:232px;display:flex;flex-direction:column;z-index:5}.sidebar .brand{font-size:21px;padding-left:7px}.sidebar .logo-mark{width:29px;height:29px;padding:7px;gap:3px}.workspace-card{margin:34px 1px 30px;padding:12px 10px;background:#ffffff06;border:1px solid #ffffff16;border-radius:8px;display:flex;align-items:center;gap:9px}.workspace-icon{width:31px;height:32px;background:#ffffff13;border:1px solid #ffffff0b;border-radius:7px;display:grid;place-items:center;font-weight:550;font-size:15px}.workspace-card b{display:block;font-size:11px;font-weight:600}.workspace-card small{display:block;color:#90ad9b;font-size:9px;margin-top:4px}.workspace-indicator{width:5px;height:5px;background:#a8cd8e;border-radius:50%;margin-left:auto;margin-right:2px}.nav-caption{font-size:8px;font-weight:700;letter-spacing:1.5px;color:#86a08f;padding-left:12px;margin-bottom:12px}.sidebar nav{display:flex;flex-direction:column;gap:5px}.nav-item{padding:12px 13px;border-radius:7px;display:flex;align-items:center;gap:12px;color:#a9c1b1;width:100%;font-size:12px;font-weight:500;text-align:left}.nav-item>.icon{width:18px;height:18px}.nav-item:hover{background:#ffffff08}.nav-item.active{background:#bde3a5;color:#25482d}.nav-item .nav-arrow{margin-left:auto;width:13px;height:13px;opacity:0}.nav-item.active .nav-arrow{opacity:.8}.sidebar-note{border-top:1px solid #ffffff12;margin:35px 10px 15px;padding-top:25px}.sidebar-note>.icon{color:#8fa87a;width:25px;height:25px;margin-bottom:14px}.sidebar-note>b{display:block;font-size:12px;font-weight:450;color:#b1c6b7;line-height:1.7}.sidebar-note p{font-size:10px;color:#71917e;line-height:1.8;margin-top:9px}.sidebar-footer{margin-top:auto;padding-top:20px}.member-link{display:flex;align-items:center;gap:10px;color:#9db6a5;font-size:10px;width:100%;padding:10px 9px 18px}.member-link .icon{width:16px;height:16px}.current-user{display:flex;align-items:center;gap:9px;border-top:1px solid #ffffff13;padding:18px 5px 0}.current-user>.avatar{width:33px;height:33px}.current-user>div{min-width:0}.current-user b{font-size:11px;font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:116px}.current-user small{display:block;font-size:8px;color:#8eac98;margin-top:4px}.current-user small i{display:inline-block;width:4px;height:4px;background:#aacb91;border-radius:50%;margin-right:4px}.current-user .icon-btn{color:#91ac9b;margin-left:auto;width:24px}.current-user .icon-btn:hover{background:#ffffff10}.current-user .icon{width:16px;height:16px}.main-shell{grid-column:2;min-width:0}.topbar{height:77px;display:flex;align-items:center;justify-content:space-between;padding:0 38px;border-bottom:1px solid var(--border);background:#fafbf7}.topbar>div:first-child{display:flex;gap:14px;align-items:center;font-size:11px}.breadcrumb{color:#9ba58e}.breadcrumb-slash{color:#c2c9b9}.topbar b{font-weight:500;color:#52644c}.topbar-right{display:flex;align-items:center;gap:22px;font-size:10px}.connection{display:flex;align-items:center;gap:6px;color:#87967b;font-size:9px}.connection i{width:5px;height:5px;background:#8eae6e;border-radius:50%}.connection.offline i{background:#c78648}.connection.offline{color:#ad7b49}.top-date{border-left:1px solid var(--border);padding-left:22px;color:#7c8972}.top-avatar .avatar{width:30px;height:30px}.page{padding:35px 38px 26px;max-width:1640px;margin:auto}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}.page-heading h1{font-size:30px;font-weight:550;letter-spacing:-1.1px;margin:9px 0 10px;color:#263f2f}.page-heading p{font-size:12px;color:#849078;line-height:1.7}.page-heading .eyebrow{font-size:8px;letter-spacing:1.5px}.greeting-dot{color:#91ad69}.heading-actions{display:flex;gap:10px}.welcome-banner{border-radius:12px;background:#e8edde;min-height:237px;display:flex;align-items:center;justify-content:space-between;padding:28px 35px;position:relative;overflow:hidden;border:1px solid #e1e7d5}.banner-label{font-size:8px;letter-spacing:1.6px;color:#83966d;font-weight:650}.welcome-banner h2{font-family:Georgia,serif;font-size:32px;font-weight:400;color:#3e5538;line-height:1.18;letter-spacing:-.9px;margin:13px 0 10px}.welcome-banner p{font-size:11px;color:#8c997c;margin:0 0 14px}.welcome-banner .text-link{font-size:11px;color:#617c47}.banner-graphic{position:absolute;right:40px;width:280px;height:240px;top:0}.orbit{position:absolute;border:1px solid #d4ddc5;border-radius:50%}.orbit-one{width:205px;height:205px;top:18px;left:38px}.orbit-two{width:280px;height:280px;top:-20px;left:0}.graphic-center{position:absolute;left:111px;top:89px;transform:rotate(-11deg);filter:drop-shadow(0 8px 9px #536b2b16)}.graphic-center .logo-mark{width:66px;height:66px;border-radius:17px;padding:16px;gap:7px;background:#567047}.graphic-center .logo-mark i{background:#cce3ac}.floating-icon{position:absolute;width:49px;height:49px;background:#fafbf6;display:grid;place-items:center;border-radius:13px;color:#8da374;box-shadow:0 4px 10px #4c632510}.floating-icon .icon{width:23px;height:23px}.f-one{left:18px;top:51px;transform:rotate(-12deg)}.f-two{right:11px;top:69px;transform:rotate(12deg);background:#bdce9f;color:#5e783c}.f-three{left:148px;bottom:11px;transform:rotate(-8deg)}.graphic-spark{position:absolute;right:62px;top:12px;color:#92a775;font-size:33px;font-style:normal}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin:23px 0}.stat{text-align:left;border:1px solid var(--border);border-radius:10px;background:white;padding:19px;display:grid;grid-template-columns:46px 1fr;column-gap:14px;row-gap:13px}.stat:hover{border-color:#c7d4bc;box-shadow:0 3px 12px #294b2110}.stat>.stat-icon{align-self:center}.stat>div{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.stat>div>span{font-size:11px;color:#87917e}.stat strong{font-size:29px;font-weight:550;color:#40543b;line-height:1}.stat small{grid-column:1/3;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #edf0e8;padding-top:12px;font-size:9px;color:#94a087}.stat small .icon{width:13px;height:13px}.overview-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:20px}.panel{border:1px solid var(--border);background:#fff;border-radius:11px;overflow:hidden}.panel-title{padding:21px 22px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid #edf0e8}.panel-title h2{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}.panel-title h2 .count{height:19px;min-width:19px;font-size:9px}.panel-title>.icon{width:16px;height:16px;color:#8c9c7d}.task-row{display:flex;align-items:center;gap:12px;padding:17px 21px;width:100%;text-align:left;border-bottom:1px solid #edf0e8}.task-row:hover{background:#fafcf7}.task-row:last-child{border:0}.task-check{display:grid;place-items:center;border:1px solid #dce4d3;width:20px;height:20px;border-radius:6px;color:transparent;flex-shrink:0}.task-row:hover .task-check{color:#91aa77}.task-check .icon{width:14px;height:14px}.task-row>div{min-width:0}.task-row b{font-size:12px;font-weight:550;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.task-row small{font-size:10px;color:#8d9980;display:block;margin-top:6px}.task-row .priority{margin-left:auto;flex-shrink:0}.progress-panel{text-align:center}.progress-panel .panel-title{border:0}.progress-circle{width:126px;height:126px;border-radius:50%;background:conic-gradient(#9cb87c var(--progress),#edf2e7 0);padding:9px;margin:3px auto 18px;transform:rotate(-90deg)}.progress-circle>div{width:100%;height:100%;border-radius:50%;background:white;display:flex;flex-direction:column;justify-content:center;align-items:center;transform:rotate(90deg)}.progress-circle strong{font-size:30px;font-weight:550;line-height:1.2}.progress-circle strong span{font-size:17px;font-weight:400}.progress-circle small{font-size:9px;color:#9ba68e;margin-top:6px}.progress-panel>p{font-size:10px;color:#9ba68e}.progress-panel>p b{color:#6b7b5b;font-weight:500}.momentum-foot{display:flex;align-items:center;justify-content:center;gap:10px;margin:20px 18px 0;padding:14px 0;border-top:1px solid #edf0e8;font-size:9px;color:#91a080}.momentum-foot .avatar{width:25px;height:25px;font-size:8px}.conversation-preview{width:100%;display:flex;align-items:center;gap:12px;padding:17px 22px;border-bottom:1px solid #edf0e8;text-align:left}.conversation-preview:last-child{border:0}.conversation-preview:hover{background:#fafbf7}.conversation-preview>div{min-width:0}.conversation-preview b{font-size:12px;font-weight:550}.conversation-preview p{font-size:10px;color:#94a087;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:310px}.conversation-preview>.icon{margin-left:auto;width:15px;color:#9cab8a}.channel-avatar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;flex-shrink:0;background:#e6eefa;color:#3b6fd8;font-size:21px;font-weight:400}.channel-avatar.public{background:#eaf0df;color:#8ca66b}.channel-avatar .icon{width:17px;height:17px}.voice-panel{padding:24px;background:#f3f2e9}.voice-panel>.stat-icon{width:33px;height:33px;border-radius:9px;margin-bottom:13px}.voice-panel>.stat-icon .icon{width:19px;height:19px}.voice-panel h2{font-family:Georgia,serif;font-size:24px;font-weight:400;line-height:1.2;letter-spacing:-.5px}.voice-panel p{font-size:11px;color:#92967d;line-height:1.7;margin:12px 0 18px;max-width:230px}.voice-panel .btn{background:transparent;border-color:#d8dec8;font-size:11px;padding:8px 12px;min-height:34px}
/* Project board */
.board-page{max-width:none}.board-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:7px 0 25px}.search-field{display:flex;align-items:center;gap:8px;background:white;border:1px solid #e0e5d9;border-radius:8px;padding:0 11px;width:245px;flex-shrink:0}.search-field .icon{width:15px;height:15px;color:#a0ac91}.search-field input:not([type=checkbox]){border:0;margin:0;background:transparent;padding:11px 0;font-size:11px;outline-offset:3px}.board-filters{display:flex;align-items:center;gap:10px}.board-filters select{margin:0;width:auto;font-size:10px;min-height:37px;padding:8px 25px 8px 10px;color:#80906f}.toolbar-divider{height:23px;width:1px;background:#dce3d4;margin:0 7px}.board-columns{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:16px;overflow-x:auto;padding-bottom:10px;align-items:start;min-height:430px}.kanban-column{background:#edf0e8;border:1px solid #e7ecdf;border-radius:10px;padding:10px;min-height:402px;transition:background .2s}.kanban-column.drag-over{background:#e0ecd3;outline:2px dashed #8daa6d;outline-offset:-3px}.kanban-column>header{display:flex;align-items:center;justify-content:space-between;padding:0 3px 13px}.kanban-column h2{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600}.status-dot{width:7px;height:7px;border-radius:50%;background:#adb7a4}.status-dot.todo{background:#3b82f6}.status-dot.progress{background:#d6b16f}.status-dot.done{background:#8cb77c}.kanban-column .count{background:#e3e8db;font-size:9px;height:18px;min-width:18px;padding:2px 5px}.kanban-column>header>.icon-btn{width:22px;height:22px;color:#9aaa8a}.kanban-column>header .icon{width:15px;height:15px}.column-cards{display:flex;flex-direction:column;gap:11px}.task-card{display:block;width:100%;text-align:left;background:white;border:1px solid #dfe6d6;border-radius:8px;padding:15px 13px;box-shadow:0 2px 2px #3c542704;cursor:grab;transition:box-shadow .15s}.task-card:hover{box-shadow:0 4px 14px #3c542710;border-color:#bbcca6}.task-card.dragging{opacity:.4}.task-card:active{cursor:grabbing}.task-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;gap:6px}.priority{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:500;border-radius:4px;padding:4px 7px;text-transform:capitalize}.priority i{height:4px;width:4px;border-radius:50%;background:currentColor}.priority.high{background:#f9e8e2;color:#ba8070}.priority.medium{background:#f6f0dd;color:#b5a06a}.priority.low{background:#e8f0e4;color:#8ba176}.task-id{font-size:8px;color:#a5af9b}.task-card h3{font-size:12px;font-weight:550;line-height:1.6;overflow-wrap:anywhere}.task-description{font-size:10px;line-height:1.8;color:#98a18c;margin-top:7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.task-card-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #edf0e7;margin-top:15px;padding-top:11px;gap:8px;min-height:33px}.task-card .avatar{width:25px;height:25px;font-size:8px}.due{display:inline-flex;align-items:center;gap:4px;font-size:9px;color:#98a48a;white-space:nowrap}.due .icon{width:12px;height:12px}.due.overdue{color:#bf8171}.unassigned{font-size:9px;color:#acb49f}.subtask-progress{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-top:13px}.subtask-progress>span:first-child{font-size:9px;color:#94a080;white-space:nowrap}.subtask-progress .icon{width:12px;height:12px}.mini-progress{height:4px;width:48px;background:#eef2e7;border-radius:3px}.mini-progress>i{display:block;height:100%;background:#a6bf8a;border-radius:3px}.column-add{display:flex;justify-content:center;align-items:center;gap:5px;font-size:10px;color:#98a78a;width:100%;padding:15px 0 6px}.column-add .icon{width:14px;height:14px}.column-add:hover{color:#54733c}.column-empty{text-align:center;font-size:10px;line-height:1.8;color:#9cab8e;padding:60px 10px 80px;border:1px dashed #dce4d2;border-radius:8px}.column-empty span{font-size:9px;color:#aeb9a1}.board-hint{display:flex;align-items:center;justify-content:center;gap:7px;color:#9aa78b;font-size:10px;padding:20px 0;line-height:1.6;text-align:center}.board-hint .icon{width:14px;height:14px}
/* Conversations */
.chat-page{display:grid;grid-template-columns:277px minmax(0,1fr);height:calc(100dvh - 77px);min-height:500px}.chat-sidebar{border-right:1px solid var(--border);padding:30px 17px 20px;display:flex;flex-direction:column;background:#f9faf6;min-height:0}.chat-sidebar-title{display:flex;justify-content:space-between;align-items:center;padding:0 8px}.chat-sidebar-title h1{font-size:24px;font-weight:550;letter-spacing:-.9px}.chat-sidebar-title .icon-btn{width:28px;height:28px}.chat-sidebar-title .icon{width:15px;height:15px}.chat-sidebar-desc{font-size:10px;color:#98a48a;padding:11px 8px 6px}#chat-list{overflow-y:auto;flex:1;padding-bottom:20px}.chat-category{font-size:8px;color:#9dab8d;letter-spacing:1.2px;padding:26px 10px 12px;font-weight:650;display:flex;justify-content:space-between}.chat-category span{color:#b1bba4}.chat-list-item{width:100%;display:flex;align-items:center;gap:10px;padding:13px 10px;text-align:left;border-radius:8px;margin-bottom:4px}.chat-list-item:hover{background:#eff3e9}.chat-list-item.selected{background:#e7eddf}.chat-list-item>div{min-width:0}.chat-list-item b{font-size:11px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-list-item p{font-size:9px;color:#9ba78d;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-top:6px}.chat-list-empty{font-size:10px;color:#b1baa5;padding:0 10px;line-height:1.8}.new-conversation{font-size:11px;color:#738b5d;min-height:37px;background:transparent}.conversation{display:flex;flex-direction:column;min-width:0;background:#fff;min-height:0}.conversation-header{display:flex;align-items:center;gap:12px;padding:20px 28px;border-bottom:1px solid #e9eee1;min-height:82px}.conversation-header>div{min-width:0}.conversation-header h2{font-size:14px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.conversation-header p{font-size:10px;color:#94a183;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:430px}.conversation-badge{margin-left:auto;display:flex;align-items:center;gap:5px;color:#9ba88d;font-size:9px;flex-shrink:0}.conversation-badge .icon{width:12px;height:12px}.message-list{flex:1;overflow-y:auto;padding:18px 28px;scroll-behavior:auto}.message-list>.empty{padding-top:12vh}.day-divider{display:flex;align-items:center;gap:18px;margin:15px 0 28px;color:#a7b09c;font-size:9px;justify-content:center}.day-divider:before,.day-divider:after{content:"";height:1px;background:#eff2e9;flex:1}.message{display:flex;align-items:flex-start;gap:10px;margin:0 0 22px}.message>.avatar{width:29px;height:29px;font-size:9px;margin-top:1px}.message-content{max-width:80%;min-width:0}.message-meta{display:flex;align-items:center;gap:9px;margin-bottom:7px}.message-meta b{font-size:10px;font-weight:600}.message-meta time{font-size:8px;color:#adb5a4}.message-bubble{padding:11px 14px;border-radius:0 10px 10px;background:#f3f5ed;color:#6c7f5b;font-size:12px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere}.message.own{flex-direction:row-reverse}.message.own .message-meta{justify-content:flex-end}.message.own .message-bubble{border-radius:10px 0 10px 10px;background:#e8f0de;color:#526c40}.message-end{height:3px}.composer{margin:8px 25px 24px;border:1px solid #dce5d1;border-radius:10px;overflow:hidden;background:#fff}.composer:focus-within{border-color:#8ba76e;box-shadow:0 0 0 2px #8ba76e15}.composer textarea{border:0;padding:14px 16px;margin:0;min-height:65px;max-height:180px;resize:vertical;font-size:12px;border-radius:0}.composer textarea:focus{outline:0}.composer-bottom{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;gap:10px;border-top:1px solid #f2f4ec}.composer-bottom>span{font-size:9px;color:#acb59e}.composer .btn{min-height:32px;font-size:10px;padding:7px 12px}.composer .btn .icon{width:13px;height:13px}.load-older{display:block;margin:0 auto 20px;color:#758e5b;font-size:10px;border:1px solid #e0e8d7;border-radius:7px;padding:8px 13px}
/* Surveys */
.section-caption{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#71865e;margin:35px 0 18px}.section-caption>span:first-child{display:flex;gap:9px;align-items:center;font-weight:550}.section-caption>span:last-child{font-size:10px;color:#9ba78c}.survey-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.survey-card{background:white;border:1px solid var(--border);border-radius:11px;padding:22px;text-align:left;display:flex;flex-direction:column;min-width:0;transition:border-color .15s,box-shadow .15s}.survey-card:hover{border-color:#bacba4;box-shadow:0 3px 14px #384e2010}.survey-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.survey-card h2{font-size:16px;font-weight:550;letter-spacing:-.3px;line-height:1.5;overflow-wrap:anywhere}.survey-card>p{font-size:11px;color:#9aa58c;line-height:1.8;margin:10px 0 20px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.survey-card-meta{display:flex;align-items:center;gap:9px;font-size:10px;color:#93a180;margin-top:auto;margin-bottom:23px}.survey-card-meta i{width:3px;height:3px;background:#c7d1ba;border-radius:50%}.survey-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #eaf0e0;padding-top:16px}.survey-card-bottom>span{display:flex;align-items:center;gap:7px;min-width:0}.survey-card-bottom .avatar{width:23px;height:23px;font-size:8px}.survey-card-bottom small{font-size:9px;color:#98a689;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:85px}.survey-card-bottom b{font-size:9px;white-space:nowrap;color:#7b965f;font-weight:600}.survey-card-bottom .icon{width:12px;height:12px}.survey-note{display:flex;align-items:center;justify-content:center;gap:7px;color:#9aa78b;font-size:10px;line-height:1.7;text-align:center;margin-top:28px}.survey-note .icon{width:14px;height:14px}.survey-empty .empty{padding:80px 30px}.survey-empty .empty p{max-width:370px}
/* Dialogs */
dialog{padding:27px;border:1px solid #e0e7d6;border-radius:15px;background:#fff;color:#334a36;width:470px;max-width:calc(100vw - 30px);max-height:calc(100dvh - 55px);box-shadow:0 20px 90px #162b2630;overflow-y:auto}dialog::backdrop{background:#112c2466;backdrop-filter:blur(4px)}dialog.wide-modal{width:650px}.modal-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:24px}.modal-heading h2{font-size:21px;font-weight:550;letter-spacing:-.6px;line-height:1.35;overflow-wrap:anywhere}.modal-heading p{font-size:11px;color:#96a486;line-height:1.6;margin-top:7px}.modal-heading .icon-btn{margin-top:-4px;color:#93a282}.modal-heading .icon{width:18px;height:18px}.modal-footer{border-top:1px solid #e9eee1;padding-top:20px;margin-top:23px;display:flex;align-items:center;justify-content:space-between;gap:10px}.modal-footer>div{display:flex;align-items:center;gap:9px}.modal-footer .btn{font-size:11px;padding:9px 13px;min-height:36px}.modal-footer .btn .icon{width:15px;height:15px}.modal-footer>button:first-child{color:#b97969;background:transparent;border-color:transparent;padding-left:0;font-weight:500}.form-three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px;margin-bottom:23px}.form-three select,.form-three input{font-size:12px;height:39px}.member-picker{display:flex;flex-wrap:wrap;gap:8px;max-height:175px;overflow-y:auto;margin:0 0 22px}.member-option{display:flex;align-items:center;gap:7px;background:#f7f9f3;border:1px solid #e5ebdb;padding:7px 10px 7px 7px;border-radius:8px;font-size:11px;font-weight:450;cursor:pointer}.member-option:has(input:checked){background:#ebf2e1;border-color:#c4d6ac}.member-option .avatar{width:23px;height:23px;font-size:8px}.member-option input{width:13px;height:13px;margin:0}.member-option small{font-size:9px;color:#a0ac91}.member-picker>.muted{font-size:12px;line-height:1.7}.subtask-label{display:flex;justify-content:space-between;align-items:center;margin:18px 0 10px}.subtask-label .field-label{margin:0}.subtask-label .text-link{font-size:11px}.subtask-field{display:flex;align-items:center;gap:9px;background:#f7f9f3;border:1px solid #e3eada;border-radius:7px;padding:2px 6px;margin-bottom:7px}.subtask-field .subtask-title{border:0;background:transparent;margin:0;padding:9px 5px;font-size:12px}.subtask-field .subtask-done:checked+.subtask-title{text-decoration:line-through;color:#9eac8e}.subtask-field .icon-btn{width:25px;height:25px;color:#a0ad93}.subtask-field .icon{width:13px;height:13px}.question-field{padding:17px;border:1px solid #e3ead9;background:#fafbf7;border-radius:9px;margin:16px 0}.question-field-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}.question-field-title b{font-size:11px;font-weight:600;color:#879b73}.question-field-title .icon-btn{height:24px;width:24px;color:#a8b397}.question-field-title .icon{height:14px;width:14px}.question-field>label{margin-bottom:13px}.question-field>label:last-child{margin-bottom:0}.question-field textarea{font-size:12px}.question-field .question-title{margin:2px 0 0}.survey-description{font-size:13px;color:#889c74;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;margin:-4px 0 18px}.survey-detail-status{display:flex;align-items:center;gap:15px;margin-bottom:24px}.responded{font-size:10px;color:#839f68;display:flex;gap:5px;align-items:center}.responded .icon{width:13px;height:13px}.survey-question{border:0;padding:0;margin:0 0 26px;min-width:0}.survey-question legend{font-size:13px;font-weight:600;margin-bottom:14px;line-height:1.6;overflow-wrap:anywhere}.survey-question legend span{color:#a5b493;margin-right:5px}.vote-option{display:flex;align-items:center;gap:10px;border:1px solid #e2e9d8;padding:12px;border-radius:8px;font-size:12px;font-weight:400;cursor:pointer;margin-bottom:8px;color:#7f936b}.vote-option:hover{background:#f5f8ef}.vote-option:has(input:checked){border-color:#9dbf80;background:#eff5e6;color:#5e7c46}.vote-option input{width:14px;height:14px;margin:0}.vote-option span{overflow-wrap:anywhere;min-width:0}.result-option{margin:14px 0}.result-option>div{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:7px;font-size:12px;color:#8c9d7b}.result-option b{font-size:11px;font-weight:550;white-space:nowrap}.result-option b small{font-size:10px;color:#b0bba1;font-weight:400}.result-option .icon{width:12px;height:12px;color:#84a462}.result-option.my-answer{color:#56723e}.result-track{height:7px;background:#f1f4eb;border-radius:5px;display:block;overflow:hidden}.result-track i{display:block;height:100%;background:#b3c99b;border-radius:5px}.result-option.my-answer .result-track i{background:#8fad72}.confirm-copy{font-size:13px;line-height:1.8;color:#8c9d7b;overflow-wrap:anywhere}.people-list>div{display:flex;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid #edf1e6}.people-list b{font-size:12px;font-weight:550;overflow-wrap:anywhere;min-width:0}.people-list small{font-size:10px;color:#a0af8f;margin-left:auto}.people-list .btn{margin-left:auto;min-height:30px;padding:6px 10px;font-size:10px}.people-list .btn .icon{width:13px;height:13px}#toasts{position:fixed;bottom:25px;right:25px;z-index:100;display:flex;flex-direction:column;gap:8px;max-width:calc(100vw - 40px);pointer-events:none}.toast{background:#214b39;color:white;border:1px solid #ffffff15;box-shadow:0 6px 25px #14392422;border-radius:9px;padding:14px 20px;font-size:12px;line-height:1.6;animation:appear .18s ease-out}.toast.error{background:#995b4e}@keyframes appear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
/* Smaller screens */
@media(min-width:1600px){.page{padding-top:42px}.welcome-banner{min-height:265px}.welcome-banner h2{font-size:38px}.banner-graphic{right:110px;top:10px}.stats-grid{gap:24px}.stat{padding:24px}.overview-grid{gap:24px}.task-card h3{font-size:13px}.task-description{font-size:11px}.survey-card{padding:28px}}
@media(max-width:1200px){.app-shell{grid-template-columns:207px minmax(0,1fr)}.sidebar{width:207px;padding-left:14px;padding-right:14px}.topbar{padding:0 25px}.page{padding:28px 25px}.banner-graphic{right:15px;opacity:.85;transform:scale(.9)}.welcome-banner{padding:25px}.welcome-banner h2{font-size:29px}.stat{padding:15px;column-gap:10px}.stat>div{flex-direction:column;align-items:flex-start;gap:6px}.stat strong{font-size:24px}.stat small{font-size:8px}.survey-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.board-filters{gap:7px}.board-filters>.avatar-stack,.toolbar-divider{display:none}.board-columns{gap:12px}.chat-page{grid-template-columns:235px minmax(0,1fr)}.chat-sidebar{padding-left:11px;padding-right:11px}.conversation-badge{display:none}.conversation-header{padding:20px}.message-list{padding:15px 20px}.composer{margin:7px 17px 18px}.auth-story{padding-left:38px;padding-right:32px}.auth-bottom>span:last-child{display:none}.auth-pitch h1{font-size:58px}.art-chat{width:300px}.art-task{left:43px;width:275px}.overview-grid{grid-template-columns:1.4fr 1fr}.panel-title{padding:18px 16px}.panel-title h2{font-size:12px}.panel-title .text-link{font-size:10px}.conversation-preview{padding:16px}.conversation-preview p{max-width:210px}}
@media(max-width:960px){.app-shell{grid-template-columns:76px minmax(0,1fr)}.sidebar{width:76px;padding:25px 12px 18px;align-items:center}.sidebar>.brand{font-size:0;padding:0;gap:0}.sidebar .brand-dot{display:none}.sidebar .logo-mark{width:34px;height:34px;padding:8px;gap:4px}.workspace-card,.nav-caption,.sidebar-note,.nav-item>span,.nav-item .nav-arrow,.member-link>span,.current-user>div{display:none}.sidebar nav{margin-top:45px;width:100%;gap:10px}.nav-item{justify-content:center;padding:13px}.nav-item>.icon{width:20px;height:20px}.sidebar-footer{width:100%}.member-link{justify-content:center;padding:10px 0 20px}.current-user{flex-direction:column;gap:12px;padding:18px 0 0}.current-user .icon-btn{margin:0}.topbar{height:67px}.chat-page{height:calc(100dvh - 67px)}.page-heading h1{font-size:27px}.board-toolbar{gap:9px}.search-field{width:210px}.auth-story{padding:32px 28px}.auth-pitch h1{font-size:50px}.auth-pitch>p{font-size:11px}.auth-pitch .eyebrow{font-size:7px}.art-chat{width:270px;left:-4px;padding:15px}.art-chat b{font-size:10px}.art-chat small{font-size:9px}.art-task{left:20px;width:260px}.auth-form-panel{padding:36px 28px}.auth-form-wrap h2{font-size:27px}.auth-form-wrap>p{font-size:11px}.auth-story{min-height:720px}.auth-bottom{font-size:8px}.welcome-banner p{font-size:10px}}
@media(max-width:740px){.page{padding:25px 20px}.topbar{padding:0 20px}.top-date{display:none}.topbar-right{gap:14px}.page-heading{align-items:flex-start;gap:14px;margin-bottom:23px}.page-heading h1{font-size:25px;margin:8px 0}.page-heading p{font-size:11px;max-width:300px}.page-heading .eyebrow{font-size:7px}.heading-actions .btn{font-size:10px;min-height:35px;padding:8px 11px}.heading-actions .icon{width:13px;height:13px}.welcome-banner{min-height:215px;padding:23px}.welcome-banner h2{font-size:27px}.banner-graphic{transform:scale(.65);transform-origin:right center;right:-10px}.welcome-banner>div:first-child{z-index:1;max-width:65%}.welcome-banner p{max-width:200px;line-height:1.7}.banner-label{font-size:6px}.stats-grid{gap:10px;margin:18px 0}.stat{padding:13px;grid-template-columns:1fr;gap:10px}.stat .stat-icon{width:33px;height:33px;border-radius:9px}.stat .stat-icon .icon{width:17px;height:17px}.stat>div>span{font-size:10px}.stat>div{flex-direction:row;align-items:center}.stat strong{font-size:23px}.stat small{grid-column:1;line-height:1.5;font-size:8px}.stat small .icon{display:none}.overview-grid{grid-template-columns:1fr;gap:16px}.progress-panel{display:none}.voice-panel{display:none}.board-toolbar{flex-direction:column;align-items:stretch;gap:10px}.search-field{width:100%}.board-filters select{flex:1}.board-columns{grid-template-columns:repeat(4,240px)}.board-hint{font-size:9px}.chat-page{grid-template-columns:185px minmax(0,1fr)}.chat-sidebar{padding:23px 8px 15px}.chat-sidebar-title{padding:0 5px}.chat-sidebar-title h1{font-size:20px}.chat-sidebar-desc{font-size:9px;padding-left:5px}.chat-list-item{padding:10px 6px;gap:7px}.chat-list-item b{font-size:10px}.chat-list-item p{font-size:8px}.chat-list-item .channel-avatar,.chat-list-item .avatar{width:27px;height:27px;border-radius:8px}.chat-category{font-size:7px;padding-left:5px;letter-spacing:.7px}.new-conversation{font-size:9px;padding:9px 6px;gap:4px}.new-conversation .icon{width:12px;height:12px}.conversation-header{padding:17px 15px;gap:8px}.conversation-header h2{font-size:12px}.conversation-header p{font-size:8px;max-width:200px}.message-list{padding:10px 13px}.message>.avatar{display:none}.message-content{max-width:95%}.message-bubble{font-size:11px;padding:9px 11px}.composer{margin:6px 10px 12px}.composer textarea{font-size:11px;padding:11px}.composer-bottom>span{font-size:7px;max-width:120px}.composer .btn{padding:6px 8px;font-size:9px;gap:5px}.composer-bottom{padding:8px}.survey-grid{grid-template-columns:1fr}.survey-card{padding:23px}.auth-layout{grid-template-columns:1fr}.auth-story{display:none}.auth-form-panel{min-height:100dvh;padding:45px 30px}.auth-form-wrap{max-width:365px}.auth-form-wrap:before{content:"Teamspace®";display:block;font-size:23px;color:#32503c;font-weight:650;letter-spacing:-1px;margin-bottom:50px}.auth-form-wrap h2{font-size:31px}.auth-form-wrap>p{font-size:13px}.auth-footer{padding-top:40px}}
@media(max-width:520px){.app-shell{grid-template-columns:1fr;display:block;padding-bottom:63px}.sidebar{height:63px;width:100%;inset:auto 0 0;flex-direction:row;padding:7px 13px;justify-content:space-around;background:#193c33;box-shadow:0 -3px 20px #203d2110}.sidebar>.brand,.sidebar-footer{display:none}.sidebar nav{margin:0;flex-direction:row;justify-content:space-around;gap:8px}.nav-item{padding:11px;width:auto;flex:1}.nav-item>span{display:block;font-size:8px}.nav-item .nav-arrow{display:none}.nav-item{flex-direction:column;gap:4px;padding:6px 3px;border-radius:6px}.nav-item>.icon{width:17px;height:17px}.main-shell{width:100%}.topbar{height:55px;padding:0 17px}.topbar>div:first-child{font-size:10px;gap:9px}.connection{font-size:8px}.topbar-right{gap:9px}.top-avatar .avatar{width:26px;height:26px}.page{padding:23px 17px}.page-heading{gap:12px}.page-heading h1{font-size:25px}.page-heading p{font-size:10px;max-width:240px}.heading-actions .btn{font-size:9px;padding:8px 9px;gap:4px}.page-heading .eyebrow{font-size:6px;letter-spacing:1px}.welcome-banner{padding:20px;min-height:210px}.welcome-banner h2{font-size:25px}.banner-graphic{opacity:.6;right:-33px;transform:scale(.56)}.welcome-banner>div:first-child{max-width:75%}.welcome-banner p{font-size:9px;max-width:180px}.stats-grid{gap:8px}.stat{padding:11px;gap:10px}.stat strong{font-size:22px}.stat>div>span{font-size:9px}.stat>div{flex-direction:column;align-items:flex-start}.stat small{font-size:7px}.stat .stat-icon{width:29px;height:29px;border-radius:8px}.stat .stat-icon .icon{width:16px;height:16px}.chat-page{height:calc(100dvh - 118px);min-height:430px;grid-template-columns:116px minmax(0,1fr)}.chat-sidebar{padding:16px 5px 10px}.chat-sidebar-title{padding:0 3px;gap:3px}.chat-sidebar-title h1{font-size:15px}.chat-sidebar-title .icon-btn{height:22px;width:22px}.chat-sidebar-title .icon{width:13px;height:13px}.chat-sidebar-desc{display:none}.chat-list-item{gap:5px;padding:9px 4px}.chat-list-item .channel-avatar,.chat-list-item .avatar{display:none}.chat-list-item b{font-size:10px}.chat-list-item p{font-size:8px;max-width:94px}.chat-category{font-size:6px;padding:22px 4px 9px;letter-spacing:.4px}.chat-list-empty{font-size:8px;padding:0 4px}.new-conversation{font-size:8px;white-space:normal;min-height:33px;padding:5px 3px}.conversation-header{padding:13px 11px;min-height:65px}.conversation-header .channel-avatar,.conversation-header>.avatar{width:27px;height:27px}.conversation-header h2{font-size:11px}.conversation-header p{max-width:150px;font-size:7px}.message-list{padding:5px 11px}.message-bubble{font-size:10px}.message-meta b{font-size:9px}.message-meta time{font-size:7px}.composer-bottom>span{font-size:6px;max-width:100px}.composer .btn{font-size:8px}.composer textarea{min-height:60px}.message-list>.empty{padding:9vh 5px 15px}.message-list .empty h3{font-size:13px}.message-list .empty p{font-size:10px}.message-list .empty-icon{width:40px;height:40px}.message-content{max-width:100%}.form-three{grid-template-columns:1fr 1fr;gap:10px}.form-three label:last-child{grid-column:1/3}.modal-heading h2{font-size:19px}dialog{padding:20px;max-height:calc(100dvh - 35px)}.modal-heading p{font-size:10px}.modal-footer{flex-wrap:wrap}.modal-footer .btn{font-size:10px;padding:8px 10px}.modal-footer>div{gap:7px}.optional{font-size:9px}.question-field{padding:13px}.survey-note{font-size:9px}.survey-detail-status{gap:10px}.tag{font-size:9px}.responded{font-size:9px}.board-hint{font-size:8px}#toasts{bottom:77px;right:15px}.toast{font-size:11px;padding:12px 16px}.survey-question legend{font-size:12px}.vote-option{font-size:11px}.result-option>div{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Midnight blue theme. Shared tokens keep every workspace surface in sync. */
:root {
  color-scheme: dark;
  color: #e4edfc;
  background: #0b1220;
  --blue: #2563eb;
  --green: var(--blue);
  --deep: #0b1528;
  --muted: #a0b2cc;
  --border: #293a54;
  --surface: #142137;
  --mint: #93c5fd;
  --accent: #60a5fa;
  --text: #e4edfc;
  --soft: #a0b2cc;
  --raised: #1b2d48;
  scrollbar-color: #3b5274 #0b1220;
}
::selection { background: #315ca3; color: #fff; }
body, .main-shell { background: #0b1220; color: var(--text); }
.btn, .panel, .stat, .task-card, .survey-card, .search-field,
.composer, .conversation, dialog { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn:hover, .icon-btn:hover, .task-row:hover, .conversation-preview:hover,
.vote-option:hover { background: var(--raised); }
.btn.primary { background: var(--blue); border-color: #3b82f6; color: #fff; box-shadow: 0 3px 12px #03081535; }
.btn.primary:hover { background: #3476f5; }
.btn.destructive { background: #a92f42; border-color: #d35d70; color: #fff; }
.btn.destructive:hover { background: #bd3b50; }
.danger { color: #fda4af!important; }
button:focus-visible, a:focus-visible { outline-color: #60a5fa; }
input:focus, select:focus, textarea:focus { outline-color: #60a5fa; }
.text-link, .text-link.subtle, .greeting-dot { color: #93c5fd; }
.muted, .eyebrow, .optional, .field-hint, .empty p, .form-error:empty,
.page-heading p, .task-row small, .task-description, .task-id, .due,
.unassigned, .subtask-progress>span:first-child, .board-hint,
.survey-note, .survey-card>p, .survey-card-meta, .survey-card-bottom small,
.modal-heading p, .survey-description, .confirm-copy, .responded,
.people-list small, .member-option small, .subtask-field .subtask-done:checked+.subtask-title,
.section-caption>span:last-child { color: var(--soft); }
.form-error, .due.overdue { color: #fda4af; }
.eyebrow.light { color: #b8d7ff; }
.page-heading h1, .stat strong, .panel-title h2, .empty h3,
.modal-heading h2, .auth-form-wrap h2, .survey-card h2 { color: #edf4ff; }
.logo-mark { background: #60a5fa; }
.logo-mark i { background: #0b2248; }
.avatar { background: #244570; color: #c7e1ff; }
.avatar.color-0 { background: #1e40af; color: #dbeafe; }
.avatar.color-1 { background: #0e6b85; color: #cffafe; }
.avatar.color-2 { background: #21476b; color: #c5e9ff; }
.avatar.color-3 { background: #0f766e; color: #ccfbf1; }
.avatar.color-4 { background: #233d67; color: #c8ddff; }
.avatar.color-5 { background: #354258; color: #d8e7ff; }
.avatar-stack .avatar { border-color: var(--surface); }
.avatar.more, .count, .tag.gray, .gray { background: #25364e; color: #bdcce0; }
.tag.green, .mint, .empty-icon { background: #1c3456; color: #a5ccff; }
.lavender { background: #1e3268; color: #a9c4ff; }
.peach { background: #243b5e; color: #a8d4ff; }
input:not([type=checkbox]):not([type=radio]), textarea, select {
  background: #101c30; color: var(--text); border-color: #344965;
}
input::placeholder, textarea::placeholder { color: #8da2bf; }
input[type=checkbox], input[type=radio] { accent-color: #3b82f6; }

/* Sign-in and its illustration. */
.auth-story { background: radial-gradient(ellipse at 5% 5%, #1e4175 0, #10284b 43%, #0b182f 100%); }
.auth-story:before, .auth-story:after { border-color: #93c5fd12; }
.auth-pitch h1 em { color: #93c5fd; }
.auth-pitch>p, .auth-bottom { color: #afc4e1; }
.auth-form-panel { background: #0b1220; }
.auth-form-wrap:before { color: #bfdbfe; }
.auth-tabs { background: #101d32; border-color: #293c59; }
.auth-tabs button { color: #a1b6d2; }
.auth-tabs button.active { background: #23416c; color: #e4efff; box-shadow: 0 2px 8px #02081430; }
.auth-note, .auth-footer { color: #98acca; }
.auth-footer span { color: #a8cdff; }
.art-card { background: #172a46; color: #e2eeff; box-shadow: 0 14px 35px #02081740; border: 1px solid #314b70; }
.art-icon { background: #234674; color: #a4cfff; }
.art-chat small, .art-task-top, .art-task-foot { color: #adc0dc; }
.art-dot { background: #60a5fa; }
.art-progress { background: #2a3e5a; }
.art-progress i { background: #60a5fa; }
.art-avatars i { background: #355581; color: #d9eaff; border-color: #172a46; }
.art-avatars i+i { background: #2c4f80; }
.art-avatars i:last-child { background: #325f7f; }

/* Navigation and overview. */
.sidebar { background: #0b1528; color: #e3edff; border-right: 1px solid #22334d; }
.workspace-card { background: #13223a; border-color: #293c58; }
.workspace-icon { background: #254574; border-color: #345580; color: #c6e0ff; }
.workspace-card small, .nav-caption, .member-link, .current-user small,
.current-user .icon-btn, .sidebar-note p { color: #9cb1d0; }
.workspace-indicator, .current-user small i { background: #60a5fa; }
.nav-item { color: #a8bddb; }
.nav-item:hover { background: #172b48; }
.nav-item.active { background: #224b87; color: #eef6ff; box-shadow: inset 3px 0 #60a5fa; }
.sidebar-note, .current-user { border-color: #263954; }
.sidebar-note>.icon { color: #73adf5; }
.sidebar-note>b { color: #bfd0e7; }
.current-user .icon-btn:hover { background: #213955; }
.topbar { background: #0f1a2c; border-color: var(--border); }
.breadcrumb, .top-date, .connection { color: #9cafcb; }
.breadcrumb-slash { color: #7087a9; }
.topbar b { color: #d1e0f7; }
.connection i { background: #60a5fa; }
.connection.offline { color: #f2bf79; }
.connection.offline i { background: #f2bf79; }
.top-date { border-color: var(--border); }
.welcome-banner { background: linear-gradient(115deg, #142c4f, #182b47 60%, #1c365b); border-color: #2c486c; }
.banner-label { color: #9dbce4; }
.welcome-banner h2 { color: #e0edff; }
.welcome-banner p { color: #aec3df; }
.welcome-banner .text-link { color: #93c5fd; }
.orbit { border-color: #426b9c55; }
.graphic-center .logo-mark { background: #3b82f6; }
.graphic-center .logo-mark i { background: #dbeafe; }
.floating-icon { background: #274668; color: #a9d4ff; box-shadow: 0 4px 15px #020b1b30; }
.f-two { background: #2961a2; color: #e0f2ff; }
.graphic-spark { color: #7ab7ff; }
.stat:hover, .task-card:hover, .survey-card:hover { border-color: #4d7cad; box-shadow: 0 5px 18px #02071435; }
.stat>div>span, .stat small, .conversation-preview p,
.progress-panel>p, .progress-circle small, .momentum-foot { color: #a0b5d1; }
.stat small, .panel-title, .task-row, .momentum-foot, .conversation-preview { border-color: var(--border); }
.panel-title>.icon, .conversation-preview>.icon { color: #80b6f7; }
.task-check { border-color: #4b6283; }
.task-row:hover .task-check { color: #9bc6fd; }
.progress-circle { background: conic-gradient(#60a5fa var(--progress), #293b55 0); }
.progress-circle>div { background: var(--surface); }
.progress-panel>p b { color: #cadcf5; }
.channel-avatar { background: #1e3a6e; color: #bcd4ff; }
.channel-avatar.public { background: #23436b; color: #a5d0ff; }
.voice-panel { background: #172b47; }
.voice-panel p { color: #a4b9d5; }
.voice-panel .btn { color: #bfdbfe; border-color: #3b567b; }

/* Shared Kanban board. */
.search-field .icon, .board-filters select { color: #acbfd9; }
.search-field input:not([type=checkbox]) { background: transparent; }
.toolbar-divider { background: var(--border); }
.kanban-column { background: #101c30; border-color: #263953; }
.kanban-column.drag-over { background: #1b3558; outline-color: #60a5fa; }
.kanban-column .count { background: #263c5b; color: #c6d8f3; }
.kanban-column>header>.icon-btn { color: #9fb9dd; }
.status-dot { background: #91a4bf; }
.status-dot.todo { background: #3b82f6; }
.status-dot.progress { background: #63b3ff; }
.status-dot.done { background: #5bd1db; }
.priority.high { background: #492937; color: #ffb1b7; }
.priority.medium { background: #423925; color: #f3d48d; }
.priority.low { background: #203d60; color: #a1ceff; }
.task-card-bottom { border-color: var(--border); }
.mini-progress { background: #2a3d58; }
.mini-progress>i { background: #60a5fa; }
.column-add { color: #a4bad6; }
.column-add:hover { color: #bfdbfe; }
.column-empty { border-color: #324760; color: #acc0da; }
.column-empty span { color: #94a9c4; }

/* Conversations and composer. */
.chat-sidebar { background: #0e1a2c; border-color: var(--border); }
.chat-sidebar-desc, .chat-category, .chat-category span,
.chat-list-empty, .chat-list-item p { color: #9eb2ce; }
.chat-list-item:hover { background: #1a2d49; }
.chat-list-item.selected { background: #223d63; }
.new-conversation { color: #bfdbfe; }
.conversation-header { border-color: var(--border); }
.conversation-header p, .conversation-badge, .day-divider,
.message-meta time, .composer-bottom>span { color: #a2b6d2; }
.day-divider:before, .day-divider:after { background: var(--border); }
.message-bubble { background: #24354f; color: #e1ebfb; }
.message.own .message-bubble { background: #234b80; color: #eff6ff; }
.composer:focus-within { border-color: #60a5fa; box-shadow: 0 0 0 2px #3b82f622; }
.composer textarea { background: var(--surface); color: var(--text); }
.composer-bottom { border-color: var(--border); }
.load-older { color: #bfdbfe; border-color: #3b5477; }

/* Surveys, member pickers, and dialogs. */
.section-caption { color: #bfdbfe; }
.survey-card-meta i { background: #6882a3; }
.survey-card-bottom, .modal-footer, .people-list>div { border-color: var(--border); }
.survey-card-bottom b { color: #93c5fd; }
dialog { box-shadow: 0 25px 95px #000a; }
dialog::backdrop { background: #020817b3; }
.modal-heading .icon-btn, .question-field-title .icon-btn { color: #a5bad6; }
.modal-footer>button:first-child { color: #fda4af; }
.member-option, .subtask-field, .question-field { background: #101c30; border-color: #304562; }
.member-option:has(input:checked) { background: #23436c; border-color: #60a5fa; }
.subtask-field .subtask-title { background: transparent; }
.subtask-field .icon-btn { color: #9db4d2; }
.question-field-title b { color: #adccf4; }
.vote-option { color: #c6d5eb; border-color: #344b6c; }
.vote-option:has(input:checked) { background: #234674; border-color: #60a5fa; color: #e7f2ff; }
.result-option>div { color: #c3d4ed; }
.result-option b small { color: #9ab1d0; }
.result-option .icon, .result-option.my-answer { color: #93c5fd; }
.result-track { background: #293c59; }
.result-track i { background: #4b82c8; }
.result-option.my-answer .result-track i { background: #60a5fa; }
.toast { background: #1c3e6c; border-color: #3d6799; color: #edf5ff; box-shadow: 0 6px 25px #0005; }
.toast.error { background: #6d2b3e; border-color: #a45368; }

/* Managed accounts. */
.auth-form-wrap #auth-form { margin-top: 30px; }
.admin-summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.admin-summary>span { padding: 8px 13px; border: 1px solid var(--border); border-radius: 8px; color: var(--soft); background: var(--surface); font-size: 11px; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; text-align: left; }
.admin-table th { font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--soft); background: #102038; font-weight: 600; padding: 16px 20px; }
.admin-table td { padding: 16px 20px; border-top: 1px solid var(--border); font-size: 12px; }
.admin-table td:last-child { text-align: right; }
.admin-table .btn { font-size: 11px; min-height: 33px; padding: 7px 13px; }
.admin-person { display: flex; align-items: center; gap: 11px; }
.admin-person b { font-weight: 550; overflow-wrap: anywhere; }
.admin-person small { display: block; font-size: 9px; color: var(--soft); margin-top: 5px; }
.tag.admin-role { background: #234674; color: #b8d9ff; }
.account-status { color: #a2c7ef; display: flex; align-items: center; gap: 6px; font-size: 11px; }
.account-status i { width: 5px; height: 5px; background: #60a5fa; border-radius: 50%; }
.account-status.inactive { color: #a1acc0; }
.account-status.inactive i { background: #8892a7; }
.admin-date { color: var(--soft); white-space: nowrap; }
.admin-note { display: flex; align-items: flex-start; gap: 9px; color: var(--soft); font-size: 11px; line-height: 1.8; margin-top: 20px; max-width: 780px; }
.admin-note .icon { width: 16px; height: 16px; margin-top: 2px; }

/* One board: shared column headers, swimlanes as rows (Jira-style grouping). */
.board-columns.swimlane-board { display: block; min-height: 0; overflow: auto; max-height: calc(100dvh - 245px); padding-bottom: 6px; }
.board-head, .swimlane-grid { display: grid; grid-template-columns: repeat(4,minmax(230px,1fr)); gap: 10px; min-width: 960px; }
.board-head { position: sticky; top: 0; z-index: 2; padding-bottom: 10px; background: #0b1220; }
.board-head-cell { display: flex; align-items: center; gap: 8px; padding: 9px 8px 9px 13px; border: 1px solid #263953; border-radius: 9px; background: #101c30; font-size: 11px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: #c6d8f3; }
.board-head-cell .count { background: #263c5b; color: #c6d8f3; font-size: 9px; height: 18px; min-width: 18px; padding: 2px 5px; }
.board-head-cell .icon-btn { margin-left: auto; width: 26px; height: 26px; color: #9fb9dd; }
.board-head-cell .icon { width: 15px; height: 15px; }
.swimlane { min-width: 960px; margin-bottom: 8px; }
.swimlane-heading { display: flex; align-items: center; gap: 10px; padding: 4px 4px 6px; border-bottom: 1px solid #1f3049; margin-bottom: 8px; }
.lane-toggle { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-align: left; padding: 7px 9px; border-radius: 8px; }
.lane-toggle:hover { background: #15253e; }
.swimlane-heading>.icon-btn { width: 30px; height: 30px; color: #9fb9dd; }
.swimlane-heading>.icon-btn .icon { width: 16px; height: 16px; }
.lane-chevron { width: 15px; height: 15px; color: #8fbaf0; transform: rotate(90deg); transition: transform .15s; }
.collapsed .lane-chevron { transform: rotate(0deg); }
.swimlane-heading .avatar, .swimlane-heading .channel-avatar { height: 26px; width: 26px; font-size: 9px; }
.swimlane-heading .avatar-stack .avatar { width: 24px; height: 24px; font-size: 8px; }
.lane-name { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.lane-name small { font-size: 9px; color: var(--soft); font-weight: 400; margin-left: 6px; }
.lane-summary { margin-left: auto; font-size: 10px; color: var(--soft); white-space: nowrap; }
.swimlane-heading .task-id { font-size: 10px; color: var(--soft); white-space: nowrap; }
.lane-status { font-size: 9px; font-weight: 650; letter-spacing: .3px; text-transform: uppercase; padding: 4px 7px; border-radius: 5px; background: #25364e; color: #bdcce0; white-space: nowrap; }
.lane-status.todo { background: #1e3a8a; color: #bfdbfe; }
.lane-status.progress { background: #1d3a5f; color: #a5d0ff; }
.lane-status.done { background: #183f48; color: #9ce6ee; }
.swimlane-grid { padding-bottom: 4px; }
.swimlane-grid[hidden] { display: none; }
.swimlane-grid .kanban-column { min-height: 84px; padding: 8px; border-radius: 9px; background: #0f1b2e; border: 1px solid #22344e; display: flex; flex-direction: column; gap: 9px; }
.swimlane.none .swimlane-grid .kanban-column { min-height: 420px; }
.swimlane-grid .kanban-column.drag-over { background: #1b3558; }
.swimlane.collapsed .swimlane-heading { margin-bottom: 0; }
.subtask-card { padding: 11px 12px; }
.subtask-card .task-card-top { margin-bottom: 8px; }
.subtask-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 600; color: #93c5fd; }
.subtask-tag .icon { width: 12px; height: 12px; }
.group-by { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; color: var(--soft); white-space: nowrap; }
.group-by select { margin-top: 0; width: auto; }
.board-empty { padding: 30px 0; }

/* WhatsApp-style message reactions. */
.message-reactions { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 6px; position: relative; }
.message.own .message-reactions { justify-content: flex-end; }
.reaction-chip { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 39px; height: 28px; border-radius: 16px; padding: 3px 9px; border: 1px solid #3a4e6d; background: #1a2b43; color: #bbcee8; }
.reaction-chip>span { font-size: 16px; line-height: 1; }
.reaction-chip b { font-size: 10px; font-weight: 500; }
.reaction-chip:hover, .reaction-chip.selected { border-color: #69aaff; background: #204778; color: #e8f3ff; }
.reaction-add { display: inline-flex; align-items: center; justify-content: center; gap: 1px; height: 28px; min-width: 32px; padding: 0 6px; font-size: 20px; line-height: 1; border-radius: 15px; background: #1b2a40; border: 1px solid #334966; color: #a8bedb; }
.reaction-add>span { font-size: 12px; }
.reaction-add:hover, .reaction-add[aria-expanded=true] { background: #254471; color: #d4e8ff; border-color: #5584be; }
.reaction-picker { flex-basis: 100%; display: grid; grid-template-columns: repeat(6,34px); gap: 4px; width: max-content; max-width: 100%; padding: 7px; background: #101c30; border: 1px solid #405b7e; border-radius: 12px; box-shadow: 0 7px 20px #0004; }
.reaction-picker[hidden] { display: none; }
.message.own .reaction-picker { margin-left: auto; }
.emoji-choice { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; font-size: 21px; padding: 0; }
.emoji-choice:hover, .emoji-choice.selected { background: #2b4c7b; }
@media(max-width:740px) {
  .swimlane-heading { gap: 6px; }
  .lane-summary { font-size: 9px; }
  .board-head, .swimlane-grid { grid-template-columns: repeat(4,230px); }
  .admin-table td, .admin-table th { padding: 13px 12px; }
  .admin-table { min-width: 740px; }
  .admin-note { font-size: 10px; }
}
@media(max-width:520px) {
  .sidebar .nav-item { min-width: 0; }
  .sidebar .nav-item>span { font-size: 7px; white-space: nowrap; }
  .lane-name { font-size: 11px; }
  .lane-summary { font-size: 8px; }
  .swimlane-heading .avatar, .swimlane-heading .channel-avatar { width: 24px; height: 24px; }
  .lane-name small { display: block; margin: 3px 0 0; }
  .reaction-picker { grid-template-columns: repeat(4,30px); gap: 3px; }
  .emoji-choice { width: 30px; height: 30px; font-size: 19px; }
}

/* First-time passwords. */
.auth-form-wrap #first-password-form { margin-top: 30px; }
.back-to-sign-in { margin-top: 18px; }
.password-pending { display: block; font-size: 10px; color: #f2bf79; margin-top: 5px; }
.password-reset { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: #101c30; margin-top: 4px; }
.password-reset b { font-size: 12px; font-weight: 600; }
.password-reset .field-hint { margin: 4px 0 0; }
.one-time-password { display: flex; align-items: center; gap: 10px; }
.one-time-password input:not([type=checkbox]) { margin: 0; text-align: center; font-family: Consolas, "Cascadia Mono", monospace; font-size: 19px; letter-spacing: 2px; color: #edf4ff; }

/* Survey builder. */
dialog.wide-modal:has(#survey-form) { width: 760px; }
.question-field-title b { color: #60a5fa; font-size: 13px; }
.question-tools { display: flex; gap: 2px; }
.question-field .question-title { margin-top: 6px; }
.question-settings { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 12px; }
.question-settings>label:first-child { flex: 0 1 290px; margin: 0; }
.question-settings select { margin-top: 0; }
.check-row { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 400; cursor: pointer; margin: 0; }
.option-field { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.option-field input:not([type=checkbox]) { margin-top: 0; }
.option-field .icon-btn { color: #9db4d2; }
.option-field .icon-btn .icon { width: 15px; height: 15px; }
.option-marker { width: 14px; height: 14px; border: 1.5px solid #5f7898; border-radius: 50%; flex-shrink: 0; }
.question-field[data-type=multiple] .option-marker { border-radius: 3px; }
.option-list[hidden] { display: none; }
.add-option { margin: 2px 0 0 22px; }
.btn.add-question { width: 100%; margin: 0 0 18px; }
.survey-settings { display: grid; gap: 14px; padding: 18px; border-radius: 12px; background: #15243b; }
.survey-settings label { margin: 0; }
.survey-settings .field-hint { display: block; font-weight: 400; margin: 8px 0 0; }
.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media(max-width:620px) { .form-two { grid-template-columns: 1fr; gap: 14px; } .password-reset { flex-direction: column; align-items: stretch; } }

/* Survey answers and results. */
.survey-detail-status { flex-wrap: wrap; gap: 10px 15px; }
.survey-fact { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--soft); }
.survey-fact .icon { width: 13px; height: 13px; }
.survey-question legend .optional { margin-left: 8px; }
.survey-question textarea { font-size: 12px; }
.result-voters { display: block; margin-top: 6px; font-size: 10px; color: var(--soft); overflow-wrap: anywhere; }
.results-hidden { display: flex; align-items: center; gap: 7px; margin: -8px 0 20px; }
.results-hidden .icon { width: 14px; height: 14px; }
.own-answer { font-size: 12px; color: #c6d5eb; padding: 11px 12px; border: 1px solid #344b6c; border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.text-answers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.text-answers li { padding: 11px 12px; border: 1px solid #344b6c; border-radius: 8px; background: #101c30; }
.text-answers p { font-size: 12px; line-height: 1.7; color: #dce8fa; white-space: pre-wrap; overflow-wrap: anywhere; }
.text-answers small { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 10px; color: var(--soft); }
.text-answers .avatar { width: 20px; height: 20px; font-size: 7px; }

/* A survey posted into a chat. */
.survey-post { display: flex; align-items: center; gap: 12px; text-align: left; min-width: 240px; max-width: 100%; padding: 12px 14px; border: 1px solid #3b5a85; border-radius: 0 10px 10px; background: #172b47; color: var(--text); }
.message.own .survey-post { border-radius: 10px 0 10px 10px; margin-left: auto; }
.survey-post:hover { border-color: #60a5fa; background: #1d3658; }
.survey-post>span:last-child { display: grid; gap: 3px; min-width: 0; }
.survey-post small { font-size: 9px; font-weight: 700; letter-spacing: 1.2px; color: #93c5fd; }
.survey-post b { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.survey-post em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 11px; color: var(--soft); }
.survey-post em .icon { width: 13px; height: 13px; }

/* Chat lifecycle: close, group settings, edited and deleted messages. */
.conversation-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.conversation-actions .btn { font-size: 11px; min-height: 32px; padding: 6px 11px; }
.conversation-actions .icon { width: 14px; height: 14px; }
.closed-toggle { width: 100%; align-items: center; text-align: left; color: #9eb2ce; }
.closed-toggle .icon { width: 11px; height: 11px; margin-right: auto; margin-left: 6px; }
.chat-event { display: flex; justify-content: center; margin: 10px 0; }
.chat-event span { font-size: 10px; color: #a2b6d2; background: #15253e; border: 1px solid #263953; border-radius: 12px; padding: 5px 12px; overflow-wrap: anywhere; text-align: center; }
.message-bubble.deleted { font-style: italic; color: #93a6c2; background: transparent; border: 1px dashed #344b6c; }
.message.own .message-bubble.deleted { background: transparent; color: #93a6c2; }
.edited { font-size: 9px; color: #8da2bf; }
.message-tool { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 14px; color: #8da2bf; opacity: 0; transition: opacity .15s; }
.message:hover .message-tool, .message-tool:focus-visible { opacity: 1; }
.message-tool:hover { background: #254471; color: #d4e8ff; }
.message-tool .icon { width: 14px; height: 14px; }
.group-form { margin-bottom: 18px; }
.group-form .member-picker { margin-bottom: 12px; }
@media(hover:none) { .message-tool { opacity: 1; } }
@media(max-width:740px) { .conversation-actions .btn { padding: 6px 8px; } }

/* The emoji picker floats over the chat, so opening it never resizes the message. */
.message-content { display: flex; flex-direction: column; align-items: flex-start; }
.message.own .message-content { align-items: flex-end; }
.message-content>.message-bubble { max-width: 100%; }
.reaction-picker { position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; flex-basis: auto; max-width: none; }
.message.own .reaction-picker { left: auto; right: 0; margin-left: 0; }
.reaction-picker.above { top: auto; bottom: calc(100% + 6px); }

/* Ideas reuse the survey cards; long descriptions are cut off on the card. */
.idea-card>p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.idea-description { font-size: 13px; line-height: 1.8; color: #c6d5eb; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Subtask rows: title, status and owner on one line, description below. */
.subtask-field { display: block; padding: 6px 8px 8px; }
.subtask-main { display: flex; align-items: center; gap: 8px; }
.subtask-main .subtask-title { flex: 1; min-width: 0; }
.subtask-main select { width: auto; flex: 0 0 auto; max-width: 150px; margin-top: 0; padding: 7px 8px; font-size: 11px; }
.subtask-field .subtask-description { margin-top: 4px; padding: 7px 9px; font-size: 11px; min-height: 34px; resize: vertical; background: #0d1829; }
.subtask-owner { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; color: var(--soft); }
.subtask-owner .avatar { width: 22px; height: 22px; font-size: 7px; }
@media(max-width:620px) { .subtask-main { flex-wrap: wrap; } .subtask-main .subtask-title { flex-basis: 100%; } }

/* Theme toggle in the top bar. */
.theme-toggle { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid #2b3d58; border-radius: 15px; background: #13223a; color: #c6d8f3; font-size: 11px; font-weight: 600; }
.theme-toggle:hover { background: #1b3050; }
.theme-toggle .icon { width: 15px; height: 15px; }
@media(max-width:740px) { .theme-toggle span { display: none; } .theme-toggle { padding: 0 8px; } }

/* Light theme: generated from the dark theme above (lightness flipped, accents kept). */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="light"] { color: #161e2d; background: #eff2f7; --blue: #2563eb; --green: var(--blue); --deep: #ebeff7; --muted: #33455f; --border: #d4dbe5; --surface: #e4e9f1; --mint: #0357b4; --accent: #0653b2; --text: #161e2d; --soft: #33455f; --raised: #dbe2ec; scrollbar-color: #c4cdda #eff2f7; }
:root[data-theme="light"] ::selection { background: #315ca3; color: #fff; }
:root[data-theme="light"] body, :root[data-theme="light"] .main-shell { background: #eff2f7; color: var(--text); }
:root[data-theme="light"] .btn, :root[data-theme="light"] .panel, :root[data-theme="light"] .stat, :root[data-theme="light"] .task-card, :root[data-theme="light"] .survey-card, :root[data-theme="light"] .search-field, :root[data-theme="light"] .composer, :root[data-theme="light"] .conversation, :root[data-theme="light"] dialog { background: var(--surface); color: var(--text); border-color: var(--border); }
:root[data-theme="light"] .btn:hover, :root[data-theme="light"] .icon-btn:hover, :root[data-theme="light"] .task-row:hover, :root[data-theme="light"] .conversation-preview:hover, :root[data-theme="light"] .vote-option:hover { background: var(--raised); }
:root[data-theme="light"] .btn.primary { background: var(--blue); border-color: #3b82f6; color: #fff; box-shadow: 0 3px 12px #03081535; }
:root[data-theme="light"] .btn.primary:hover { background: #3476f5; }
:root[data-theme="light"] .btn.destructive { background: #a92f42; border-color: #d35d70; color: #fff; }
:root[data-theme="light"] .btn.destructive:hover { background: #bd3b50; }
:root[data-theme="light"] .danger { color: #b4041a!important; }
:root[data-theme="light"] button:focus-visible, :root[data-theme="light"] a:focus-visible { outline-color: #60a5fa; }
:root[data-theme="light"] input:focus, :root[data-theme="light"] select:focus, :root[data-theme="light"] textarea:focus { outline-color: #60a5fa; }
:root[data-theme="light"] .text-link, :root[data-theme="light"] .text-link.subtle, :root[data-theme="light"] .greeting-dot { color: #0357b4; }
:root[data-theme="light"] .muted, :root[data-theme="light"] .eyebrow, :root[data-theme="light"] .optional, :root[data-theme="light"] .field-hint, :root[data-theme="light"] .empty p, :root[data-theme="light"] .form-error:empty, :root[data-theme="light"] .page-heading p, :root[data-theme="light"] .task-row small, :root[data-theme="light"] .task-description, :root[data-theme="light"] .task-id, :root[data-theme="light"] .due, :root[data-theme="light"] .unassigned, :root[data-theme="light"] .subtask-progress>span:first-child, :root[data-theme="light"] .board-hint, :root[data-theme="light"] .survey-note, :root[data-theme="light"] .survey-card>p, :root[data-theme="light"] .survey-card-meta, :root[data-theme="light"] .survey-card-bottom small, :root[data-theme="light"] .modal-heading p, :root[data-theme="light"] .survey-description, :root[data-theme="light"] .confirm-copy, :root[data-theme="light"] .responded, :root[data-theme="light"] .people-list small, :root[data-theme="light"] .member-option small, :root[data-theme="light"] .subtask-field .subtask-done:checked+.subtask-title, :root[data-theme="light"] .section-caption>span:last-child { color: var(--soft); }
:root[data-theme="light"] .form-error, :root[data-theme="light"] .due.overdue { color: #b4041a; }
:root[data-theme="light"] .eyebrow.light { color: #0050b8; }
:root[data-theme="light"] .page-heading h1, :root[data-theme="light"] .stat strong, :root[data-theme="light"] .panel-title h2, :root[data-theme="light"] .empty h3, :root[data-theme="light"] .modal-heading h2, :root[data-theme="light"] .auth-form-wrap h2, :root[data-theme="light"] .survey-card h2 { color: #161f2d; }
:root[data-theme="light"] .logo-mark { background: #60a5fa; }
:root[data-theme="light"] .logo-mark i { background: #dce5f4; }
:root[data-theme="light"] .avatar { background: #c8d4e5; color: #16202d; }
:root[data-theme="light"] .avatar.color-0 { background: #dbe7fe; color: #1e3a8a; }
:root[data-theme="light"] .avatar.color-1 { background: #cff5fb; color: #155e75; }
:root[data-theme="light"] .avatar.color-2 { background: #cad9e7; color: #0072b8; }
:root[data-theme="light"] .avatar.color-3 { background: #ccf3ec; color: #115e59; }
:root[data-theme="light"] .avatar.color-4 { background: #ccd6e6; color: #161e2d; }
:root[data-theme="light"] .avatar.color-5 { background: #d1d6df; color: #161e2d; }
:root[data-theme="light"] .avatar-stack .avatar { border-color: var(--surface); }
:root[data-theme="light"] .avatar.more, :root[data-theme="light"] .count, :root[data-theme="light"] .tag.gray, :root[data-theme="light"] .gray { background: #d7dee7; color: #202e41; }
:root[data-theme="light"] .tag.green, :root[data-theme="light"] .mint, :root[data-theme="light"] .empty-icon { background: #d4deeb; color: #0050b8; }
:root[data-theme="light"] .lavender { background: #d6e2f8; color: #1d4ed8; }
:root[data-theme="light"] .peach { background: #d0d9e6; color: #005db8; }
:root[data-theme="light"] input:not([type=checkbox]):not([type=radio]), :root[data-theme="light"] textarea, :root[data-theme="light"] select { background: #e7ecf4; color: var(--text); border-color: #cbd4de; }
:root[data-theme="light"] input::placeholder, :root[data-theme="light"] textarea::placeholder { color: #405572; }
:root[data-theme="light"] input[type=checkbox], :root[data-theme="light"] input[type=radio] { accent-color: #3b82f6; }
:root[data-theme="light"] .auth-story { background: radial-gradient(ellipse at 5% 5%, #c6d3e7 0, #dbe4f1 43%, #e8edf6 100%); }
:root[data-theme="light"] .auth-story:before, :root[data-theme="light"] .auth-story:after { border-color: #93c5fd12; }
:root[data-theme="light"] .auth-pitch h1 em { color: #0357b4; }
:root[data-theme="light"] .auth-pitch>p, :root[data-theme="light"] .auth-bottom { color: #24344a; }
:root[data-theme="light"] .auth-form-panel { background: #eff2f7; }
:root[data-theme="light"] .auth-form-wrap:before { color: #0352b5; }
:root[data-theme="light"] .auth-tabs { background: #e6ebf3; border-color: #d2d9e4; }
:root[data-theme="light"] .auth-tabs button { color: #2d425e; }
:root[data-theme="light"] .auth-tabs button.active { background: #cad5e6; color: #161f2d; box-shadow: 0 2px 8px #02081430; }
:root[data-theme="light"] .auth-note, :root[data-theme="light"] .auth-footer { color: #354967; }
:root[data-theme="light"] .auth-footer span { color: #004eb8; }
:root[data-theme="light"] .art-card { background: #dce4ee; color: #161f2d; box-shadow: 0 14px 35px #02081740; border: 1px solid #c7d1df; }
:root[data-theme="light"] .art-icon { background: #c6d3e5; color: #0057b8; }
:root[data-theme="light"] .art-chat small, :root[data-theme="light"] .art-task-top, :root[data-theme="light"] .art-task-foot { color: #26374f; }
:root[data-theme="light"] .art-dot { background: #60a5fa; }
:root[data-theme="light"] .art-progress { background: #d1d9e4; }
:root[data-theme="light"] .art-progress i { background: #60a5fa; }
:root[data-theme="light"] .art-avatars i { background: #becbdc; color: #16202d; border-color: #dce4ee; }
:root[data-theme="light"] .art-avatars i+i { background: #c3d3e6; }
:root[data-theme="light"] .art-avatars i:last-child { background: #c0d1dd; }
:root[data-theme="light"] .sidebar { background: #ebeff7; color: #161e2d; border-right: 1px solid #d8dfe9; }
:root[data-theme="light"] .workspace-card { background: #e2e8f1; border-color: #d2dae5; }
:root[data-theme="light"] .workspace-icon { background: #c6d2e4; border-color: #bfccdc; color: #0054b8; }
:root[data-theme="light"] .workspace-card small, :root[data-theme="light"] .nav-caption, :root[data-theme="light"] .member-link, :root[data-theme="light"] .current-user small, :root[data-theme="light"] .current-user .icon-btn, :root[data-theme="light"] .sidebar-note p { color: #2f4463; }
:root[data-theme="light"] .workspace-indicator, :root[data-theme="light"] .current-user small i { background: #60a5fa; }
:root[data-theme="light"] .nav-item { color: #283a53; }
:root[data-theme="light"] .nav-item:hover { background: #dbe3ee; }
:root[data-theme="light"] .nav-item.active { background: #bdcde4; color: #16202d; box-shadow: inset 3px 0 #60a5fa; }
:root[data-theme="light"] .sidebar-note, :root[data-theme="light"] .current-user { border-color: #d5dce6; }
:root[data-theme="light"] .sidebar-note>.icon { color: #0c53ab; }
:root[data-theme="light"] .sidebar-note>b { color: #1d2a3b; }
:root[data-theme="light"] .current-user .icon-btn:hover { background: #d5dee9; }
:root[data-theme="light"] .topbar { background: #e9edf4; border-color: var(--border); }
:root[data-theme="light"] .breadcrumb, :root[data-theme="light"] .top-date, :root[data-theme="light"] .connection { color: #344763; }
:root[data-theme="light"] .breadcrumb-slash { color: #2263c3; }
:root[data-theme="light"] .topbar b { color: #161f2d; }
:root[data-theme="light"] .connection i { background: #60a5fa; }
:root[data-theme="light"] .connection.offline { color: #a76810; }
:root[data-theme="light"] .connection.offline i { background: #f2bf79; }
:root[data-theme="light"] .top-date { border-color: var(--border); }
:root[data-theme="light"] .welcome-banner { background: linear-gradient(115deg, #d8e2ef, #dce3ee 60%, #d2dcea); border-color: #c9d4e2; }
:root[data-theme="light"] .banner-label { color: #1c549c; }
:root[data-theme="light"] .welcome-banner h2 { color: #161f2d; }
:root[data-theme="light"] .welcome-banner p { color: #25364c; }
:root[data-theme="light"] .welcome-banner .text-link { color: #0357b4; }
:root[data-theme="light"] .orbit { border-color: #426b9c55; }
:root[data-theme="light"] .graphic-center .logo-mark { background: #3b82f6; }
:root[data-theme="light"] .graphic-center .logo-mark i { background: #06111f; }
:root[data-theme="light"] .floating-icon { background: #cbd7e4; color: #005cb8; box-shadow: 0 4px 15px #020b1b30; }
:root[data-theme="light"] .f-two { background: #b0c5de; color: #16232d; }
:root[data-theme="light"] .graphic-spark { color: #0054b8; }
:root[data-theme="light"] .stat:hover, :root[data-theme="light"] .task-card:hover, :root[data-theme="light"] .survey-card:hover { border-color: #a8bacd; box-shadow: 0 5px 18px #02071435; }
:root[data-theme="light"] .stat>div>span, :root[data-theme="light"] .stat small, :root[data-theme="light"] .conversation-preview p, :root[data-theme="light"] .progress-panel>p, :root[data-theme="light"] .progress-circle small, :root[data-theme="light"] .momentum-foot { color: #2e435f; }
:root[data-theme="light"] .stat small, :root[data-theme="light"] .panel-title, :root[data-theme="light"] .task-row, :root[data-theme="light"] .momentum-foot, :root[data-theme="light"] .conversation-preview { border-color: var(--border); }
:root[data-theme="light"] .panel-title>.icon, :root[data-theme="light"] .conversation-preview>.icon { color: #0b54ad; }
:root[data-theme="light"] .task-check { border-color: #bcc4d1; }
:root[data-theme="light"] .task-row:hover .task-check { color: #0451b4; }
:root[data-theme="light"] .progress-circle { background: conic-gradient(#60a5fa var(--progress), #d4dbe5 0); }
:root[data-theme="light"] .progress-circle>div { background: var(--surface); }
:root[data-theme="light"] .progress-panel>p b { color: #161f2d; }
:root[data-theme="light"] .channel-avatar { background: #d6e2f5; color: #1d4ed8; }
:root[data-theme="light"] .channel-avatar.public { background: #cad6e6; color: #0058b8; }
:root[data-theme="light"] .voice-panel { background: #dce4ee; }
:root[data-theme="light"] .voice-panel p { color: #2b3f5a; }
:root[data-theme="light"] .voice-panel .btn { color: #0352b5; border-color: #c1cbd9; }
:root[data-theme="light"] .search-field .icon, :root[data-theme="light"] .board-filters select { color: #273952; }
:root[data-theme="light"] .search-field input:not([type=checkbox]) { background: transparent; }
:root[data-theme="light"] .toolbar-divider { background: var(--border); }
:root[data-theme="light"] .kanban-column { background: #e7ecf4; border-color: #d5dce6; }
:root[data-theme="light"] .kanban-column.drag-over { background: #d4deeb; outline-color: #60a5fa; }
:root[data-theme="light"] .kanban-column .count { background: #d1dae6; color: #16202f; }
:root[data-theme="light"] .kanban-column>header>.icon-btn { color: #1c519c; }
:root[data-theme="light"] .status-dot { background: #475467; }
:root[data-theme="light"] .status-dot.todo { background: #2563eb; }
:root[data-theme="light"] .status-dot.progress { background: #63b3ff; }
:root[data-theme="light"] .status-dot.done { background: #5bd1db; }
:root[data-theme="light"] .priority.high { background: #e6d9df; color: #b8000e; }
:root[data-theme="light"] .priority.medium { background: #e8e5dd; color: #a67911; }
:root[data-theme="light"] .priority.low { background: #cfdbe8; color: #0058b8; }
:root[data-theme="light"] .task-card-bottom { border-color: var(--border); }
:root[data-theme="light"] .mini-progress { background: #d2dae4; }
:root[data-theme="light"] .mini-progress>i { background: #60a5fa; }
:root[data-theme="light"] .column-add { color: #2b3f59; }
:root[data-theme="light"] .column-add:hover { color: #0352b5; }
:root[data-theme="light"] .column-empty { border-color: #ced6e0; color: #273951; }
:root[data-theme="light"] .column-empty span { color: #3b506b; }
:root[data-theme="light"] .chat-sidebar { background: #e9eef5; border-color: var(--border); }
:root[data-theme="light"] .chat-sidebar-desc, :root[data-theme="light"] .chat-category, :root[data-theme="light"] .chat-category span, :root[data-theme="light"] .chat-list-empty, :root[data-theme="light"] .chat-list-item p { color: #314561; }
:root[data-theme="light"] .chat-list-item:hover { background: #dbe2ed; }
:root[data-theme="light"] .chat-list-item.selected { background: #ced8e7; }
:root[data-theme="light"] .new-conversation { color: #0352b5; }
:root[data-theme="light"] .conversation-header { border-color: var(--border); }
:root[data-theme="light"] .conversation-header p, :root[data-theme="light"] .conversation-badge, :root[data-theme="light"] .day-divider, :root[data-theme="light"] .message-meta time, :root[data-theme="light"] .composer-bottom>span { color: #2d415d; }
:root[data-theme="light"] .day-divider:before, :root[data-theme="light"] .day-divider:after { background: var(--border); }
:root[data-theme="light"] .message-bubble { background: #d7dee8; color: #161e2d; }
:root[data-theme="light"] .message.own .message-bubble { background: #c0d0e4; color: #16202d; }
:root[data-theme="light"] .composer:focus-within { border-color: #60a5fa; box-shadow: 0 0 0 2px #3b82f622; }
:root[data-theme="light"] .composer textarea { background: var(--surface); color: var(--text); }
:root[data-theme="light"] .composer-bottom { border-color: var(--border); }
:root[data-theme="light"] .load-older { color: #0352b5; border-color: #c3ccda; }
:root[data-theme="light"] .section-caption { color: #0352b5; }
:root[data-theme="light"] .survey-card-meta i { background: #65778e; }
:root[data-theme="light"] .survey-card-bottom, :root[data-theme="light"] .modal-footer, :root[data-theme="light"] .people-list>div { border-color: var(--border); }
:root[data-theme="light"] .survey-card-bottom b { color: #0357b4; }
:root[data-theme="light"] dialog { box-shadow: 0 25px 95px #000a; }
:root[data-theme="light"] dialog::backdrop { background: #020817b3; }
:root[data-theme="light"] .modal-heading .icon-btn, :root[data-theme="light"] .question-field-title .icon-btn { color: #2b3e58; }
:root[data-theme="light"] .modal-footer>button:first-child { color: #b4041a; }
:root[data-theme="light"] .member-option, :root[data-theme="light"] .subtask-field, :root[data-theme="light"] .question-field { background: #e7ecf4; border-color: #cdd5e0; }
:root[data-theme="light"] .member-option:has(input:checked) { background: #cad6e6; border-color: #60a5fa; }
:root[data-theme="light"] .subtask-field .subtask-title { background: transparent; }
:root[data-theme="light"] .subtask-field .icon-btn { color: #2e4461; }
:root[data-theme="light"] .question-field-title b { color: #1653a2; }
:root[data-theme="light"] .vote-option { color: #192434; border-color: #c8d1de; }
:root[data-theme="light"] .vote-option:has(input:checked) { background: #c6d3e5; border-color: #60a5fa; color: #16202d; }
:root[data-theme="light"] .result-option>div { color: #192435; }
:root[data-theme="light"] .result-option b small { color: #304664; }
:root[data-theme="light"] .result-option .icon, :root[data-theme="light"] .result-option.my-answer { color: #0357b4; }
:root[data-theme="light"] .result-track { background: #d2d9e4; }
:root[data-theme="light"] .result-track i { background: #4a70a1; }
:root[data-theme="light"] .result-option.my-answer .result-track i { background: #60a5fa; }
:root[data-theme="light"] .toast { background: #cad7e9; border-color: #b2c3d6; color: #16202d; box-shadow: 0 6px 25px #0005; }
:root[data-theme="light"] .toast.error { background: #e2c8d0; border-color: #cbabb4; }
:root[data-theme="light"] .admin-summary>span { border: 1px solid var(--border); color: var(--soft); background: var(--surface); }
:root[data-theme="light"] .admin-table th { color: var(--soft); background: #e4eaf3; }
:root[data-theme="light"] .admin-table td { border-top: 1px solid var(--border); }
:root[data-theme="light"] .admin-person small { color: var(--soft); }
:root[data-theme="light"] .tag.admin-role { background: #c6d3e5; color: #0055b8; }
:root[data-theme="light"] .account-status { color: #1b599d; }
:root[data-theme="light"] .account-status i { background: #60a5fa; }
:root[data-theme="light"] .account-status.inactive { color: #3f4a5e; }
:root[data-theme="light"] .account-status.inactive i { background: #5d6472; }
:root[data-theme="light"] .admin-date { color: var(--soft); }
:root[data-theme="light"] .admin-note { color: var(--soft); }
:root[data-theme="light"] .board-head { background: #eff2f7; }
:root[data-theme="light"] .board-head-cell { border: 1px solid #d5dce6; background: #e7ecf4; color: #16202f; }
:root[data-theme="light"] .board-head-cell .count { background: #d1dae6; color: #16202f; }
:root[data-theme="light"] .board-head-cell .icon-btn { color: #1c519c; }
:root[data-theme="light"] .swimlane-heading { border-bottom: 1px solid #dae1ea; }
:root[data-theme="light"] .lane-toggle:hover { background: #e0e6f0; }
:root[data-theme="light"] .swimlane-heading>.icon-btn { color: #1c519c; }
:root[data-theme="light"] .lane-chevron { color: #1654a2; }
:root[data-theme="light"] .lane-name small { color: var(--soft); }
:root[data-theme="light"] .lane-summary { color: var(--soft); }
:root[data-theme="light"] .swimlane-heading .task-id { color: var(--soft); }
:root[data-theme="light"] .lane-status { background: #d7dee7; color: #202e41; }
:root[data-theme="light"] .lane-status.todo { background: #dbe7fe; color: #1d4ed8; }
:root[data-theme="light"] .lane-status.progress { background: #d0dbea; color: #0058b8; }
:root[data-theme="light"] .lane-status.done { background: #dbeaee; color: #1b909d; }
:root[data-theme="light"] .swimlane-grid .kanban-column { background: #e8edf4; border: 1px solid #d8dfe9; }
:root[data-theme="light"] .swimlane-grid .kanban-column.drag-over { background: #d4deeb; }
:root[data-theme="light"] .subtask-tag { color: #0357b4; }
:root[data-theme="light"] .group-by { color: var(--soft); }
:root[data-theme="light"] .reaction-chip { border: 1px solid #c7cfdb; background: #dee4ed; color: #1e2b3d; }
:root[data-theme="light"] .reaction-chip:hover, :root[data-theme="light"] .reaction-chip.selected { border-color: #69aaff; background: #c4d3e6; color: #16212d; }
:root[data-theme="light"] .reaction-add { background: #dfe5ed; border: 1px solid #cbd4df; color: #283b53; }
:root[data-theme="light"] .reaction-add:hover, :root[data-theme="light"] .reaction-add[aria-expanded=true] { background: #c7d3e4; color: #16202d; border-color: #51729a; }
:root[data-theme="light"] .reaction-picker { background: #e7ecf4; border: 1px solid #bfc9d7; box-shadow: 0 7px 20px #0004; }
:root[data-theme="light"] .emoji-choice:hover, :root[data-theme="light"] .emoji-choice.selected { background: #c2cfe1; }
:root[data-theme="light"] .password-pending { color: #a76810; }
:root[data-theme="light"] .password-reset { border: 1px solid var(--border); background: #e7ecf4; }
:root[data-theme="light"] .one-time-password input:not([type=checkbox]) { color: #161f2d; }
:root[data-theme="light"] .question-field-title b { color: #0653b2; }
:root[data-theme="light"] .option-field .icon-btn { color: #2e4461; }
:root[data-theme="light"] .option-marker { border: 1.5px solid #b0bac6; }
:root[data-theme="light"] .survey-settings { background: #e2e7f0; }
:root[data-theme="light"] .survey-fact { color: var(--soft); }
:root[data-theme="light"] .result-voters { color: var(--soft); }
:root[data-theme="light"] .own-answer { color: #192434; border: 1px solid #c8d1de; }
:root[data-theme="light"] .text-answers li { border: 1px solid #c8d1de; background: #e7ecf4; }
:root[data-theme="light"] .text-answers p { color: #161f2d; }
:root[data-theme="light"] .text-answers small { color: var(--soft); }
:root[data-theme="light"] .survey-post { border: 1px solid #bcc8d8; background: #dce4ee; color: var(--text); }
:root[data-theme="light"] .survey-post:hover { border-color: #60a5fa; background: #d3ddea; }
:root[data-theme="light"] .survey-post small { color: #0357b4; }
:root[data-theme="light"] .survey-post em { color: var(--soft); }
:root[data-theme="light"] .closed-toggle { color: #314561; }
:root[data-theme="light"] .chat-event span { color: #2d415d; background: #e0e6f0; border: 1px solid #d5dce6; }
:root[data-theme="light"] .message-bubble.deleted { color: #3d506c; background: transparent; border: 1px dashed #c8d1de; }
:root[data-theme="light"] .message.own .message-bubble.deleted { background: transparent; color: #3d506c; }
:root[data-theme="light"] .edited { color: #405572; }
:root[data-theme="light"] .message-tool { color: #405572; }
:root[data-theme="light"] .message-tool:hover { background: #c7d3e4; color: #16202d; }
:root[data-theme="light"] .idea-description { color: #192434; }
:root[data-theme="light"] .subtask-field .subtask-description { background: #ebeff6; }
:root[data-theme="light"] .subtask-owner { color: var(--soft); }
:root[data-theme="light"] .theme-toggle { border: 1px solid #d2d9e4; background: #e2e8f1; color: #16202f; }
:root[data-theme="light"] .theme-toggle:hover { background: #d7dfec; }
/* Light theme: hand-tuned main surfaces (white cards on a soft page). */
:root[data-theme="light"] { --surface: #ffffff; --raised: #eef3fb; --border: #d6dfeb; background: #f3f6fb; scrollbar-color: #b9c6d8 #f3f6fb; }
:root[data-theme="light"] body, :root[data-theme="light"] .main-shell { background: #f3f6fb; }
:root[data-theme="light"] input:not([type=checkbox]):not([type=radio]), :root[data-theme="light"] textarea, :root[data-theme="light"] select { background: #ffffff; border-color: #cbd5e3; }
:root[data-theme="light"] .search-field input:not([type=checkbox]), :root[data-theme="light"] .subtask-field .subtask-title { background: transparent; }
/* The sign-in hero was white text on a dark panel; on the light panel its text turns dark. */
:root[data-theme="light"] .auth-story { color: #0f1d33; }
:root[data-theme="light"] .subtask-field .subtask-description { background: #ffffff; }

/* Attachments and the Files page (theme tokens, so both themes work). */
.attachments { margin: -6px 0 20px; }
.attachments-later { margin: -8px 0 18px; }
.attachments-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.attachments-head .text-link { font-size: 11px; }
.file-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.subtask-field .file-chips:not(:empty) { margin-top: 7px; }
.file-chip { display: inline-flex; align-items: center; max-width: 100%; border: 1px solid var(--border); border-radius: 8px; background: var(--raised); }
.file-chip a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 6px 6px 9px; font-size: 11px; color: var(--text); }
.file-chip a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.file-chip a:hover span { text-decoration: underline; }
.file-chip small { color: var(--soft); font-size: 10px; white-space: nowrap; }
.file-chip .icon { width: 14px; height: 14px; flex-shrink: 0; }
.file-chip .icon-btn { width: 24px; height: 24px; margin-right: 2px; color: var(--soft); }
.file-chip .icon-btn .icon { width: 12px; height: 12px; }
.files-table .file-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 550; color: var(--text); overflow-wrap: anywhere; }
.files-table .file-name:hover span { text-decoration: underline; }
.files-table .text-link { gap: 6px; font-size: 11px; text-align: left; }
.files-table .text-link .icon { width: 14px; height: 14px; }
.files-table td:last-child .icon-btn { color: var(--soft); }

/* Subtask window: the link back to its user story. */
.parent-story { gap: 7px; margin: -12px 0 20px; font-size: 12px; text-align: left; }
.parent-story .icon { width: 15px; height: 15px; }

/* Files shared in a chat (theme tokens, so both themes work). */
.composer-actions { display: flex; align-items: center; gap: 8px; }
.composer-attach { color: var(--soft); }
.message-bubble.file-message { display: grid; gap: 8px; padding: 8px; }
.file-attachment { display: flex; align-items: center; gap: 10px; min-width: 220px; max-width: 360px; padding: 9px 11px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.file-attachment:hover { border-color: var(--accent); }
.file-attachment>span { display: grid; gap: 2px; min-width: 0; flex: 1; }
.file-attachment b { font-size: 12px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-attachment small { font-size: 10px; color: var(--soft); }
.file-attachment .icon { width: 17px; height: 17px; flex-shrink: 0; }
.file-preview img { display: block; max-width: 320px; max-height: 240px; border-radius: 8px; }
@media(max-width:740px) { .file-attachment { min-width: 0; } .file-preview img { max-width: 100%; } }

/* Recycle bin (theme tokens, so both themes work). */
.bin-link { margin-top: -6px; }
.bin-link .count { margin-left: auto; }
.bin-link .count:empty { display: none; }
.bin-link.active { color: var(--text); }
.bin-item { display: inline-flex; align-items: center; gap: 8px; font-weight: 550; overflow-wrap: anywhere; }
.bin-item .icon { width: 16px; height: 16px; color: var(--soft); flex-shrink: 0; }
.bin-left { display: block; font-size: 10px; color: var(--soft); margin-top: 3px; }
.bin-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.bin-actions .icon-btn { color: var(--soft); }
.bin-actions .btn:disabled { cursor: not-allowed; }
.bin-blocked { flex-basis: 100%; text-align: right; font-size: 10px; color: #f2bf79; }
:root[data-theme="light"] .bin-blocked { color: #9a5b00; }

/* Board: reset filters next to the filters. */
.reset-filters { min-height: 36px; padding: 7px 11px; font-size: 11px; white-space: nowrap; }
.reset-filters .icon { width: 14px; height: 14px; }
.reset-filters:disabled { cursor: default; opacity: .45; }

/* Message threads in user story and subtask windows (theme tokens, so both themes work). */
.thread { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 18px; }
.thread-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.thread-head small { font-size: 10px; color: var(--soft); }
.thread-list { max-height: 340px; overflow-y: auto; padding: 6px 4px 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--deep); }
.thread-list .message { margin-bottom: 14px; padding: 0 6px; }
.thread-list>.field-hint { margin: 10px; }
.thread-composer { margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.thread-composer:focus-within { border-color: var(--accent); }
.thread-composer textarea { border: 0; margin: 0; background: transparent; resize: none; font-size: 12px; }
.thread-composer textarea:focus { outline: none; }
.thread-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 6px 12px; border-top: 1px solid var(--border); font-size: 10px; color: var(--soft); }
.thread-actions>div { display: flex; align-items: center; gap: 8px; }
.thread-actions .btn { min-height: 32px; padding: 6px 12px; font-size: 11px; }
.thread-actions .btn .icon { width: 14px; height: 14px; }
.card-meta { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.message-count { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--soft); }
.message-count .icon { width: 13px; height: 13px; }
.subtask-card .message-count { margin-left: auto; }

/* WhatsApp-style replies in chats (theme tokens, so both themes work). */
.bubble-row { display: flex; align-items: center; gap: 6px; max-width: 100%; }
.message.own .bubble-row { flex-direction: row-reverse; }
.bubble-row>.message-bubble, .bubble-row>.survey-post { min-width: 0; }
.reply-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 14px; color: var(--soft); opacity: 0; transition: opacity .15s; }
.message:hover .reply-btn, .reply-btn:focus-visible { opacity: 1; }
.reply-btn:hover { background: var(--raised); color: var(--text); }
.reply-btn .icon { width: 15px; height: 15px; }
@media(hover:none) { .reply-btn { opacity: 1; } }
.reply-quote { display: grid; gap: 2px; text-align: left; max-width: 100%; min-width: 160px; margin-bottom: 4px; padding: 6px 10px; border-left: 3px solid var(--accent); border-radius: 6px; background: var(--raised); color: var(--text); font-size: 11px; }
.reply-quote b { font-size: 10px; color: var(--accent); }
.reply-quote span { color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.reply-quote:hover { filter: brightness(1.08); }
.reply-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--border); background: var(--raised); border-radius: 10px 10px 0 0; }
.reply-bar[hidden] { display: none; }
.reply-bar-text { display: grid; gap: 2px; min-width: 0; flex: 1; border-left: 3px solid var(--accent); padding-left: 9px; font-size: 11px; }
.reply-bar-text b { color: var(--accent); font-size: 10px; }
.reply-bar-text span { color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message.flash .message-bubble, .message.flash .survey-post { box-shadow: 0 0 0 2px var(--accent); transition: box-shadow .2s; }

/* The Recycle bin closes the sidebar now that the signed-in user is only shown top right. */
.sidebar-footer .bin-link { margin-top: 0; padding-top: 12px; padding-bottom: 6px; border-top: 1px solid var(--border); }

/* "New user story" split button and its menu. */
.split-button { position: relative; display: inline-flex; }
.split-button>.btn:first-child { border-radius: 9px 0 0 9px; }
.split-toggle { border-radius: 0 9px 9px 0; padding: 10px; border-left: 1px solid #ffffff4d; }
.split-toggle .icon { width: 16px; height: 16px; }
.split-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 190px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 30px #0006; }
.split-menu[hidden] { display: none; }
.split-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--text); text-align: left; }
.split-menu button:hover { background: var(--raised); }
:root[data-theme="light"] .split-menu { box-shadow: 0 10px 30px #0f1d3326; }
/* Item type icons: user stories green, tasks blue. */
.type-icon { display: inline-flex; vertical-align: -3px; margin-right: 4px; }
.type-icon .icon { width: 13px; height: 13px; }
.type-icon.story { color: #4ade80; }
.type-icon.task { color: #60a5fa; }
:root[data-theme="light"] .type-icon.story { color: #15803d; }
:root[data-theme="light"] .type-icon.task { color: #1d4ed8; }

/* Idea cards: the body opens the idea, likes sit in the footer. */
.survey-card.idea-card { padding: 0; }
.idea-open { display: flex; flex-direction: column; flex: 1; width: 100%; padding: 22px 22px 0; text-align: left; color: inherit; border-radius: 11px 11px 0 0; }
.idea-open>p { font-size: 11px; line-height: 1.8; margin: 10px 0 20px; color: var(--soft); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.idea-card .survey-card-bottom { margin: 0 22px; padding-bottom: 18px; }
.idea-actions { display: flex; align-items: center; gap: 12px; }
.idea-read { font-size: 10px; }
.idea-read .icon { width: 12px; height: 12px; }
.like-btn { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 14px; border: 1px solid var(--border); color: var(--soft); font-size: 11px; font-weight: 600; transition: background .15s, color .15s, border-color .15s; }
.like-btn .icon { width: 14px; height: 14px; }
.like-btn:hover { border-color: #f472b6; color: #f9a8d4; }
.like-btn.liked { background: #4a1d3a; border-color: #f472b6; color: #fbcfe8; }
.like-btn.liked .icon { fill: currentColor; }
:root[data-theme="light"] .like-btn:hover { border-color: #db2777; color: #be185d; }
:root[data-theme="light"] .like-btn.liked { background: #fce7f3; border-color: #db2777; color: #9d174d; }

/* Messages and History tabs in item windows (theme tokens, so both themes work). */
.item-tabs .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.tab-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 12px; font-weight: 600; color: var(--soft); }
.tab-btn .icon { width: 15px; height: 15px; }
.tab-btn:hover { color: var(--text); }
.tab-btn[aria-selected=true] { color: var(--text); border-bottom-color: var(--accent); }
.tab-count:not(:empty) { font-size: 10px; padding: 1px 6px; border-radius: 9px; background: var(--raised); color: var(--soft); }
.tab-panel[hidden] { display: none; }
.thread-note { font-size: 10px; color: var(--soft); margin: 0 0 8px; }
.history-list { list-style: none; margin: 0; padding: 4px 14px; max-height: 380px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--deep); }
.history-list>.field-hint { padding: 10px 0; }
.history-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.history-item:last-child { border-bottom: 0; }
.history-item .avatar { width: 26px; height: 26px; font-size: 8px; }
.history-item p { font-size: 12px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.history-item ul { margin: 4px 0 2px; padding-left: 16px; font-size: 11px; line-height: 1.7; color: var(--soft); overflow-wrap: anywhere; }
.history-item time { display: block; font-size: 10px; color: var(--soft); margin-top: 3px; }

/* Parent status follows its subtasks; the note says so under the field. */
.status-hint { display: block; margin-top: 5px; font-size: 10px; font-weight: 400; color: var(--soft); line-height: 1.4; }

/* Whiteboards. Board and ink colors are tokens, so drawings follow the theme (and export in it). */
:root { --wb-bg: #0f1a2d; --wb-dot: #26364f; --wb-ink: #e4edfc; --wb-red: #f87171; --wb-orange: #fb923c; --wb-green: #4ade80; --wb-blue: #60a5fa; --wb-purple: #c084fc; }
:root[data-theme="light"] { --wb-bg: #ffffff; --wb-dot: #d3dae5; --wb-ink: #161e2d; --wb-red: #dc2626; --wb-orange: #ea580c; --wb-green: #15803d; --wb-blue: #2563eb; --wb-purple: #9333ea; }
.whiteboard-page { padding-top: 24px; }
.wb-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.wb-title { min-width: 0; }
.wb-title .icon { width: 14px; height: 14px; }
.wb-title h1 { font-size: 24px; font-weight: 600; letter-spacing: -.6px; margin-top: 6px; color: var(--text); overflow-wrap: anywhere; }
.wb-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-presence { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--soft); margin-right: 6px; }
.wb-presence .avatar { width: 26px; height: 26px; font-size: 8px; border-color: var(--surface); }
.wb-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.wb-group { display: flex; align-items: center; gap: 2px; padding-right: 8px; border-right: 1px solid var(--border); }
.wb-tool, .wb-swatch, .wb-size { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; color: var(--soft); }
.wb-tool:hover:not(:disabled), .wb-swatch:hover, .wb-size:hover { background: var(--raised); color: var(--text); }
.wb-tool:disabled { opacity: .35; cursor: default; }
.wb-tool[aria-pressed=true], .wb-swatch[aria-pressed=true], .wb-size[aria-pressed=true] { background: var(--raised); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--accent); }
.wb-tool .icon { width: 18px; height: 18px; }
.wb-swatch i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px #00000026; }
.wb-size i { border-radius: 50%; background: currentColor; }
.wb-size[data-size=s] i { width: 5px; height: 5px; }
.wb-size[data-size=m] i { width: 9px; height: 9px; }
.wb-size[data-size=l] i { width: 15px; height: 15px; }
.wb-c-ink { background: var(--wb-ink); } .wb-c-red { background: var(--wb-red); } .wb-c-orange { background: var(--wb-orange); } .wb-c-green { background: var(--wb-green); } .wb-c-blue { background: var(--wb-blue); } .wb-c-purple { background: var(--wb-purple); }
.wb-clear { margin-left: auto; min-height: 34px; padding: 6px 12px; font-size: 12px; }
.wb-stage { position: relative; width: 100%; max-width: max(320px, calc((100vh - 290px) * 1.6)); aspect-ratio: 16 / 10; margin: 0 auto; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background-color: var(--wb-bg); background-image: radial-gradient(circle, var(--wb-dot) 1px, transparent 1.5px); background-size: 2.5% 4%; touch-action: none; user-select: none; -webkit-user-select: none; }
.wb-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wb-stage .wb-live { cursor: crosshair; }
.wb-stage[data-tool=text] .wb-live { cursor: text; }
.wb-stage[data-tool=eraser] .wb-live { cursor: cell; }
.wb-cursors { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wb-cursor { position: absolute; display: flex; align-items: flex-start; transition: left .06s linear, top .06s linear; }
.wb-cursor svg { width: 16px; height: 16px; fill: var(--cursor); stroke: #fff; stroke-width: 1.2; margin: -2px 0 0 -2px; }
.wb-cursor b { margin: 12px 0 0 -2px; padding: 2px 7px; border-radius: 6px; background: var(--cursor); color: #fff; font-size: 10px; font-weight: 600; white-space: nowrap; }
.cursor-0 { --cursor: #7c3aed; } .cursor-1 { --cursor: #c2410c; } .cursor-2 { --cursor: #0369a1; } .cursor-3 { --cursor: #be185d; } .cursor-4 { --cursor: #15803d; } .cursor-5 { --cursor: #a16207; }
.wb-status { position: absolute; top: 10px; left: 12px; padding: 4px 10px; border-radius: 8px; background: var(--raised); color: var(--soft); font-size: 11px; pointer-events: none; }
.wb-status[hidden] { display: none; }
.wb-stage textarea.wb-text-input, .wb-stage textarea.wb-text-input:focus { position: absolute; z-index: 2; width: auto; min-width: 3em; height: auto; margin: 0; padding: 0; border: 0; border-radius: 2px; outline: 1px dashed var(--accent); outline-offset: 2px; background: transparent; font-weight: 600; line-height: 1.25; resize: none; overflow: hidden; white-space: pre; field-sizing: content; }
.wb-stage textarea.wb-ink-ink { color: var(--wb-ink); } .wb-stage textarea.wb-ink-red { color: var(--wb-red); } .wb-stage textarea.wb-ink-orange { color: var(--wb-orange); } .wb-stage textarea.wb-ink-green { color: var(--wb-green); } .wb-stage textarea.wb-ink-blue { color: var(--wb-blue); } .wb-stage textarea.wb-ink-purple { color: var(--wb-purple); }
.wb-hint { text-align: center; }
@media(max-width:740px) { .wb-group { padding-right: 4px; } .wb-tool, .wb-swatch, .wb-size { width: 32px; height: 32px; } .wb-clear { margin-left: 0; } }
/* Sticky notes: pastel in both themes with dark text, on top of the drawing. Sizes are board units (--wb-unit). */
:root { --wb-note-yellow: #fde68a; --wb-note-pink: #f9a8d4; --wb-note-orange: #fdba74; --wb-note-green: #86efac; --wb-note-blue: #93c5fd; --wb-note-purple: #c4b5fd; --wb-note-ink: #1f2937; }
:root[data-theme="light"] { --wb-note-yellow: #fef08a; --wb-note-pink: #fbcfe8; --wb-note-orange: #fed7aa; --wb-note-green: #bbf7d0; --wb-note-blue: #bfdbfe; --wb-note-purple: #ddd6fe; }
.wb-n-yellow { --note: var(--wb-note-yellow); } .wb-n-pink { --note: var(--wb-note-pink); } .wb-n-orange { --note: var(--wb-note-orange); } .wb-n-green { --note: var(--wb-note-green); } .wb-n-blue { --note: var(--wb-note-blue); } .wb-n-purple { --note: var(--wb-note-purple); }
.wb-swatch i[class^="wb-n-"] { background: var(--note); border-radius: 4px; }
.wb-toolbar[data-tool=note] .wb-ink-colors, .wb-toolbar:not([data-tool=note]) .wb-note-colors { display: none; }
.wb-notes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wb-cursors, .wb-status { z-index: 2; }
.wb-note { --note-em: calc(var(--wb-unit, 1px) * var(--note-font, 19)); position: absolute; display: flex; flex-direction: column; gap: calc(var(--note-em) * .3); padding: calc(var(--note-em) * .6) calc(var(--note-em) * .6) calc(var(--note-em) * .45); border-radius: calc(var(--note-em) * .3); background: var(--note); color: var(--wb-note-ink); box-shadow: 0 2px 8px #0000004d; font-weight: 500; line-height: 1.3; pointer-events: auto; cursor: grab; touch-action: none; }
.wb-note.moving { cursor: grabbing; box-shadow: 0 10px 24px #00000059; z-index: 2; }
.wb-note.editing { cursor: text; z-index: 2; }
.wb-note.picking { z-index: 3; }
.wb-note.busy { outline: 2px solid var(--cursor); outline-offset: 2px; }
.wb-stage[data-tool=eraser] .wb-note { pointer-events: none; }
.wb-note-text { flex: 1; min-height: 0; overflow: hidden; font-size: calc(var(--note-em) * var(--note-fit, 1)); white-space: pre-wrap; overflow-wrap: anywhere; }
.wb-note-text:empty::before { content: 'Double-click to write'; opacity: .45; }
.wb-stage textarea.wb-note-input, .wb-stage textarea.wb-note-input:focus { display: block; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: transparent; color: inherit; font: inherit; line-height: inherit; resize: none; }
.wb-note-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; min-height: 1.9em; font-size: calc(var(--note-em) * .8); }
.wb-note-chip, .wb-note-add { display: inline-flex; align-items: center; gap: .3em; height: 1.9em; padding: 0 .55em; border-radius: 1em; border: 1px solid #0000001f; background: #ffffff59; color: inherit; font-size: inherit; line-height: 1; cursor: pointer; }
.wb-note-chip span { font-size: 1.15em; }
.wb-note-chip b { font-weight: 600; }
.wb-note-chip:hover, .wb-note-chip.selected { border-color: #00000073; background: #ffffffa6; }
.wb-note-add { gap: 0; padding: 0 .45em; font-size: inherit; opacity: 0; }
.wb-note-add span { font-size: .75em; }
.wb-note-add:hover { background: #ffffffa6; }
.wb-note:hover .wb-note-add, .wb-note-add[aria-expanded=true], .wb-note-add:focus-visible { opacity: 1; }
@media (hover: none) { .wb-note-add { opacity: .75; } }
.wb-note-picker { cursor: default; font-weight: 400; }
.wb-note-picker.right { left: auto; right: 0; }
/* Photo viewer: a chat photo at full size without downloading it. Dark in both themes, like most photo viewers. */
.file-preview { display: block; justify-self: start; padding: 0; border-radius: 8px; cursor: zoom-in; }
.file-preview:hover img { opacity: .9; }
/* :root keeps these ahead of the light theme rules for dialogs and buttons. */
:root dialog.photo-viewer { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: hidden; color: #f1f5fb; }
dialog.photo-viewer[open] { display: flex; flex-direction: column; }
:root dialog.photo-viewer::backdrop { background: #050a14eb; backdrop-filter: none; }
.photo-viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: #050a14b3; }
.photo-viewer-bar>span { display: grid; gap: 3px; min-width: 0; }
.photo-viewer-bar b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-viewer-bar small { font-size: 11px; color: #a9b8cf; }
.photo-viewer-bar>div { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
:root .photo-viewer-bar .btn { background: #ffffff14; border-color: #ffffff33; color: #f1f5fb; }
:root .photo-viewer-bar .btn:hover { background: #ffffff26; }
.photo-viewer-bar .btn .icon { width: 16px; height: 16px; }
.photo-viewer-bar .icon-btn { color: #f1f5fb; }
.photo-viewer-bar .icon-btn:hover { background: #ffffff1f; }
.photo-viewer-stage { position: relative; flex: 1; min-height: 0; }
.photo-viewer-stage img { position: absolute; inset: 0; margin: auto; max-width: calc(100% - 32px); max-height: calc(100% - 32px); border-radius: 6px; box-shadow: 0 12px 40px #0008; }
/* A selected sticky note: an outline with a handle on each corner to resize it. */
.wb-note.selected { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 2; }
.wb-note.busy { outline: 2px solid var(--cursor); }
.wb-note-handle { position: absolute; display: none; width: 12px; height: 12px; margin: -7px; border-radius: 3px; background: #fff; border: 2px solid var(--accent); box-shadow: 0 1px 3px #0005; touch-action: none; }
.wb-note.selected .wb-note-handle { display: block; }
.wb-note-handle.nw { left: 0; top: 0; cursor: nwse-resize; } .wb-note-handle.ne { right: 0; top: 0; cursor: nesw-resize; }
.wb-note-handle.sw { left: 0; bottom: 0; cursor: nesw-resize; } .wb-note-handle.se { right: 0; bottom: 0; cursor: nwse-resize; }
@media (hover: none) { .wb-note-handle { width: 18px; height: 18px; margin: -10px; } }
/* Select tool: the outline and handles of a selected stroke, shape or text. */
.wb-stage[data-tool=select] .wb-live { cursor: default; }
.wb-selection { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wb-sel-box { position: absolute; outline: 1.5px dashed var(--accent); outline-offset: 6px; }
.wb-handle { position: absolute; width: 12px; height: 12px; transform: translate(-50%, -50%); border-radius: 3px; background: #fff; border: 2px solid var(--accent); box-shadow: 0 1px 3px #0005; pointer-events: auto; touch-action: none; }
.wb-handle.nw, .wb-handle.se { cursor: nwse-resize; } .wb-handle.ne, .wb-handle.sw { cursor: nesw-resize; } .wb-handle.p1, .wb-handle.p2 { cursor: move; border-radius: 50%; }
@media (hover: none) { .wb-handle { width: 18px; height: 18px; } }
/* Project boards: tabs to switch boards, with rename and delete for the open one. */
.project-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 4px 0 16px; border-bottom: 1px solid var(--border); }
.project-tabs { display: flex; align-items: flex-end; gap: 2px; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.project-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid transparent; border-bottom: 0; border-radius: 9px 9px 0 0; color: var(--soft); font-size: 13px; font-weight: 600; white-space: nowrap; }
.project-tab:hover { color: var(--text); background: var(--raised); }
.project-tab[aria-selected=true] { color: var(--text); background: var(--surface); border-color: var(--border); box-shadow: inset 0 2px 0 var(--accent); }
.project-tab>span:first-child { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.project-tab.add { color: var(--accent); font-weight: 600; }
.project-tab.add .icon { width: 15px; height: 15px; }
.project-actions { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; }
.project-actions .btn { min-height: 34px; padding: 6px 12px; font-size: 12px; }
.project-actions .btn .icon { width: 15px; height: 15px; }
@media(max-width:740px) { .project-bar { align-items: stretch; } .project-tabs { width: 100%; } .project-actions { padding-bottom: 10px; } }
/* Action holder and priority filters: a button that opens a list of checkboxes. */
.multi-filter { position: relative; }
.multi-filter-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; max-width: 230px; min-height: 37px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--soft); font-size: 10px; text-align: left; }
.multi-filter-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-filter-button .icon { width: 14px; height: 14px; flex-shrink: 0; }
.multi-filter.active .multi-filter-button { color: var(--text); border-color: var(--accent); }
.multi-filter-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 210px; max-height: 320px; overflow-y: auto; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 12px 30px #0006; }
.multi-filter-menu[hidden] { display: none; }
.multi-filter[data-filter=priorities] .multi-filter-menu { left: auto; right: 0; min-width: 160px; }
.multi-filter-menu label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--text); white-space: nowrap; cursor: pointer; }
.multi-filter-menu label:hover { background: var(--raised); }
/* Phones: the filters wrap onto their own rows instead of running off the screen. */
@media(max-width:740px) { .board-filters { flex-wrap: wrap; } .group-by { flex: 1 1 100%; } .group-by select { flex: 1; } .board-filters .multi-filter { flex: 1 1 140px; min-width: 0; } .multi-filter-button { max-width: none; } }
/* A user story or task card a dragged subtask can move under. */
.task-card.drag-over { outline: 2px dashed var(--accent); outline-offset: 2px; }
#subtask-form .form-two { margin-bottom: 18px; }
.parent-change { margin-bottom: 18px; }
.parent-change .btn { min-height: 36px; padding: 7px 13px; font-size: 12px; }
.parent-change .btn .icon { width: 15px; height: 15px; }
.parent-change label[hidden] { display: none; }
/* A subtask that just moved to another parent: its card and lane light up for a moment. */
@keyframes moved-card { 0%, 40% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 3px transparent; } }
@keyframes moved-lane { 0%, 40% { background: color-mix(in srgb, var(--accent) 22%, transparent); } 100% { background: transparent; } }
.task-card.just-moved { animation: moved-card 2.4s ease-out; }
.swimlane.just-moved > .swimlane-heading { animation: moved-lane 2.4s ease-out; border-radius: 8px; }
/* Start page star, left of the arrow: the yellow one marks the page that opens on sign-in or reload. */
.nav-row { position: relative; }
.nav-star { position: absolute; top: 50%; right: 27px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 22px; border-radius: 6px; color: var(--soft); opacity: 0; }
.nav-star .icon { width: 15px; height: 15px; }
.nav-row:hover .nav-star, .nav-star:focus-visible { opacity: .75; }
.nav-star:hover { opacity: 1; color: #facc15; }
.nav-star[aria-pressed=true] { opacity: 1; color: #facc15; }
.nav-star[aria-pressed=true] .icon { fill: currentColor; }
:root[data-theme="light"] .nav-star[aria-pressed=true], :root[data-theme="light"] .nav-star:hover { color: #eab308; }
@media (hover: none) { .nav-star { opacity: .6; } }
@media(max-width:960px) { .nav-row { display: contents; } .nav-star { display: none; } }
/* Folders on the Files page. */
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 26px; }
.folder-card { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-align: left; }
.folder-card:hover { border-color: var(--accent); background: var(--raised); }
.folder-card>span:last-child { display: grid; gap: 3px; min-width: 0; }
.folder-card b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-card small { font-size: 11px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: color-mix(in srgb, #facc15 18%, transparent); color: #eab308; }
.folder-icon .icon { width: 20px; height: 20px; }
.folder-back { margin-bottom: 10px; }
.folder-back .icon { width: 14px; height: 14px; }
.file-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.page-heading .heading-actions .btn .icon { width: 16px; height: 16px; }
/* In-app confirmation, on top of any open window. */
dialog.confirm-dialog { width: 430px; }
dialog.confirm-dialog .modal-heading { margin-bottom: 10px; }
/* Favourite project board: a star by the board name, yellow when it is yours; a small star on its tab. */
.page-heading h1 .board-star { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: 8px; vertical-align: middle; border-radius: 8px; }
.board-star { color: var(--soft); }
.board-star .icon { width: 22px; height: 22px; }
.board-star:hover { background: var(--raised); color: #facc15; }
.board-star[aria-pressed=true] { color: #facc15; }
.board-star[aria-pressed=true] .icon, .tab-star .icon { fill: currentColor; }
.tab-star { display: inline-flex; color: #facc15; }
.tab-star .icon { width: 13px; height: 13px; }
:root[data-theme="light"] .board-star[aria-pressed=true], :root[data-theme="light"] .board-star:hover, :root[data-theme="light"] .tab-star { color: #eab308; }
/* Group settings: Leave group and (for admins) Delete group, as red text buttons on the left. */
.modal-footer .footer-start { gap: 16px; }
.modal-footer .footer-start .btn { color: #fda4af; background: transparent; border-color: transparent; padding-left: 0; padding-right: 0; font-weight: 500; }
:root[data-theme="light"] .modal-footer .footer-start .btn { color: #b4041a; }
/* Favourite chat: a star by the chat name (yellow when it is yours) and a small one in the chat list. */
.chat-title { display: flex; align-items: center; gap: 4px; min-width: 0; }
.chat-title h2 { min-width: 0; }
.chat-star { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 7px; color: var(--soft); }
.chat-star .icon { width: 17px; height: 17px; }
.chat-star:hover { background: var(--raised); color: #facc15; }
.chat-star[aria-pressed=true] { color: #facc15; }
.chat-star[aria-pressed=true] .icon, .list-star .icon { fill: currentColor; }
.chat-list-item b { display: flex; align-items: center; gap: 5px; }
.chat-list-item b>span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-star { display: inline-flex; flex-shrink: 0; color: #facc15; }
.list-star .icon { width: 11px; height: 11px; }
:root[data-theme="light"] .chat-star[aria-pressed=true], :root[data-theme="light"] .chat-star:hover, :root[data-theme="light"] .list-star { color: #eab308; }
/* New-message notifications: bell in the top bar, unread counts, pop-up cards, settings. */
.topbar-bell { color: var(--soft); }
.topbar-bell .icon { width: 19px; height: 19px; }
.topbar-bell:hover { color: var(--text); background: var(--raised); }
.nav-item { position: relative; }
.nav-badge, .unread-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px; background: #3b82f6; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; }
.nav-badge[hidden] { display: none; }
.chat-list-item .unread-badge { margin-left: auto; flex-shrink: 0; }
@media(max-width:960px) { .nav-badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 9px; } }
.notify-card { display: flex; align-items: center; gap: 12px; width: 330px; max-width: calc(100vw - 40px); padding: 12px 14px; border: 1px solid #3d6799; border-radius: 12px; background: #1c3e6c; color: #edf5ff; text-align: left; box-shadow: 0 10px 30px #0006; pointer-events: auto; cursor: pointer; animation: appear .18s ease-out; }
.notify-card:hover { border-color: #60a5fa; }
.notify-card .avatar { width: 34px; height: 34px; flex-shrink: 0; }
.notify-card>span { display: grid; gap: 3px; min-width: 0; }
.notify-card b { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notify-card small { font-size: 12px; color: #c6d9f3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
:root[data-theme="light"] .notify-card { background: #ffffff; border-color: #c7d3e3; color: #16202d; }
:root[data-theme="light"] .notify-card small { color: #44546c; }
.notify-options { display: grid; gap: 10px; }
.notify-option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; font-weight: 400; }
.notify-option input { margin: 0; }
.notify-option>span { display: grid; gap: 3px; flex: 1; }
.notify-option b { font-size: 13px; font-weight: 600; color: var(--text); }
.notify-option small { font-size: 11px; line-height: 1.5; color: var(--soft); }
.notify-option .btn { min-height: 32px; padding: 6px 12px; font-size: 11px; }