/* Keep navigation out of the first paint until account and workspace settings resolve. */ #app.nav-pending .sbnav{visibility:hidden;pointer-events:none;} #app.nav-pending #settingsbtn{visibility:hidden;pointer-events:none;} :root{ --bg:#18181a;--bg2:#1e1e20; --panel:#242427;--panel2:#2c2c30;--panel3:#363639; --border:#363639;--border2:#424248; --text:#f0f0f2;--text2:#9090a0;--text3:#505060; --brand:#1A23CE;--accent:#1A23CE;--secondary:#0F135C;--adim:rgba(15,19,92,.42);--aglow:rgba(15,19,92,.24); --danger:#f04a4a;--ddim:rgba(240,74,74,.1); --gold:#f5c842;--gdim:rgba(245,200,66,.12); --r:10px;--rsm:8px;--rlg:16px; --sbw:232px;--sbc:56px; --ease:cubic-bezier(.4,0,.2,1);--d:.15s; --shadow:0 1px 3px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.3); --shadow-sm:0 1px 2px rgba(0,0,0,.3); } /* Task ownership, views, and shared reordering - 2026-08-30 v2 */ .tasks-dashboard .workspace-task-people{height:27px;min-width:27px} .tasks-dashboard .workspace-task-avatar{width:27px;height:27px;margin-left:-3px;border-width:2px;font-size:8px;object-fit:cover} .tasks-dashboard .workspace-task-avatar:first-child{margin-left:0} .tasks-dashboard .workspace-task-more{width:27px;height:27px;margin-left:-3px;font-size:8px} .task-list-view{display:flex;max-width:1120px;margin:0 auto;flex-direction:column;gap:15px;border:0;background:transparent} .task-list-group{overflow:hidden;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:#111112;box-shadow:0 8px 24px rgba(0,0,0,.12)} .task-list-group+ .task-list-group{border-top:1px solid rgba(255,255,255,.07)} .task-list-group>header{min-height:62px;padding:11px 15px;border-bottom:1px solid rgba(255,255,255,.055);background:#151516} .task-list-group>header>div{min-width:0;align-items:center;gap:10px} .task-list-group>header>div>div{min-width:0} .task-list-group>header h2{font-size:13px;font-weight:610;line-height:1.3} .task-list-group>header p{overflow:hidden;margin:3px 0 0;color:#696970;font-size:9px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap} .task-list-group>header small{margin-left:2px;padding:3px 6px;border:1px solid rgba(255,255,255,.06);border-radius:5px;background:#101011;color:#77777e;font-size:8px} .task-list-group>.workspace-task-list{padding:3px 10px 7px} .task-list-group .workspace-task-row{padding:10px 8px 11px} .task-list-group .workspace-task-avatar{width:29px;height:29px;font-size:8.5px} .task-list-group .workspace-task-people{height:29px;min-width:29px} .task-calendar-chip{min-height:31px;align-items:center;justify-content:space-between;gap:7px;padding:4px 5px 4px 8px} .task-calendar-chip-title{display:flex;min-width:0;align-items:center;gap:4px} .task-calendar-chip-title>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .task-calendar-people{display:flex;min-width:18px;align-items:center;justify-content:flex-end;flex:0 0 auto} .task-calendar-people .workspace-task-avatar{width:19px;height:19px;margin-left:-3px;border:2px solid #171719;font-size:6px;object-fit:cover} .task-calendar-people .workspace-task-avatar:first-child{margin-left:0} .task-calendar-people i{display:grid;width:19px;height:19px;margin-left:-3px;place-items:center;border:2px solid #171719;border-radius:50%;background:#252528;color:#aaaab0;font-size:6px;font-style:normal} .task-calendar-undated .task-calendar-chip{width:min(300px,100%)} .task-people-view{display:grid;max-width:1180px;margin:0 auto;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:15px} .task-person-group{overflow:hidden;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:#111112} .task-person-group>header{display:flex;min-height:64px;align-items:center;gap:11px;padding:10px 13px;border-bottom:1px solid rgba(255,255,255,.055);background:#151516} .task-person-group>header>.workspace-task-avatar,.task-person-unassigned{width:36px;height:36px;margin:0;flex:0 0 36px;border:2px solid #28282c;border-radius:50%;object-fit:cover;font-size:10px} .task-person-unassigned{display:grid;place-items:center;background:#1b1b1d;color:#74747b}.task-person-unassigned svg{width:17px;height:17px} .task-person-group>header>div{min-width:0}.task-person-group>header h2{margin:0;color:#ededee;font-size:13px;font-weight:610}.task-person-group>header span{display:block;margin-top:3px;color:#68686f;font-size:8.5px} .task-person-list{padding:3px 9px 7px} .task-person-list-label{position:relative;padding-top:18px;border-bottom:1px solid rgba(255,255,255,.045)} .task-person-list-label:last-child{border-bottom:0} .task-person-list-label>span{position:absolute;top:6px;left:8px;color:var(--task-tone,#7983ff);font-size:7px;font-weight:650;letter-spacing:.08em;text-transform:uppercase} .task-person-list-label .workspace-task-row{border:0} .task-person-list-label .workspace-task-people{display:none} .workspace-task-date-picker{position:relative} .workspace-task-date-trigger{display:flex;width:100%;height:40px;align-items:center;gap:9px;padding:0 38px 0 11px;border:1px solid var(--border);border-radius:var(--ds-control-r);background:var(--ds-raised);color:#8d8d94;font-family:'Geist',sans-serif;font-size:12px;text-align:left;cursor:pointer;transition:border-color .16s ease,background-color .16s ease,color .16s ease} .workspace-task-date-trigger:hover,.workspace-task-date-picker.open .workspace-task-date-trigger{border-color:var(--border2);background:var(--ds-hover);color:#d8d8dc} .workspace-task-date-trigger:disabled{cursor:default;opacity:.7} .workspace-task-date-trigger svg{width:14px;height:14px;flex:0 0 auto;color:#68686f} .workspace-task-date-picker.has-date .workspace-task-date-trigger,.workspace-task-date-picker.has-date .workspace-task-date-trigger svg{color:#7782ff} .workspace-task-date-clear{position:absolute;z-index:2;top:7px;right:7px;display:grid;width:26px;height:26px;place-items:center;padding:0;border:0;border-radius:6px;background:transparent;color:#66666d;cursor:pointer}.workspace-task-date-clear:hover{background:#222225;color:#dddde0}.workspace-task-date-clear svg{width:11px;height:11px} .workspace-task-date-pop{z-index:20;top:calc(100% + 7px);bottom:auto;left:0;width:286px;transform:translateY(-5px) scale(.99);transform-origin:top left;border:1px solid rgba(255,255,255,.08);background:#151516;box-shadow:0 22px 55px rgba(0,0,0,.55)} .workspace-task-date-picker.open .workspace-task-date-pop{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)} .workspace-task-date-pop .task-date-month{font-size:14px;letter-spacing:-.02em}.workspace-task-date-pop .task-date-grid{min-height:0}.workspace-task-date-pop .task-date-cell{font-size:11px} .workspace-task-image-input{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important} .workspace-task-image-editor{cursor:pointer} .workspace-task-image-editor:not(.is-empty){padding:2px} .workspace-task-image-editor:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(71,82,235,.18)} .workspace-task-image-editor.is-empty:hover{border-color:#3a3a43;background:#161619} .workspace-task-image-editor.is-uploading{cursor:wait} .workspace-task-image-draft{cursor:default} .task-folder-drag-ghost .task-card-body{filter:blur(3px);opacity:.12} .task-folder-drag-ghost .task-card-footer{opacity:.08} .task-folder-drag-ghost .task-card-header{background:#171719} .task-folder-drag-ghost{max-height:220px} body.library-reordering,body.library-reordering *{cursor:grabbing!important;user-select:none!important} .drag-item.is-drag-source{display:none!important} .library-drop-slot{box-sizing:border-box;border:1px dashed rgba(90,102,255,.46)!important;border-radius:10px;background:rgba(26,35,206,.055)!important;box-shadow:inset 0 0 0 3px rgba(26,35,206,.018);animation:library-slot-in .14s cubic-bezier(.22,1,.36,1)} .library-drag-ghost{position:fixed!important;z-index:80!important;top:0!important;left:0!important;margin:0!important;pointer-events:none!important;opacity:.97;transform-origin:top left;will-change:transform,opacity;box-shadow:0 24px 60px rgba(0,0,0,.52)!important;transition:opacity .1s ease,filter .1s ease} .library-drag-ghost.is-dropping{opacity:0;filter:brightness(.85)} .library-drag-ghost .cfoot,.library-drag-ghost .pbtns,.library-drag-ghost .pcheck{opacity:.2} @keyframes library-slot-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}} @media(max-width:900px){.task-people-view{grid-template-columns:1fr}.task-list-view,.task-people-view{max-width:none}.workspace-task-date-pop{right:0;left:auto}} @media(max-width:640px){ .task-list-view{gap:11px}.task-list-group>header{min-height:56px;padding-inline:11px}.task-list-group>.workspace-task-list{padding-inline:5px} .task-person-group>header{min-height:58px}.task-person-group>header>.workspace-task-avatar,.task-person-unassigned{width:32px;height:32px;flex-basis:32px} .tasks-dashboard .workspace-task-avatar{width:27px;height:27px}.task-calendar-people .workspace-task-avatar{width:18px;height:18px} .workspace-task-date-pop{position:fixed;top:auto;right:12px;bottom:12px;left:12px;width:auto;transform:translateY(8px) scale(.99);transform-origin:bottom center} } @media(prefers-reduced-motion:reduce){.library-drop-slot{animation:none}.library-drag-ghost{transition:none}} /* V18 - performance containment */ #panel-prompts .card, #panel-workflows .card, #panel-tools .tcard, #panel-thumbnails .pcard{ content-visibility:auto; contain:layout style paint; contain-intrinsic-size:auto 300px; } #panel-thumbnails .pcard{ contain-intrinsic-size:auto 245px; } /* V22 - bounded library rendering */ .library-load-sentinel{ grid-column:1/-1; min-height:42px; display:flex; align-items:center; justify-content:center; gap:10px; color:#55555a; font-size:10px; letter-spacing:0; } .library-load-sentinel button{ height:28px; padding:0 11px; border:0; border-radius:6px; background:#171718; color:#929297; font:550 10px 'Geist',sans-serif; cursor:pointer; transition:background .12s ease,color .12s ease; } .library-load-sentinel button:hover{background:#202021;color:#e7e7e9;} body.light .library-load-sentinel{color:#929297;} body.light .library-load-sentinel button{background:#e8e8eb;color:#55555b;} body.light .library-load-sentinel button:hover{background:#dddde1;color:#171719;} #panel-prompts .cthumb, #panel-workflows .cthumb, #panel-tools .ss, #panel-thumbnails .pimg{ backface-visibility:hidden; } /* -- LIGHT MODE */ body.light{ --bg:#f3f3f5;--bg2:#ebebee; --panel:#ffffff;--panel2:#f5f5f7;--panel3:#ececef; --border:#e4e4e9;--border2:#d2d2da; --text:#111116;--text2:#505060;--text3:#a0a0b0; --brand:#1A23CE;--accent:#1A23CE;--secondary:#0F135C;--adim:rgba(15,19,92,.12);--aglow:rgba(15,19,92,.06); --danger:#e03535;--ddim:rgba(224,53,53,.08); --gold:#c49a00;--gdim:rgba(196,154,0,.1); --shadow:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.08); --shadow-sm:0 1px 2px rgba(0,0,0,.05); } *{box-sizing:border-box;margin:0;padding:0;} img{-webkit-user-drag:none;user-drag:none;user-select:none;} html,body{height:100%;overflow:hidden;} body{font-family:'Geist',sans-serif;background:var(--bg);color:var(--text);display:flex;flex-direction:column;} body.dragging{user-select:none!important;cursor:grabbing!important;} body.dragging *{cursor:grabbing!important;} body.boxselecting{user-select:none!important;} /* LOADER */ #loader{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:99999;opacity:0;pointer-events:none;overflow:hidden;transition:opacity .36s cubic-bezier(.22,.61,.36,1);} #loader::before{content:'';position:absolute;inset:-20%;background: radial-gradient(circle at center, var(--aglow) 0%, transparent 34%), radial-gradient(circle at center, rgba(255,255,255,.03) 0%, transparent 58%); opacity:.95;transition:opacity .35s ease,transform .5s cubic-bezier(.22,.9,.2,1);} #loader.show{opacity:1;pointer-events:auto;} #loader.hide{opacity:0;pointer-events:none;} #loader.launching::before{opacity:0;transform:scale(1.08);} .loader-mark{position:relative;display:grid;place-items:center;width:216px;max-width:60vw;aspect-ratio:1;transform:scale(.98);opacity:0;contain:layout style;transition:transform .36s cubic-bezier(.22,.61,.36,1),opacity .24s ease;} #loader-animation{position:absolute;inset:0;visibility:hidden;} #loader-animation svg{display:block;width:100%;height:100%;} .loader-mark.animation-ready #loader-animation{visibility:visible;} .loader-mark.animation-ready>.brand-logo{visibility:hidden;} #loader.show .loader-mark{transform:scale(1);opacity:1;} #loader.show.launching{opacity:0;} #loader.launching .loader-mark{transform:scale(.98);} .brand-logo{display:block;color:var(--brand);height:auto;} .loader-mark>.brand-logo{width:60%;color:#1A23CE;} .glogo .brand-logo{width:58px;} .bicon .brand-logo{width:24px;} @media(prefers-reduced-motion:reduce){#loader,.loader-mark,#loader.launching .loader-mark{transition:none;transform:none;}} /* GATE */ #gate{position:fixed;inset:0;background:var(--bg);display:none;align-items:center;justify-content:center;z-index:9999;padding:20px;} #gate.show{display:flex;} .gi{display:flex;flex-direction:column;align-items:center;gap:16px;animation:fu .32s var(--ease) both;width:min(392px,100%);padding:28px 26px;border-radius:18px;background:var(--panel);border:1px solid var(--border);box-shadow:0 24px 64px rgba(0,0,0,.28);} @keyframes fu{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}} .glogo{display:flex;align-items:center;justify-content:center;margin-bottom:4px;} .glogo svg{color:var(--brand);} .gtitle{font-size:22px;font-weight:600;letter-spacing:0;text-align:center;} .gdesc{font-size:12.5px;color:var(--text2);margin-top:-5px;line-height:1.55;text-align:center;max-width:310px;} .gstate{display:flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;background:var(--panel2);border:1px solid var(--border);font-size:11px;color:var(--text2);} .gstate.ok{color:#78bd8a;border-color:rgba(120,189,138,.2);background:rgba(120,189,138,.07);} .gstate.attention{color:var(--text2);border-color:var(--border2);background:var(--panel2);} .gstate svg{flex-shrink:0;} .giw{position:relative;width:260px;} .gicon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none;} .ginput{width:100%;background:var(--panel2);border:1px solid var(--border);border-radius:var(--r);padding:10px 14px 10px 40px;color:var(--text);font-size:13px;font-family:'Geist Mono',monospace;letter-spacing:.1em;outline:none;transition:border-color var(--d);} .ginput:focus{border-color:var(--accent);} .gbtn{width:100%;min-height:42px;padding:10px 14px;background:var(--accent);color:#ffffff;font-size:13px;font-weight:600;font-family:'Geist',sans-serif;border:1px solid transparent;border-radius:9px;cursor:pointer;transition:filter var(--d),transform var(--d),opacity var(--d),background var(--d),border-color var(--d);display:flex;align-items:center;justify-content:center;gap:8px;} .gbtn:hover{filter:brightness(1.08);} .gbtn:active{transform:translateY(1px);} .gbtn:disabled{cursor:default;opacity:.62;filter:none;transform:none;} .gbtn.loading::before{content:'';width:13px;height:13px;border-radius:999px;border:1.5px solid rgba(255,255,255,.38);border-top-color:#fff;animation:spin .75s linear infinite;} .gerr{font-size:11.5px;color:var(--danger);text-align:center;min-height:18px;transition:color var(--d),opacity var(--d);} .gerr.ok{color:#78bd8a;} .gauth-actions{display:flex;flex-direction:column;gap:10px;width:100%;} .gauth-row{display:flex;gap:10px;width:100%;} .gbtn.subtle{background:var(--panel2);color:var(--text2);border-color:var(--border);} .gbtn.subtle:hover{filter:none;background:var(--panel3);} .gacct{display:flex;align-items:center;gap:11px;padding:11px 12px;background:var(--panel2);border:1px solid var(--border);border-radius:11px;width:100%;} .gacct img,.gacct-avatar{width:34px;height:34px;border-radius:999px;object-fit:cover;background:var(--panel3);flex:0 0 auto;} .gacct-avatar{display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:12px;font-weight:600;} .gacct-meta{display:flex;flex-direction:column;min-width:0;} .gacct-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .gacct-mail{font-size:10.5px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .gmeta{display:flex;flex-direction:column;gap:10px;width:100%;align-items:center;} .gmini{font-size:11px;color:var(--text3);text-align:center;line-height:1.5;max-width:310px;} @media(max-width:520px){ #gate{padding:14px;} .gi{padding:24px 18px;border-radius:14px;} .gauth-row{flex-direction:column;} } .access-modal{width:min(860px,calc(100vw - 28px));} .access-body{display:flex;flex-direction:column;gap:14px;} .access-intro{font-size:12px;color:var(--text2);line-height:1.6;} .access-card{background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:12px;transition:border-color var(--d),background var(--d);} .access-card:hover{border-color:var(--border2);} .access-card.pending{border-color:var(--border2);background:var(--panel2);} .access-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;} .access-user{display:flex;align-items:center;gap:12px;min-width:0;} .access-user img{width:38px;height:38px;border-radius:999px;object-fit:cover;background:var(--panel3);} .access-user-meta{min-width:0;display:flex;flex-direction:column;gap:2px;} .access-user-name{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .access-user-email{font-size:10.5px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .access-user-sub{font-size:10px;color:var(--text3);} .access-user-sub strong{color:var(--text2);font-weight:600;} .access-role{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);padding:5px 8px;border-radius:999px;background:var(--panel3);border:1px solid var(--border);} .access-role.owner{color:var(--accent);border-color:rgba(15,19,92,.16);background:var(--adim);} .access-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .access-status select{background:var(--panel);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:11.5px;padding:8px 10px;font-family:'Geist',sans-serif;outline:none;} .access-perms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;} .access-perm{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:var(--panel);border:1px solid var(--border);} .access-perm-label{font-size:11px;color:var(--text2);} .access-toggle{display:inline-flex;align-items:center;gap:6px;font-size:10px;color:var(--text3);} .access-toggle input{accent-color:var(--accent);} .access-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .access-pill{font-size:10px;padding:5px 8px;border-radius:999px;border:1px solid var(--border);background:var(--panel3);color:var(--text3);} .access-pill.request{color:var(--text2);background:var(--panel);border-color:var(--border2);} .access-grid{display:flex;flex-direction:column;gap:18px;} .access-section{display:flex;flex-direction:column;gap:10px;} .access-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 2px;} .access-section-head-right{display:flex;align-items:center;gap:8px;} .access-section-title{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);font-weight:700;} .access-section-copy{font-size:11px;color:var(--text3);} .access-quick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .access-quickbtn{padding:8px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--border);color:var(--text2);font-size:11px;font-weight:600;font-family:'Geist',sans-serif;cursor:pointer;transition:all var(--d);} .access-quickbtn:hover{background:var(--panel3);border-color:var(--border2);} .access-quickbtn.danger{color:#ff9b94;border-color:rgba(255,107,107,.18);} .access-quickbtn.danger:hover{background:rgba(255,107,107,.08);border-color:rgba(255,107,107,.26);} .access-save[disabled],.bsave[disabled]{opacity:.38;filter:none;cursor:default;pointer-events:none;} .access-empty{font-size:12px;color:var(--text3);padding:12px 0;text-align:center;} .access-refresh{width:30px;height:30px;border-radius:10px;border:1px solid var(--border);background:var(--panel2);color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--d);} .access-refresh:hover{background:var(--panel3);border-color:var(--border2);} .access-refresh.spinning svg,.gbtn.spinning svg{animation:spin 1s linear infinite;} @keyframes spin{to{transform:rotate(360deg);}} /* APP */ #app{display:flex;height:100%;transition:opacity .3s var(--ease);} #app.hide{opacity:0;pointer-events:none;} /* -- SIDEBAR */ .sb{width:var(--sbw);background:var(--bg);border-right:none;display:flex;flex-direction:column;flex-shrink:0;transition:width .22s var(--ease);overflow:hidden;position:relative;} .sb.col{width:var(--sbc);} .sbh{display:flex;align-items:center;padding:10px 12px;flex-shrink:0;height:54px;gap:8px;border-bottom:none;} .brand{display:flex;align-items:center;gap:9px;flex:1;min-width:0;overflow:hidden;cursor:default;} .bicon{display:flex;align-items:center;justify-content:center;flex-shrink:0;} .bicon svg{color:var(--brand);} .bname{font-size:13.5px;font-weight:600;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;max-width:140px;transition:max-width .22s var(--ease),opacity .18s;} .sb.col .bname{max-width:0;opacity:0;pointer-events:none;} .sbtog{width:26px;height:26px;border:none;background:transparent;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0;transition:all var(--d);} .sbtog:hover{background:var(--panel3);color:var(--text2);} .sbtog svg{transition:transform .22s var(--ease);} .sbnav{padding:8px 8px 0;flex:1;overflow-y:auto;overflow-x:hidden;} .sbnav::-webkit-scrollbar{display:none;} .sblabel{font-size:9px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);padding:12px 10px 3px;white-space:nowrap;} .navbtn{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border-radius:7px;border:none;background:transparent;color:var(--text2);font-size:12.5px;font-family:'Geist',sans-serif;cursor:pointer;transition:all var(--d);text-align:left;position:relative;white-space:nowrap;overflow:hidden;} .navbtn:hover{background:var(--panel2);color:var(--text);} .navbtn.on{background:var(--panel2);color:var(--text);font-weight:500;} .navbtn.on::after{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:16px;background:var(--accent);border-radius:0 3px 3px 0;} .nvi{width:15px;height:15px;flex-shrink:0;opacity:.6;} .navbtn.on .nvi,.navbtn:hover .nvi{opacity:1;} .nvlbl{transition:opacity .15s;} .nvcnt{margin-left:auto;font-size:10px;font-family:'Geist Mono',monospace;color:var(--text3);background:var(--panel3);padding:1px 7px;border-radius:20px;flex-shrink:0;} .navbtn.on .nvcnt{background:var(--adim);color:var(--accent);} .nvtip{position:absolute;left:calc(var(--sbc) + 6px);top:50%;transform:translateY(-50%);background:var(--panel2);border:1px solid var(--border2);color:var(--text);font-size:11.5px;padding:4px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .1s;z-index:200;box-shadow:var(--shadow);} .sbfoot{padding:12px 10px;border-top:none;flex-shrink:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;border-top:1px solid rgba(255,255,255,.03);} .sbaccount{display:flex;align-items:center;gap:10px;min-width:0;min-height:42px;padding:7px 9px;border-radius:14px;background:var(--panel2);border:1px solid var(--border);position:relative;} .sbaccount-avatar{width:32px;height:32px;border-radius:999px;object-fit:cover;background:var(--panel3);flex-shrink:0;} .sbaccount-meta{min-width:0;display:flex;flex-direction:column;gap:2px;} .sbaccount-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sbaccount-sub{font-size:10.5px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px;min-height:14px;} .sync-dot{width:6px;height:6px;border-radius:999px;background:#6f7178;box-shadow:0 0 0 2px rgba(111,113,120,.12);flex:0 0 auto;transition:background .18s ease,box-shadow .18s ease;} .sync-dot.syncing{background:#a6a8ad;box-shadow:0 0 0 2px rgba(166,168,173,.13);animation:syncPulse 1.15s ease-in-out infinite;} .sync-dot.ok{background:#67b57d;box-shadow:0 0 0 2px rgba(103,181,125,.13);} .sync-dot.offline{background:#d19a55;box-shadow:0 0 0 2px rgba(209,154,85,.13);} .sync-dot.error{background:#df6565;box-shadow:0 0 0 2px rgba(223,101,101,.13);} @keyframes syncPulse{0%,100%{opacity:.55}50%{opacity:1}} @media (prefers-reduced-motion:reduce){.sync-dot.syncing{animation:none}} .sbfoot-actions{display:flex;align-items:center;gap:8px;} .sbfoot .themetog{width:42px;height:42px;border-radius:14px;border:1px solid var(--border);background:var(--panel2);color:var(--text2);} .sbfoot .themetog:hover{background:var(--panel3);border-color:var(--border2);color:var(--text);} /* COLLAPSED SIDEBAR */ aside.sb.col .sbtog{display:none!important;} aside.sb.col .sbh{padding:0!important;justify-content:center!important;align-items:center!important;} aside.sb.col .brand{flex:none!important;gap:0!important;cursor:pointer;justify-content:center!important;width:var(--sbc)!important;overflow:visible;} aside.sb.col .bicon{cursor:pointer;flex-shrink:0;} aside.sb.col .bname{display:none!important;} aside.sb.col .sbnav{padding:2px 0 0!important;} aside.sb.col .sblabel{display:none!important;} aside.sb.col .navbtn{justify-content:center!important;padding:9px 0!important;width:var(--sbc)!important;gap:0!important;border-radius:0!important;} aside.sb.col .navbtn.on::after{display:none;} aside.sb.col .navbtn .nvi{width:17px!important;height:17px!important;opacity:.55;margin:0!important;flex-shrink:0;} aside.sb.col .navbtn.on .nvi{opacity:1!important;} aside.sb.col .nvcnt{display:none!important;} aside.sb.col .nvlbl{display:none!important;} aside.sb.col .sbfoot{grid-template-columns:1fr!important;justify-items:center!important;padding:10px 0!important;} aside.sb.col .sbfoot-actions{flex-direction:column!important;gap:6px!important;} aside.sb.col .sbaccount{width:38px;height:38px;padding:0;justify-content:center;border-radius:999px;} aside.sb.col .sbaccount-meta{display:none!important;} aside.sb.col .sbaccount-avatar{width:26px;height:26px;} aside.sb.col .themetog{margin:0!important;} aside.sb.col .sbfoot .themetog{width:38px;height:38px;border-radius:999px;} aside.sb.col .navbtn:hover .nvtip{opacity:1;} /* MAIN */ .main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg2);} /* TOPBAR */ .topbar{display:flex;align-items:center;padding:0 20px;height:54px;border-bottom:none;background:var(--panel);flex-shrink:0;gap:12px;} .tbleft{font-size:14px;font-weight:600;letter-spacing:-.03em;flex-shrink:0;} .tbcenter{flex:1;display:flex;align-items:center;justify-content:center;} .tbright{display:flex;align-items:center;gap:6px;flex-shrink:0;justify-content:flex-end;white-space:nowrap;margin-left:auto;} .sbox{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--border);border-radius:var(--rsm);padding:7px 12px;width:260px;transition:border-color var(--d),background var(--d);} .sbox:focus-within{border-color:var(--border2);background:var(--panel);} .sbox input{background:none;border:none;outline:none;color:var(--text);font-size:12px;font-family:'Geist',sans-serif;width:100%;} .sbox input::placeholder{color:var(--text3);} .sbox svg{color:var(--text3);flex-shrink:0;} .zbtns{display:flex;align-items:center;gap:2px;background:var(--panel2);border:1px solid var(--border);border-radius:var(--rsm);padding:2px;} .zbtn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--text3);cursor:pointer;border-radius:6px;transition:all var(--d);} .zbtn:hover{background:var(--panel3);color:var(--text2);} .zbtn.on{background:var(--panel3);color:var(--text);} .addbtn{display:flex;align-items:center;gap:5px;background:var(--accent);color:#ffffff;border:none;border-radius:var(--rsm);padding:0 14px;height:32px;font-size:12px;font-weight:600;font-family:'Geist',sans-serif;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:filter var(--d);} .addbtn:hover{filter:brightness(1.08);} .reorderbar{display:flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--border);border-radius:var(--rsm);padding:2px;} .rctrls{display:flex;align-items:center;gap:4px;flex-wrap:wrap;} .rbtn{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:none;border-radius:6px;background:var(--panel2);color:var(--text3);cursor:pointer;transition:all var(--d);} .rbtn:hover{background:var(--panel3);color:var(--text2);} .rbtn:disabled{opacity:.28;cursor:default;pointer-events:none;} .drag-item{transition:box-shadow 120ms ease,opacity 120ms ease;cursor:grab;} .drag-item.dragging{opacity:.16;cursor:grabbing;} .drop-slot{border-radius:14px;border:1.5px dashed rgba(196,255,78,.34);background:linear-gradient(180deg,rgba(196,255,78,.06),rgba(196,255,78,.025));box-shadow:inset 0 0 0 1px rgba(196,255,78,.03),0 0 0 1px rgba(0,0,0,.14);pointer-events:none;transition:height 110ms ease,opacity 110ms ease;opacity:.96;} .drag-ghost{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;border-radius:16px;overflow:hidden;transform:translate3d(0,0,0) scale(1.02) rotate(.6deg);box-shadow:0 26px 60px rgba(0,0,0,.38),0 8px 22px rgba(0,0,0,.22);opacity:.96;will-change:transform;} .reorderhint{font-size:11px;color:var(--text3);padding:0 2px;white-space:nowrap;} /* TAG FILTER BAR */ .tfbar{display:flex;align-items:center;gap:6px;padding:0 20px;height:40px;border-bottom:none;background:var(--panel);flex-shrink:0;overflow-x:auto;} .tfbar::-webkit-scrollbar{display:none;} .tpill{padding:3px 11px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--text3);font-size:11px;font-family:'Geist',sans-serif;cursor:pointer;transition:all var(--d);white-space:nowrap;flex-shrink:0;} .tpill:hover{border-color:var(--border2);color:var(--text2);} .tpill.on{background:var(--adim);border-color:var(--accent);color:var(--accent);} /* CONTENT */ .content{flex:1;min-height:0;overflow-y:auto;padding:18px 20px;background:var(--bg);} .content::-webkit-scrollbar{width:3px;} .content::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;} .panel{display:none;} .panel.on{display:block;} /* GRIDS */ .bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cm,255px),1fr));gap:10px;} .tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cm,235px),1fr));gap:10px;} .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cm,220px),1fr));gap:12px;} /* GHOST ADD CARDS */ .gadd{background:transparent;border:1.5px dashed var(--border2);border-radius:var(--rlg);min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:all var(--d);color:var(--text3);} .gadd:hover{border-color:var(--accent);color:var(--accent);background:var(--aglow);} .gring{width:32px;height:32px;border-radius:50%;border:1.5px dashed currentColor;display:flex;align-items:center;justify-content:center;} .glbl{font-size:11.5px;font-weight:500;} .tgadd{border:1.5px dashed var(--border2);border-radius:var(--rlg);aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:all var(--d);color:var(--text3);} .tgadd:hover{border-color:var(--accent);color:var(--accent);background:var(--aglow);} /* CARD */ .card{background:var(--panel);border:none;border-radius:var(--rlg);overflow:hidden;position:relative;display:flex;flex-direction:column;transition:box-shadow var(--d);} .card,.tcard,.pcard,.bento{contain:layout paint style;} .card:hover{box-shadow:var(--shadow);} .cthumb{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;display:block;flex-shrink:0;background:var(--panel2);} .cph{width:100%;aspect-ratio:16/9;background:var(--panel2);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--text3);flex-shrink:0;} .cbody{padding:12px 13px 12px;flex:1;} .ctitle{font-size:12.5px;font-weight:600;letter-spacing:-.01em;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px;margin-bottom:5px;white-space:normal;} .cprev{font-size:11px;color:var(--text3);font-family:'Geist Mono',monospace;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .ctags{display:flex;flex-wrap:wrap;gap:3px;margin-top:7px;} .ctag{font-size:9.5px;background:var(--panel2);color:var(--text2);padding:2px 7px;border-radius:20px;border:1px solid var(--border);} .card.notags .ctags{display:none;} .cfoot{position:absolute;top:7px;right:7px;display:flex;align-items:center;gap:3px;padding:0;opacity:0;transition:opacity var(--d);z-index:4;} .card:hover .cfoot{opacity:1;} .ib{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;border:none;background:transparent;color:var(--text3);cursor:pointer;transition:all var(--d);flex-shrink:0;} .cfoot .ib{background:rgba(10,10,12,.75);backdrop-filter:blur(8px);} .ib:hover{background:rgba(10,10,12,.95);color:var(--text2);} .ib.cp:hover{background:var(--adim);color:var(--accent);} .ib.fv.on{color:var(--gold);} .ib.fv:hover{background:var(--gdim);color:var(--gold);} .ib.dl:hover{background:var(--ddim);color:var(--danger);} .ib svg{pointer-events:none;} .cflash{position:absolute;inset:0;border-radius:var(--rlg);background:rgba(15,19,92,.08);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:6;} .cflash.on{opacity:1;} .cflash .cpill{transform:translateY(8px) scale(.96);opacity:0;transition:transform .22s cubic-bezier(.22,.9,.2,1),opacity .18s ease;} .cflash.on .cpill{transform:translateY(0) scale(1);opacity:1;} .cpill{background:rgba(13,13,14,.92);color:var(--accent);font-size:11.5px;font-weight:600;padding:6px 14px;border-radius:20px;border:1px solid rgba(15,19,92,.22);display:flex;align-items:center;gap:5px;box-shadow:0 10px 24px rgba(0,0,0,.28);} body.light .cpill{background:rgba(10,10,10,.88);} /* TOOL CARD */ .tcard{background:var(--panel);border:none;border-radius:var(--rlg);overflow:hidden;cursor:pointer;transition:box-shadow var(--d);} .tcard:hover{box-shadow:var(--shadow);} .tprev{width:100%;height:88px;display:flex;align-items:center;justify-content:center;overflow:hidden;} .tprev img.ss{width:100%;height:100%;object-fit:cover;} .tfavbig{opacity:.35;border-radius:10px;} .trow{display:flex;align-items:center;gap:9px;padding:10px 12px;} .tfav{width:24px;height:24px;border-radius:6px;background:var(--panel2);overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .tfav img{width:100%;height:100%;object-fit:cover;} .tinfo{flex:1;min-width:0;} .tname{font-size:12px;font-weight:600;letter-spacing:-.01em;} .tdom{font-size:10px;color:var(--text3);font-family:'Geist Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .tbtns{display:flex;gap:1px;flex-shrink:0;} .tb2{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;border:none;background:transparent;color:var(--text3);cursor:pointer;transition:all var(--d);} .tb2:hover{background:var(--panel2);color:var(--text2);} .tb2.dl:hover{background:var(--ddim);color:var(--danger);} .tb2.fv.on{color:var(--gold);} .tb2.fv:hover{color:var(--gold);} /* THUMBNAIL CARD */ .pcard{background:var(--panel);border:none;border-radius:var(--rlg);overflow:hidden;position:relative;cursor:pointer;display:flex;flex-direction:column;transition:box-shadow var(--d);} .pcard:hover{box-shadow:var(--shadow);} .pimgw{width:100%;position:relative;overflow:hidden;background:var(--panel2);flex-shrink:0;} .pimgw::before{content:'';display:block;padding-top:56.25%;} .pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s var(--ease);} .pcard:hover .pimg{transform:scale(1.02);} .pflash{position:absolute;inset:0;background:rgba(15,19,92,.1);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:5;} .pflash.on{opacity:1;} .pflash .cpill{transform:translateY(8px) scale(.96);opacity:0;transition:transform .22s cubic-bezier(.22,.9,.2,1),opacity .18s ease;} .pflash.on .cpill{transform:translateY(0) scale(1);opacity:1;} .pfoot{padding:7px 10px 8px;} .ptags{display:flex;flex-wrap:wrap;gap:3px;} .pbtns{position:absolute;top:7px;right:7px;display:flex;gap:3px;opacity:0;transition:opacity var(--d);z-index:4;} .pcard:hover .pbtns{opacity:1;} .pbtn{width:26px;height:26px;border-radius:6px;border:none;background:rgba(10,10,12,.75);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);transition:all var(--d);} .pbtn:hover{background:rgba(10,10,12,.95);color:var(--text);} .pbtn.dl:hover{background:rgba(240,74,74,.3);color:var(--danger);} .pbtn svg{pointer-events:none;} .pcheck{position:absolute;top:8px;left:8px;width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.7);background:rgba(0,0,0,.35);backdrop-filter:blur(4px);z-index:5;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--d);opacity:0;} .pcard:hover .pcheck,.pcard.sel .pcheck{opacity:1;} .pcard.sel .pcheck{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,255,255,.4);} .pcheck svg{pointer-events:none;opacity:0;transition:opacity .1s;} .pcard.sel .pcheck svg{opacity:1;} .pcard.sel{outline:2px solid var(--accent);outline-offset:-1px;box-shadow:0 0 0 4px var(--adim);} .pcard.selpreview{outline:2px solid var(--accent);outline-offset:-1px;opacity:.85;} .pcard.notags>div:not(.pimgw){display:none;} /* LIGHTBOX */ .lbox{position:fixed;inset:0;background:rgba(8,8,10,.94)!important;backdrop-filter:blur(12px);z-index:800;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s var(--ease);} .lbox.on{opacity:1;pointer-events:all;} .limg{max-width:100%;max-height:88vh;border-radius:var(--rlg);box-shadow:0 8px 40px rgba(0,0,0,.35);object-fit:contain;transform:scale(.96);transition:transform .25s var(--ease),opacity .15s;display:block;} .lbox.on .limg{transform:scale(1);} .lclose{position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;background:var(--panel2);border:1px solid var(--border2);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:all var(--d);} .lclose:hover{background:var(--panel3);color:var(--text);} .ltags{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:6px;flex-wrap:wrap;justify-content:center;} .ltag{background:rgba(20,20,22,.85);border:1px solid var(--border2);color:var(--text2);font-size:11px;padding:3px 9px;border-radius:20px;backdrop-filter:blur(4px);} /* DROP OVERLAY */ .dropov{position:fixed;inset:0;background:rgba(10,10,12,.82);backdrop-filter:blur(6px);z-index:50;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;border:3px dashed transparent;} .dropov.on{opacity:1;pointer-events:all;border-color:var(--accent);} .dropinner{text-align:center;color:var(--accent);} .dropinner svg{margin-bottom:12px;opacity:.8;} .dropinner p{font-size:16px;font-weight:600;letter-spacing:-.02em;} .dropinner span{font-size:12px;color:var(--text3);margin-top:4px;display:block;} /* DRAG */ .dghostEl{position:fixed;pointer-events:none;z-index:999;border-radius:var(--rlg);box-shadow:0 24px 64px rgba(0,0,0,.7);transform:rotate(1.5deg) scale(1.04);opacity:.95;} .dsrc{opacity:0!important;pointer-events:none!important;} /* MODAL */ .ov{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:200;opacity:0;pointer-events:none;transition:opacity var(--d);} .ov.on{opacity:1;pointer-events:all;} .modal{background:var(--panel);border:1px solid var(--border2);border-radius:var(--rlg);width:490px;max-width:calc(100vw - 28px);max-height:88vh;overflow-y:auto;transform:translateY(10px) scale(.98);transition:transform var(--d);box-shadow:var(--shadow);} .ov.on .modal{transform:none;} .modal::-webkit-scrollbar{width:3px;} .modal::-webkit-scrollbar-thumb{background:var(--border2);} .mh{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border);} .mhtitle{font-size:13.5px;font-weight:600;letter-spacing:-.02em;} .mclose,.mx{width:26px;height:26px;border:none;background:transparent;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all var(--d);font-size:18px;line-height:1;} .mclose:hover,.mx:hover{background:var(--panel2);color:var(--text);} .m-body,.mbody{padding:16px 18px;display:flex;flex-direction:column;gap:14px;} .mfoot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--border);} .field{display:flex;flex-direction:column;gap:5px;} .flbl{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);} .field input,.field textarea{background:var(--panel2);border:1px solid var(--border);border-radius:var(--rsm);color:var(--text);font-family:'Geist',sans-serif;font-size:12.5px;padding:9px 11px;outline:none;transition:border-color var(--d);} .field input:focus,.field textarea:focus{border-color:var(--accent);} .field textarea{min-height:90px;resize:none;font-family:'Geist Mono',monospace;font-size:11.5px;line-height:1.65;} .uz{border:1.5px dashed var(--border2);border-radius:var(--rsm);padding:18px;text-align:center;cursor:pointer;transition:all var(--d);position:relative;overflow:hidden;} .uz:hover{border-color:var(--accent);background:var(--aglow);} .uz input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;} .uzicon{font-size:18px;margin-bottom:3px;} .uztxt{font-size:11px;color:var(--text3);} .uzprev{width:100%;height:110px;object-fit:cover;border-radius:var(--rsm);display:none;} .uzprevw{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--rsm);display:none;} .tagbox{display:flex;flex-wrap:wrap;gap:4px;background:var(--panel2);border:1px solid var(--border);border-radius:var(--rsm);padding:6px 8px;min-height:36px;cursor:text;transition:border-color var(--d);} .tagbox:focus-within{border-color:var(--border2);} .tchip{display:inline-flex;align-items:center;gap:3px;background:var(--panel3);color:var(--text2);font-size:11px;padding:3px 9px;border-radius:20px;border:1px solid var(--border);line-height:1.4;white-space:nowrap;} .tchip button{background:none;border:none;color:var(--text3);cursor:pointer;font-size:13px;line-height:1;padding:0;margin-left:1px;opacity:.6;transition:opacity var(--d);}.tchip button:hover{opacity:1;} .taginp{background:none;border:none;outline:none;color:var(--text);font-size:12px;font-family:'Geist',sans-serif;flex:1;min-width:60px;} .taghint{font-size:10px;color:var(--text3);} .rtags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;} .rtag{padding:2px 9px;border-radius:20px;border:1px solid var(--border);background:var(--panel2);color:var(--text3);font-size:10.5px;cursor:pointer;transition:all var(--d);} .rtag:hover{border-color:var(--accent);color:var(--accent);background:var(--adim);} .steplist{display:flex;flex-direction:column;gap:6px;} .steprow{display:flex;gap:6px;align-items:center;} .stepn{width:22px;height:22px;border-radius:50%;background:var(--panel3);border:1px solid var(--border);color:var(--text3);font-size:9.5px;font-family:'Geist Mono',monospace;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .stepinp{flex:1;background:var(--panel2);border:1px solid var(--border);border-radius:var(--rsm);color:var(--text);font-family:'Geist',sans-serif;font-size:12px;padding:7px 10px;outline:none;transition:border-color var(--d);} .stepinp:focus{border-color:var(--accent);} .stepdel{width:22px;height:22px;border-radius:4px;background:none;border:none;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;transition:all var(--d);} .stepdel:hover{background:var(--ddim);color:var(--danger);} .addstep{display:flex;align-items:center;justify-content:center;gap:5px;background:none;border:1.5px dashed var(--border2);border-radius:var(--rsm);color:var(--text3);font-size:11.5px;font-family:'Geist',sans-serif;padding:6px 10px;cursor:pointer;transition:all var(--d);width:100%;} .addstep:hover{border-color:var(--accent);color:var(--accent);} .bghst{padding:7px 14px;border-radius:var(--rsm);background:var(--panel2);border:1px solid var(--border);color:var(--text2);font-size:12px;font-family:'Geist',sans-serif;cursor:pointer;transition:all var(--d);} .bghst:hover{color:var(--text);border-color:var(--border2);} .bsave{padding:7px 16px;border-radius:var(--rsm);background:var(--accent);border:none;color:#ffffff;font-size:12px;font-weight:600;font-family:'Geist',sans-serif;cursor:pointer;transition:filter var(--d);} .bsave:hover{filter:brightness(1.08);} .boutl{padding:7px 14px;border-radius:var(--rsm);background:transparent;border:1px solid var(--border2);color:var(--text2);font-size:12px;font-family:'Geist',sans-serif;cursor:pointer;transition:all var(--d);} .boutl:hover{color:var(--text);} .vimg{width:100%;max-height:220px;object-fit:cover;border-radius:var(--rsm);display:none;} .vprompt{background:var(--panel2);border:1px solid var(--border);border-radius:var(--rsm);padding:12px;font-size:11.5px;font-family:'Geist Mono',monospace;line-height:1.7;color:var(--text2);white-space:pre-wrap;word-break:break-word;} .svrow{display:flex;gap:9px;align-items:flex-start;} .svn{width:20px;height:20px;border-radius:50%;background:var(--adim);color:var(--accent);font-size:9.5px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;font-family:'Geist Mono',monospace;} .svt{font-size:12px;color:var(--text2);line-height:1.6;} .wfprev{display:flex;flex-direction:column;gap:4px;margin-top:6px;} .wfl{display:flex;align-items:baseline;gap:6px;} .wfn{font-size:9px;font-family:'Geist Mono',monospace;color:var(--accent);background:var(--adim);padding:1px 5px;border-radius:3px;flex-shrink:0;font-weight:600;} .wft{font-size:11px;color:var(--text2);line-height:1.45;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} /* MULTI MODAL */ .mmod{background:var(--panel);border:1px solid var(--border2);border-radius:var(--rlg);width:510px;max-width:calc(100vw - 28px);max-height:88vh;overflow-y:auto;transform:translateY(10px) scale(.98);transition:transform var(--d);box-shadow:0 8px 48px rgba(0,0,0,.7);} .ov.on .mmod{transform:none;} .mmod::-webkit-scrollbar{width:3px;} .mmod::-webkit-scrollbar-thumb{background:var(--border2);} .mthumbrow{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;} .mthumbrow::-webkit-scrollbar{height:3px;} .mthumbrow::-webkit-scrollbar-thumb{background:var(--border2);} .mtmini{width:80px;height:45px;object-fit:cover;border-radius:6px;border:2px solid transparent;flex-shrink:0;} .mtmini.on{border-color:var(--accent);} /* CONFIRM */ .confov{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:700;opacity:0;pointer-events:none;transition:opacity var(--d);} .confov.on{opacity:1;pointer-events:all;} .confbox{background:var(--panel);border:1px solid var(--border);border-radius:var(--rlg);padding:24px;width:300px;box-shadow:0 8px 48px rgba(0,0,0,.7);transform:translateY(6px) scale(.97);transition:transform var(--d);} .confov.on .confbox{transform:none;} .conficon{font-size:20px;margin-bottom:8px;} .conftitle{font-size:13.5px;font-weight:600;margin-bottom:5px;} .confsub{font-size:11.5px;color:var(--text2);margin-bottom:16px;line-height:1.5;} .confbtns{display:flex;gap:6px;justify-content:flex-end;} .bcanc{padding:6px 13px;border-radius:var(--rsm);background:var(--panel2);border:1px solid var(--border);color:var(--text2);font-size:12px;font-family:'Geist',sans-serif;cursor:pointer;transition:all var(--d);} .bcanc:hover{color:var(--text);} .bdel{padding:6px 13px;border-radius:var(--rsm);background:var(--ddim);border:1px solid rgba(240,74,74,.22);color:var(--danger);font-size:12px;font-family:'Geist',sans-serif;cursor:pointer;transition:all var(--d);} .bdel:hover{background:rgba(240,74,74,.18);} /* TOAST */ .toast{position:fixed;bottom:20px;right:20px;background:var(--panel2);border:1px solid var(--border2);border-radius:10px;padding:9px 16px;font-size:12px;color:var(--text);display:flex;align-items:center;gap:7px;z-index:900;transform:translateY(8px);opacity:0;pointer-events:none;transition:all .2s var(--ease);box-shadow:0 8px 32px rgba(0,0,0,.5);} .toast.on{transform:none;opacity:1;} .tdot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0;} /* BOX SELECT */ #boxsel{position:fixed;border:1.5px solid var(--accent);background:rgba(15,19,92,.07);border-radius:4px;pointer-events:none;z-index:300;display:none;} /* THUMBNAIL MULTI-SELECT TOOLBAR */ #selbar{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--panel);border:1px solid var(--border2);border-radius:14px;padding:8px 12px;display:flex;align-items:center;gap:8px;z-index:600;box-shadow:0 8px 40px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);white-space:nowrap;backdrop-filter:blur(12px);} #selbar.on{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0);} .selcnt{font-size:12px;font-weight:600;color:var(--text2);padding-right:8px;border-right:1px solid var(--border);} .selbtn{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:8px;border:none;background:var(--panel2);color:var(--text2);font-size:11.5px;font-family:'Geist',sans-serif;cursor:pointer;transition:all var(--d);} .selbtn.accent-btn{background:var(--adim);border-color:var(--accent);color:var(--accent);} .selbtn.accent-btn:hover{background:var(--accent);color:#ffffff;} .selbtn:hover{background:var(--panel3);color:var(--text);} .selbtn.danger:hover{background:var(--ddim);color:var(--danger);} .seldeselect{width:28px;height:28px;border-radius:7px;border:none;background:transparent;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--d);} .seldeselect:hover{background:var(--panel2);color:var(--text2);} /* THUMB TAG TOGGLE */ .thtogbtn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);border-radius:var(--rsm);color:var(--text3);cursor:pointer;transition:all var(--d);flex-shrink:0;} .thtogbtn:hover{border-color:var(--border2);color:var(--text2);background:var(--panel2);} .thtogbtn.on{background:var(--panel2);border-color:var(--border2);color:var(--text2);} /* THEME TOGGLE */ .themetog{width:28px;height:28px;border:1px solid var(--border);background:transparent;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:7px;transition:all var(--d);flex-shrink:0;} .themetog:hover{background:var(--panel2);color:var(--text2);} .sbfoot{padding:12px 10px;border-top:none;flex-shrink:0;} aside.sb.col .themetog{margin:0 auto;} /* -- DASHBOARD */ /* Layout: 3 cols Row1: greeting (full width) Row2: prompts (col1-2) | stats (col3) Row3: tasks-dimcha (col1) | tasks-max (col2) | thumbs (col3) */ .dash{display:grid;grid-template-columns:1.08fr 1.08fr .84fr;gap:14px;padding:20px 20px 28px;} .bento{background:var(--panel);border:none;border-radius:var(--rlg);overflow:hidden;display:flex;flex-direction:column;} .bento-shared{background: radial-gradient(circle at 85% 12%, rgba(15,19,92,.18) 0%, rgba(15,19,92,.09) 18%, rgba(15,19,92,.035) 34%, transparent 58%), radial-gradient(circle at 8% 100%, rgba(15,19,92,.08) 0%, rgba(15,19,92,.025) 20%, transparent 42%), linear-gradient(180deg, rgba(15,19,92,.022) 0%, rgba(15,19,92,.012) 100%), linear-gradient(180deg,var(--panel) 0%,var(--panel) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.03), inset 0 0 0 1px rgba(15,19,92,.05);} .bento-h{display:flex;align-items:center;justify-content:space-between;padding:14px 15px 8px;} .bento-title{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);} .bento-action{font-size:11px;color:var(--text3);background:none;border:none;cursor:pointer;padding:3px 7px;border-radius:6px;font-family:'Geist',sans-serif;transition:all var(--d);} .bento-action:hover{background:var(--panel2);color:var(--text2);} .bento-body{padding:0 15px 13px;flex:1;display:flex;flex-direction:column;} /* Greeting */ .dash-greeting{grid-column:1/-1;display:none;display:flex;align-items:center;justify-content:space-between;padding:4px 2px 0;} .dash-greeting-text h2{font-size:21px;font-weight:700;letter-spacing:-.04em;} .dash-greeting-text p{font-size:12px;color:var(--text3);margin-top:2px;} .dash-time{font-size:11.5px;font-family:'Geist Mono',monospace;color:var(--text3);background:var(--panel2);padding:5px 13px;border-radius:20px;border:1px solid var(--border);} /* Top Prompts: spans col 1-2 only */ /* Home lower row: prompts + mutual tasks */ .tp-list{display:flex;flex-direction:column;gap:5px;} .tp-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;background:var(--panel2);cursor:pointer;transition:all var(--d);border:1px solid transparent;position:relative;} .tp-item:hover{background:var(--panel3);border-color:var(--border);} .tp-item:active{transform:scale(.99);} .tp-num{font-size:9.5px;font-family:'Geist Mono',monospace;color:var(--text3);width:14px;flex-shrink:0;text-align:right;} .tp-text{flex:1;font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .tp-tag{font-size:9.5px;color:var(--text3);background:var(--panel3);border:1px solid var(--border);padding:1px 6px;border-radius:20px;flex-shrink:0;} .tp-empty{padding:16px 0;text-align:center;color:var(--text3);font-size:12px;} /* Stats: col 3, rows 2 */ .dash-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;} .stat-card{background:var(--panel2);border-radius:10px;padding:11px 13px;display:flex;flex-direction:column;gap:2px;} .stat-val{font-size:20px;font-weight:700;letter-spacing:-.04em;color:var(--text);} .stat-lbl{font-size:10px;color:var(--text3);} .stat-card.accent .stat-val{color:var(--accent);} /* Tasks */ .dash-tasks-row{display:grid;grid-template-columns:1.08fr 1.08fr .84fr;gap:16px;} .notes-list{display:flex;flex-direction:column;gap:5px;margin-bottom:8px;min-height:260px;max-height:460px;overflow-y:auto;flex:1;} .notes-list::-webkit-scrollbar{width:2px;} .notes-list::-webkit-scrollbar-thumb{background:var(--border2);} .note-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;background:var(--panel2);border:1px solid transparent;transition:all var(--d);cursor:pointer;} .note-item:hover{border-color:var(--border);} .note-item.insane{border:1px dashed rgba(255,88,88,.72);background:rgba(255,255,255,.02);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);position:relative;animation:insaneSteady 1.9s ease-in-out infinite;} .note-item.insane::after{display:none;} .note-item.insane:hover{border-color:rgba(255,106,106,.88);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(255,88,88,.06);} .note-cb{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--border2);background:transparent;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s;} .note-cb.done{background:var(--accent);border-color:var(--accent);} .note-cb.done svg{display:block;} .note-cb svg{display:none;pointer-events:none;} .note-body{flex:1;min-width:0;cursor:pointer;} .note-text{font-size:12.5px;color:var(--text);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .note-text.done{text-decoration:line-through;color:var(--text3);} .note-meta{display:flex;align-items:center;gap:4px;margin-top:2px;} .note-badge{font-size:9px;padding:1px 5px;border-radius:20px;border:1px solid var(--border);background:var(--panel3);color:var(--text3);white-space:nowrap;} .note-badge.has-content{background:var(--adim);border-color:rgba(15,19,92,.3);color:var(--accent);} .note-item.done .note-badge, .note-item.done .note-badge.priority-urgent, .note-item.done .note-badge.priority-insane, .note-item.done .note-badge.due-overdue, .note-item.done .note-badge.due-soon, .note-item.done .note-badge.has-content{background:var(--panel3);border-color:var(--border);color:var(--text3);opacity:.6;} .note-actions{display:flex;gap:2px;opacity:0;transition:opacity var(--d);flex-shrink:0;} .note-item:hover .note-actions{opacity:1;} .note-btn{width:20px;height:20px;border:none;background:transparent;color:var(--text3);cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all var(--d);} .note-btn:hover{background:var(--panel3);color:var(--text2);} .note-btn.del:hover{background:var(--ddim);color:var(--danger);} .note-add{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:8px;border:1.5px dashed var(--border2);transition:all var(--d);margin-top:2px;} .note-add:focus-within{border-color:var(--accent);background:var(--aglow);} .note-inp{flex:1;background:none;border:none;outline:none;font-size:12px;color:var(--text);font-family:'Geist',sans-serif;} .note-inp::placeholder{color:var(--text3);} .note-submit{width:20px;height:20px;border-radius:5px;background:var(--accent);border:none;color:#ffffff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:filter var(--d);} .note-submit:hover{filter:brightness(1.08);} .note-submit.note-submit-subtle{background:var(--adim);color:var(--accent);border:1px dashed rgba(15,19,92,.18);} .note-submit.note-submit-subtle:hover{filter:none;background:rgba(15,19,92,.12);border-color:rgba(15,19,92,.26);} .dash-lower-row{grid-column:1/-1;display:grid;grid-template-columns:1.08fr 1.08fr .84fr;gap:16px;} .dash-lower-row #dash-prompts-box{grid-column:span 2;} .dash-lower-row .dash-mutual-box{grid-column:span 1;} .dash-mutual-box .bento-body{padding-bottom:10px;} /* Recent Thumbnails */ .rth-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;} .rth-item{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;cursor:pointer;background:var(--panel2);} .rth-item img{width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease);display:block;} .rth-item:hover img{transform:scale(1.05);} .rth-btns{position:absolute;top:5px;right:5px;display:flex;gap:3px;opacity:0;transition:opacity var(--d);} .rth-item:hover .rth-btns{opacity:1;} .rth-btn{width:24px;height:24px;border-radius:6px;border:none;background:rgba(10,10,12,.7);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);transition:background var(--d);} .rth-btn:hover{background:rgba(10,10,12,.95);} .rth-empty{font-size:11px;color:var(--text3);padding:10px 0;text-align:center;} /* Drag */ .note-item.dragging{opacity:.25;background:var(--panel3);transform:scale(.98);} .note-item.moving-down{transform:translateY(12px);opacity:.72;} .note-item.moving-up{transform:translateY(-10px);opacity:.72;} .notes-list.drag-over{border-radius:8px;} .note-item.drag-over{border-color:var(--accent);background:var(--adim);} /* TASK DETAIL MODAL */ .task-ov{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:500;opacity:0;pointer-events:none;transition:opacity .2s var(--ease);} .task-ov.on{opacity:1;pointer-events:all;} .task-modal{background:var(--panel);border:1px solid var(--border2);border-radius:20px;width:720px;max-width:calc(100vw - 24px);max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;box-shadow:var(--shadow);transform:translateY(10px) scale(.98);transition:transform .2s var(--ease);} .task-ov.on .task-modal{transform:none;} .task-mh{display:flex;align-items:center;gap:10px;padding:17px 20px;border-bottom:1px solid var(--border);} .task-title-inp{flex:1;background:none;border:none;outline:none;font-size:14px;font-weight:600;color:var(--text);font-family:'Geist',sans-serif;letter-spacing:-.02em;} .task-mclose{width:26px;height:26px;border:none;background:transparent;color:var(--text3);cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all var(--d);flex-shrink:0;} .task-mclose:hover{background:var(--panel2);color:var(--text);} .task-mbody{padding:18px 20px;display:flex;flex-direction:column;gap:14px;flex:1;} .task-section{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--border);background:var(--panel2);border-radius:16px;} .task-slbl{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);} .task-notes-inp{background:transparent;border:none;border-radius:12px;color:var(--text);font-family:'Geist',sans-serif;font-size:12.5px;padding:0;outline:none;min-height:108px;resize:none;transition:border-color var(--d);width:100%;line-height:1.7;} .task-notes-inp:focus{border-color:var(--accent);} .task-links{display:flex;flex-direction:column;gap:5px;} .task-link-item{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--panel);border-radius:12px;border:1px solid var(--border);} .task-link-url{flex:1;font-size:11.5px;color:var(--accent);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Geist Mono',monospace;} .task-link-url:hover{text-decoration:underline;} .task-link-del{width:18px;height:18px;border:none;background:transparent;color:var(--text3);cursor:pointer;border-radius:3px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--d);} .task-link-del:hover{background:var(--ddim);color:var(--danger);} .task-link-add{display:flex;gap:8px;} .task-link-inp{flex:1;background:var(--panel);border:1px solid var(--border);border-radius:12px;color:var(--text);font-family:'Geist Mono',monospace;font-size:11.5px;padding:11px 12px;outline:none;transition:border-color var(--d);} .task-link-inp:focus{border-color:var(--accent);} .task-imgs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;} .task-img-item{aspect-ratio:16/9;border-radius:12px;overflow:hidden;position:relative;background:var(--panel);} .task-img-item img{width:100%;height:100%;object-fit:cover;} .task-img-del{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:8px;background:rgba(10,10,12,.78);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--d),transform var(--d);} .task-img-item:hover .task-img-del{opacity:1;} .task-img-tools{position:absolute;top:8px;right:8px;display:flex;gap:6px;} .task-img-add{aspect-ratio:16/9;border-radius:12px;border:1.5px dashed var(--border2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--d);color:var(--text3);position:relative;background:linear-gradient(180deg, rgba(255,255,255,.015), transparent);} .task-img-add:hover{border-color:var(--accent);color:var(--accent);background:var(--aglow);} .task-img-add input{position:absolute;inset:0;opacity:0;cursor:pointer;} .task-img-add.empty{grid-column:1/-1;min-height:154px;aspect-ratio:auto;justify-content:center;padding:0;} .task-img-add-body{display:flex;align-items:center;justify-content:center;width:100%;height:100%;} .task-img-add-icon{width:44px;height:44px;border-radius:14px;background:rgba(10,10,12,.5);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .task-mfoot{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-top:1px solid var(--border);gap:14px;} .task-assignee{display:flex;align-items:center;gap:8px;} .task-assign-lbl{font-size:11px;color:var(--text3);} .task-assign-sel{background:var(--panel2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:11.5px;padding:4px 8px;outline:none;cursor:pointer;font-family:'Geist',sans-serif;} .task-assign-sel:focus{border-color:var(--accent);} .task-meta-grid{display:flex;gap:10px;flex:1;align-items:center;flex-wrap:wrap;} .task-meta-field{display:flex;flex-direction:column;gap:5px;min-width:0;position:relative;} .task-date-wrap{position:relative;} .task-date-btn{height:40px;min-width:180px;padding:0 40px 0 14px;border-radius:12px;border:1px solid var(--border);background:var(--panel2);color:var(--text);font-size:12px;font-family:'Geist',sans-serif;cursor:pointer;text-align:left;transition:all var(--d);display:inline-flex;align-items:center;gap:10px;position:relative;} .task-date-btn:hover,.task-date-wrap.open .task-date-btn{border-color:var(--border2);background:var(--panel3);} .task-date-btn svg{color:var(--text3);flex-shrink:0;transition:color var(--d);} .task-date-wrap.open .task-date-btn svg,.task-date-btn:hover svg{color:var(--accent);} .task-date-wrap.has-date .task-date-btn{color:var(--accent);} .task-date-wrap.has-date .task-date-btn svg{color:var(--accent);} .task-date-wrap.has-date.open .task-date-btn,.task-date-wrap.has-date .task-date-btn:hover{color:var(--accent);} .task-date-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:22px;height:22px;border:none;border-radius:999px;background:transparent;color:var(--text3);display:none;align-items:center;justify-content:center;cursor:pointer;transition:all var(--d);z-index:2;} .task-date-wrap.has-date .task-date-clear{display:inline-flex;} .task-date-clear:hover{background:var(--panel3);color:var(--text);} .task-date-native{width:100%;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--panel);color:var(--text);padding:0 12px;font-size:12px;font-family:'Geist',sans-serif;outline:none;} .task-date-pop{position:absolute;left:0;bottom:calc(100% + 10px);width:288px;padding:14px;border-radius:20px;border:1px solid var(--border2);background:linear-gradient(180deg,var(--panel) 0%,var(--bg2) 100%);box-shadow:0 20px 48px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.03);display:flex;flex-direction:column;gap:12px;z-index:8;opacity:0;transform:translateY(8px) scale(.985);transform-origin:bottom left;pointer-events:none;visibility:hidden;transition:opacity .18s var(--ease),transform .22s var(--ease),visibility .22s;} .task-date-wrap.open .task-date-pop{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;visibility:visible;} .task-date-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:2px;} .task-date-month{font-size:17px;font-weight:600;letter-spacing:-.04em;color:var(--text);} .task-date-nav{width:30px;height:30px;border:1px solid var(--border);border-radius:999px;background:var(--panel2);color:var(--text2);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--d);} .task-date-nav:hover{background:var(--panel3);border-color:var(--border2);color:var(--text);} .task-date-weekdays,.task-date-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;} .task-date-grid{min-height:210px;align-content:start;} .task-date-weekdays span{font-size:10px;font-weight:500;color:var(--text3);text-align:center;padding:2px 0 4px;} .task-date-cell{aspect-ratio:1/1;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--text);font-size:12px;font-weight:500;font-family:'Geist',sans-serif;cursor:pointer;transition:transform .16s var(--ease),background .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease),color .16s var(--ease),opacity .16s var(--ease);display:grid;place-items:center;line-height:1;position:relative;} .task-date-cell:hover{background:var(--panel2);border-color:var(--border);transform:translateY(-1px) scale(1.03);} .task-date-cell.muted{color:var(--text3);opacity:.38;} .task-date-cell.active{background:var(--accent);border-color:var(--accent);color:#ffffff;box-shadow:0 0 0 5px var(--adim);} .task-date-cell.today{border-color:var(--border2);background:rgba(255,255,255,.02);} .task-date-cell.active.today{border-color:var(--accent);background:var(--accent);color:#ffffff;box-shadow:0 0 0 5px var(--adim);} .task-priority-toggle{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 4px 0 0;} .task-priority-toggle input{position:absolute;opacity:0;pointer-events:none;} .task-priority-switch{width:50px;height:28px;border-radius:999px;background:var(--panel3);border:1px solid var(--border);position:relative;transition:all var(--d);cursor:pointer;display:inline-flex;align-items:center;} .task-priority-switch::after{content:'';position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:var(--text3);transition:all var(--d);box-shadow:0 2px 8px rgba(0,0,0,.24);} .task-priority-toggle input:checked + .task-priority-switch{background:var(--ddim);border-color:rgba(255,92,92,.22);} .task-priority-toggle input:checked + .task-priority-switch::after{left:24px;background:var(--danger);} .task-priority-pill{font-size:11px;color:var(--text3);letter-spacing:.02em;} .task-side-actions{display:flex;align-items:flex-end;gap:8px;padding-left:12px;} .note-badge.priority-urgent{background:rgba(255,92,92,.12);color:var(--danger);border-color:rgba(255,92,92,.25);} .note-badge.priority-insane{background:rgba(255,88,88,.12);color:#ff8d8d;border-color:rgba(255,88,88,.3);box-shadow:none;} .note-badge.due-overdue{background:rgba(255,92,92,.12);color:var(--danger);border-color:rgba(255,92,92,.25);} .note-badge.due-soon{background:var(--gdim);color:var(--gold);border-color:rgba(242,212,107,.24);} .task-priority-toggle.insane .task-priority-switch{background:rgba(255,88,88,.08);border:1px dashed rgba(255,88,88,.72);box-shadow:none;position:relative;overflow:hidden;animation:insaneSteady 1.7s ease-in-out infinite;} .task-priority-toggle.insane .task-priority-switch::before{display:none;} .task-priority-toggle.insane .task-priority-switch::after{left:24px;background:#ff6666;box-shadow:0 0 0 4px rgba(255,88,88,.12);} .task-priority-toggle.insane .task-priority-pill{color:#ff8d8d;} .note-actions{opacity:0;transition:opacity var(--d);} .grid,.bento-grid,#grid-fav,#grid-prompts,#grid-workflows,#grid-tools,#grid-thumbs,#home-grid,#home-grid-2{content-visibility:auto;contain:layout style paint;contain-intrinsic-size:720px;} .note-item:hover .note-actions{opacity:1;} @keyframes insaneSteady{ 0%,100%{border-color:rgba(255,88,88,.68);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);} 50%{border-color:rgba(255,110,110,.92);box-shadow:0 0 0 1px rgba(255,88,88,.08),inset 0 1px 0 rgba(255,255,255,.06);} } .ctxmenu{position:fixed;z-index:740;min-width:184px;max-width:240px;padding:6px;border-radius:14px;border:1px solid rgba(255,255,255,.055);background:rgba(12,12,14,.97);backdrop-filter:blur(18px);box-shadow:0 16px 34px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.025);display:none;flex-direction:column;gap:2px;} .ctxmenu.on{display:flex;} .ctxmenu-head{padding:4px 7px 6px;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);} .ctxmenu-item{width:100%;min-height:32px;padding:0 9px;border:none;border-radius:10px;background:transparent;color:var(--text2);font:600 11px 'Geist',sans-serif;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;transition:background var(--d),color var(--d),transform var(--d);} .ctxmenu-item:hover{background:var(--panel3);color:var(--text);transform:none;} .ctxmenu-item.danger{color:#ffb7a9;} .ctxmenu-item.danger:hover{background:rgba(255,120,96,.1);color:#ffd0c3;} .ctxmenu-item.accent{color:#ff8d8d;} .ctxmenu-item.accent:hover{background:rgba(255,88,88,.1);} .ctxmenu-item small{font-size:9px;color:var(--text3);font-weight:600;letter-spacing:.02em;} .ctxmenu-main{display:flex;align-items:center;gap:8px;min-width:0;flex:1;} .ctxmenu-icon{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;color:currentColor;opacity:.92;flex:0 0 auto;} .ctxmenu-label{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;} .ctxmenu-sep{height:1px;margin:3px 0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);} html.viewport-zooming *, html.viewport-zooming *::before, html.viewport-zooming *::after{ transition:none!important; } html.viewport-zooming .topbar, html.viewport-zooming .tfbar{ position:relative!important; top:auto!important; } html.viewport-zooming #app::before, html.viewport-zooming .lbox, html.viewport-zooming .dropov, html.viewport-zooming .ov, html.viewport-zooming .confov, html.viewport-zooming .task-ov, html.viewport-zooming .newtag-ov, html.viewport-zooming .talent-modal-ov, html.viewport-zooming .mockups-preview-bar, html.viewport-zooming .pbtn, html.viewport-zooming .pcheck, html.viewport-zooming .lnav, html.viewport-zooming .ltag, html.viewport-zooming .rth-btn, html.viewport-zooming #selbar{ backdrop-filter:none!important; } html.viewport-zooming .card, html.viewport-zooming .tcard, html.viewport-zooming .pcard, html.viewport-zooming .bento, html.viewport-zooming .grid, html.viewport-zooming .bento-grid, html.viewport-zooming #grid-fav, html.viewport-zooming #grid-prompts, html.viewport-zooming #grid-workflows, html.viewport-zooming #grid-tools, html.viewport-zooming #grid-thumbs, html.viewport-zooming #home-grid, html.viewport-zooming #home-grid-2, html.viewport-zoomed .card, html.viewport-zoomed .tcard, html.viewport-zoomed .pcard, html.viewport-zoomed .bento, html.viewport-zoomed .grid, html.viewport-zoomed .bento-grid, html.viewport-zoomed #grid-fav, html.viewport-zoomed #grid-prompts, html.viewport-zoomed #grid-workflows, html.viewport-zoomed #grid-tools, html.viewport-zoomed #grid-thumbs, html.viewport-zoomed #home-grid, html.viewport-zoomed #home-grid-2{ content-visibility:visible!important; contain:none!important; } /* -- LIGHT MODE: white text on blue accent backgrounds */ body.light .addbtn{color:#ffffff;} body.light .bsave{color:#ffffff;} body.light .gbtn{color:#ffffff;} body.light .note-submit{color:#ffffff;} body.light .tp-flash{color:#1A23CE!important;} body.light .wfn{color:#1A23CE;background:rgba(15,19,92,.1);} body.light .svn{background:rgba(15,19,92,.1);color:#1A23CE;} body.light .ib.cp:hover{background:rgba(15,19,92,.1);color:#1A23CE;} body.light .navbtn.on .nvcnt{color:#1A23CE;} body.light .tpill.on{color:#1A23CE;} body.light .note-badge.has-content{background:rgba(15,19,92,.1);border-color:rgba(15,19,92,.3);color:#1A23CE;} body.light #boxsel{border-color:#1A23CE;background:rgba(15,19,92,.07);} body.light .tdot{background:#1A23CE;} body.light .cflash{background:rgba(15,19,92,.07);} body.light .cpill{background:rgba(245,245,255,.95);color:#1A23CE;border-color:rgba(15,19,92,.25);} body.light .rtag:hover{border-color:#1A23CE;color:#1A23CE;background:rgba(15,19,92,.07);} body.light .addstep:hover{border-color:#1A23CE;color:#1A23CE;} body.light .gadd:hover{border-color:#1A23CE;color:#1A23CE;} body.light .tgadd:hover{border-color:#1A23CE;color:#1A23CE;} body.light .tp-item:hover{background:rgba(15,19,92,.06);border-color:rgba(15,19,92,.2);} body.light .note-drop-line{background:#1A23CE!important;} body.light .notes-list.drag-over{background:rgba(15,19,92,.06)!important;} body.light .pbtn{background:rgba(240,240,248,.88)!important;color:#111116!important;} body.light .pbtn:hover{background:#fff!important;color:#111116!important;} body.light .pbtns .pbtn{background:rgba(255,255,255,.92)!important;color:#111116!important;} body.light .pbtns .pbtn:hover{background:#fff!important;} body.light .pbtns .pbtn.dl:hover{background:rgba(224,53,53,.12)!important;color:#e03535!important;} body.light .pcheck{border-color:rgba(0,0,0,.3);background:rgba(240,240,248,.7);} body.light .pcard.sel .pcheck{background:#1A23CE;border-color:#1A23CE;} body.light #selbar{background:#fff;border-color:#e2e2e8;} body.light .selbtn{background:#f4f4f7;color:#111116;} body.light .selbtn:hover{background:#ebebef;color:#111116;} body.light .selbtn.danger:hover{background:rgba(224,53,53,.1);color:#e03535;} body.light .lclose{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.2);color:#fff;} body.light .lclose:hover{background:rgba(255,255,255,.25);color:#fff;} body.light .ltag{background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.8);} body.light .dropov{background:rgba(240,240,248,.9);} body.light .dropov .dropinner{color:#1A23CE;} body.light .selcnt{color:#505060;} body.light .seldeselect{color:#a0a0b0;} body.light .seldeselect:hover{background:#f4f4f7;color:#505060;} body.light .pcheck{border-color:rgba(255,255,255,.8);background:rgba(255,255,255,.55);} body.light .pcard.sel .pcheck{background:#1A23CE;border-color:#1A23CE;} body.light .pcard.sel .pcheck svg{stroke:#ffffff!important;} /* LIGHTBOX NAVIGATION */ .limg-wrap{display:flex;align-items:center;justify-content:center;max-width:calc(100vw - 140px);max-height:88vh;} .lnav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);transition:background var(--d),opacity var(--d);opacity:0;z-index:10;} .lbox.on .lnav{opacity:1;} .lnav:hover{background:rgba(255,255,255,.22);} .lnav:active{background:rgba(255,255,255,.3);} .lprev{left:24px;} .lnext{right:24px;} .lnav:disabled{opacity:.2!important;cursor:default;} .lcounter{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);font-size:11.5px;color:rgba(255,255,255,.55);font-family:"Geist Mono",monospace;letter-spacing:.05em;pointer-events:none;} /* NEW TAG APPROVAL */ .newtag-ov{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:600;opacity:0;pointer-events:none;transition:opacity .2s;} .newtag-ov.on{opacity:1;pointer-events:all;} .newtag-box{background:var(--panel);border:1px solid var(--border2);border-radius:var(--rlg);width:440px;max-width:calc(100vw - 24px);box-shadow:var(--shadow);transform:translateY(10px) scale(.98);transition:transform .2s;} .newtag-ov.on .newtag-box{transform:none;} /* -- AI CHAT BUTTON */ body.light .bicon svg,body.light .glogo svg,body.light #loader svg{color:var(--brand);} /* SLEEK REDESIGN */ :root{ --bg:#050505; --bg2:#0a0a0a; --panel:#111111; --panel2:#181818; --panel3:#202020; --border:#242424; --border2:#2d2d2d; --text:#f4f4f1; --text2:#b6b6b0; --text3:#74746f; --accent:#1A23CE; --secondary:#0F135C; --adim:rgba(15,19,92,.42); --aglow:rgba(15,19,92,.24); --danger:#ff5c5c; --ddim:rgba(255,92,92,.11); --gold:#f2d46b; --gdim:rgba(242,212,107,.14); --r:12px; --rsm:10px; --rlg:18px; --shadow:0 10px 30px rgba(0,0,0,.26); --shadow-sm:0 4px 14px rgba(0,0,0,.18); } body.light{ --bg:#f4f2ed; --bg2:#ece8e1; --panel:#ffffff; --panel2:#f7f4ef; --panel3:#ede8e0; --border:#e3ddd3; --border2:#d4cdc1; --text:#141412; --text2:#56544f; --text3:#8f8a81; --accent:#1A23CE; --secondary:#0F135C; --adim:rgba(15,19,92,.12); --aglow:rgba(15,19,92,.06); --danger:#d94a4a; --ddim:rgba(217,74,74,.10); --gold:#aa7c12; --gdim:rgba(170,124,18,.12); --shadow:0 10px 30px rgba(20,18,14,.08); --shadow-sm:0 4px 14px rgba(20,18,14,.06); } body{ background: radial-gradient(circle at top left, rgba(255,255,255,.025), transparent 28%), linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%); } .sb, .main, .content{ background:transparent; } .sb{ background:rgba(8,8,8,.94); } body.light .sb{ background:rgba(244,242,237,.9); } .topbar, .tfbar{ background:rgba(7,7,7,.92); backdrop-filter:blur(18px); } body.light .topbar, body.light .tfbar{ background:rgba(244,242,237,.88); } .topbar{ padding:0 18px; box-shadow:inset 0 -1px 0 rgba(255,255,255,.04); } body.light .topbar{ box-shadow:inset 0 -1px 0 rgba(20,18,14,.05); } .tfbar{ padding:0 18px 6px; height:auto; min-height:44px; align-items:flex-end; } .content{ padding:16px 18px 22px; } .sbox, .zbtns, .themetog, .thtogbtn, .navbtn.on, .tpill, .note-item, .tp-item, .stat-card, .task-link-item, .task-assign-sel, .field input, .field textarea, .stepinp, .tagbox, .task-notes-inp, .task-link-inp, .confbox, .modal, .mmod, .task-modal, .newtag-box, #selbar{ border-color:var(--border); } .sbox, .zbtns, .themetog, .thtogbtn, .tpill, .note-item, .tp-item, .stat-card, .task-link-item, .task-assign-sel, .field input, .field textarea, .stepinp, .tagbox, .task-notes-inp, .task-link-inp{ background:var(--panel2); } .card, .tcard, .pcard, .bento, .modal, .mmod, .task-modal, .confbox, .newtag-box, #selbar{ background:var(--panel); border:1px solid rgba(255,255,255,.04); box-shadow:var(--shadow); } body.light .card, body.light .tcard, body.light .pcard, body.light .bento, body.light .modal, body.light .mmod, body.light .task-modal, body.light .confbox, body.light .newtag-box, body.light #selbar{ border-color:rgba(20,18,14,.06); } .card:hover, .tcard:hover, .pcard:hover, .bento:hover{ box-shadow:0 14px 36px rgba(0,0,0,.32); } body.light .card:hover, body.light .tcard:hover, body.light .pcard:hover, body.light .bento:hover{ box-shadow:0 14px 36px rgba(20,18,14,.1); } .bento.bento-shared{ background: radial-gradient(circle at 10% 100%, rgba(15,19,92,.038) 0%, rgba(15,19,92,.014) 18%, transparent 38%), linear-gradient(180deg, rgba(15,19,92,.005) 0%, rgba(15,19,92,.0025) 100%), linear-gradient(180deg,var(--panel) 0%,var(--panel) 100%); border:1px dashed rgba(15,19,92,.13); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.03); } .bento.bento-shared:hover{ border-color:rgba(15,19,92,.16); box-shadow:0 14px 36px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.03); } body.light .bento.bento-shared{ border-color:rgba(15,19,92,.14); box-shadow:0 12px 28px rgba(20,18,14,.08), inset 0 1px 0 rgba(255,255,255,.7); } .navbtn, .sbtog, .zbtn, .themetog, .thtogbtn, .ib, .tb2, .note-btn, .task-mclose, .mclose, .mx, .bento-action, .seldeselect{ border:none; } .navbtn{ border-radius:10px; color:var(--text2); } .navbtn:hover{ background:var(--panel2); } .navbtn.on{ background:var(--panel2); box-shadow:inset 0 0 0 1px rgba(255,255,255,.045); } body.light .navbtn.on{ box-shadow:inset 0 0 0 1px rgba(20,18,14,.06); } .navbtn.on::after{ width:4px; height:18px; left:2px; } .nvcnt, .note-badge, .tp-tag, .ctag, .rtag, .ltag{ background:var(--panel3); border-color:transparent; } .tpill{ padding:5px 11px; background:var(--panel2); color:var(--text2); border:1px solid transparent; } .tpill:hover{ background:var(--panel3); color:var(--text); } .tpill.on{ background:var(--adim); border-color:rgba(15,19,92,.28); } body.light .tpill.on{ border-color:rgba(15,19,92,.24); } .sbox, .zbtns, .themetog, .thtogbtn{ border:1px solid transparent; } .sbox:focus-within, .themetog:hover, .thtogbtn:hover, .zbtn:hover{ background:var(--panel3); } .addbtn, .bsave, .gbtn, .note-submit{ box-shadow:none; } .addbtn{ height:34px; padding:0 15px; border-radius:11px; } .gadd, .tgadd, .addstep, .uz, .task-img-add, .note-add{ background:rgba(255,255,255,.012); border-color:var(--border); } body.light .gadd, body.light .tgadd, body.light .addstep, body.light .uz, body.light .task-img-add, body.light .note-add{ background:rgba(20,18,14,.018); } .note-add:focus-within, .uz:hover, .gadd:hover, .tgadd:hover, .addstep:hover, .task-img-add:hover{ border-color:var(--accent); background:var(--aglow); } .bento-h, .mh, .mfoot, .task-mh, .task-mfoot{ border-color:rgba(255,255,255,.05); } body.light .bento-h, body.light .mh, body.light .mfoot, body.light .task-mh, body.light .task-mfoot{ border-color:rgba(20,18,14,.06); } .bento-h{ padding:15px 16px 10px; } .bento-body{ padding:0 16px 14px; } .dash{ gap:16px; padding:18px 18px 24px; } .dash-time{ background:var(--panel); border-color:rgba(255,255,255,.05); } body.light .dash-time{ border-color:rgba(20,18,14,.06); } .stat-card{ border:1px solid transparent; } .note-item, .tp-item, .task-link-item{ border:1px solid transparent; } .note-item:hover, .tp-item:hover{ background:var(--panel3); border-color:rgba(255,255,255,.045); } body.light .note-item:hover, body.light .tp-item:hover{ border-color:rgba(20,18,14,.06); } .cbody, .pfoot{ padding-left:12px; padding-right:12px; } .cfoot{ padding:6px 10px 10px; } .pbtn, .rth-btn{ background:rgba(8,8,8,.72); border:1px solid rgba(255,255,255,.06); } body.light .pbtn, body.light .rth-btn{ background:rgba(255,255,255,.92)!important; border:1px solid rgba(20,18,14,.06); } .lclose, .lnav{ background:rgba(15,15,15,.8); border:1px solid rgba(255,255,255,.08); } body.light .lclose, body.light .lnav{ background:rgba(255,255,255,.8); color:#141412; border-color:rgba(20,18,14,.08); } .dropov{ background:rgba(5,5,5,.82); } body.light .dropov{ background:rgba(244,242,237,.88); } /* POLISH V2 */ #app{ position:relative; } #app::before{ content:''; position:fixed; inset:0; pointer-events:none; background: radial-gradient(circle at 14% 10%, var(--aglow), transparent 26%), radial-gradient(circle at 85% 0%, rgba(255,255,255,.03), transparent 24%); opacity:.9; z-index:0; } .sb, .main, .topbar, .tfbar, .content{ position:relative; z-index:1; } .topbar{ position:sticky; top:0; z-index:40; } .tfbar{ position:sticky; top:54px; z-index:35; } .tbleft{ letter-spacing:-.04em; } .sbox{ width:280px; min-height:36px; box-shadow:inset 0 1px 0 rgba(255,255,255,.025); } body.light .sbox{ box-shadow:inset 0 1px 0 rgba(255,255,255,.7); } .sbox input{ font-size:12.5px; } .sbox input::placeholder{ letter-spacing:.01em; } .zbtn, .themetog, .thtogbtn, .note-submit, .addbtn, .bghst, .bsave, .boutl, .bcanc, .bdel, .selbtn, .seldeselect, .ib, .tb2, .pbtn, .rth-btn, .note-btn, .task-mclose, .mclose, .mx, .navbtn, .tp-item, .note-item, .tcard, .card, .pcard, .bento, .tpill{ transition: transform .22s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .22s var(--ease), color .18s var(--ease), opacity .18s var(--ease); } .addbtn:hover, .bsave:hover, .selbtn:hover, .zbtn:hover, .themetog:hover, .thtogbtn:hover, .bghst:hover, .boutl:hover, .bcanc:hover{ transform:translateY(-1px); } .navbtn:hover, .tp-item:hover, .note-item:hover, .ib:hover, .tb2:hover, .pbtn:hover, .rth-btn:hover{ transform:translateY(-1px); } .card:hover, .tcard:hover, .pcard:hover, .bento:hover{ transform:translateY(-2px); } .panel{ display:none; opacity:0; transform:translateY(8px); } .panel.on{ display:block; opacity:1; transform:none; animation:panelIn .34s var(--ease); } @keyframes panelIn{ from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:none;} } @keyframes riseFade{ from{opacity:0;transform:translateY(14px) scale(.985);} to{opacity:1;transform:none;} } .animate-in{ opacity:0; animation:riseFade .42s var(--ease) forwards; animation-delay:calc(var(--stagger, 0) * 28ms); } .empty-state{ grid-column:1/-1; min-height:280px; display:flex; align-items:center; justify-content:center; padding:28px; } .empty-card{ width:min(460px,100%); padding:28px 26px; border-radius:22px; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.05); text-align:center; box-shadow:var(--shadow-sm); } body.light .empty-card{ background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.65)); border-color:rgba(20,18,14,.06); } .empty-icon{ width:52px; height:52px; margin:0 auto 16px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:var(--panel2); color:var(--accent); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); font-size:22px; } body.light .empty-icon{ box-shadow:inset 0 0 0 1px rgba(20,18,14,.05); } .empty-title{ font-size:15px; font-weight:600; color:var(--text); margin-bottom:6px; letter-spacing:-.02em; } .empty-copy{ font-size:12.5px; color:var(--text2); line-height:1.65; max-width:34ch; margin:0 auto; } .toast{ min-width:220px; border-radius:14px; padding:11px 16px; backdrop-filter:blur(16px); background:rgba(17,17,17,.92); border-color:rgba(255,255,255,.06); } body.light .toast{ background:rgba(255,255,255,.88); border-color:rgba(20,18,14,.08); } .tdot{ box-shadow:0 0 0 6px var(--aglow); } .tp-empty{ padding:24px 0; font-size:12.5px; } .note-add, .tagbox, .field input, .field textarea, .task-link-inp, .task-notes-inp, .stepinp, .task-assign-sel{ box-shadow:inset 0 1px 0 rgba(255,255,255,.02); } body.light .note-add, body.light .tagbox, body.light .field input, body.light .field textarea, body.light .task-link-inp, body.light .task-notes-inp, body.light .stepinp, body.light .task-assign-sel{ box-shadow:inset 0 1px 0 rgba(255,255,255,.7); } input:focus-visible, textarea:focus-visible, button:focus-visible, select:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--aglow); } .content::-webkit-scrollbar{ width:8px; } .content::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.09); border-radius:999px; } body.light .content::-webkit-scrollbar-thumb{ background:rgba(20,18,14,.12); } .access-role.talent{color:var(--accent);border-color:rgba(15,19,92,.14);background:rgba(15,19,92,.07);} #panel-mockups{height:calc(100dvh - 132px);min-height:0;overflow:hidden;} #panel-mockups.on{display:block;} #mockups-root{height:100%;min-height:0;overflow:hidden;} .mockups-shell{display:grid;grid-template-columns:minmax(320px,360px) minmax(0,1fr) minmax(260px,300px);gap:20px;height:100%;min-height:0;align-items:stretch;overflow:hidden;} .mockups-shell>*{min-width:0;min-height:0;} #mockup-preview-slot{height:100%;min-height:0;overflow:hidden;} .mockups-panel{background:linear-gradient(180deg,rgba(255,255,255,.015),transparent 24%),var(--panel);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow-sm);padding:16px;display:flex;flex-direction:column;gap:14px;min-height:0;overflow:hidden;} .mockups-panel.preview{padding:0;background:transparent;border:none;box-shadow:none;height:100%;display:flex;flex-direction:column;min-height:0;overflow:hidden;} .mockups-panel.settings{padding:14px 14px 16px;position:relative;overflow:visible;} .mockups-controls,.mockups-settings-stack{display:flex;flex-direction:column;gap:14px;min-height:0;height:100%;overflow:auto;scrollbar-width:none;} .mockups-controls::-webkit-scrollbar,.mockups-settings-stack::-webkit-scrollbar{display:none;} .mockups-settings-stack{gap:12px;flex:1;height:auto;} .mockups-history-wrap{position:relative;z-index:24;flex-shrink:0;align-self:flex-end;width:124px;} .mockups-history-trigger{width:124px;height:42px;padding:0 11px;border-radius:13px;border:1px solid var(--border);background:var(--panel2);color:var(--text2);font-family:'Geist',sans-serif;font-size:11.5px;font-weight:650;display:flex;align-items:center;gap:9px;cursor:pointer;transition:background var(--d),border-color var(--d),color var(--d);} .mockups-history-trigger:hover,.mockups-history-trigger.on{background:var(--panel3);border-color:var(--border2);color:var(--text);} .mockups-history-trigger>span{flex:1;text-align:left;} .mockups-history-chevron{margin-left:auto;transform:rotate(180deg);transition:transform var(--d);} .mockups-history-trigger.on .mockups-history-chevron{transform:rotate(0);} .mockups-history-menu{position:absolute;bottom:calc(100% + 8px);right:0;width:276px;max-height:min(560px,calc(100dvh - 190px));border:1px solid var(--border2);border-radius:16px;background:rgba(18,18,18,.98);box-shadow:0 24px 60px rgba(0,0,0,.46);overflow:hidden;display:flex;flex-direction:column;backdrop-filter:blur(18px);z-index:30;} .mockups-history-kicker{padding:14px 14px 9px;font-size:9.5px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:var(--text3);} .mockups-history-list{padding:0 7px 7px;display:flex;flex-direction:column;gap:3px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;} .mockups-history-item{width:100%;min-height:82px;padding:8px;border:0;border-radius:11px;background:transparent;color:var(--text);display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;align-items:center;text-align:left;font-family:'Geist',sans-serif;cursor:pointer;transition:background var(--d);} .mockups-history-item:hover{background:rgba(255,255,255,.055);} .mockups-history-preview{width:76px;aspect-ratio:16/10;border-radius:8px;background:var(--panel3);overflow:hidden;display:flex;align-items:center;justify-content:center;} .mockups-history-preview img{width:100%;height:100%;object-fit:cover;display:block;} .mockups-history-preview i{font-size:9px;font-style:normal;color:var(--text3);} .mockups-history-meta{min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.15;} .mockups-history-meta strong{font-size:11.5px;font-weight:650;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .mockups-history-meta small,.mockups-history-meta time{font-size:10px;font-weight:450;color:var(--text3);} .mockups-history-meta time{margin-top:2px;} .mockups-history-empty{min-height:120px;padding:24px 20px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:10.5px;line-height:1.5;color:var(--text3);} .mockups-history-clear{height:42px;padding:0 14px;border:0;border-top:1px solid var(--border);background:transparent;color:var(--text2);font-family:'Geist',sans-serif;font-size:11px;font-weight:600;display:flex;align-items:center;gap:9px;cursor:pointer;transition:background var(--d),color var(--d);} .mockups-history-clear:hover{background:rgba(255,255,255,.035);color:var(--text);} .mockups-history-clear.armed{color:#f39a9a;background:rgba(179,55,55,.08);} .mockups-settings-section{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:18px;background:var(--panel2);border:1px solid var(--border);} .mockups-settings-head{display:flex;align-items:center;justify-content:space-between;gap:10px;} .mockups-settings-kicker,.mockups-field-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);} .mockups-settings-copy{font-size:11px;line-height:1.55;color:var(--text3);} .mockups-field{display:flex;flex-direction:column;gap:7px;} .mockups-label-row{display:flex;align-items:center;justify-content:space-between;gap:10px;} .mockups-limit-note{display:none;font-size:10px;font-weight:600;letter-spacing:.04em;color:#f5c842;white-space:nowrap;flex-shrink:0;} .mockups-limit-note.on{display:block;} .mockups-input,.mockups-select,.mockups-textarea,.mockups-mini-input{width:100%;border:1px solid var(--border);background:var(--panel2);color:var(--text);outline:none;transition:border-color var(--d),background var(--d),color var(--d);font-family:'Geist',sans-serif;} .mockups-input,.mockups-select,.mockups-mini-input{height:44px;border-radius:14px;padding:0 13px;font-size:12px;line-height:1.2;} .mockups-textarea{min-height:92px;border-radius:16px;padding:13px 13px;font-size:13px;line-height:1.45;resize:none;} .mockups-input:focus,.mockups-select:focus,.mockups-textarea:focus,.mockups-mini-input:focus{border-color:var(--accent);background:var(--panel);} .mockups-upload-grid{display:grid;grid-template-columns:1fr;gap:10px;} .mockups-upload-grid.multi{grid-template-columns:repeat(2,minmax(0,1fr));} .mockups-upload-grid.dual{grid-template-columns:repeat(2,minmax(0,1fr));} .mockups-upload-grid.concept{grid-template-columns:repeat(3,minmax(0,1fr));} .mockups-upload-grid.concept-four{grid-template-columns:repeat(2,minmax(0,1fr));} .mockups-upload-slot{display:flex;flex-direction:column;gap:7px;} .mockups-upload-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;} .mockups-upload-index{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);} .mockups-upload{position:relative;border:1px solid var(--border);border-radius:18px;aspect-ratio:16/9;min-height:0;background:var(--panel2);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;} .mockups-upload.drag-over{border-color:rgba(255,255,255,.62);background:var(--panel3);box-shadow:0 0 0 3px rgba(255,255,255,.10),0 14px 28px rgba(0,0,0,.26);} .mockups-upload.drag-over::after{content:'Drop here';position:absolute;inset:8px;border-radius:14px;border:1px dashed rgba(255,255,255,.46);background:rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;backdrop-filter:blur(2px);pointer-events:none;z-index:4;} .mockups-upload input{position:absolute;inset:0;opacity:0;cursor:pointer;} .mockups-upload-empty{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--text3);text-align:center;padding:22px;} .mockups-upload-icon{width:40px;height:40px;border-radius:14px;border:1px solid var(--border);background:var(--panel3);display:flex;align-items:center;justify-content:center;color:var(--accent);} .mockups-upload-title{font-size:12px;font-weight:600;color:var(--text);} .mockups-upload img{width:100%;height:100%;object-fit:cover;display:block;} .mockups-upload-clear{position:absolute;right:10px;top:10px;width:34px;height:34px;border:none;border-radius:12px;background:rgba(13,13,15,.86);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;box-shadow:0 8px 20px rgba(0,0,0,.3);transition:transform var(--d),background var(--d);} .mockups-upload-clear:hover{transform:translateY(-1px);background:#101012;} .mockups-row{display:grid;grid-template-columns:108px minmax(0,1fr);gap:10px;} .mockups-age-row{display:grid;grid-template-columns:72px minmax(94px,1fr);gap:8px;align-items:stretch;} .mockups-search-wrap{position:relative;} .mockups-search-bar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;} .mockups-search-bar:not(.has-clear){grid-template-columns:minmax(0,1fr) auto;} .mockups-search-clear{width:42px;height:42px;border-radius:12px;border:1px solid var(--border);background:var(--panel2);color:var(--text3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--d);} .mockups-search-clear:hover{background:var(--panel3);border-color:var(--border2);color:var(--text);} .mockups-channel-rail{display:flex;flex-direction:column;gap:10px;} .mockups-channel-group{display:flex;flex-direction:column;gap:8px;} .mockups-channel-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);} .mockups-channel-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(54px,1fr));justify-content:stretch;gap:12px 10px;padding:2px 0 4px;} .mockups-channel-pill{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;min-width:0;border:none;background:none;color:var(--text3);cursor:pointer;padding:0;transition:transform var(--d),color var(--d);} .mockups-channel-pill:hover{transform:translateY(-1px);color:var(--text);} .mockups-channel-pill.on .mockups-channel-pill-avatar{border-color:rgba(255,255,255,.30);box-shadow:0 0 0 3px rgba(255,255,255,.08);} .mockups-channel-pill-avatar{width:44px;height:44px;border-radius:999px;object-fit:cover;border:2px solid transparent;background:var(--panel3);} .mockups-channel-pill-name{max-width:100%;font-size:10px;line-height:1.15;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .mockups-channel-empty{display:flex;align-items:center;justify-content:center;min-height:64px;padding:0 14px;border-radius:16px;border:1px dashed var(--border);background:var(--panel2);font-size:11px;color:var(--text3);} .mockups-settings-btn,.mockups-search-btn,.mockups-btn,.mockups-template-card,.mockups-count-chip,.mockups-mode-option{min-height:42px;padding:0 15px;border-radius:12px;border:1px solid var(--border);background:var(--panel2);color:var(--text2);font-size:11.5px;font-weight:600;font-family:'Geist',sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;line-height:1;transition:all var(--d);} .mockups-settings-btn:hover,.mockups-search-btn:hover,.mockups-btn:hover,.mockups-template-card:hover,.mockups-count-chip:hover,.mockups-mode-option:hover{background:var(--panel3);border-color:var(--border2);color:var(--text);} .mockups-btn.primary{background:var(--accent);border-color:var(--accent);color:#ffffff;} .mockups-btn.primary:hover{filter:brightness(1.04);} .mockups-channel-avatar{width:34px;height:34px;border-radius:999px;object-fit:cover;background:var(--panel3);border:1px solid var(--border);} .mockups-channel-star{width:28px;height:28px;border-radius:999px;border:1px solid var(--border);background:var(--panel3);color:var(--text3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--d);} .mockups-channel-star:hover{color:var(--accent);border-color:rgba(15,19,92,.22);} .mockups-channel-star.on{color:var(--text);border-color:rgba(255,255,255,.12);background:var(--panel3);} .mockups-selected{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.09);background:var(--panel2);} .mockups-selected-meta{display:flex;align-items:center;gap:10px;min-width:0;flex:1;} .mockups-selected-info{min-width:0;display:flex;align-items:center;justify-content:flex-start;flex:1;} .mockups-selected-name{display:flex;align-items:center;justify-content:flex-start;gap:6px;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;min-width:0;} .mockups-selected-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;} .mockups-verified{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;} .mockups-age-select{position:relative;min-width:0;} .mockups-age-btn{width:100%;min-width:0;height:44px;border-radius:14px;border:1px solid var(--border);background:var(--panel2);color:var(--text);padding:0 12px;display:flex;align-items:center;justify-content:space-between;font-family:'Geist',sans-serif;font-size:11.5px;cursor:pointer;gap:8px;} .mockups-age-btn:hover{border-color:var(--border2);background:var(--panel);} .mockups-age-menu{position:absolute;right:0;left:auto;width:100%;min-width:0;top:calc(100% + 8px);padding:5px;border-radius:14px;border:1px solid var(--border2);background:linear-gradient(180deg,var(--panel) 0%,var(--bg2) 100%);box-shadow:0 18px 42px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:2px;z-index:18;} .mockups-age-option{min-height:30px;padding:0 10px;border:none;border-radius:10px;background:transparent;color:var(--text2);font-size:11px;font-family:'Geist',sans-serif;display:flex;align-items:center;justify-content:flex-start;cursor:pointer;} .mockups-age-option:hover,.mockups-age-option.on{background:var(--panel2);color:var(--text);} .mockups-actions{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8px;justify-content:stretch;margin-top:auto;padding-top:4px;} .mockups-actions.single{grid-template-columns:1fr;} .mockups-template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;} .mockups-template-card{aspect-ratio:1/1;min-height:unset;height:auto;padding:10px;justify-content:center;align-items:center;flex-direction:column;gap:0;text-align:center;border-radius:16px;} .mockups-template-card.on{border-color:rgba(255,255,255,.10);background:var(--panel3);color:var(--text);} .mockups-template-title{font-size:11.5px;font-weight:650;color:var(--text);line-height:1.18;white-space:normal;} .mockups-template-copy{display:none;} .mockups-count-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;} .mockups-count-row.concept{grid-template-columns:repeat(3,minmax(0,1fr));} .mockups-count-chip.on{border-color:rgba(255,255,255,.10);background:var(--panel3);color:var(--text);} .mockups-inline-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;} .mockups-subscriber-row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:center;} .mockups-mode-segment{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border-radius:16px;border:1px solid var(--border);background:var(--panel3);} .mockups-mode-option{min-height:38px;border:none;background:transparent;color:var(--text3);gap:7px;} .mockups-mode-option.on{background:var(--panel);color:var(--text);box-shadow:0 10px 24px rgba(0,0,0,.18);} .mockups-mode-option svg{flex-shrink:0;} .mockups-stage{flex:1 1 0;min-height:0;border-radius:24px;background:transparent;display:flex;align-items:center;justify-content:center;padding:4px 0;overflow:hidden;position:relative;touch-action:none;} .mockups-stage.space-ready{cursor:grab;} .mockups-stage.panning{cursor:grabbing;} .mockups-stage.drag-over::before{content:'';position:absolute;inset:12px;border-radius:22px;border:2px dashed rgba(255,255,255,.42);background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 18px 40px rgba(0,0,0,.18);pointer-events:none;z-index:3;} .mockups-stage.drag-over::after{content:'Drop to fill the next mockup slot';position:absolute;left:50%;bottom:22px;transform:translateX(-50%);padding:9px 14px;border-radius:999px;background:rgba(18,18,18,.92);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:11.5px;font-weight:700;box-shadow:0 12px 24px rgba(0,0,0,.28);pointer-events:none;z-index:4;} .mockups-canvas-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:0 8px;overflow:hidden;} .mockups-canvas-frame{width:min(100%,860px);height:auto;display:flex;align-items:center;justify-content:center;flex:0 0 auto;position:relative;transform-origin:center center;will-change:transform;} .mockups-canvas{width:100%;height:100%;display:block;max-width:none;background:transparent;aspect-ratio:768/620;position:relative;z-index:1;} .mockups-canvas-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;z-index:0;opacity:1;transition:opacity .14s ease;} .mockups-canvas-fallback.done{opacity:0;} .mockups-preview-actions{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:0 18px 14px;margin-top:0;flex-shrink:0;} .mockups-preview-bar{display:grid;grid-template-columns:auto 1fr 1fr;gap:10px;min-width:min(100%,520px);padding:8px;border-radius:18px;border:1px solid rgba(255,255,255,.06);background:rgba(18,18,18,.9);box-shadow:0 20px 40px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.03);backdrop-filter:blur(10px);} .mockups-preview-bar .mockups-btn{min-height:44px;border-radius:13px;padding:0 16px;gap:9px;font-size:12px;} .mockups-preview-bar .mockups-btn svg{flex-shrink:0;} .mockups-preview-bar .mockups-btn.primary{box-shadow:0 8px 22px rgba(15,19,92,.18);} .mockups-preview-bar .mockups-btn.view-reset{min-width:44px;padding:0 13px;} .mockups-preview-bar .mockups-btn:disabled{cursor:default;filter:none;} .mockups-modal-copy{font-size:12px;line-height:1.65;color:var(--text2);} .mockups-modal-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;} .mockups-modal-grid .field{gap:7px;} .mockups-settings-note{font-size:10.5px;color:var(--text3);line-height:1.55;} .mockups-modal-grid .field input, .mockups-modal-grid .field select{height:44px;border-radius:14px;padding:0 13px;background:var(--panel2);border:1px solid var(--border);color:var(--text);font-family:'Geist',sans-serif;font-size:12px;outline:none;} .mockups-modal-grid .field input:focus, .mockups-modal-grid .field select:focus{border-color:var(--accent);background:var(--panel);} .mockups-modal-copy{font-size:12px;line-height:1.65;color:var(--text2);} .mockups-modal-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;} .mockups-modal-grid .field{gap:7px;} .mockups-settings-note{font-size:10.5px;color:var(--text3);line-height:1.55;} .mockups-modal-grid .field input, .mockups-modal-grid .field select{height:44px;border-radius:14px;padding:0 13px;background:var(--panel2);border:1px solid var(--border);color:var(--text);font-family:'Geist',sans-serif;font-size:12px;outline:none;} .mockups-modal-grid .field input:focus, .mockups-modal-grid .field select:focus{border-color:var(--accent);background:var(--panel);} @media (max-width: 1360px){ .mockups-shell{grid-template-columns:minmax(300px,340px) minmax(0,1fr) minmax(230px,270px);} } @media (max-width: 1180px){ .mockups-shell{grid-template-columns:minmax(0,1fr);height:auto;min-height:auto;overflow:visible;} .mockups-panel.preview{min-height:520px;} .mockups-upload-grid.dual{grid-template-columns:1fr;} } .talent-shell{display:flex;flex-direction:column;gap:14px;height:calc(100dvh - 126px);min-height:calc(100dvh - 126px);overflow:hidden;} .talent-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;flex-shrink:0;} .talent-toolbar-group{display:flex;align-items:center;gap:8px;min-width:0;overflow:auto;scrollbar-width:none;} .talent-toolbar-group::-webkit-scrollbar{display:none;} .talent-toolbar-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;} .talent-filter-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:var(--panel);color:var(--text2);font-size:11.5px;font-weight:500;font-family:'Geist',sans-serif;cursor:pointer;transition:border-color var(--d),background var(--d),color var(--d),transform var(--d);white-space:nowrap;} .talent-filter-chip:hover{border-color:var(--border2);background:var(--panel2);color:var(--text);} .talent-filter-chip.on{border-color:rgba(255,255,255,.10);background:var(--panel3);color:var(--text);} .talent-filter-chip-count{font-size:10px;color:var(--text3);padding:2px 6px;border-radius:999px;background:var(--panel2);border:1px solid var(--border);} .talent-filter-chip.on .talent-filter-chip-count{color:var(--text2);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.10);} .talent-filter-chip img,.talent-filter-avatar{width:20px;height:20px;border-radius:999px;object-fit:cover;flex-shrink:0;background:var(--panel3);border:1px solid var(--border);display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--accent);} .talent-stage{display:grid;grid-template-columns:minmax(0,1.36fr) minmax(280px,.8fr);gap:16px;flex:1;min-height:0;} .talent-queue-sections{display:flex;flex-direction:column;gap:14px;min-height:0;overflow:auto;padding-right:2px;flex:1;} .talent-queue-sections::-webkit-scrollbar{width:0;height:0;} .talent-section-block{display:flex;flex-direction:column;gap:10px;} .talent-section-block .talent-task-list{overflow:visible;flex:0 0 auto;padding-right:0;} .talent-section-label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);padding:0 2px;} .talent-section-label strong{font-weight:700;color:var(--text3);} .talent-section-count{font-size:10px;color:var(--text3);padding:2px 6px;border-radius:999px;border:1px solid var(--border);background:var(--panel2);} .talent-kicker,.talent-pane-kicker{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);} .talent-pane{background:linear-gradient(180deg,rgba(255,255,255,.012),transparent 65%),var(--panel);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow-sm);padding:16px;display:flex;flex-direction:column;gap:14px;min-height:0;overflow:hidden;} .talent-pane-head,.talent-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-shrink:0;} .talent-pane-head > div{min-width:0;} .talent-pane-title{font-size:18px;font-weight:600;letter-spacing:-.05em;line-height:1.05;} .talent-pane-copy{margin-top:4px;font-size:11px;color:var(--text3);line-height:1.55;max-width:42ch;} .talent-pane-count{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--border);background:var(--panel2);font-size:11px;font-weight:600;color:var(--text2);} .talent-task-list,.talent-roster-list,.talent-comments,.talent-feedback-list{display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto;padding-right:2px;flex:1;} .talent-task-list::-webkit-scrollbar,.talent-roster-list::-webkit-scrollbar,.talent-comments::-webkit-scrollbar,.talent-feedback-list::-webkit-scrollbar,.talent-toolbar-group::-webkit-scrollbar{width:0;height:0;} .talent-task-card,.talent-roster-item,.talent-feedback-item{width:100%;border:none;background:var(--panel2);border:1px solid var(--border);border-radius:16px;padding:12px;cursor:pointer;color:var(--text);text-align:left;transition:transform var(--d),border-color var(--d),background var(--d),box-shadow var(--d);} .talent-task-card:hover,.talent-roster-item:hover,.talent-feedback-item:hover{transform:translateY(-1px);border-color:var(--border2);background:var(--panel);} .talent-task-card.on,.talent-roster-item.on,.talent-feedback-item.on{border-color:rgba(255,255,255,.09);background:var(--panel2);} .talent-task-card{display:flex;flex-direction:column;gap:10px;} .talent-task-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;} .talent-task-title{font-size:13px;font-weight:600;line-height:1.35;} .talent-task-copy{font-size:11px;color:var(--text2);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .talent-task-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:10.5px;color:var(--text3);} .talent-meta-pill{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 10px;border-radius:999px;border:1px solid var(--border);background:var(--panel3);font-size:10px;color:var(--text3);} .talent-roster-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;} .talent-roster-meta{min-width:0;display:flex;flex-direction:column;gap:3px;} .talent-roster-name{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .talent-roster-sub{font-size:10.5px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .talent-roster-badge{min-width:26px;height:26px;padding:0 8px;border-radius:999px;background:var(--panel3);border:1px solid var(--border);display:grid;place-items:center;font-size:10.5px;color:var(--text2);} .talent-feedback-item{display:flex;flex-direction:column;gap:8px;cursor:pointer;} .talent-feedback-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10.5px;color:var(--text3);} .talent-feedback-task{font-size:12px;font-weight:600;color:var(--text);} .talent-feedback-text{font-size:11px;line-height:1.58;color:var(--text2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} .talent-feedback-meta{font-size:10.5px;color:var(--text3);} .talent-status-row{display:flex;flex-wrap:wrap;gap:8px;} .talent-status-pill,.talent-priority-pill,.talent-due-pill{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:var(--panel2);font-size:10.5px;font-weight:600;color:var(--text2);} .talent-status-pill{cursor:pointer;transition:all var(--d);} .talent-status-pill:hover{border-color:var(--border2);color:var(--text);} .talent-status-pill.progress{color:#1A23CE;border-color:rgba(15,19,92,.2);background:rgba(15,19,92,.08);} .talent-status-pill.submitted{color:var(--accent);border-color:rgba(15,19,92,.18);background:rgba(15,19,92,.08);} .talent-status-pill.revision{color:#ffb15f;border-color:rgba(255,177,95,.22);background:rgba(255,177,95,.08);} .talent-status-pill.approved{color:#78e5a1;border-color:rgba(120,229,161,.22);background:rgba(120,229,161,.08);} .talent-status-pill.on{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 11%,transparent);} .talent-status-row.static .talent-status-pill{cursor:default;} .talent-priority-pill{color:#ffb7a9;border-color:rgba(255,151,127,.18);background:rgba(255,120,96,.08);} .talent-due-pill{color:var(--text3);} .talent-modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.66);backdrop-filter:blur(9px);display:flex;align-items:center;justify-content:center;z-index:520;opacity:0;pointer-events:none;transition:opacity .22s var(--ease);} .talent-modal-ov.on{opacity:1;pointer-events:all;} .talent-modal{width:min(960px,calc(100vw - 24px));max-height:calc(100vh - 26px);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 26%),var(--panel);border:1px solid var(--border2);border-radius:24px;box-shadow:0 24px 90px rgba(0,0,0,.44);display:flex;flex-direction:column;overflow:hidden;transform:translateY(10px) scale(.985);transition:transform .22s var(--ease);} .talent-modal-ov.on .talent-modal{transform:none;} .talent-modal-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border);flex-shrink:0;} .talent-modal-label{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);} .talent-modal-close{width:30px;height:30px;border:none;border-radius:10px;background:transparent;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--d);} .talent-modal-close:hover{background:var(--panel2);color:var(--text);} .talent-modal-scroll{padding:18px;overflow:auto;display:flex;flex-direction:column;gap:14px;} .talent-detail-card{display:flex;flex-direction:column;gap:14px;} .talent-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;} .talent-detail-sub{margin-top:6px;font-size:11px;color:var(--text3);} .talent-detail-actions,.talent-submit-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .talent-create-btn,.talent-save-btn,.talent-delete-btn,.talent-mini-btn{border:none;border-radius:12px;font-family:'Geist',sans-serif;font-size:11.5px;font-weight:600;cursor:pointer;transition:all var(--d);} .talent-create-btn,.talent-save-btn{height:38px;padding:0 14px;background:var(--accent);color:#ffffff;} .talent-create-btn:hover,.talent-save-btn:hover{filter:brightness(1.05);} .talent-delete-btn{height:38px;padding:0 12px;background:transparent;color:#ffb7a9;border:1px solid rgba(255,151,127,.18);} .talent-delete-btn:hover{background:rgba(255,120,96,.08);} .talent-save-btn[disabled]{opacity:.36;filter:none;cursor:default;pointer-events:none;} .talent-mini-btn{height:32px;padding:0 11px;background:var(--panel2);color:var(--text2);border:1px solid var(--border);} .talent-mini-btn:hover{background:var(--panel3);border-color:var(--border2);color:var(--text);} .talent-mini-btn.solid{background:var(--panel3);color:var(--text);} .talent-form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.72fr) auto auto;gap:12px;} .talent-field{display:flex;flex-direction:column;gap:7px;font-size:11px;color:var(--text3);} .talent-field.full{grid-column:1/-1;} .talent-field span{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);} .talent-field input,.talent-field textarea,.talent-field select,.talent-link-add input,.talent-comment-box textarea,.talent-submit-box textarea{width:100%;background:var(--panel2);border:1px solid var(--border);border-radius:14px;color:var(--text);font-family:'Geist',sans-serif;font-size:12px;outline:none;transition:border-color var(--d),background var(--d);} .talent-field input,.talent-field select,.talent-link-add input{height:42px;padding:0 13px;} .talent-field textarea,.talent-comment-box textarea,.talent-submit-box textarea{padding:13px;resize:vertical;line-height:1.55;min-height:112px;} .talent-field input:focus,.talent-field textarea:focus,.talent-field select:focus,.talent-link-add input:focus,.talent-comment-box textarea:focus,.talent-submit-box textarea:focus{border-color:var(--border2);background:var(--panel);} .talent-check{justify-content:flex-end;min-width:112px;} .talent-check input{width:18px;height:18px;margin-top:2px;accent-color:var(--accent);} .talent-section-card{background:var(--panel2);border:1px solid var(--border);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:12px;} .talent-section-title{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);} .talent-section-copy{font-size:11px;color:var(--text3);line-height:1.5;max-width:54ch;} .talent-empty-inline{font-size:11.5px;color:var(--text3);padding:8px 2px;} .talent-links-list{display:flex;flex-direction:column;gap:8px;} .talent-link-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:var(--panel);border:1px solid var(--border);border-radius:14px;} .talent-link-row a{font-size:11.5px;color:var(--text);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .talent-link-add{display:flex;gap:8px;} .talent-reference-grid,.talent-submission-grid,.talent-upload-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;} .talent-reference-card,.talent-submission-image,.talent-preview-card{display:flex;flex-direction:column;gap:8px;} .talent-reference-card img,.talent-submission-image img,.talent-preview-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:1px solid var(--border);background:var(--panel);} .talent-upload-tile{border:1.5px dashed var(--border2);border-radius:16px;min-height:120px;display:flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(180deg,rgba(255,255,255,.014),transparent);color:var(--text3);font-size:11.5px;font-weight:600;cursor:pointer;transition:all var(--d);} .talent-upload-tile:hover{border-color:var(--accent);color:var(--accent);background:var(--aglow);} .talent-upload-tile.wide{min-height:74px;} .talent-upload-tile input{position:absolute;inset:0;opacity:0;cursor:pointer;} .talent-submission-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px;} .talent-submission-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;} .talent-submission-title{font-size:12px;font-weight:600;} .talent-submission-copy,.talent-submission-meta,.talent-submission-note{font-size:11px;color:var(--text2);line-height:1.5;} .talent-comment{padding:12px;border-radius:16px;background:var(--panel);border:1px solid var(--border);display:flex;flex-direction:column;gap:7px;} .talent-comment.talent{border-color:rgba(15,19,92,.14);background:linear-gradient(180deg,rgba(15,19,92,.04),transparent 70%),var(--panel);} .talent-comment.system{background:transparent;border-style:dashed;color:var(--text3);} .talent-comment-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10.5px;color:var(--text3);} .talent-comment-name{font-weight:700;letter-spacing:.08em;text-transform:uppercase;} .talent-comment-text{font-size:11.5px;line-height:1.6;color:var(--text);} .talent-comment-box,.talent-submit-box{display:flex;flex-direction:column;gap:10px;} .talent-empty,.talent-empty-detail{display:grid;place-items:center;min-height:100%;} .navbtn.on, .zbtn.on, .thtogbtn.on, .tpill.on, .mtmini.on, .mockups-template-card.on, .mockups-count-chip.on, .mockups-mode-option.on, .mockups-age-option.on, .talent-filter-chip.on, .talent-status-pill.on{ background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),#242427; border-color:rgba(255,255,255,.145); color:var(--text); box-shadow:inset 0 1px 0 rgba(255,255,255,.075),0 10px 22px rgba(0,0,0,.20); } .talent-task-card.on, .talent-roster-item.on, .talent-feedback-item.on, .mockups-selected{ background:#242427; border-color:rgba(255,255,255,.13); border-style:solid; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 22px rgba(0,0,0,.16); } .navbtn.on::after{ background:rgba(255,255,255,.36); box-shadow:none; } .navbtn.on .nvcnt, .talent-filter-chip.on .talent-filter-chip-count{ background:rgba(255,255,255,.105); border-color:rgba(255,255,255,.13); color:var(--text); } .mockups-mode-option.on{ background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),#242427; box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 24px rgba(0,0,0,.22); } .mockups-channel-pill.on .mockups-channel-pill-avatar{ border-color:rgba(255,255,255,.30); box-shadow:0 0 0 3px rgba(255,255,255,.08); } .mockups-channel-star.on{ color:var(--text); border-color:rgba(255,255,255,.12); background:var(--panel3); } .mockups-verified{ vertical-align:middle; } body.light .navbtn.on, body.light .zbtn.on, body.light .thtogbtn.on, body.light .tpill.on, body.light .mtmini.on, body.light .mockups-template-card.on, body.light .mockups-count-chip.on, body.light .mockups-mode-option.on, body.light .mockups-age-option.on, body.light .talent-filter-chip.on, body.light .talent-status-pill.on{ background:#ffffff; border-color:rgba(20,18,14,.14); color:var(--text); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(20,18,14,.08); } body.light .talent-task-card.on, body.light .talent-roster-item.on, body.light .talent-feedback-item.on, body.light .mockups-selected{ background:#ffffff; border-color:rgba(20,18,14,.12); border-style:solid; box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(20,18,14,.07); } body.light .navbtn.on .nvcnt, body.light .talent-filter-chip.on .talent-filter-chip-count{ background:rgba(20,18,14,.055); border-color:rgba(20,18,14,.08); color:var(--text2); } body.light .mockups-channel-star.on{ background:#e9e9ec; border-color:rgba(20,18,14,.12); } @media (max-width: 980px){ html,body{overflow:auto;} #app{height:auto;min-height:100%;} .sb{width:var(--sbc);} .sbtog{display:none;} .bname,.sblabel,.nvlbl,.nvcnt{display:none!important;} .brand,.sbh{justify-content:center;} .sbnav{padding:6px 0 0;} .navbtn{justify-content:center;padding:10px 0;width:var(--sbc);gap:0;border-radius:0;} .navbtn.on::after{display:none;} .main{min-width:0;} .topbar{height:auto;min-height:54px;flex-wrap:wrap;padding:10px 12px;gap:8px;} .tbcenter{order:3;flex:1 0 100%;justify-content:stretch;} .tbright{flex-wrap:wrap;justify-content:flex-start;width:100%;} .sbox{width:100%;} .tfbar{padding:0 12px;height:auto;min-height:40px;} .content{padding:12px;} .dash{grid-template-columns:1fr;padding:8px 0 18px;} .dash-tasks-row{grid-template-columns:1fr;gap:12px;} .dash-lower-row{grid-template-columns:1fr;gap:12px;} .notes-list{max-height:none;min-height:180px;} .task-modal,.modal{width:calc(100vw - 16px);max-height:calc(100vh - 16px);} .task-mbody{padding:14px;} .task-mfoot{padding:12px 14px;flex-direction:column;align-items:stretch;} .task-meta-grid{width:100%;} .task-side-actions{padding-left:0;justify-content:flex-end;} .task-date-pop{left:0;right:auto;width:min(280px,calc(100vw - 32px));} .bgrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))!important;} .tgrid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))!important;} .pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;} .mockups-shell{grid-template-columns:1fr;min-height:auto;} .mockups-stage{min-height:520px;padding:2px 0;} .mockups-modal-grid{grid-template-columns:1fr;} .talent-shell{height:auto;min-height:0;overflow:visible;} .talent-stage{grid-template-columns:1fr;} .talent-pane{min-height:280px;} .talent-form-grid{grid-template-columns:1fr 1fr;} .talent-modal{width:calc(100vw - 16px);max-height:calc(100vh - 16px);} .talent-modal-scroll{padding:16px;} .talent-field.full{grid-column:1/-1;} } @media (max-width: 640px){ .topbar{padding:10px;} .content{padding:10px;} .dash-time{display:none;} .bento-h{padding:12px 12px 8px;} .bento-body{padding:0 12px 12px;} .note-add{padding:8px;} .task-imgs{grid-template-columns:1fr;} .task-date-btn{min-width:0;width:100%;} .task-meta-grid{flex-direction:column;align-items:stretch;} .task-priority-toggle{justify-content:flex-start;} .zbtns{display:none!important;} .addbtn{padding:0 12px;} .mockups-panel{padding:14px;} .mockups-stage{padding:0;min-height:360px;} .mockups-settings-btn,.mockups-search-btn,.mockups-btn{min-height:40px;} .mockups-row,.mockups-age-row{grid-template-columns:1fr;} .mockups-actions{grid-template-columns:1fr;} .talent-toolbar{flex-direction:column;align-items:stretch;} .talent-toolbar-actions{justify-content:flex-end;} .talent-form-grid, .talent-reference-grid, .talent-submission-grid, .talent-upload-preview{grid-template-columns:1fr;} .talent-detail-head, .talent-pane-head, .talent-link-row, .talent-submission-head, .talent-modal-bar{flex-direction:column;align-items:flex-start;} .talent-link-add{flex-direction:column;} } @media (prefers-reduced-motion: reduce){ .animate-in, .panel.on{ animation:none !important; opacity:1 !important; transform:none !important; } .card, .tcard, .pcard, .bento, .navbtn, .tp-item, .note-item, .zbtn, .themetog, .thtogbtn, .addbtn, .bghst, .bsave, .selbtn, .ib, .tb2, .pbtn{ transition:none !important; transform:none !important; } } .note-inp:focus-visible, .task-title-inp:focus-visible{ box-shadow:none !important; } /* V7 PRODUCT SYSTEM ------------------------------------------------------- */ :root{ --bg:#08090b; --bg2:#0c0d10; --panel:#111216; --panel2:#17181c; --panel3:#202126; --border:#26272d; --border2:#383942; --text:#f4f4f5; --text2:#a1a1aa; --text3:#696a73; --adim:rgba(26,35,206,.14); --aglow:rgba(26,35,206,.08); --r:8px; --rsm:7px; --rlg:8px; --sbw:224px; --shadow:0 14px 38px rgba(0,0,0,.28); --shadow-sm:0 8px 24px rgba(0,0,0,.18); } body.light{ --bg:#f5f5f6; --bg2:#efeff1; --panel:#ffffff; --panel2:#f5f5f6; --panel3:#ebebee; --border:#dedee3; --border2:#c9c9d0; --text:#151519; --text2:#555660; --text3:#8a8b94; } body, body.light{ background:var(--bg); letter-spacing:0; } #app::before{display:none;} .sb,.main,.content,.topbar,.tfbar{background:var(--bg);} .sb{ background:#0a0b0d; border-right:1px solid var(--border); } body.light .sb{background:#f8f8f9;} .sbh{ height:58px; padding:12px 14px; border-bottom:1px solid var(--border); } .bname{font-size:13px;font-weight:600;letter-spacing:0;} .sbnav{padding:10px 9px 0;} .sblabel{padding:11px 9px 6px;font-size:9px;font-weight:600;color:var(--text3);} .navbtn{ min-height:36px; padding:0 10px; border-radius:7px; color:var(--text2); } .navbtn:hover{background:var(--panel2);transform:none;} .navbtn.on{ background:var(--panel3); color:var(--text); box-shadow:inset 0 0 0 1px var(--border2); } .navbtn.on::after{display:none;} .navbtn.on .nvcnt, .nvcnt{ background:transparent; border:0; color:var(--text3); padding:0; } .navbtn.on .nvcnt{color:var(--text2);} .sbfoot{ padding:10px; border-top:1px solid var(--border); background:#0a0b0d; } body.light .sbfoot{background:#f8f8f9;} .sbaccount{ min-height:44px; padding:6px 8px; border-radius:8px; background:var(--panel); } .sbaccount-avatar{width:30px;height:30px;} .themetog{border-radius:7px;} .topbar{ position:relative; height:58px; padding:0 18px; background:var(--bg2); border-bottom:1px solid var(--border); box-shadow:none; backdrop-filter:none; } .tbleft{font-size:14px;font-weight:600;letter-spacing:0;} .sbox{ width:min(320px,32vw); min-height:34px; border:1px solid var(--border); border-radius:7px; background:var(--panel); box-shadow:none; } .sbox:focus-within{border-color:var(--border2);background:var(--panel2);} .tbright{gap:7px;} .zbtns{gap:1px;padding:2px;border-radius:7px;background:var(--panel);border-color:var(--border);} .zbtn,.thtogbtn,.themetog{border-radius:6px;} .zbtn.on,.thtogbtn.on{ background:var(--panel3); border-color:var(--border2); color:var(--text); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); } .addbtn,.bsave,.gbtn,.mockups-btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; } .addbtn{height:34px;border-radius:7px;padding:0 13px;} .addbtn:hover,.bsave:hover,.gbtn:hover{transform:none;filter:brightness(1.08);} .tfbar{ position:relative; top:auto; min-height:42px; padding:7px 18px; align-items:center; background:var(--bg2); border-bottom:1px solid var(--border); } .tpill{ min-height:26px; padding:0 9px; border-radius:6px; background:transparent; border:1px solid transparent; color:var(--text3); } .tpill:hover{background:var(--panel2);border-color:var(--border);color:var(--text2);} .tpill.on{ background:var(--panel3); border-color:var(--border2); color:var(--text); box-shadow:none; } .content{padding:16px 18px 20px;background:var(--bg);} .panel.on{animation:panelIn .18s ease-out;} .bgrid{grid-template-columns:repeat(auto-fill,minmax(var(--cm,245px),1fr));gap:10px;} .tgrid{grid-template-columns:repeat(auto-fill,minmax(var(--cm,220px),1fr));gap:10px;} .pgrid{gap:10px;} .card,.tcard,.pcard,.bento{ border:1px solid var(--border); border-radius:8px; background:var(--panel); box-shadow:none; } .card:hover,.tcard:hover,.pcard:hover,.bento:hover{ transform:none; border-color:var(--border2); box-shadow:var(--shadow-sm); } .gadd,.tgadd{ min-height:150px; border:1px dashed var(--border2); border-radius:8px; background:transparent; } .gadd:hover,.tgadd:hover{background:var(--panel);border-color:var(--text3);color:var(--text2);} .gring{border-style:solid;border-color:var(--border2);} /* Compact text-first prompt cards: no empty media block. */ .prompt-card{height:174px;} .prompt-card.has-media .cthumb{height:92px;aspect-ratio:auto;} .prompt-card.text-only .cbody{padding:14px;} .prompt-card.text-only .ctitle{font-size:14px;line-height:1.35;min-height:0;margin-bottom:9px;} .prompt-card.text-only .ctitle{padding-right:88px;} .prompt-card.text-only .cprev{ font-family:'Geist',sans-serif; font-size:11.5px; line-height:1.55; color:var(--text2); -webkit-line-clamp:6; } .prompt-card.has-media .cbody{padding:11px 12px 12px;} .cthumb,.cph,.pimgw{border-bottom:1px solid var(--border);} .cfoot,.pbtns{opacity:1;} .cfoot{top:8px;right:8px;} .ib,.tb2{background:transparent;color:var(--text3);} .cfoot .ib,.pbtn{ background:rgba(10,11,13,.88); border:1px solid rgba(255,255,255,.08); } .prompt-card.text-only .cfoot .ib{ background:var(--panel2); border-color:var(--border); } .ctag,.note-badge,.tp-tag,.ltag{ border-radius:5px; background:var(--panel2); border:1px solid var(--border); } .pfoot{padding:7px 9px 9px;} .ptags{gap:4px;max-height:45px;overflow:hidden;} .pcard.sel,.pcard.selpreview{ outline:1px solid var(--text); outline-offset:-1px; box-shadow:0 0 0 3px rgba(255,255,255,.08); } .pcard.sel .pcheck,.note-cb.done{ background:var(--text); border-color:var(--text); color:var(--bg); } .pcheck{border-radius:5px;} /* Home: dense operational boards with clear hierarchy. */ .dash{gap:12px;padding:2px 0 8px;} .dash-tasks-row,.dash-lower-row{gap:12px;} .bento.bento-shared, body.light .bento.bento-shared{ background:var(--panel); border:1px solid var(--border); box-shadow:none; } .bento-h{min-height:42px;padding:0 13px;border-bottom:1px solid var(--border);} .bento-title{font-size:10px;color:var(--text2);} .bento-body{padding:10px 10px 11px;} .notes-list{gap:4px;min-height:240px;max-height:390px;margin-bottom:8px;} .note-item{ min-height:34px; padding:7px 8px; border-radius:6px; background:transparent; border:1px solid transparent; } .note-item:hover{transform:none;background:var(--panel2);border-color:var(--border);} .note-text{font-size:12px;} .note-cb{width:16px;height:16px;border-radius:4px;} .note-add{min-height:36px;padding:6px 8px;border-radius:6px;background:var(--panel2);border:1px solid var(--border);} .note-add:focus-within{background:var(--panel2);border-color:var(--border2);} .note-submit{width:22px;height:22px;border-radius:5px;background:var(--panel3);border:1px solid var(--border2);color:var(--text);} .note-submit.note-submit-subtle{background:var(--panel3);border:1px solid var(--border2);color:var(--text);} .tp-list{gap:4px;} .tp-item{min-height:38px;padding:6px 8px;border-radius:6px;background:transparent;} .tp-item:hover{transform:none;background:var(--panel2);} .dash-time{border-radius:6px;background:var(--panel);} /* Task details become a stable right-side working drawer. */ .task-ov{ align-items:stretch; justify-content:flex-end; padding:12px; background:rgba(0,0,0,.68); backdrop-filter:blur(6px); } .task-modal{ width:min(640px,calc(100vw - 24px)); max-width:none; height:calc(100dvh - 24px); max-height:none; overflow:hidden; border-radius:10px; border:1px solid var(--border2); background:var(--panel); box-shadow:-18px 0 54px rgba(0,0,0,.38); transform:translateX(24px); } .task-ov.on .task-modal{transform:none;} .task-mh{min-height:64px;padding:0 18px;border-bottom:1px solid var(--border);} .task-title-inp{font-size:16px;font-weight:600;letter-spacing:0;} .task-mbody{padding:16px 18px;gap:12px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border2) transparent;} .task-mbody::-webkit-scrollbar{width:6px;} .task-mbody::-webkit-scrollbar-thumb{background:var(--border2);border-radius:6px;} .task-section{padding:13px;border-radius:8px;background:var(--panel2);border:1px solid var(--border);} .task-notes-inp{min-height:92px;line-height:1.6;} .task-img-item,.task-img-add,.task-link-item,.task-link-inp,.task-date-btn{border-radius:7px;} .task-mfoot{padding:12px 18px;background:var(--panel);border-top:1px solid var(--border);} .task-save{border-radius:7px;} /* Modal and settings surfaces share one restrained language. */ .ov,.confov{background:rgba(0,0,0,.7);backdrop-filter:blur(6px);} .modal,.mmod,.confbox,.newtag-box{ border-radius:10px; border-color:var(--border2); box-shadow:var(--shadow); } .mh{min-height:54px;padding:0 16px;} .mbody{padding:15px 16px;} .mfoot{padding:11px 16px;} .field input,.field textarea,.tagbox,.stepinp,.bghst,.bsave,.boutl,.bcanc,.bdel{border-radius:7px;} .field input:focus,.field textarea:focus,.stepinp:focus,.ginput:focus{ border-color:var(--border2); box-shadow:0 0 0 3px rgba(255,255,255,.04); } /* Mockups: fixed workspace geometry, visible neutral states, no decoration. */ #panel-mockups{height:calc(100dvh - 92px);} .mockups-shell{gap:12px;grid-template-columns:minmax(300px,340px) minmax(360px,1fr) minmax(240px,270px);} .mockups-panel{ padding:12px; gap:11px; border-radius:10px; background:var(--panel); border:1px solid var(--border); box-shadow:none; } .mockups-panel.preview{border:0;background:transparent;} .mockups-settings-section{ gap:9px; padding:10px; border-radius:8px; background:var(--panel); border:1px solid var(--border); } .mockups-upload,.mockups-input,.mockups-select,.mockups-textarea,.mockups-mini-input, .mockups-settings-btn,.mockups-search-btn,.mockups-btn,.mockups-template-card, .mockups-count-chip,.mockups-mode-option,.mockups-selected,.mockups-age-btn, .mockups-search-clear,.mockups-channel-empty{ border-radius:7px; } .mockups-upload{background:var(--panel2);} .mockups-upload-icon{border-radius:7px;color:var(--text2);} .mockups-template-grid{gap:6px;} .mockups-template-card{border-color:var(--border);background:var(--panel2);} .mockups-template-card.on,.mockups-count-chip.on,.mockups-mode-option.on,.mockups-age-option.on{ background:var(--panel3); border-color:var(--border2); color:var(--text); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); } .mockups-mode-segment{padding:3px;gap:3px;border-radius:8px;background:var(--panel2);} .mockups-mode-option.on{background:var(--panel3);} .mockups-stage{border-radius:10px;background:#0a0b0d;} .mockups-preview-actions{padding:0 10px 8px;} .mockups-preview-bar{ border-radius:9px; border:1px solid var(--border2); background:var(--panel); box-shadow:var(--shadow-sm); backdrop-filter:none; } .mockups-preview-bar .mockups-btn{border-radius:7px;} @media(max-width:1180px){ .mockups-shell{grid-template-columns:minmax(270px,310px) minmax(320px,1fr) minmax(220px,245px);} .mockups-panel{padding:10px;} .dash-tasks-row,.dash-lower-row{grid-template-columns:1fr 1fr;} .dash-tasks-row>.bento:last-child{grid-column:1/-1;} .dash-lower-row #dash-prompts-box,.dash-lower-row .dash-mutual-box{grid-column:span 1;} } @media(max-width:980px){ .topbar{position:relative;} .tfbar{position:relative;top:auto;} .task-ov{padding:8px;} .task-modal{width:min(640px,calc(100vw - 16px));height:calc(100dvh - 16px);} #panel-mockups{height:auto;} .mockups-shell{grid-template-columns:1fr;overflow:visible;} .mockups-panel.preview{min-height:500px;} } @media(max-width:640px){ :root{--sbc:52px;} .topbar{padding:8px 10px;} .content{padding:10px;} .dash-tasks-row,.dash-lower-row{grid-template-columns:1fr;} .dash-tasks-row>.bento:last-child, .dash-lower-row #dash-prompts-box, .dash-lower-row .dash-mutual-box{grid-column:1;} .notes-list{min-height:160px;max-height:320px;} .task-ov{padding:0;} .task-modal{width:100vw;height:100dvh;border-radius:0;border-width:0 0 0 1px;} .task-mh{padding:0 13px;} .task-mbody{padding:13px;} .bgrid{grid-template-columns:1fr!important;} } /* V8 SOFT SURFACE REFINEMENT --------------------------------------------- */ :root{ --bg:#0f1013; --bg2:#0f1013; --panel:#15161a; --panel2:#1a1b20; --panel3:#222329; --border:rgba(255,255,255,.055); --border2:rgba(255,255,255,.10); --text:#eeeeef; --text2:#9798a1; --text3:#60616a; --shadow:0 16px 44px rgba(0,0,0,.22); --shadow-sm:0 10px 30px rgba(0,0,0,.16); } body.light{ --bg:#f3f3f5; --bg2:#f3f3f5; --panel:#ffffff; --panel2:#f7f7f8; --panel3:#ededf0; --border:rgba(16,16,20,.055); --border2:rgba(16,16,20,.11); --text:#18181c; --text2:#5c5d65; --text3:#92939b; } .sb{ background:#0a0b0d; border-right:0; } body.light .sb{background:#eaeaed;} .main,.content,.topbar,.tfbar{background:var(--bg);} .sbh{ height:62px; padding:14px 15px; border-bottom:0; } .sbnav{padding:12px 10px 0;} .sblabel{padding:12px 9px 7px;color:#565861;} .navbtn{ min-height:38px; padding:0 11px; color:#858790; } .navbtn:hover{background:rgba(255,255,255,.035);} .navbtn.on{ background:#1a1b20; box-shadow:none; color:#f2f2f3; } body.light .navbtn.on{background:#ffffff;color:var(--text);box-shadow:none;} .nvi{opacity:.52;} .navbtn.on .nvi,.navbtn:hover .nvi{opacity:.88;} /* Give the signed-in account and sync state a full-width, calm footer. */ .sbfoot{ display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:12px 10px 11px; border-top:0; background:#0a0b0d; } body.light .sbfoot{background:#eaeaed;} .sbaccount{ width:100%; min-height:54px; padding:9px 10px; gap:11px; background:#15161a; border:0; border-radius:8px; } body.light .sbaccount{background:#ffffff;} .sbaccount-avatar{width:34px;height:34px;} .sbaccount-meta{gap:3px;flex:1;} .sbaccount-name{font-size:12.5px;} .sbaccount-sub{font-size:10.5px;overflow:visible;text-overflow:clip;} .sbfoot-actions{ width:100%; display:flex; justify-content:flex-end; gap:6px; padding:0 2px; } .sbfoot .themetog{ width:34px; height:30px; background:transparent; border:0; color:#666872; } .sbfoot .themetog:hover{background:#17181c;color:var(--text2);} .topbar{ height:62px; padding:0 20px; background:var(--bg); border-bottom:0; } .tfbar{ min-height:40px; padding:3px 20px 7px; background:var(--bg); border-bottom:0; } .content{padding:17px 20px 24px;} .sbox{ background:#15161a; border-color:transparent; } .sbox:focus-within{background:#191a1f;border-color:transparent;box-shadow:0 0 0 1px var(--border2);} .zbtns,.thtogbtn,.themetog{ background:transparent; border-color:transparent; } .zbtns{padding:1px;} .zbtn:hover,.thtogbtn:hover,.themetog:hover{background:var(--panel2);border-color:transparent;} .zbtn.on,.thtogbtn.on{ background:var(--panel3); border-color:transparent; box-shadow:none; } .tpill{color:var(--text3);} .tpill:hover{border-color:transparent;background:var(--panel2);} .tpill.on{border-color:transparent;background:var(--panel3);box-shadow:none;} /* Surfaces separate through tone and spacing, not outlines. */ .card,.tcard,.pcard,.bento{ background:var(--panel); border-color:transparent; box-shadow:none; } .card:hover,.tcard:hover,.pcard:hover,.bento:hover{ border-color:transparent; box-shadow:0 12px 30px rgba(0,0,0,.15); } .bento.bento-shared, body.light .bento.bento-shared{ background:var(--panel); border-color:transparent; } .bento-h{ min-height:46px; padding:2px 15px 0; border-bottom:0; } .bento-body{padding:8px 12px 13px;} .dash{gap:14px;padding-top:4px;} .dash-tasks-row,.dash-lower-row{gap:14px;} .notes-list{padding:1px 0;} .note-item{padding:7px 8px;} .note-item:hover{background:rgba(255,255,255,.035);border-color:transparent;} .note-add{ min-height:38px; padding:7px 9px; background:#191a1f; border-color:transparent; } .note-add:focus-within{background:#1d1e23;border-color:transparent;box-shadow:0 0 0 1px var(--border2);} .note-submit,.note-submit.note-submit-subtle{ background:#24252a; border-color:transparent; } .tp-item{padding:7px 9px;} .tp-item:hover{background:rgba(255,255,255,.035);} .dash-time{background:#15161a;border-color:transparent;} .gadd,.tgadd{ border-color:rgba(255,255,255,.085); background:transparent; } .gadd:hover,.tgadd:hover{ border-color:rgba(255,255,255,.17); background:rgba(255,255,255,.018); } .gring{border-color:rgba(255,255,255,.12);} .cthumb,.cph,.pimgw{border-bottom:0;} .ctag,.note-badge,.tp-tag,.ltag{ background:#1d1e23; border-color:transparent; color:#777983; } /* Keep card actions contextual so the gallery stays visually quiet. */ .cfoot,.pbtns,.tbtns{ opacity:0; pointer-events:none; transform:translateY(-2px); transition:opacity .16s ease,transform .16s ease; } .card:hover .cfoot,.card:focus-within .cfoot, .pcard:hover .pbtns,.pcard:focus-within .pbtns, .tcard:hover .tbtns,.tcard:focus-within .tbtns{ opacity:1; pointer-events:auto; transform:none; } .cfoot .ib,.pbtn,.prompt-card.text-only .cfoot .ib{ background:rgba(13,14,17,.82); border-color:rgba(255,255,255,.07); box-shadow:0 5px 14px rgba(0,0,0,.18); } body.light .cfoot .ib, body.light .pbtn, body.light .prompt-card.text-only .cfoot .ib{ background:rgba(255,255,255,.9); border-color:rgba(16,16,20,.06); } .pcard.sel,.pcard.selpreview{ outline:0; box-shadow:0 0 0 2px rgba(255,255,255,.13),0 12px 30px rgba(0,0,0,.15); } /* Dialogs and the task drawer retain structure without stacked boxes. */ .task-modal,.modal,.mmod,.confbox,.newtag-box{ background:#131418; border-color:rgba(255,255,255,.07); } .task-mh,.task-mfoot,.mh,.mfoot{border-color:rgba(255,255,255,.045);} .task-section{ background:#18191e; border-color:transparent; } .task-link-item,.task-link-inp,.task-date-btn{border-color:transparent;} .task-img-add{border-color:rgba(255,255,255,.09);background:#18191e;} .mockups-panel{ background:#141519; border-color:transparent; box-shadow:none; } .mockups-settings-section{ background:#191a1f; border-color:transparent; } .mockups-template-card,.mockups-count-chip,.mockups-selected, .mockups-input,.mockups-select,.mockups-textarea,.mockups-mini-input, .mockups-age-btn,.mockups-search-clear{ border-color:transparent; background:#1d1e23; } .mockups-template-card.on,.mockups-count-chip.on,.mockups-mode-option.on,.mockups-age-option.on{ background:#27282e; border-color:transparent; box-shadow:none; } .mockups-preview-bar{ background:rgba(20,21,25,.92); border-color:rgba(255,255,255,.06); box-shadow:0 15px 36px rgba(0,0,0,.22); } @media(hover:none){ .cfoot,.pbtns,.tbtns{opacity:1;pointer-events:auto;transform:none;} } @media(max-width:980px){ .sbfoot{padding:10px 7px;} .sb.col .sbaccount{justify-content:center;padding:7px;} .sb.col .sbaccount-meta,.sb.col .sbfoot-actions{display:none;} } /* V9 DARK, CENTERED AND PERFORMANCE-FOCUSED ------------------------------ */ :root{ --bg:#0B0D11; --bg2:#0B0D11; --panel:#11141a; --panel2:#161a21; --panel3:#1d222b; --border:rgba(255,255,255,.045); --border2:rgba(255,255,255,.085); --text:#f0f1f2; --text2:#9297a1; --text3:#5c626d; --sbw:244px; --sbc:58px; --shadow:0 18px 50px rgba(0,0,0,.28); --shadow-sm:0 8px 22px rgba(0,0,0,.14); } body,.main,.content,.topbar,.tfbar{background:#0B0D11;} .sb,.sbfoot{background:#07090d;} .topbar,.tfbar{background:#0B0D11;} /* A useful, compact footer in both sidebar states. */ .sbfoot{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:7px; padding:10px 11px; } .sbaccount{ width:100%; min-width:0; min-height:48px; padding:7px 8px; gap:9px; background:#11141a; border:0; } .sbaccount-avatar{width:32px;height:32px;} .sbaccount-meta{min-width:0;} .sbaccount-sub{overflow:hidden;text-overflow:ellipsis;} .sbfoot-actions{width:auto;gap:3px;padding:0;} .sbfoot .themetog{width:30px;height:30px;border-radius:7px;} aside.sb.col .sbfoot{ display:flex!important; flex-direction:column!important; align-items:center!important; gap:7px!important; padding:10px 0!important; } aside.sb.col .sbaccount{ width:40px!important; height:40px!important; min-height:40px!important; padding:5px!important; border-radius:8px!important; background:#11141a!important; } aside.sb.col .sbaccount-avatar{width:30px!important;height:30px!important;} aside.sb.col .sbfoot-actions{ display:flex!important; flex-direction:column!important; width:auto!important; gap:3px!important; padding:0!important; } aside.sb.col .sbfoot .themetog{ display:flex!important; width:34px!important; height:30px!important; border-radius:7px!important; } /* Task create and edit return to a centered, stable dialog. */ .task-ov{ align-items:center; justify-content:center; padding:20px; background:rgba(3,4,6,.72); backdrop-filter:none; } .task-modal{ width:720px; max-width:calc(100vw - 40px); height:auto; max-height:90vh; overflow-y:auto; border-radius:10px; border:1px solid rgba(255,255,255,.075); box-shadow:0 24px 70px rgba(0,0,0,.44); transform:translateY(8px) scale(.985); scrollbar-width:thin; scrollbar-color:#303640 transparent; } .task-modal::-webkit-scrollbar{width:6px;} .task-modal::-webkit-scrollbar-track{background:transparent;} .task-modal::-webkit-scrollbar-thumb{background:#2b3039;border-radius:999px;} .task-modal::-webkit-scrollbar-thumb:hover{background:#3a414d;} .task-ov.on .task-modal{transform:none;} .task-mbody{overflow:visible;} /* Every prompt keeps the same genuine 16:9 media area. */ .prompt-card{height:auto;} .prompt-card.has-media .cthumb, .prompt-card .cph{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; flex:0 0 auto; } .prompt-card.text-only .cbody, .prompt-card.has-media .cbody{padding:11px 12px 12px;} .prompt-card.text-only .ctitle{ padding-right:0; font-size:12.5px; min-height:34px; margin-bottom:5px; } .prompt-card.text-only .cprev{-webkit-line-clamp:2;} .prompt-placeholder{ background:#151922; color:#3d4552; } /* Remove paint-heavy effects from the interactions used all day. */ .card:hover,.tcard:hover,.pcard:hover,.bento:hover{box-shadow:none;} .pcard:hover .pimg,.rth-item:hover img{transform:none;} .cfoot .ib,.pbtn,.pcheck,.rth-btn, .ctxmenu,.lbox,.dropov,.ov,.confov,#selbar, .mockups-preview-bar,.task-ov{ backdrop-filter:none!important; } .drag-ghost{ border-radius:8px; transform:translate3d(0,0,0); box-shadow:0 14px 34px rgba(0,0,0,.32); opacity:.92; } body.dragging *,body.boxselecting *{transition:none!important;animation:none!important;} .card,.tcard,.pcard,.bento,.note-item,.tp-item,.pimg,.rth-item img{ will-change:auto; } .card,.tcard,.pcard,.bento{transition:background .12s ease,border-color .12s ease;} .note-item,.tp-item{transition:background .12s ease,color .12s ease;} .sb{transition:width .18s cubic-bezier(.2,.8,.2,1);} @media(max-width:640px){ .task-ov{padding:0;} .task-modal{ width:100vw; max-width:none; height:100dvh; max-height:none; border:0; border-radius:0; } } @media(max-width:980px){ aside.sb.col .sbfoot-actions{display:flex!important;} } /* V10 NEUTRAL SURFACES AND COMPACT ACCOUNT FOOTER ----------------------- */ :root{ --panel:#111216; --panel2:#15161a; --panel3:#1a1b20; --text:#f1f1f2; --text2:#9699a1; --text3:#626670; --border:rgba(255,255,255,.05); --border2:rgba(255,255,255,.09); } /* Keep the task workspace neutral and avoid nested blue-tinted inputs. */ .task-modal, .task-mh, .task-mbody, .task-mfoot{background:#111216;} .task-mh,.task-mfoot{border-color:rgba(255,255,255,.055);} .task-section{ background:#15161a; border-color:transparent; } .task-notes-inp{ background:transparent; border-color:transparent; box-shadow:none; } .task-link-inp, .task-link-item, .task-date-btn, .task-date-native{ background:#111216; border-color:rgba(255,255,255,.055); box-shadow:none; } .task-link-inp:focus, .task-notes-inp:focus, .task-date-btn:hover, .task-date-wrap.open .task-date-btn{ background:#121317; border-color:rgba(255,255,255,.11); box-shadow:none; } .task-img-add{ background:#121316; border-color:rgba(255,255,255,.105); } .task-img-add-icon{background:#0d0e11;border-color:rgba(255,255,255,.055);} .task-title-inp::placeholder, .task-notes-inp::placeholder, .task-link-inp::placeholder{color:#666972;} /* The creation tile follows the grid row instead of overflowing its column. */ .pgrid>.tgadd{ width:100%; height:auto; min-height:176px; aspect-ratio:auto; align-self:stretch; justify-self:stretch; box-sizing:border-box; } /* Thumbnail metadata should support the image, not compete with it. */ .pcard .ctag{ background:#17181c; color:#5d6068; opacity:.72; } .pcard:hover .ctag,.pcard:focus-within .ctag{opacity:.84;} .prompt-placeholder{background:#15161a;color:#41444b;} /* One flat account row; collapsed mode keeps only the identity anchor. */ .sbfoot{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px; min-height:64px; padding:8px 10px; background:#08090c; } .sbaccount{ min-width:0; min-height:44px; padding:6px; gap:9px; background:transparent; border-radius:7px; } .sbaccount:hover{background:rgba(255,255,255,.025);} .sbaccount-avatar{width:30px;height:30px;} .sbaccount-meta{gap:2px;} .sbaccount-name{font-size:12px;} .sbaccount-sub{ max-width:112px; overflow:hidden; color:#5f626a; font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; } .sync-dot{width:5px;height:5px;box-shadow:none;} .sbfoot-actions{ display:flex; width:auto; gap:1px; padding:0; opacity:.58; transition:opacity .14s ease; } .sbfoot:hover .sbfoot-actions,.sbfoot:focus-within .sbfoot-actions{opacity:1;} .sbfoot .themetog{ width:27px; height:27px; border-radius:6px; background:transparent; color:#656871; } .sbfoot .themetog:hover{background:#15161a;color:#c5c7cc;} aside.sb.col .sbfoot{ display:flex!important; min-height:58px!important; padding:9px 0!important; justify-content:center!important; } aside.sb.col .sbaccount{ width:36px!important; height:36px!important; min-height:36px!important; padding:3px!important; border-radius:7px!important; background:transparent!important; } aside.sb.col .sbaccount-avatar{width:30px!important;height:30px!important;} aside.sb.col .sbaccount-meta, aside.sb.col .sbfoot-actions{display:none!important;} /* V11 MATCHED LIBRARY GEOMETRY AND CATEGORY EMPHASIS -------------------- */ #grid-prompts{gap:12px;} .prompt-card .cprev{ color:#5d6068; opacity:.72; } .prompt-card:hover .cprev,.prompt-card:focus-within .cprev{opacity:.84;} .tpill.tpill-primary{border-color:transparent;} .tpill.tpill-realistic{ color:#6f9fe8; background:rgba(63,144,236,.1); } .tpill.tpill-docu{ color:#6fa98a; background:rgba(74,166,112,.11); } .tpill.tpill-cartoony{ color:#d8925d; background:rgba(223,132,61,.11); } .pcard .ctag.ctag-realistic{ color:#6f9fe8; background:rgba(63,144,236,.1); opacity:.9; } .pcard .ctag.ctag-docu{ color:#6fa98a; background:rgba(74,166,112,.11); opacity:.9; } .pcard .ctag.ctag-cartoony{ color:#d8925d; background:rgba(223,132,61,.11); opacity:.9; } .tpill.tpill-realistic:hover,.tpill.tpill-realistic.on{background:rgba(63,144,236,.18);color:#87b4ef;} .tpill.tpill-docu:hover,.tpill.tpill-docu.on{background:rgba(74,166,112,.19);color:#85bd9b;} .tpill.tpill-cartoony:hover,.tpill.tpill-cartoony.on{background:rgba(223,132,61,.19);color:#e2a171;} /* V12 MONOCHROME PRODUCT SYSTEM ----------------------------------------- */ :root{ color-scheme:dark; --bg:#000000; --bg2:#050505; --panel:#101010; --panel2:#151515; --panel3:#1b1b1c; --border:rgba(255,255,255,.045); --border2:rgba(255,255,255,.09); --text:#f4f4f5; --text2:#a0a0a5; --text3:#626267; --brand:#1A23CE; --accent:#1A23CE; --secondary:#0F135C; --adim:rgba(26,35,206,.12); --aglow:rgba(26,35,206,.055); --danger:#ef6666; --ddim:rgba(239,102,102,.09); --r:8px; --rsm:6px; --rlg:10px; --sbw:236px; --sbc:58px; --d:.14s; --ease:cubic-bezier(.2,.8,.2,1); --shadow:0 24px 64px rgba(0,0,0,.48); --shadow-sm:0 12px 32px rgba(0,0,0,.28); } html,body,#app,.main,.content,.topbar,.tfbar{background:#000;} body{letter-spacing:0;} *{scrollbar-color:#28282a transparent;} *::-webkit-scrollbar{width:7px;height:7px;} *::-webkit-scrollbar-track{background:transparent;} *::-webkit-scrollbar-thumb{background:#28282a;border-radius:999px;} ::selection{background:rgba(255,255,255,.16);color:#fff;} button,input,textarea,select{letter-spacing:0;} button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.075)!important; } /* Entry, loading, and account access. */ #loader,#gate{background:#000;} #loader::before{display:none;} .loader-mark .brand-logo{filter:none;} .gi{ gap:15px; width:min(380px,100%); padding:28px 26px; border:0; border-radius:10px; background:#0d0d0e; box-shadow:0 28px 80px rgba(0,0,0,.56); } .gtitle{font-size:21px;font-weight:650;} .gdesc{color:#8a8a90;} .gstate,.gacct{border:0;background:#151515;border-radius:7px;} .ginput{ background:#151515; border:1px solid transparent; border-radius:7px; } .ginput:focus{border-color:rgba(255,255,255,.1);background:#181818;} .gbtn,.addbtn,.bsave,.mockups-btn.primary{ background:#1A23CE; border-color:#1A23CE; color:#fff; box-shadow:none; } .gbtn:hover,.addbtn:hover,.bsave:hover,.mockups-btn.primary:hover{ background:#2029dc; border-color:#2029dc; filter:none; } .gbtn:active,.addbtn:active,.bsave:active,.mockups-btn.primary:active{transform:translateY(1px);} .gbtn.subtle{background:#171717;border-color:transparent;color:var(--text2);} .gbtn.subtle:hover{background:#1d1d1e;color:var(--text);} .access-card,.access-perm{ background:#151515; border:0; border-radius:8px; } .access-card:hover{background:#171717;border-color:transparent;} .access-status select,.access-quickbtn,.access-refresh,.access-pill{ background:#1b1b1c; border-color:transparent; border-radius:6px; } .access-role.owner{color:#c7c7cc;background:#1b1b1c;border-color:transparent;} .access-quickbtn:hover,.access-refresh:hover{background:#222223;border-color:transparent;color:var(--text);} /* Sidebar and global navigation. */ .sb,.sbfoot{background:#070707;} .sb{border:0;transition:width .17s var(--ease);} .sbh{height:60px;padding:13px 14px;border:0;} .bname{font-size:13px;font-weight:650;} .sbtog{width:28px;height:28px;border-radius:6px;color:#5f5f64;} .sbtog:hover{background:#151515;color:#b4b4b9;} .sbnav{padding:9px 9px 0;} .sblabel{padding:11px 10px 6px;color:#4f4f53;font-size:9px;font-weight:650;} .navbtn{ min-height:38px; padding:0 10px; gap:10px; border-radius:7px; color:#85858b; font-size:12px; transition:background .12s ease,color .12s ease; } .navbtn:hover{background:#111111;color:#c5c5c9;} .navbtn.on{background:#171717;color:#f4f4f5;font-weight:550;box-shadow:none;} .navbtn.on::after{display:none;} .nvi{opacity:.56;} .navbtn:hover .nvi,.navbtn.on .nvi{opacity:.92;} .nvcnt,.navbtn.on .nvcnt{background:transparent;color:#55555a;padding:0;} .navbtn.on .nvcnt{color:#8c8c91;} .nvtip{background:#171717;border:0;border-radius:6px;box-shadow:var(--shadow-sm);} .sbfoot{ min-height:62px; padding:8px 10px; border:0; } .sbaccount{background:transparent;border:0;border-radius:7px;} .sbaccount:hover{background:#101010;} .sbaccount-name{font-weight:600;} .sbaccount-sub{color:#55555a;} .sbfoot .themetog{background:transparent;border:0;color:#5e5e63;} .sbfoot .themetog:hover{background:#171717;color:#bdbdc1;} aside.sb.col .sbfoot{background:#070707;} /* Top bar and compact controls. */ .topbar{height:58px;padding:0 20px;border:0;box-shadow:none;} .tbleft{font-size:14px;font-weight:650;} .tbright{gap:6px;} .sbox{ width:min(320px,32vw); min-height:36px; background:#101010; border:1px solid transparent; border-radius:7px; box-shadow:none; } .sbox:focus-within{background:#151515;border-color:rgba(255,255,255,.075);box-shadow:none;} .sbox input{color:#d8d8db;} .sbox input::placeholder{color:#505055;} .zbtns{gap:2px;padding:2px;background:#101010;border:0;border-radius:7px;} .zbtn,.thtogbtn,.themetog{ border:0; border-radius:6px; background:transparent; color:#646469; } .zbtn:hover,.thtogbtn:hover,.themetog:hover{background:#171717;color:#b8b8bd;} .zbtn.on,.thtogbtn.on{background:#1d1d1e;color:#f0f0f2;box-shadow:none;} .addbtn{height:34px;padding:0 13px;border-radius:7px;font-weight:650;} .tfbar{min-height:40px;padding:2px 20px 7px;border:0;gap:5px;} .tpill{ min-height:26px; padding:0 9px; border:0; border-radius:6px; background:transparent; color:#5f5f64; transition:background .12s ease,color .12s ease; } .tpill:hover{background:#111111;color:#aaaab0;} .tpill.on{background:#1a1a1b;color:#e9e9eb;box-shadow:none;} /* Main workspace and repeated content. */ .content{padding:17px 20px 24px;} .panel.on{animation:panelIn .14s ease-out;} .bgrid,.tgrid,.pgrid{gap:12px;} .card,.tcard,.pcard,.bento, .bento.bento-shared,body.light .bento.bento-shared{ border:0; border-radius:8px; background:#101010; box-shadow:none; transition:background .13s ease,transform .13s ease; } .card:hover,.tcard:hover,.pcard:hover,.bento:hover{ border:0; background:#121212; box-shadow:none; transform:none; } .cthumb,.cph,.pimgw{background:#0b0b0b;border:0;} .cbody{padding:11px 12px 12px;} .ctitle,.tname{color:#ededee;font-weight:620;} .cprev{color:#606065;} .gadd,.tgadd{ border:0; border-radius:8px; background:#0b0b0b; color:#626267; } .gadd:hover,.tgadd:hover{border:0;background:#111111;color:#a5a5aa;} .gring{border:1px solid #2a2a2c;background:#111111;color:#8a8a8f;} .ctag,.note-badge,.tp-tag,.ltag{ background:#181818; border:0; border-radius:5px; color:#646469; } .cfoot .ib,.pbtn,.prompt-card.text-only .cfoot .ib,.tbtns .tb2{ background:rgba(12,12,12,.92); border:0; color:#aaaab0; box-shadow:0 8px 18px rgba(0,0,0,.3); } .ib:hover,.pbtn:hover,.tb2:hover{background:#222223;color:#fff;} .cpill{background:#171717;color:#e7e7e9;border:0;border-radius:999px;} .pcard.sel,.pcard.selpreview{ outline:1px solid rgba(255,255,255,.22); outline-offset:-1px; box-shadow:0 0 0 3px rgba(255,255,255,.055); } .pcard.sel .pcheck,.note-cb.done{background:#ededee;border-color:#ededee;color:#0b0b0b;} /* Home is dense, calm, and optimized for daily scanning. */ .dash{gap:14px;padding:3px 0 8px;} .dash-tasks-row,.dash-lower-row{gap:14px;} .dash-time{background:#101010;border:0;border-radius:6px;color:#77777c;} .bento-h{min-height:46px;padding:2px 14px 0;border:0;} .bento-title{color:#8c8c91;font-size:10px;font-weight:700;} .bento-body{padding:8px 11px 12px;} .notes-list{gap:3px;} .note-item{min-height:34px;padding:7px 8px;border:0;border-radius:6px;background:transparent;} .note-item:hover{background:#171717;border:0;} .note-cb{border-color:#2b2b2d;background:#0c0c0c;} .note-add{ min-height:38px; padding:7px 9px; background:#151515; border:1px solid transparent; border-radius:7px; } .note-add:focus-within{background:#181818;border-color:rgba(255,255,255,.075);box-shadow:none;} .note-submit,.note-submit.note-submit-subtle{ background:#202021; border:0; color:#b8b8bd; } .note-submit:hover,.note-submit.note-submit-subtle:hover{background:#29292b;color:#fff;} .note-badge.has-content{background:#1b1b1c;border:0;color:#88888e;} .tp-item{border-radius:6px;} .tp-item:hover{background:#171717;} /* Dialogs, tasks, inputs, and menus. */ .ov,.confov,.task-ov{background:rgba(0,0,0,.78);backdrop-filter:none;} .modal,.mmod,.confbox,.newtag-box,.task-modal{ background:#0e0e0f; border:0; border-radius:10px; box-shadow:var(--shadow); } .mh,.mfoot,.task-mh,.task-mfoot{border:0;background:#0e0e0f;} .mh,.task-mh{min-height:58px;padding-left:18px;padding-right:18px;} .mbody,.task-mbody{padding:15px 18px;} .mfoot,.task-mfoot{padding:12px 18px;} .mclose,.task-mclose{color:#5d5d62;} .mclose:hover,.task-mclose:hover{background:#1a1a1b;color:#d8d8db;} .field{gap:6px;} .field label,.task-slbl{color:#66666b;font-weight:650;} .field input,.field textarea,.tagbox,.stepinp, .task-link-inp,.task-date-btn,.task-date-native, .mockups-modal-grid .field input,.mockups-modal-grid .field select{ background:#151515; border:1px solid transparent; border-radius:7px; color:#e6e6e8; box-shadow:none; } .field input:focus,.field textarea:focus,.stepinp:focus,.ginput:focus, .task-link-inp:focus,.task-date-btn:hover,.task-date-wrap.open .task-date-btn, .mockups-modal-grid .field input:focus,.mockups-modal-grid .field select:focus{ background:#181818; border-color:rgba(255,255,255,.085); box-shadow:none; } .bghst,.boutl,.bcanc{ background:#181818; border:0; color:#a6a6ab; border-radius:7px; } .bghst:hover,.boutl:hover,.bcanc:hover{background:#212122;color:#f2f2f3;} .bdel{border:0;border-radius:7px;} .task-section{padding:13px;background:#141414;border:0;border-radius:8px;} .task-notes-inp{background:transparent;border:0;color:#e2e2e4;box-shadow:none;} .task-link-item{background:#181818;border:0;} .task-link-url{color:#a6a6ac;} .task-link-url:hover{color:#fff;} .task-img-add{background:#111111;border:1px dashed #2d2d2f;} .task-img-add:hover{background:#151515;border-color:#49494d;color:#bdbdc1;} .task-img-add-icon{background:#0b0b0b;border:0;color:#77777c;} .task-date-wrap.has-date .task-date-btn, .task-date-wrap.has-date .task-date-btn svg, .task-date-wrap.open .task-date-btn svg,.task-date-btn:hover svg{color:#c8c8cc;} .task-date-pop{background:#151515;border:0;border-radius:9px;box-shadow:var(--shadow);} .task-date-nav{background:#1c1c1d;border:0;color:#96969b;} .task-date-cell:hover{background:#222223;border-color:transparent;transform:none;} .task-date-cell.active,.task-date-cell.active.today{ background:#ededee; border-color:#ededee; color:#090909; box-shadow:none; } .task-priority-switch{background:#202021;border:0;} .task-priority-switch::after{background:#707076;box-shadow:none;} .ctxmenu{ padding:5px; border:0; border-radius:9px; background:#111111; box-shadow:0 18px 48px rgba(0,0,0,.5); } .ctxmenu-head{color:#56565b;} .ctxmenu-item{min-height:32px;border-radius:6px;color:#99999f;font-weight:550;} .ctxmenu-item:hover{background:#1c1c1d;color:#f1f1f2;} .ctxmenu-sep{height:4px;margin:1px 0;background:transparent;} /* Mockups uses the same product language without decorative framing. */ #panel-mockups{height:calc(100dvh - 98px);} .mockups-shell{gap:12px;height:100%;min-height:0;grid-template-rows:minmax(0,1fr);overflow:hidden;} #mockup-preview-slot{height:100%;min-width:0;min-height:0;overflow:hidden;} .mockups-panel{ padding:12px; gap:11px; background:#0d0d0e; border:0; border-radius:9px; box-shadow:none; } .mockups-panel.preview{background:transparent;border:0;} .mockups-settings-section{ gap:9px; padding:10px; background:#131313; border:0; border-radius:8px; } .mockups-settings-kicker,.mockups-field-label{color:#5f5f64;font-size:9.5px;} .mockups-input,.mockups-select,.mockups-textarea,.mockups-mini-input, .mockups-settings-btn,.mockups-search-btn,.mockups-btn,.mockups-template-card, .mockups-count-chip,.mockups-mode-option,.mockups-selected,.mockups-age-btn, .mockups-search-clear,.mockups-channel-empty{ background:#191919; border:1px solid transparent; border-radius:7px; color:#a0a0a5; box-shadow:none; } .mockups-input,.mockups-select,.mockups-mini-input{height:40px;} .mockups-textarea{border-radius:7px;} .mockups-input:focus,.mockups-select:focus,.mockups-textarea:focus,.mockups-mini-input:focus{ background:#1c1c1d; border-color:rgba(255,255,255,.085); } .mockups-settings-btn:hover,.mockups-search-btn:hover,.mockups-btn:hover, .mockups-template-card:hover,.mockups-count-chip:hover,.mockups-mode-option:hover{ background:#202021; border-color:transparent; color:#ededee; } .mockups-template-card.on,.mockups-count-chip.on,.mockups-mode-option.on,.mockups-age-option.on{ background:#252526; border-color:transparent; color:#f2f2f3; box-shadow:none; } .mockups-mode-segment{background:#141414;border:0;border-radius:8px;} .mockups-upload{background:#151515;border:0;border-radius:8px;} .mockups-upload:hover{background:#181818;} .mockups-upload-icon{background:#202021;border:0;border-radius:7px;color:#929297;} .mockups-upload.drag-over{background:#1d1d1e;border-color:rgba(255,255,255,.32);box-shadow:0 0 0 3px rgba(255,255,255,.065);} .mockups-selected{background:#171717;border:0;} .mockups-stage{background:#000;border-radius:8px;} .mockups-preview-bar{ padding:7px; border:0; border-radius:9px; background:#111111; box-shadow:0 16px 40px rgba(0,0,0,.42); backdrop-filter:none; } .mockups-preview-bar .mockups-btn{min-height:40px;border-radius:7px;} .mockups-preview-bar .mockups-btn.primary{box-shadow:none;} @media(max-width:1180px) and (min-width:981px){ .mockups-shell{grid-template-columns:minmax(210px,220px) minmax(300px,1fr) minmax(174px,194px);} .mockups-panel{padding:9px;gap:9px;} .mockups-settings-section{padding:8px;gap:7px;} .mockups-channel-strip{grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:9px 7px;} .mockups-channel-pill-avatar{width:40px;height:40px;} } /* Neutralize leftover blue interaction states; brand commands remain blue. */ .tpill.on:not(.tpill-primary), .ib.cp:hover,.rtag:hover,.addstep:hover, .gadd:hover,.tgadd:hover, .note-add:focus-within,.note-item.drag-over{ color:#d0d0d3; background:#191919; border-color:transparent; } .access-role.owner,.access-role.talent,.wfn,.svn,.note-badge.has-content{ color:#9b9ba1; background:#1b1b1c; border-color:transparent; } #boxsel{border-color:rgba(255,255,255,.52);background:rgba(255,255,255,.055);} .dropov.on{border-color:rgba(255,255,255,.28);} .dropinner{color:#d2d2d5;} .selbtn.accent-btn{background:#202021;border-color:transparent;color:#e7e7e9;} .selbtn.accent-btn:hover{background:#29292b;color:#fff;} @media(max-width:980px){ #panel-mockups{height:auto;} .mockups-panel.preview{min-height:500px;} } @media(max-width:640px){ .topbar{height:auto;min-height:56px;padding:8px 10px;} .content{padding:10px;} .tfbar{padding-left:10px;padding-right:10px;} .modal,.task-modal{border-radius:0;} } /* V13 AUTH AND TASK DIALOG CORRECTIONS --------------------------------- */ .task-modal,.task-mh,.task-mbody,.task-mfoot{background:#0e0e0f;} .task-mbody{color:#e7e7e9;} .task-section{background:#141414;} .task-link-inp,.task-date-btn,.task-date-native{background:#181818;} .task-link-inp:focus,.task-date-btn:hover,.task-date-wrap.open .task-date-btn{background:#1c1c1d;} .task-img-add{background:#111111;} /* V14 HOME AND INTERACTION FOUNDATION ---------------------------------- */ :root{ --bg:#000; --bg2:#050505; --panel:#111112; --panel2:#161617; --panel3:#1d1d1f; --border:rgba(255,255,255,.045); --border2:rgba(255,255,255,.085); --text:#f2f2f3; --text2:#9a9a9f; --text3:#626267; --shadow:0 24px 64px rgba(0,0,0,.52); --shadow-sm:0 12px 28px rgba(0,0,0,.3); } html,body,#app{min-height:100dvh;} body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} .main,.content,.topbar,.tfbar{background:#000;} /* Navigation stays quiet, but every state remains legible. */ .sb,.sbfoot{background:#080808;} .sb{ border:0; transition:width .16s cubic-bezier(.2,.8,.2,1); contain:layout style; } .sbh{height:58px;padding:12px 11px 10px 13px;} .brand{gap:9px;} .bicon{width:25px;height:25px;} .bname{font-size:13px;font-weight:620;} .sbtog{width:30px;height:30px;} .sbnav{padding:8px 8px 0;} .sblabel{padding:10px 10px 7px;font-size:9px;color:#505055;} .navbtn{ min-height:40px; padding:0 10px; border-radius:7px; color:#85858a; transition:background-color .12s ease,color .12s ease; } .navbtn:hover{background:#121212;color:#cacace;} .navbtn.on{background:#191919;color:#f4f4f5;font-weight:560;} .navbtn .nvi{opacity:.58;} .navbtn:hover .nvi,.navbtn.on .nvi{opacity:.94;} .nvcnt,.navbtn.on .nvcnt{color:#606065;} .navbtn.on .nvcnt{color:#929297;} /* Account identity and actions read as one deliberate footer control. */ .sbfoot{ position:relative; display:block; min-height:66px; padding:8px; } .sbaccount{ width:100%; min-height:50px; padding:7px 68px 7px 8px; gap:10px; border-radius:8px; background:#101010; transition:background-color .12s ease; } .sbaccount:hover{background:#141414;} .sbaccount-avatar{width:32px;height:32px;} .sbaccount-meta{gap:3px;} .sbaccount-name{font-size:12px;font-weight:620;line-height:1.15;} .sbaccount-sub{ max-width:none; color:#6d6d72; font-size:9.5px; line-height:1.2; } .sbfoot-actions{ position:absolute; right:15px; top:50%; width:auto; padding:0; gap:2px; opacity:.58; transform:translateY(-50%); transition:opacity .12s ease; } .sbfoot:hover .sbfoot-actions,.sbfoot:focus-within .sbfoot-actions{opacity:1;} .sbfoot .themetog{width:27px;height:27px;border-radius:6px;color:#747479;} .sbfoot .themetog:hover{background:#202020;color:#ededee;} .sync-dot{width:5px;height:5px;} aside.sb.col .sbfoot{ display:flex!important; min-height:60px!important; padding:9px 0!important; align-items:center!important; justify-content:center!important; } aside.sb.col .sbaccount{ width:38px!important; height:38px!important; min-height:38px!important; padding:3px!important; background:#101010!important; } aside.sb.col .sbaccount-avatar{width:32px!important;height:32px!important;} aside.sb.col .sbaccount-meta, aside.sb.col .sbfoot-actions{display:none!important;} /* Workspace chrome uses compact, stable dimensions. */ .topbar{height:56px;padding:0 18px;} .tbleft{font-size:13.5px;font-weight:620;} .content{padding:14px 18px 22px;} .sbox{min-height:34px;background:#111111;} .sbox:focus-within{background:#171717;border-color:rgba(255,255,255,.09);} .zbtns{background:#111111;} .zbtn,.thtogbtn,.themetog{transition:background-color .12s ease,color .12s ease;} .zbtn.on,.thtogbtn.on{background:#232323;color:#f1f1f2;} /* Home keeps useful information in the first viewport. */ .dash{gap:12px;padding:2px 0 16px;} .dash-greeting{min-height:54px;padding:2px 1px 4px;} .dash-greeting-text h2{font-size:19px;font-weight:640;letter-spacing:0;} .dash-greeting-text p{margin-top:4px;color:#68686d;} .dash-time{ padding:5px 10px; border-radius:6px; background:#111111; color:#747479; } .dash-tasks-row,.dash-lower-row{gap:12px;} .dash-tasks-row{align-items:stretch;} .dash-tasks-row>.bento{ height:clamp(320px,calc(100dvh - 330px),410px); min-height:0; } .bento,.bento.bento-shared,body.light .bento.bento-shared{ background:#111112; border-radius:8px; } .bento-h{min-height:44px;padding:1px 13px 0;} .bento-title{font-size:9.5px;color:#77777c;letter-spacing:.08em;} .bento-body{min-height:0;padding:7px 10px 10px;} .dash-tasks-row .bento-body{overflow:hidden;} .dash-tasks-row .notes-list{ min-height:0; max-height:none; margin-bottom:7px; padding-right:2px; } .note-item{ min-height:35px; padding:7px 8px; background:transparent; border-radius:6px; transition:background-color .11s ease,opacity .11s ease; } .note-item:hover{background:#181818;} .note-text{font-size:12px;line-height:1.35;} .note-cb{width:16px;height:16px;border-radius:4px;background:#0d0d0e;border-color:#303033;} .note-cb.done{background:#ececee;border-color:#ececee;color:#0a0a0a;} .note-actions{transition:opacity .1s ease;} .note-add{ min-height:38px; margin-top:auto; padding:7px 8px; border:1px solid transparent; border-radius:7px; background:#171717; } .note-add:hover{background:#1a1a1a;} .note-add:focus-within{background:#1c1c1c;border-color:rgba(255,255,255,.1);} .note-inp{font-size:11.5px;} .note-submit,.note-submit.note-submit-subtle{ width:22px; height:22px; border-radius:5px; background:#252525; color:#b8b8bc; } .note-submit:hover,.note-submit.note-submit-subtle:hover{background:#303030;color:#fff;} .note-badge{background:#1b1b1c;color:#6e6e73;border:0;} .dash-lower-row>.bento{min-height:210px;} .tp-list{gap:3px;} .tp-item{min-height:36px;padding:6px 8px;background:transparent;border-radius:6px;} .tp-item:hover{background:#181818;border-color:transparent;} /* The task dialog is compact, neutral, and visually continuous. */ .task-ov{padding:20px;background:rgba(0,0,0,.8);} .task-modal{ width:680px; max-width:calc(100vw - 40px); max-height:min(88dvh,760px); background:#101011; border:1px solid rgba(255,255,255,.07); border-radius:10px; box-shadow:0 28px 80px rgba(0,0,0,.62); transition:transform .16s cubic-bezier(.2,.8,.2,1),opacity .16s ease; } .task-mh,.task-mbody,.task-mfoot{background:#101011;} .task-mh{min-height:58px;padding:0 16px;gap:8px;} .task-title-inp{font-size:14px;font-weight:620;letter-spacing:0;} .task-mbody{padding:12px 14px;gap:10px;overflow-y:auto;} .task-section{padding:12px;background:#161617;border-radius:8px;gap:7px;} .task-slbl{font-size:9.5px;color:#6f6f74;letter-spacing:.08em;} .task-notes-inp{min-height:92px;font-size:12.5px;line-height:1.6;} .task-link-inp,.task-date-btn,.task-date-native{background:#1b1b1c;} .task-link-inp{min-height:40px;border-radius:7px;padding:9px 11px;} .task-link-add .bghst{min-width:58px;} .task-img-add{border-color:#303033;background:#131314;border-radius:8px;} .task-img-add.empty{min-height:132px;} .task-img-add-icon{width:40px;height:40px;border-radius:8px;} .task-mfoot{min-height:64px;padding:10px 14px;gap:10px;} .task-date-btn{height:38px;min-width:168px;border-radius:7px;} .task-priority-switch{height:30px;} .task-side-actions .bsave{min-width:86px;height:38px;} @media(max-width:1120px) and (min-width:641px){ .dash-tasks-row>.bento{height:360px;} } @media(max-width:640px){ .content{padding:10px;} .dash{gap:10px;} .dash-greeting{min-height:48px;} .dash-tasks-row>.bento{height:auto;min-height:310px;} .task-ov{padding:0;} .task-modal{width:100vw;max-width:none;height:100dvh;max-height:none;border:0;border-radius:0;} } @media(prefers-reduced-motion:reduce){ .sb,.task-modal,.panel.on,.note-item{transition:none!important;animation:none!important;} } /* Workspace activity and recovery */ .workspace-label{margin-top:14px;} #panel-activity{height:100%;overflow:hidden;} #activity-root{height:100%;min-height:0;} .activity-shell{ width:min(1080px,100%); height:100%; min-height:0; margin:0 auto; padding:28px 32px 34px; display:flex; flex-direction:column; color:var(--text); } .activity-header{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;margin-bottom:24px;} .activity-header h1{margin:0 0 6px;font-size:22px;line-height:1.2;font-weight:570;letter-spacing:0;color:#f0f0f2;} .activity-header p{margin:0;font-size:12px;line-height:1.5;color:#6f6f74;} .activity-metrics{display:flex;align-items:flex-start;gap:28px;flex-shrink:0;padding-top:1px;} .activity-metrics>div{display:flex;flex-direction:column;gap:3px;min-width:72px;} .activity-metrics strong{font-size:17px;line-height:1.1;font-weight:560;color:#d9d9dc;font-variant-numeric:tabular-nums;} .activity-metrics span{font-size:10px;color:#59595e;white-space:nowrap;} .activity-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;} .activity-tabs{display:inline-flex;align-items:center;gap:3px;padding:3px;border-radius:8px;background:#111112;} .activity-tabs button{ min-width:88px;height:32px;padding:0 12px;border:0;border-radius:6px;background:transparent;color:#6e6e73; font:500 11.5px 'Geist',sans-serif;cursor:pointer;transition:background .14s ease,color .14s ease; } .activity-tabs button:hover{color:#bdbdc1;} .activity-tabs button.on{background:#202021;color:#f0f0f2;box-shadow:0 1px 2px rgba(0,0,0,.24);} .activity-tabs button span{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;margin-left:5px;padding:0 4px;border-radius:999px;background:#2b2b2d;color:#9b9ba0;font-size:9px;} .activity-search{width:min(260px,34vw);height:36px;display:flex;align-items:center;gap:8px;padding:0 11px;border-radius:8px;background:#141415;color:#59595e;transition:background .14s ease,color .14s ease;} .activity-search:focus-within{background:#1a1a1b;color:#8d8d92;} .activity-search svg{width:14px;height:14px;flex:0 0 auto;} .activity-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#d8d8db;font:400 11.5px 'Geist',sans-serif;letter-spacing:0;} .activity-search input::placeholder{color:#55555a;} .activity-filters{display:flex;align-items:center;gap:5px;margin-bottom:18px;} .activity-filters button{height:27px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:#626267;font:500 10.5px 'Geist',sans-serif;cursor:pointer;transition:background .14s ease,color .14s ease;} .activity-filters button:hover{background:#141415;color:#aaaab0;} .activity-filters button.on{background:#1b1b1c;color:#d5d5d8;} .activity-content{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;padding:0 3px 28px 0;scrollbar-gutter:stable;} .activity-day{padding:15px 0 8px;font-size:10px;line-height:1;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#505055;} .activity-day:first-child{padding-top:4px;} .activity-event{position:relative;min-height:58px;display:grid;grid-template-columns:28px 32px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 9px 7px 0;border-radius:8px;transition:background .14s ease;} .activity-event:hover{background:#111112;} .activity-event-rail{position:relative;width:28px;height:100%;display:grid;place-items:center;} .activity-event-rail::after{content:'';position:absolute;top:36px;bottom:-22px;left:13px;width:1px;background:#19191a;} .activity-event-icon{position:relative;z-index:1;width:27px;height:27px;display:grid;place-items:center;border-radius:7px;background:#171718;color:#77777c;} .activity-event-icon svg{width:13px;height:13px;} .activity-avatar,.trash-mini-avatar{display:grid;place-items:center;border-radius:999px;object-fit:cover;background:#222224;color:#bcbcc1;font-weight:600;flex:0 0 auto;} .activity-avatar{width:32px;height:32px;font-size:10px;} .activity-avatar-fallback{border:1px solid rgba(255,255,255,.04);} .activity-event-copy{min-width:0;display:flex;flex-direction:column;gap:4px;} .activity-event-line{min-width:0;font-size:11.5px;line-height:1.35;color:#747479;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .activity-event-line strong{font-weight:550;color:#d5d5d8;} .activity-event-line b{font-weight:500;color:#aaaab0;} .activity-event-meta{display:flex;align-items:center;gap:6px;min-width:0;font-size:9.5px;color:#505055;white-space:nowrap;overflow:hidden;} .activity-event-meta span{overflow:hidden;text-overflow:ellipsis;} .activity-event-meta span+span::before{content:'·';margin-right:6px;color:#39393c;} .activity-event time{padding-left:10px;font-size:9.5px;color:#4f4f54;font-variant-numeric:tabular-nums;white-space:nowrap;} .activity-state{min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#606065;} .activity-state-icon{width:38px;height:38px;margin-bottom:12px;display:grid;place-items:center;border-radius:9px;background:#161617;color:#77777c;font-size:14px;} .activity-state strong{font-size:12.5px;font-weight:550;color:#b8b8bc;margin-bottom:5px;} .activity-state span{max-width:360px;font-size:11px;line-height:1.5;color:#5e5e63;} .activity-state-spinner{width:24px;height:24px;margin-bottom:14px;border:2px solid #252527;border-top-color:#77777c;border-radius:999px;animation:spin .8s linear infinite;} .trash-list{display:flex;flex-direction:column;gap:7px;padding-top:6px;} .trash-row{min-height:72px;display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:13px;padding:9px 10px;border-radius:9px;background:#111112;transition:background .14s ease;} .trash-row:hover{background:#151516;} .trash-preview{width:54px;height:54px;border-radius:7px;object-fit:cover;background:#181819;} .trash-preview-empty{display:grid;place-items:center;color:#55555a;} .trash-preview-empty svg{width:19px;height:19px;} .trash-copy{min-width:0;display:flex;flex-direction:column;gap:7px;} .trash-title{font-size:12px;font-weight:540;color:#d1d1d4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .trash-meta{display:flex;align-items:center;gap:6px;min-width:0;font-size:9.5px;color:#5c5c61;white-space:nowrap;overflow:hidden;} .trash-meta>span{overflow:hidden;text-overflow:ellipsis;} .trash-dot{width:2px;height:2px;border-radius:999px;background:#3d3d40;flex:0 0 auto;} .trash-mini-avatar{width:17px;height:17px;font-size:6px;} .trash-actions{display:flex;align-items:center;gap:5px;} .activity-button{height:31px;padding:0 12px;border:0;border-radius:6px;background:#202021;color:#bcbcc0;font:550 10.5px 'Geist',sans-serif;cursor:pointer;transition:background .14s ease,color .14s ease;} .activity-button:hover{background:#29292b;color:#fff;} .activity-button.primary{background:#e6e6e8;color:#111112;} .activity-button.primary:hover{background:#fff;color:#0b0b0c;} .activity-icon-button{width:31px;height:31px;display:grid;place-items:center;border:0;border-radius:6px;background:transparent;color:#5e5e63;cursor:pointer;transition:background .14s ease,color .14s ease;} .activity-icon-button svg{width:14px;height:14px;} .activity-icon-button:hover{background:#222223;color:#bdbdc1;} .activity-icon-button.danger:hover{background:rgba(196,83,83,.10);color:#cf7777;} .activity-button:disabled,.activity-icon-button:disabled{cursor:default;opacity:.58;pointer-events:none;} .activity-spinner{width:12px;height:12px;display:block;border:1.5px solid rgba(17,17,18,.28);border-top-color:#111112;border-radius:50%;animation:activity-spin .65s linear infinite;} @keyframes activity-spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.activity-spinner{animation:none;border-color:rgba(17,17,18,.5)}} /* System health */ .health-refresh{height:34px;display:inline-flex;align-items:center;gap:7px;padding:0 11px;border:0;border-radius:7px;background:#171718;color:#85858a;font:500 10.5px 'Geist',sans-serif;cursor:pointer;transition:background .14s ease,color .14s ease;} .health-refresh:hover{background:#202021;color:#d4d4d7;} .health-refresh svg{width:13px;height:13px;} .health-view{display:flex;flex-direction:column;gap:23px;padding-top:6px;} .health-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;} .health-service{min-width:0;min-height:102px;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:16px;border-radius:8px;background:#121213;} .health-service-label{display:flex;align-items:center;gap:7px;font-size:9.5px;font-weight:550;text-transform:uppercase;color:#55555a;} .health-service strong{font-size:14px;line-height:1.2;font-weight:560;color:#d5d5d8;} .health-service>span{font-size:9.5px;line-height:1.4;color:#56565b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .health-dot{width:6px;height:6px;border-radius:50%;background:#55555a;box-shadow:0 0 0 3px rgba(255,255,255,.025);} .health-dot.healthy{background:#6eaa84;}.health-dot.issue{background:#c56d6d;}.health-dot.checking{background:#b19962;} .health-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:0 2px;} .health-section-head>div{display:flex;flex-direction:column;gap:4px;} .health-section-head strong{font-size:12px;font-weight:550;color:#c9c9cc;} .health-section-head span{font-size:9.5px;color:#55555a;} .health-list{display:flex;flex-direction:column;gap:5px;} .health-row{min-height:66px;display:grid;grid-template-columns:34px minmax(140px,1.2fr) 72px 72px minmax(180px,1.4fr) auto;align-items:center;gap:12px;padding:9px 11px;border-radius:8px;background:#111112;transition:background .14s ease;} .health-row:hover{background:#151516;} .health-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;object-fit:cover;background:#222224;color:#bcbcc1;font-size:10px;font-weight:600;} .health-person,.health-detail,.health-report-state{min-width:0;display:flex;flex-direction:column;gap:4px;} .health-person strong{font-size:11.5px;font-weight:550;color:#d4d4d7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .health-person span,.health-detail span,.health-report-state time{font-size:9px;color:#525257;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .health-detail strong{font-size:10.5px;font-weight:500;color:#88888d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .health-report-state{align-items:flex-end;} .health-status{height:23px;display:inline-flex;align-items:center;gap:6px;padding:0 8px;border-radius:6px;background:#1a1a1b;color:#7a7a7f;font-size:9.5px;font-weight:550;white-space:nowrap;} .health-status i{width:5px;height:5px;border-radius:50%;background:#66666b;} .health-status.healthy{background:rgba(77,133,96,.12);color:#80ad8f;}.health-status.healthy i{background:#6eaa84;} .health-status.issue{background:rgba(162,71,71,.12);color:#c57a7a;}.health-status.issue i{background:#c56d6d;} .health-status.stale,.health-status.checking{background:rgba(148,120,62,.12);color:#ab9669;}.health-status.stale i,.health-status.checking i{background:#b19962;} .health-user-card{overflow:hidden;border-radius:8px;background:#111112;transition:background .14s ease;} .health-user-card:hover,.health-user-card[open]{background:#151516;} .health-user-summary{min-height:68px;display:grid;grid-template-columns:34px minmax(150px,1fr) minmax(180px,1.15fr) minmax(200px,1.2fr) auto 18px;align-items:center;gap:13px;padding:10px 12px;cursor:pointer;list-style:none;} .health-user-summary::-webkit-details-marker{display:none;} .health-summary-cell{min-width:0;display:flex;flex-direction:column;gap:4px;} .health-summary-cell span{color:#525257;font-size:9px;} .health-summary-cell strong{overflow:hidden;color:#8c8c91;font-size:10.5px;font-weight:510;text-overflow:ellipsis;white-space:nowrap;} .health-expand{width:16px;height:16px;color:#55555a;transition:transform .16s ease,color .16s ease;} .health-user-card[open] .health-expand{transform:rotate(180deg);color:#9b9ba0;} .health-user-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 10px 10px;} .health-user-details section{min-width:0;padding:14px;border-radius:7px;background:#101011;} .health-user-details h3{margin:0 0 12px;color:#77777c;font-size:9px;font-weight:620;letter-spacing:0;text-transform:uppercase;} .health-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px 14px;} .health-fact{min-width:0;display:flex;flex-direction:column;gap:4px;} .health-fact.wide{grid-column:1/-1;} .health-fact span{color:#4f4f54;font-size:8.5px;} .health-fact strong{overflow:hidden;color:#a4a4a9;font-size:10px;font-weight:500;line-height:1.35;text-overflow:ellipsis;white-space:nowrap;} @media(max-width:900px){ .activity-shell{padding:24px 22px 28px;} .activity-header{gap:18px;} .activity-metrics{gap:18px;} .activity-metrics>div{min-width:62px;} .health-row{grid-template-columns:34px minmax(130px,1fr) 70px 70px auto;} .health-counters{display:none;} .health-user-summary{grid-template-columns:34px minmax(140px,1fr) minmax(160px,1fr) auto 18px;} .health-location{display:none;} .health-facts{grid-template-columns:repeat(2,minmax(0,1fr));} } @media(max-width:700px){ #panel-activity{overflow:auto;} #activity-root{height:auto;min-height:100%;} .activity-shell{height:auto;min-height:100%;padding:18px 14px 28px;} .activity-header{flex-direction:column;margin-bottom:18px;} .activity-metrics{width:100%;justify-content:space-between;gap:10px;} .activity-toolbar{align-items:stretch;flex-direction:column;} .activity-tabs{align-self:flex-start;} .activity-search{width:100%;max-width:none;} .health-refresh{align-self:flex-end;} .health-services{grid-template-columns:1fr;} .health-service{min-height:82px;} .health-row{grid-template-columns:34px minmax(0,1fr) auto;gap:10px;} .health-detail{display:none;} .health-user-summary{grid-template-columns:34px minmax(0,1fr) auto 16px;gap:10px;} .health-summary-cell{display:none;} .health-user-details{grid-template-columns:1fr;} .activity-event{grid-template-columns:27px 30px minmax(0,1fr);padding-right:6px;} .activity-event time{grid-column:3;padding:0;margin-top:-6px;font-size:9px;} .trash-row{grid-template-columns:46px minmax(0,1fr) auto;gap:10px;padding:8px;} .trash-preview{width:46px;height:46px;} .trash-meta .trash-mini-avatar,.trash-meta .trash-mini-avatar+span,.trash-meta .trash-mini-avatar+span+.trash-dot{display:none;} } @media(max-width:430px){ .activity-header h1{font-size:19px;} .activity-metrics span{font-size:9px;} .activity-tabs{width:100%;} .activity-tabs button{flex:1;} .trash-row{grid-template-columns:42px minmax(0,1fr);} .trash-preview{width:42px;height:42px;} .trash-actions{grid-column:2;justify-self:start;} } /* V15 LIBRARY CARDS AND RESPONSIVE TOOLBAR ----------------------------- */ #grid-prompts,#grid-thumbs{gap:12px;align-items:start;} #grid-prompts>.card,#grid-thumbs>.pcard, #grid-prompts>.gadd,#grid-thumbs>.tgadd{width:100%;box-sizing:border-box;} /* Prompt and thumbnail media share one exact visual frame. */ .prompt-card,.pcard{ border-radius:8px; background:#111112; box-shadow:none; transition:background-color .12s ease,outline-color .12s ease; } .prompt-card:hover,.prompt-card:focus-within, .pcard:hover,.pcard:focus-within{background:#141415;} .prompt-card.has-media .cthumb, .prompt-card .cph,.pimgw{ width:100%; aspect-ratio:16/9; height:auto; background:#0c0c0d; } .prompt-placeholder{ color:#5b5b60; background:#0d0d0e; } .prompt-placeholder svg{opacity:.82;} .prompt-card .cbody{ min-height:102px; padding:11px 12px 12px; display:flex; flex-direction:column; } .prompt-card .ctitle{ min-height:34px; margin:0 0 5px; padding:0; color:#ececee; font-size:12.5px; font-weight:620; line-height:1.35; letter-spacing:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } .prompt-card .cprev{ min-height:31px; color:#707075; font-size:10.75px; line-height:1.45; opacity:1; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } .prompt-card .ctags{margin-top:auto;padding-top:8px;max-height:28px;overflow:hidden;} /* Thumbnail metadata supports the image and keeps every card stable. */ .pimg{transition:none;} .pfoot{ min-height:50px; padding:8px 10px 9px; background:#111112; } .pcard:hover .pfoot,.pcard:focus-within .pfoot{background:#141415;} .ptags{ display:flex; flex-wrap:wrap; align-content:flex-start; gap:4px; max-height:38px; overflow:hidden; } .pcard .ctag{ padding:2px 7px; border-radius:5px; background:#1a1a1b; color:#66666b; font-size:9px; line-height:1.35; opacity:.78; } .pcard:hover .ctag,.pcard:focus-within .ctag{opacity:.9;} .pcard .ctag.ctag-realistic{color:#78a7ea;background:rgba(63,144,236,.11);opacity:.92;} .pcard .ctag.ctag-docu{color:#77ae8d;background:rgba(74,166,112,.12);opacity:.92;} .pcard .ctag.ctag-cartoony{color:#db9865;background:rgba(223,132,61,.12);opacity:.92;} /* Contextual controls stay hidden until they are useful. */ .cfoot,.pbtns{ top:8px; right:8px; gap:4px; opacity:0; pointer-events:none; transform:translateY(-2px); transition:opacity .13s ease,transform .13s ease; } .prompt-card:hover .cfoot,.prompt-card:focus-within .cfoot, .pcard:hover .pbtns,.pcard:focus-within .pbtns{ opacity:1; pointer-events:auto; transform:none; } .cfoot .ib,.pbtn,.prompt-card.text-only .cfoot .ib{ width:27px; height:27px; border-radius:6px; background:rgba(18,18,19,.94); color:#a0a0a5; border:1px solid rgba(255,255,255,.065); box-shadow:0 8px 18px rgba(0,0,0,.32); } .cfoot .ib:hover,.pbtn:hover{background:#29292a;color:#fff;} .pcheck{ width:20px; height:20px; border-radius:5px; border:1px solid rgba(255,255,255,.55); background:rgba(12,12,13,.78); box-shadow:none; backdrop-filter:none; } .pcard.sel,.pcard.selpreview{ outline:1px solid rgba(255,255,255,.5); outline-offset:-1px; box-shadow:0 0 0 3px rgba(255,255,255,.06); } .pcard.sel .pcheck{background:#ededee;border-color:#ededee;color:#0b0b0c;box-shadow:none;} /* Copy confirmation is neutral and readable instead of tinting the card. */ .cflash,.pflash{background:rgba(0,0,0,.42);} .cpill{ padding:6px 11px; border:0; border-radius:999px; background:#202021; color:#ededee; box-shadow:0 10px 24px rgba(0,0,0,.32); } /* Creation tiles feel available without competing with real content. */ #grid-prompts>.gadd,#grid-thumbs>.tgadd{ min-height:100%; aspect-ratio:auto; align-self:stretch; border:1px dashed #303033; border-radius:8px; background:#0b0b0c; color:#6d6d72; } #grid-prompts>.gadd:hover,#grid-thumbs>.tgadd:hover{ border-color:#515156; background:#111112; color:#b8b8bc; } .gring{width:38px;height:38px;border-color:#333336;background:#111112;} .glbl{font-size:11px;color:inherit;} /* Filter and search states use the same neutral hierarchy. */ .tfbar{gap:4px;} .tpill{border-radius:6px;color:#65656a;} .tpill:hover{background:#151516;color:#b0b0b5;} .tpill.on{background:#202021;color:#efeff0;} .thtogbtn.on,.zbtn.on{background:#232324;color:#f0f0f1;} @media(max-width:980px){ .topbar{ display:grid; grid-template-columns:minmax(0,1fr) auto; height:auto; min-height:54px; padding:9px 12px; gap:8px 10px; } .tbleft{grid-column:1;grid-row:1;align-self:center;} .tbright{ grid-column:2; grid-row:1; width:auto; margin:0; flex-wrap:nowrap; justify-content:flex-end; } .tbcenter{ grid-column:1/-1; grid-row:2; order:initial; width:100%; } .sbox{width:100%;} .tfbar{padding:0 12px 7px;} } @media(max-width:640px){ #grid-prompts,#grid-thumbs{gap:10px;} #grid-prompts>.gadd{ min-height:calc((100vw - var(--sbc) - 20px) * .5625 + 94px); } .prompt-card .cbody{min-height:94px;padding:10px;} .prompt-card .ctitle{font-size:12px;} .pfoot{min-height:46px;padding:7px 8px 8px;} .cfoot,.pbtns{top:6px;right:6px;gap:3px;} } @media(hover:none){ .cfoot,.pbtns{opacity:1;pointer-events:auto;transform:none;} } /* V16 WORKFLOW AND TOOL LIBRARIES --------------------------------------- */ #grid-workflows,#grid-tools{ gap:12px; align-items:stretch; grid-auto-rows:1fr; } #grid-workflows>.workflow-card,#grid-tools>.tool-card, #grid-workflows>.gadd,#grid-tools>.gadd{ width:100%; box-sizing:border-box; } /* Workflows use the same stable media rhythm as the visual libraries. */ .workflow-card{ min-height:100%; border-radius:8px; background:#111112; box-shadow:none; transition:background-color .12s ease; } .workflow-card:hover,.workflow-card:focus-within{background:#141415;} .workflow-card .cthumb,.workflow-card .cph{ width:100%; aspect-ratio:16/9; height:auto; background:#0c0c0d; } .workflow-placeholder{ flex-direction:column; gap:8px; color:#55555a; font-family:'Geist Mono',monospace; font-size:10px; } .workflow-placeholder svg{opacity:.82;} .workflow-card .cbody{ height:166px; min-height:166px; padding:11px 12px 12px; display:flex; flex-direction:column; overflow:hidden; } .workflow-head{display:flex;align-items:flex-start;gap:8px;} .workflow-card .ctitle{ flex:1; min-width:0; min-height:34px; margin:0 0 5px; color:#ececee; font-size:12.5px; font-weight:620; line-height:1.35; letter-spacing:0; } .workflow-count{ min-width:21px; height:20px; padding:0 6px; border-radius:5px; background:#1a1a1b; color:#727277; font:600 9px/20px 'Geist Mono',monospace; text-align:center; flex-shrink:0; } .workflow-card .wfprev{gap:4px;margin:1px 0 0;} .workflow-card .wfl{align-items:center;gap:7px;min-width:0;} .workflow-card .wfn{ width:18px; height:18px; padding:0; border-radius:5px; background:#1a1a1b; color:#77777c; line-height:18px; text-align:center; } .workflow-card .wft{color:#77777c;font-size:10.75px;line-height:1.45;} .workflow-card .wfmore{margin:2px 0 0 25px;color:#55555a;font-size:9.5px;} .workflow-card .ctags{margin-top:auto;padding-top:9px;max-height:28px;overflow:hidden;} /* Tools share the same card frame, with a quiet useful fallback. */ .tool-card{ position:relative; display:flex; flex-direction:column; border-radius:8px; background:#111112; box-shadow:none; transition:background-color .12s ease; } .tool-card:hover,.tool-card:focus-within{background:#141415;} .tool-card .tprev{ width:100%; aspect-ratio:16/9; height:auto; background:#0c0c0d; } .tool-card .tprev img.ss{width:100%;height:100%;object-fit:cover;} .tool-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; } .tool-card .tfavbig{ width:44px; height:44px; border-radius:10px; opacity:.72; box-shadow:0 8px 24px rgba(0,0,0,.2); } .tool-fallback-icon{ display:none; width:42px; height:42px; align-items:center; justify-content:center; border-radius:10px; background:#161617; color:#5c5c61; } .tool-card .trow{ height:76px; min-height:76px; padding:10px 12px 11px; align-items:flex-start; gap:9px; } .tool-card .tfav{width:25px;height:25px;border-radius:6px;background:#1a1a1b;} .tool-card .tname{ padding-right:4px; color:#ececee; font-size:12.5px; font-weight:620; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tool-card .tdom{margin-top:1px;color:#67676c;font-size:9.75px;line-height:1.35;} .tool-card .tdesc{ margin-top:4px; color:#77777c; font-size:10.25px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tool-card .tbtns{ position:absolute; top:8px; right:8px; gap:4px; z-index:4; } .tool-card .tb2{ width:27px; height:27px; border-radius:6px; background:rgba(18,18,19,.94); color:#a0a0a5; border:1px solid rgba(255,255,255,.065); box-shadow:0 8px 18px rgba(0,0,0,.32); } .tool-card .tb2:hover{background:#29292a;color:#fff;} /* New-item tiles occupy the same visual footprint as real cards. */ #grid-workflows>.gadd,#grid-tools>.gadd{ min-height:100%; align-self:stretch; border:1px dashed #303033; border-radius:8px; background:#0b0b0c; color:#6d6d72; } #grid-workflows>.gadd:hover,#grid-tools>.gadd:hover{ border-color:#515156; background:#111112; color:#b8b8bc; } @media(max-width:640px){ #grid-workflows,#grid-tools{gap:10px;} .workflow-card .cbody{height:164px;min-height:164px;padding:10px;} .tool-card .trow{height:70px;min-height:70px;padding:9px 10px 10px;} .workflow-card .cfoot,.tool-card .tbtns{top:6px;right:6px;gap:3px;} } @media(hover:none){ .tool-card .tbtns{opacity:1;pointer-events:auto;transform:none;} } /* V17 SHARED INTERACTION SYSTEM ----------------------------------------- */ .ov,.confov,.task-ov,.newtag-ov{ padding:16px; background:rgba(0,0,0,.82); backdrop-filter:none; } .modal,.mmod,.newtag-box{ width:min(520px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(255,255,255,.075); border-radius:10px; background:#101011; box-shadow:0 28px 80px rgba(0,0,0,.64); transform:translateY(8px) scale(.992); transition:transform .15s cubic-bezier(.2,.8,.2,1),opacity .15s ease; } .ov.on .modal,.ov.on .mmod,.newtag-ov.on .newtag-box{transform:none;} .modal:focus,.mmod:focus,.newtag-box:focus,.confbox:focus,.task-modal:focus{outline:none;} .mh{ min-height:56px; padding:0 16px; flex:0 0 auto; border:0; background:#101011; } .mhtitle{ color:#ededee; font-size:13px; font-weight:650; line-height:1.3; letter-spacing:0; } .mx,.mclose,.task-mclose{ width:30px; height:30px; border:0; border-radius:7px; background:transparent; color:#6c6c71; transition:background-color .11s ease,color .11s ease; } .mx:hover,.mclose:hover,.task-mclose:hover{background:#1c1c1d;color:#ededee;} .mbody,.m-body{ min-height:0; padding:14px 16px 16px; gap:14px; overflow-y:auto; overscroll-behavior:contain; background:#101011; } .mbody::-webkit-scrollbar,.m-body::-webkit-scrollbar{width:6px;} .mbody::-webkit-scrollbar-thumb,.m-body::-webkit-scrollbar-thumb{background:#2a2a2c;border-radius:999px;} .mfoot{ min-height:60px; padding:11px 16px; flex:0 0 auto; gap:7px; border:0; background:#101011; } .field{gap:6px;} .flbl,.field label,.task-slbl{ color:#707075; font-size:9.5px; font-weight:700; line-height:1.3; letter-spacing:.07em; } .field input,.field textarea,.stepinp,.tagbox, .mockups-modal-grid .field input,.mockups-modal-grid .field select{ width:100%; border:1px solid transparent; border-radius:7px; background:#181819; color:#ededee; box-shadow:none; transition:background-color .11s ease,border-color .11s ease,box-shadow .11s ease; } .field input,.stepinp,.mockups-modal-grid .field input,.mockups-modal-grid .field select{min-height:40px;padding:9px 11px;} .field textarea{min-height:110px;padding:10px 11px;resize:vertical;} .field input::placeholder,.field textarea::placeholder,.stepinp::placeholder{color:#55555a;opacity:1;} .field input:hover,.field textarea:hover,.stepinp:hover,.tagbox:hover, .mockups-modal-grid .field input:hover,.mockups-modal-grid .field select:hover{background:#1b1b1c;} .field input:focus,.field textarea:focus,.stepinp:focus,.tagbox:focus-within, .mockups-modal-grid .field input:focus,.mockups-modal-grid .field select:focus{ border-color:rgba(255,255,255,.15); background:#1d1d1e; box-shadow:0 0 0 3px rgba(255,255,255,.045); } .tagbox{min-height:40px;padding:6px 8px;} .taginp{min-height:26px;color:#ededee;} .taghint{color:#5f5f64;font-size:9.5px;} .tchip,.rtag{ border:0; border-radius:5px; background:#222223; color:#9a9a9f; } .tchip{padding:3px 7px;} .tchip button{color:#7a7a7f;} .rtag{padding:3px 8px;} .rtag:hover{border:0;background:#2a2a2b;color:#ededee;} .steplist{gap:7px;} .steprow{gap:7px;} .stepn{ width:24px; height:24px; border:0; border-radius:6px; background:#202021; color:#85858a; } .stepdel{width:28px;height:28px;border-radius:6px;color:#68686d;} .stepdel:hover{background:rgba(240,74,74,.1);color:#ff8f8f;} .addstep{ min-height:36px; margin-top:7px!important; border:1px dashed #323235; border-radius:7px; color:#77777c; background:#141415; } .addstep:hover{border-color:#505054;background:#19191a;color:#c8c8cc;} .uz{ min-height:132px; padding:12px; display:flex; align-items:center; justify-content:center; border:1px dashed #353538; border-radius:8px; background:#131314; color:#77777c; } .uz:hover,.uz:focus-within{border-color:#55555a;background:#171718;} .uzicon{color:#85858a;font-size:16px;} .uztxt{color:#6c6c71;font-size:10.5px;} .uzprev,.uzprevw{border-radius:7px;background:#0b0b0c;} .bghst,.boutl,.bcanc,.bdel,.bsave{ min-height:36px; padding:0 13px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:0; border-radius:7px; font-size:11.5px; font-weight:620; line-height:1; transition:background-color .11s ease,color .11s ease,opacity .11s ease; } .bghst,.boutl,.bcanc{background:#1b1b1c;color:#a0a0a5;} .bghst:hover,.boutl:hover,.bcanc:hover{background:#242425;color:#f0f0f1;} .bsave{background:#1A23CE;color:#fff;} .bsave:hover{background:#242EDC;filter:none;} .bdel{background:rgba(240,74,74,.11);color:#ff9292;} .bdel:hover{background:rgba(240,74,74,.17);} .bghst:disabled,.boutl:disabled,.bcanc:disabled,.bdel:disabled,.bsave:disabled{cursor:default;opacity:.62;} .is-busy::before{ content:''; width:12px; height:12px; border:2px solid rgba(255,255,255,.28); border-top-color:currentColor; border-radius:50%; animation:dialogSpin .7s linear infinite; } @keyframes dialogSpin{to{transform:rotate(360deg);}} .vimg{max-height:300px;border-radius:8px;background:#0b0b0c;} .vprompt{ max-height:42dvh; overflow:auto; padding:12px; border:0; border-radius:7px; background:#171718; color:#b0b0b5; font-size:11.5px; line-height:1.65; } .svrow{gap:9px;} .svn{border-radius:5px;background:#202021;color:#9a9a9f;} .svt{color:#aaaab0;} .confov{z-index:700;} .confbox{ width:min(340px,calc(100vw - 32px)); padding:20px; border:1px solid rgba(255,255,255,.075); border-radius:10px; background:#111112; box-shadow:0 24px 70px rgba(0,0,0,.65); transform:translateY(6px) scale(.992); } .conficon{ width:34px; height:34px; margin:0 0 12px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:rgba(240,74,74,.1); color:#ff9292; font-size:15px; font-weight:700; } .conftitle{margin-bottom:5px;color:#ededee;font-size:14px;font-weight:650;} .confsub{margin-bottom:18px;color:#85858a;font-size:11.5px;line-height:1.55;} .confbtns{gap:7px;} .toast{ right:18px; bottom:18px; min-width:0; max-width:min(380px,calc(100vw - 36px)); padding:10px 13px; border:1px solid rgba(255,255,255,.075); border-radius:8px; background:#19191a; color:#d8d8db; box-shadow:0 16px 42px rgba(0,0,0,.5); backdrop-filter:none; font-size:11.5px; } .toast .tdot{width:6px;height:6px;background:#88888d;box-shadow:none;} .toast.is-progress .tdot{background:#9a9a9f;animation:toastPulse 1s ease-in-out infinite;} .toast.is-success .tdot{background:#6eb487;} .toast.is-error .tdot{background:#ef7777;} @keyframes toastPulse{50%{opacity:.35;}} .ctxmenu{ min-width:190px; max-width:240px; padding:5px; border:1px solid rgba(255,255,255,.065); border-radius:8px; background:#121213; box-shadow:0 20px 54px rgba(0,0,0,.58); } .ctxmenu-head{padding:5px 8px 6px;color:#606065;font-size:8.5px;letter-spacing:.1em;} .ctxmenu-item{min-height:34px;padding:0 9px;border-radius:6px;color:#9b9ba0;font-weight:550;} .ctxmenu-item:hover,.ctxmenu-item:focus-visible{background:#202021;color:#f1f1f2;box-shadow:none!important;} .ctxmenu-item.danger{color:#d98787;} .ctxmenu-item.danger:hover,.ctxmenu-item.danger:focus-visible{background:rgba(240,74,74,.1);color:#ffaaaa;} .ctxmenu-sep{height:4px;margin:1px 0;background:transparent;} .task-ov{align-items:center;justify-content:center;} .task-modal{ width:680px; max-width:calc(100vw - 40px); height:auto; max-height:min(88dvh,760px); overflow:hidden; border:1px solid rgba(255,255,255,.075); border-radius:10px; background:#101011; box-shadow:0 28px 80px rgba(0,0,0,.64); } .task-mh,.task-mbody,.task-mfoot{background:#101011;border:0;} .task-mbody{min-height:0;overflow-y:auto;overscroll-behavior:contain;} .task-section{background:#171718;border:0;} .task-title-inp::placeholder,.task-notes-inp::placeholder,.task-link-inp::placeholder{color:#55555a;opacity:1;} .task-link-inp,.task-date-btn,.task-date-native{border:1px solid transparent;background:#1c1c1d;} .task-link-inp:focus{border-color:rgba(255,255,255,.15);background:#202021;} .task-img-add{border-color:#353538;background:#131314;} .task-img-add:hover{border-color:#55555a;background:#171718;} .task-mfoot{border-top:1px solid rgba(255,255,255,.045);} #selbar{ padding:7px; gap:5px; border:1px solid rgba(255,255,255,.075); border-radius:9px; background:#151516; box-shadow:0 18px 50px rgba(0,0,0,.56); backdrop-filter:none; } .selcnt{border:0;color:#85858a;padding:0 7px;} .selbtn{min-height:34px;padding:0 10px;border-radius:6px;background:#1d1d1e;color:#aaaab0;} .selbtn:hover{background:#272728;color:#fff;} .selbtn.accent-btn{background:#252526;color:#ededee;} .selbtn.danger{color:#d98787;} .panel:not(#panel-favorites) .empty-state{min-height:240px;padding:22px;} .panel:not(#panel-favorites) .empty-card{ width:min(380px,100%); padding:22px; border:0; border-radius:0; background:transparent; box-shadow:none; } .panel:not(#panel-favorites) .empty-icon{ width:40px; height:40px; margin-bottom:12px; border-radius:8px; background:#151516; color:#717176; box-shadow:none; } .panel:not(#panel-favorites) .empty-title{color:#d8d8db;font-size:13px;letter-spacing:0;} .panel:not(#panel-favorites) .empty-copy{color:#68686d;font-size:11.5px;line-height:1.55;} @media(max-width:640px){ .ov,.confov,.task-ov,.newtag-ov{padding:0;align-items:stretch;} .modal,.mmod,.newtag-box,.task-modal{ width:100vw; max-width:none; height:100dvh; max-height:none; border:0; border-radius:0; } .mh,.task-mh{min-height:54px;padding-left:13px;padding-right:13px;} .mbody,.m-body,.task-mbody{flex:1;padding:12px 13px 16px;} .mfoot,.task-mfoot{min-height:58px;padding:10px 13px;} .mfoot .bghst,.mfoot .boutl,.mfoot .bcanc,.mfoot .bdel,.mfoot .bsave{flex:1;} .confov{align-items:center;padding:16px;} .confbox{width:100%;padding:18px;} .toast{left:12px;right:12px;bottom:12px;max-width:none;} #selbar{max-width:calc(100vw - 16px);overflow-x:auto;} } @media(prefers-reduced-motion:reduce){ .modal,.mmod,.newtag-box,.confbox,.toast,.ctxmenu,.task-modal{transition:none!important;animation:none!important;} .is-busy::before,.toast.is-progress .tdot{animation-duration:1.4s;} } /* V1 GOALS ------------------------------------------------------------ */ #panel-goals{height:100%;overflow:hidden;} #goals-root{height:100%;min-height:0;} .goals-shell{ width:min(1180px,100%); height:100%; min-height:0; margin:0 auto; padding:28px 32px 34px; display:flex; flex-direction:column; color:var(--text); } .goals-header{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;margin-bottom:24px;} .goals-kicker{display:block;margin:0 0 7px;color:#5d5d62;font-size:9px;font-weight:600;line-height:1;text-transform:uppercase;letter-spacing:0;} .goals-header h1{margin:0 0 6px;color:#f0f0f2;font-size:24px;font-weight:580;line-height:1.15;letter-spacing:0;} .goals-header p{margin:0;color:#6b6b70;font-size:11.5px;line-height:1.5;} .goals-metrics{display:flex;align-items:flex-start;gap:28px;padding-top:4px;flex-shrink:0;} .goals-metrics>div{min-width:62px;display:flex;flex-direction:column;gap:3px;} .goals-metrics strong{color:#d9d9dc;font-size:17px;font-weight:560;line-height:1.1;font-variant-numeric:tabular-nums;} .goals-metrics span{color:#56565b;font-size:9.5px;white-space:nowrap;} .goals-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;} .goals-tabs{display:inline-flex;align-items:center;gap:3px;padding:3px;border-radius:8px;background:#111112;} .goals-tabs button{height:32px;min-width:90px;padding:0 12px;border:0;border-radius:6px;background:transparent;color:#68686d;font:500 11px 'Geist',sans-serif;cursor:pointer;transition:background .13s ease,color .13s ease;} .goals-tabs button:hover{color:#bcbcc0;} .goals-tabs button.on{background:#202021;color:#efeff1;box-shadow:0 1px 2px rgba(0,0,0,.3);} .goals-actions{display:flex;align-items:center;gap:7px;} .goal-search{width:210px;height:34px;display:flex;align-items:center;gap:7px;padding:0 10px;border-radius:7px;background:#141415;color:#59595e;transition:background .13s ease,color .13s ease;} .goal-search:focus-within{background:#1a1a1b;color:#8e8e93;} .goal-search svg{width:13px;height:13px;flex:0 0 auto;} .goal-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#d8d8db;font:400 11px 'Geist',sans-serif;letter-spacing:0;} .goal-search input::placeholder{color:#55555a;} .goal-add,.goal-primary{height:34px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 13px;border:0;border-radius:7px;background:#e8e8ea;color:#111112;font:600 10.5px 'Geist',sans-serif;cursor:pointer;transition:background .13s ease,transform .13s ease;} .goal-add:hover,.goal-primary:hover{background:#fff;} .goal-add:active,.goal-primary:active{transform:translateY(1px);} .goal-add svg{width:13px;height:13px;} .goals-content{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;padding:0 3px 30px 0;scrollbar-gutter:stable;} .goals-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start;} .goal-card{min-width:0;min-height:268px;padding:17px;border:0;outline:1px solid transparent;border-radius:8px;background:#111112;cursor:pointer;transition:background .13s ease,outline-color .13s ease;} .goal-card:hover,.goal-card:focus-visible{background:#151516;outline-color:#252527;} .goal-card:focus-visible{outline-color:#4a4a4f;} .goal-card-top,.goal-card-foot,.goal-progress-head,.goal-detail-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;} .goal-category{display:inline-flex;align-items:center;min-height:21px;padding:0 7px;border-radius:5px;background:#1b1b1c;color:#747479;font-size:8.5px;font-weight:600;line-height:1;text-transform:uppercase;letter-spacing:0;white-space:nowrap;} .goal-status{display:inline-flex;align-items:center;gap:6px;color:#8c8c91;font-size:9.5px;font-weight:550;line-height:1;white-space:nowrap;} .goal-status i{width:5px;height:5px;border-radius:50%;background:#77777c;} .goal-status.good{color:#82a68e}.goal-status.good i{background:#6f9d7f;} .goal-status.risk{color:#ad986b}.goal-status.risk i{background:#aa8d55;} .goal-status.bad{color:#bd7777}.goal-status.bad i{background:#b76262;} .goal-status.done{color:#8e8e93}.goal-status.done i{background:#77777c;} .goal-card-copy{min-height:78px;padding:17px 0 12px;} .goal-card-copy h2{margin:0;color:#e7e7e9;font-size:15px;font-weight:570;line-height:1.35;letter-spacing:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;} .goal-card-copy p{margin:7px 0 0;color:#68686d;font-size:10.5px;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;} .goal-progress-head{margin-bottom:7px;color:#5d5d62;font-size:9px;} .goal-progress-head strong{color:#8d8d92;font-size:9.5px;font-weight:550;font-variant-numeric:tabular-nums;} .goal-progress{height:4px;overflow:hidden;border-radius:999px;background:#242426;} .goal-progress i{display:block;height:100%;border-radius:inherit;background:#8d8d92;transition:width .18s ease;} .goal-progress.large{height:5px;} .goal-milestones{display:flex;flex-direction:column;gap:4px;padding-top:14px;} .goal-milestone{min-width:0;height:23px;display:flex;align-items:center;gap:7px;padding:0;border:0;background:transparent;color:#717176;font:400 9.5px 'Geist',sans-serif;text-align:left;cursor:pointer;} .goal-milestone:disabled{cursor:default;} .goal-milestone>span,.goal-check{width:15px;height:15px;display:grid;place-items:center;flex:0 0 auto;border:1px solid #3b3b3e;border-radius:4px;background:#171718;color:#111112;font-size:9px;} .goal-milestone b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:450;} .goal-milestone:hover:not(:disabled)>span{border-color:#68686d;} .goal-milestone.done{color:#55555a;} .goal-milestone.done>span,.goal-check.done{border-color:#b9b9bd;background:#b9b9bd;} .goal-milestone.done b{text-decoration:line-through;text-decoration-thickness:1px;} .goal-more{padding:2px 0 0 22px;color:#505055;font-size:8.5px;} .goal-card-foot{margin-top:15px;padding-top:13px;border-top:1px solid rgba(255,255,255,.045);} .goal-owner{min-width:0;display:flex;align-items:center;gap:7px;} .goal-avatar{width:23px;height:23px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;object-fit:cover;background:#242426;color:#bcbcc1;font-size:7px;font-weight:600;} .goal-avatar.small{width:20px;height:20px;font-size:6px;} .goal-avatar-fallback{border:1px solid rgba(255,255,255,.04);} .goal-owner>span{max-width:130px;overflow:hidden;text-overflow:ellipsis;color:#747479;font-size:9.5px;white-space:nowrap;} .goal-foot-meta{display:flex;align-items:center;gap:9px;color:#55555a;font-size:8.5px;white-space:nowrap;} .goal-due{color:#67676c;font-weight:500;} .goal-due.soon{color:#aa9160;}.goal-due.overdue{color:#bb6d6d;} .goals-empty,.goal-state{min-height:310px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;} .goals-empty-icon{width:42px;height:42px;margin-bottom:13px;display:grid;place-items:center;border-radius:8px;background:#151516;color:#66666b;} .goals-empty-icon svg{width:19px;height:19px;} .goals-empty strong,.goal-state strong{color:#aaaab0;font-size:12px;font-weight:550;} .goals-empty button{height:31px;margin-top:13px;padding:0 12px;border:0;border-radius:6px;background:#202021;color:#c7c7cb;font:550 10px 'Geist',sans-serif;cursor:pointer;} .goals-empty button:hover{background:#29292b;color:#fff;} .goal-overlay{position:fixed;inset:0;z-index:10080;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.72);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility .15s ease;} .goal-overlay.on{opacity:1;visibility:visible;pointer-events:auto;} .goal-modal{width:min(680px,calc(100vw - 32px));max-height:min(88dvh,820px);overflow:hidden;border:1px solid rgba(255,255,255,.075);border-radius:10px;background:#101011;box-shadow:0 28px 80px rgba(0,0,0,.66);transform:translateY(8px);transition:transform .16s ease;} .goal-overlay.on .goal-modal{transform:none;} #goal-modal-content,.goal-editor{max-height:inherit;display:flex;flex-direction:column;min-height:0;} .goal-modal-head{min-height:68px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:14px 20px 12px;} .goal-modal-head h2{margin:7px 0 0;color:#ededee;font-size:20px;font-weight:570;line-height:1.3;letter-spacing:0;} .goal-close,.goal-remove{display:grid;place-items:center;border:0;background:transparent;color:#66666b;cursor:pointer;transition:background .13s ease,color .13s ease;} .goal-close{width:30px;height:30px;border-radius:6px;flex:0 0 auto;} .goal-close:hover,.goal-remove:hover{background:#202021;color:#d5d5d8;} .goal-close svg,.goal-remove svg{width:14px;height:14px;} .goal-detail-body,.goal-editor-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 20px 22px;} .goal-detail-description{max-width:600px;margin:0 0 22px;color:#85858a;font-size:11.5px;line-height:1.65;white-space:pre-wrap;} .goal-detail-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:25px;} .goal-detail-meta>div{min-height:62px;padding:12px;border-radius:7px;background:#171718;display:flex;flex-direction:column;justify-content:center;gap:8px;} .goal-detail-meta>div>span{color:#55555a;font-size:8.5px;font-weight:550;text-transform:uppercase;letter-spacing:0;} .goal-detail-meta strong{font-size:10.5px;font-weight:520;} .goal-detail-owner{display:flex;align-items:center;gap:7px;color:#b9b9bd;} .goal-detail-progress{margin-bottom:26px;} .goal-detail-progress>div:first-child{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;color:#747479;font-size:10px;} .goal-detail-progress strong{color:#bcbcc0;font-weight:550;font-variant-numeric:tabular-nums;} .goal-detail-section-head{margin-bottom:10px;} .goal-detail-section-head>strong{color:#bdbdc1;font-size:11px;font-weight:550;} .goal-detail-section-head>span{color:#59595e;font-size:9.5px;} .goal-detail-section-head>button{height:27px;display:flex;align-items:center;gap:5px;padding:0 8px;border:0;border-radius:5px;background:#1b1b1c;color:#8b8b90;font:500 9.5px 'Geist',sans-serif;cursor:pointer;} .goal-detail-section-head>button:hover{background:#232324;color:#d5d5d8;} .goal-detail-section-head>button svg{width:11px;height:11px;} .goal-detail-milestones{display:flex;flex-direction:column;gap:5px;} .goal-detail-milestone{min-height:38px;display:flex;align-items:center;gap:9px;padding:0 11px;border:0;border-radius:6px;background:#171718;color:#929297;font:450 10.5px 'Geist',sans-serif;text-align:left;cursor:pointer;} .goal-detail-milestone:hover:not(:disabled){background:#1c1c1d;color:#bdbdc1;} .goal-detail-milestone:disabled{cursor:default;} .goal-detail-milestone>span{width:17px;height:17px;display:grid;place-items:center;flex:0 0 auto;border:1px solid #414144;border-radius:4px;color:#111112;font-size:9px;} .goal-detail-milestone b{font-weight:450;} .goal-detail-milestone.done{color:#5e5e63;} .goal-detail-milestone.done>span{border-color:#b9b9bd;background:#b9b9bd;} .goal-detail-milestone.done b{text-decoration:line-through;} .goal-detail-empty{min-height:42px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:#151516;color:#55555a;font-size:9.5px;} .goal-modal-foot{min-height:58px;display:flex;align-items:center;justify-content:flex-end;gap:7px;padding:10px 20px;border-top:1px solid rgba(255,255,255,.045);} .goal-secondary{height:34px;padding:0 13px;border:0;border-radius:7px;background:#202021;color:#aaaab0;font:550 10.5px 'Geist',sans-serif;cursor:pointer;} .goal-secondary:hover{background:#29292b;color:#fff;} .goal-secondary.quiet{margin-right:auto;background:transparent;color:#68686d;} .goal-secondary.quiet:hover{background:rgba(177,87,87,.08);color:#bd7474;} .goal-primary{min-width:96px;} .goal-primary:disabled{opacity:.55;cursor:default;transform:none;} .goal-editor-body{display:flex;flex-direction:column;gap:14px;} .goal-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;} .goal-field{min-width:0;display:flex;flex-direction:column;gap:7px;} .goal-field>span,.goal-progress-editor span{color:#626267;font-size:8.5px;font-weight:600;text-transform:uppercase;letter-spacing:0;} .goal-field input,.goal-field textarea,.goal-field select{width:100%;border:1px solid transparent;outline:0;border-radius:7px;background:#19191a;color:#d9d9dc;font:400 11px 'Geist',sans-serif;letter-spacing:0;transition:background .13s ease,border-color .13s ease;} .goal-field input,.goal-field select{height:36px;padding:0 11px;} .goal-field textarea{height:72px;min-height:72px;padding:9px 11px;resize:vertical;line-height:1.5;} .goal-field input:focus,.goal-field textarea:focus,.goal-field select:focus{border-color:#3b3b3e;background:#1d1d1e;} .goal-field input::placeholder,.goal-field textarea::placeholder{color:#515156;} .goal-progress-editor{padding:10px 12px;border-radius:7px;background:#171718;} .goal-progress-editor>div{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;} .goal-progress-editor output{color:#bcbcc0;font-size:10px;font-weight:550;font-variant-numeric:tabular-nums;} .goal-progress-editor input{width:100%;height:4px;margin:0;accent-color:#bcbcc0;cursor:pointer;} .goal-milestone-editor{padding-top:2px;} #goal-milestone-editor-list{display:flex;flex-direction:column;gap:5px;} .goal-milestone-edit{height:38px;display:flex;align-items:center;gap:8px;padding:0 8px;border-radius:6px;background:#171718;} .goal-check{padding:0;cursor:pointer;} .goal-milestone-edit input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#bdbdc1;font:400 10.5px 'Geist',sans-serif;letter-spacing:0;} .goal-milestone-edit input::placeholder{color:#505055;} .goal-remove{width:26px;height:26px;border-radius:5px;flex:0 0 auto;} @media(max-width:900px){ .goals-shell{padding:24px 22px 28px;} .goals-header{gap:18px;} .goals-metrics{gap:16px;} .goals-metrics>div{min-width:55px;} } @media(max-width:760px){ #panel-goals{overflow:auto;} #goals-root{height:auto;min-height:100%;} .goals-shell{height:auto;min-height:100%;padding:18px 14px 28px;} .goals-header{flex-direction:column;margin-bottom:18px;} .goals-metrics{width:100%;justify-content:space-between;gap:8px;} .goals-toolbar{align-items:stretch;flex-direction:column;} .goals-tabs{align-self:flex-start;} .goals-actions{width:100%;} .goal-search{width:auto;flex:1;} .goals-grid{grid-template-columns:1fr;} .goal-card{min-height:0;} } /* Workspace system: Projects, Clients, Goals, Activity */ #panel-clients{height:100%;overflow:hidden;} #clients-root{height:100%;min-height:0;} .workspace-shell{ height:100%;min-height:0;display:flex;flex-direction:column; padding:30px 34px 28px;background:#0b0b0c;color:#ededee;font-family:'Geist',sans-serif; } .workspace-header{ min-height:72px;display:flex;align-items:flex-start;justify-content:space-between; gap:32px;margin:0 0 22px; } .workspace-kicker{display:block;margin:0 0 8px;color:#56565b;font-size:9px;font-weight:600;line-height:1;text-transform:uppercase;letter-spacing:0;} .workspace-header h1{margin:0 0 6px;color:#f1f1f2;font-size:24px;font-weight:580;line-height:1.15;letter-spacing:0;} .workspace-header p{margin:0;color:#68686d;font-size:11.5px;line-height:1.5;} .workspace-metrics{display:flex;align-items:flex-start;gap:30px;padding-top:4px;flex-shrink:0;} .workspace-metrics>div{min-width:62px;display:flex;flex-direction:column;gap:4px;} .workspace-metrics strong{color:#dddde0;font-size:17px;font-weight:560;line-height:1.05;font-variant-numeric:tabular-nums;} .workspace-metrics span{color:#56565b;font-size:9.5px;line-height:1.2;white-space:nowrap;} .workspace-toolbar{min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 16px;} .workspace-tabs{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:8px;background:#121213;} .workspace-tabs button{height:32px;min-width:88px;padding:0 12px;border:0;border-radius:6px;background:transparent;color:#6d6d72;font:500 11px 'Geist',sans-serif;letter-spacing:0;cursor:pointer;transition:background .12s ease,color .12s ease;} .workspace-tabs button:hover{color:#bdbdc1;} .workspace-tabs button.on{background:#222224;color:#f1f1f2;box-shadow:0 1px 2px rgba(0,0,0,.26);} .workspace-tabs button span{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;margin-left:5px;padding:0 4px;border-radius:999px;background:#303033;color:#aaaab0;font-size:8px;} .workspace-actions{display:flex;align-items:center;gap:7px;} .workspace-search{width:230px;height:34px;display:flex;align-items:center;gap:7px;padding:0 10px;border:1px solid transparent;border-radius:7px;background:#151516;color:#5f5f64;transition:background .12s ease,border-color .12s ease,color .12s ease;} .workspace-search:focus-within{border-color:#303033;background:#19191a;color:#909095;} .workspace-search svg{width:13px;height:13px;flex:0 0 auto;} .workspace-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#dddde0;font:400 11px 'Geist',sans-serif;letter-spacing:0;} .workspace-search input::placeholder{color:#55555a;} .workspace-add{height:34px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 13px;border:0;border-radius:7px;background:#e8e8ea;color:#101011;font:600 10.5px 'Geist',sans-serif;cursor:pointer;transition:background .12s ease,transform .12s ease;} .workspace-add:hover{background:#fff;}.workspace-add:active{transform:translateY(1px);}.workspace-add svg{width:13px;height:13px;} .workspace-content{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;padding:0 3px 28px 0;scrollbar-gutter:stable;} .workspace-subfilters{display:flex;align-items:center;gap:4px;margin:0 0 15px;} .workspace-subfilters button{height:28px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:#626267;font:500 10px 'Geist',sans-serif;cursor:pointer;} .workspace-subfilters button:hover{background:#151516;color:#aaaab0;} .workspace-subfilters button.on{background:#1d1d1f;color:#dddde0;} /* Align legacy workspace surfaces to the shared system */ .operations-shell.workspace-shell,.goals-shell.workspace-shell,.activity-shell.workspace-shell{padding:30px 34px 28px;} .operations-header.workspace-header,.goals-header.workspace-header,.activity-header.workspace-header{margin-bottom:22px;} .operations-metrics.workspace-metrics,.goals-metrics.workspace-metrics,.activity-metrics.workspace-metrics{gap:30px;padding-top:4px;} .operations-toolbar.workspace-toolbar,.goals-toolbar.workspace-toolbar,.activity-toolbar.workspace-toolbar{margin-bottom:16px;} .operations-tabs.workspace-tabs,.goals-tabs.workspace-tabs,.activity-tabs.workspace-tabs{gap:2px;padding:3px;background:#121213;} .operations-tabs.workspace-tabs button,.goals-tabs.workspace-tabs button,.activity-tabs.workspace-tabs button{height:32px;min-width:88px;padding:0 12px;border-radius:6px;color:#6d6d72;font-size:11px;} .operations-tabs.workspace-tabs button.on,.goals-tabs.workspace-tabs button.on,.activity-tabs.workspace-tabs button.on{background:#222224;color:#f1f1f2;} .operations-search.workspace-search,.goal-search.workspace-search,.activity-search.workspace-search{width:230px;height:34px;padding:0 10px;border:1px solid transparent;background:#151516;} .operations-search.workspace-search:focus-within,.goal-search.workspace-search:focus-within,.activity-search.workspace-search:focus-within{border-color:#303033;background:#19191a;} .operation-add.workspace-add,.goal-add.workspace-add{height:34px;padding:0 13px;border-radius:7px;background:#e8e8ea;color:#101011;} .goal-card,.project-row,.client-card{background:#121213;outline-color:transparent;} .goal-card:hover,.project-row:hover,.client-card:hover{background:#171718;outline-color:#29292b;} .goal-card{min-height:260px;padding:16px;} .goal-card-foot{border-top:0;padding-top:10px;} .activity-event:hover{background:#121213;} .activity-event-rail::after{background:#1b1b1d;} .operations-empty,.operation-state,.goals-empty,.goal-state,.activity-state{min-height:300px;} .operations-empty-icon,.goals-empty-icon,.activity-state-icon{background:#151516;color:#6b6b70;} .goal-modal,.operations-modal{border-color:rgba(255,255,255,.065);background:#111112;box-shadow:0 26px 80px rgba(0,0,0,.62);} .goal-modal-head,.operation-modal-head{padding-left:20px;padding-right:20px;} .goal-modal-foot,.operation-modal-foot{border-top:0;background:#111112;} .goal-field input,.goal-field textarea,.goal-field select,.operation-field input,.operation-field textarea,.operation-field select{border-color:transparent;background:#19191a;} .goal-field input:focus,.goal-field textarea:focus,.goal-field select:focus,.operation-field input:focus,.operation-field textarea:focus,.operation-field select:focus{border-color:#37373a;background:#1d1d1e;} /* Clients CRM */ .crm-shell{overflow:hidden;} .crm-content{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;padding:0 3px 28px 0;scrollbar-gutter:stable;} .crm-filters{min-height:34px;display:flex;align-items:center;gap:7px;margin:-4px 0 14px;} .crm-filters label{height:30px;display:flex;align-items:center;gap:7px;padding:0 8px 0 10px;border-radius:6px;background:#121213;} .crm-filters label>span{color:#55555a;font-size:9px;font-weight:550;} .crm-filters select{max-width:145px;border:0;outline:0;background:transparent;color:#9a9a9f;font:500 9.5px 'Geist',sans-serif;cursor:pointer;} .crm-filters select option{background:#181819;color:#d6d6d9;} .crm-result-count{margin-left:auto;color:#505055;font-size:9px;} .crm-pipeline{min-width:920px;display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:8px;align-items:start;} .crm-column{min-width:0;min-height:220px;padding:8px;border-radius:8px;background:#101011;} .crm-column>header{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 3px 0 5px;} .crm-column>header>div{display:flex;align-items:center;gap:7px;} .crm-column>header i{width:5px;height:5px;border-radius:50%;background:#737378;} .crm-column>header i.good{background:#6f9d7f}.crm-column>header i.risk{background:#aa8d55}.crm-column>header i.muted{background:#545459}.crm-column>header i.neutral{background:#7a7a80} .crm-column>header strong{color:#a9a9ae;font-size:10px;font-weight:570;} .crm-column>header>span{min-width:18px;height:18px;display:grid;place-items:center;border-radius:5px;background:#1a1a1b;color:#626267;font-size:8px;} .crm-column>div{display:flex;flex-direction:column;gap:6px;} .crm-column-empty{min-height:90px;display:grid;place-items:center;color:#47474c;font-size:9px;} .crm-card{min-width:0;padding:13px;border-radius:7px;background:#171718;outline:1px solid transparent;cursor:pointer;transition:background .12s ease,outline-color .12s ease;} .crm-card:hover,.crm-card:focus-visible{background:#1c1c1d;outline-color:#303033;} .crm-card-head{min-width:0;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:9px;} .crm-card-head .client-mark{width:32px;height:32px;border-radius:7px;background:#242426;} .crm-card-head>div:nth-child(2){min-width:0;} .crm-card-head h2{margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;color:#dddde0;font-size:11.5px;font-weight:560;line-height:1.2;white-space:nowrap;} .crm-card-head p{margin:0;overflow:hidden;text-overflow:ellipsis;color:#5f5f64;font-size:8.5px;white-space:nowrap;} .crm-contact-actions{display:flex;align-items:center;gap:2px;} .crm-contact-actions a{width:26px;height:26px;display:grid;place-items:center;border-radius:6px;color:#5d5d62;transition:background .12s ease,color .12s ease;} .crm-contact-actions a:hover{background:#29292b;color:#c8c8cc;} .crm-contact-actions svg{width:12px;height:12px;} .crm-card-projects{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:13px 0 12px;padding:8px 9px;border-radius:6px;background:#131314;color:#6a6a6f;font-size:8.5px;} .crm-card-projects b{color:#ae8d5b;font-weight:550;}.crm-card-projects b.quiet{color:#55555a;} .crm-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;} .crm-card-foot>div{min-width:0;display:flex;align-items:center;gap:6px;} .crm-card-foot>div>span{overflow:hidden;text-overflow:ellipsis;color:#66666b;font-size:8.5px;white-space:nowrap;} .crm-card.compact .crm-contact-actions{display:none;} .crm-directory-head,.crm-row{display:grid;grid-template-columns:minmax(200px,1.35fr) minmax(170px,1fr) minmax(130px,.8fr) minmax(100px,.55fr) 80px 90px;align-items:center;gap:14px;} .crm-directory-head{height:28px;padding:0 13px;color:#4f4f54;font-size:8.5px;font-weight:600;text-transform:uppercase;} .crm-directory{display:flex;flex-direction:column;gap:5px;} .crm-row{min-height:68px;padding:10px 13px;border-radius:8px;background:#121213;outline:1px solid transparent;cursor:pointer;transition:background .12s ease,outline-color .12s ease;} .crm-row:hover,.crm-row:focus-visible{background:#171718;outline-color:#29292b;} .crm-row-client{min-width:0;display:flex;align-items:center;gap:10px;} .crm-row-client .client-mark{width:32px;height:32px;flex:0 0 auto;} .crm-row-client>div,.crm-row-contact{min-width:0;display:flex;flex-direction:column;gap:4px;} .crm-row-client strong,.crm-row-contact strong{overflow:hidden;text-overflow:ellipsis;color:#d9d9dc;font-size:10.5px;font-weight:550;white-space:nowrap;} .crm-row-client span,.crm-row-contact span{overflow:hidden;text-overflow:ellipsis;color:#5c5c61;font-size:8.5px;white-space:nowrap;} .crm-portfolio{display:flex;align-items:baseline;gap:5px;}.crm-portfolio strong{color:#aaaab0;font-size:11px;font-weight:560;}.crm-portfolio span{color:#55555a;font-size:8px;} .crm-row>.crm-contact-actions{justify-content:flex-end;opacity:.55;}.crm-row:hover>.crm-contact-actions{opacity:1;} @media(max-width:1040px){ .workspace-metrics{gap:18px;}.workspace-metrics>div{min-width:54px;} .crm-directory-head,.crm-row{grid-template-columns:minmax(180px,1.25fr) minmax(150px,1fr) minmax(120px,.8fr) 80px 72px;} .crm-directory-head span:nth-child(4),.crm-row .crm-portfolio{display:none;} } @media(max-width:760px){ #panel-clients{overflow:auto;}#clients-root{height:auto;min-height:100%;} .workspace-shell,.operations-shell.workspace-shell,.goals-shell.workspace-shell,.activity-shell.workspace-shell{height:auto;min-height:100%;padding:18px 14px 28px;} .workspace-header{min-height:0;flex-direction:column;gap:16px;margin-bottom:18px;} .workspace-metrics{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0;} .workspace-metrics>div{min-width:0;}.workspace-metrics strong{font-size:15px;}.workspace-metrics span{font-size:8.5px;} .workspace-toolbar{align-items:stretch;flex-direction:column;} .workspace-tabs{width:100%;}.workspace-tabs button{min-width:0;flex:1;padding:0 7px;} .workspace-actions{width:100%;}.workspace-search{width:auto;flex:1;}.workspace-add{width:36px;padding:0;}.workspace-add span{display:none;} .crm-filters{flex-wrap:wrap;margin-top:0;}.crm-result-count{width:100%;margin:2px 0 0;} .crm-content{overflow:visible;padding-right:0;}.crm-pipeline{min-width:0;grid-template-columns:1fr;}.crm-column{min-height:0;} .crm-directory-head{display:none;}.crm-row{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px;} .crm-row-client{grid-column:1/-1;}.crm-row-contact{grid-column:1;}.crm-row>.project-owner{grid-column:1;}.crm-row>.operation-status{grid-column:2;grid-row:2;justify-self:end;} .crm-row>.crm-contact-actions{grid-column:2;grid-row:3;opacity:1;}.crm-directory{gap:7px;} } @media(max-width:480px){ .workspace-metrics{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px;} .crm-filters label{flex:1;}.crm-filters select{width:100%;max-width:none;} } @media(prefers-reduced-motion:reduce){.crm-card,.crm-row,.crm-contact-actions,.workspace-tabs button,.workspace-search{transition:none!important;}} @media(max-width:560px){ .goals-tabs{width:100%;} .goals-tabs button{min-width:0;flex:1;padding:0 7px;} .goal-add{width:36px;padding:0;} .goal-add span{display:none;} .goal-overlay{align-items:stretch;padding:0;} .goal-modal{width:100vw;max-height:none;height:100dvh;border:0;border-radius:0;} .goal-modal-head{min-height:70px;padding:16px 14px 12px;} .goal-modal-head h2{font-size:18px;} .goal-detail-body,.goal-editor-body{padding-left:14px;padding-right:14px;} .goal-detail-meta{grid-template-columns:1fr;} .goal-detail-meta>div{min-height:52px;} .goal-field-grid{grid-template-columns:1fr;} .goal-modal-foot{padding:10px 14px;} .goal-modal-foot .goal-secondary:not(.quiet),.goal-modal-foot .goal-primary{flex:1;} } @media(prefers-reduced-motion:reduce){ .goal-card,.goal-overlay,.goal-modal,.goal-progress i{transition:none!important;} } #panel-projects{height:100%;overflow:hidden;} #projects-root{height:100%;min-height:0;} .operations-shell{height:100%;min-height:0;display:flex;flex-direction:column;padding:30px 34px 28px;background:#0b0b0c;color:#ededee;font-family:'Geist',sans-serif;} .operations-header{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;margin-bottom:24px;} .operations-kicker{display:block;margin:0 0 7px;color:#5d5d62;font-size:9px;font-weight:600;line-height:1;text-transform:uppercase;letter-spacing:0;} .operations-header h1{margin:0 0 6px;color:#f0f0f2;font-size:24px;font-weight:580;line-height:1.15;letter-spacing:0;} .operations-header p{margin:0;color:#6b6b70;font-size:11.5px;line-height:1.5;} .operations-metrics{display:flex;align-items:flex-start;gap:28px;padding-top:4px;flex-shrink:0;} .operations-metrics>div{min-width:62px;display:flex;flex-direction:column;gap:3px;} .operations-metrics strong{color:#d9d9dc;font-size:17px;font-weight:560;line-height:1.1;font-variant-numeric:tabular-nums;} .operations-metrics span{color:#56565b;font-size:9.5px;white-space:nowrap;} .operations-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:17px;} .operations-tabs{display:inline-flex;align-items:center;gap:3px;padding:3px;border-radius:8px;background:#111112;} .operations-tabs button{height:32px;min-width:88px;padding:0 12px;border:0;border-radius:6px;background:transparent;color:#68686d;font:500 11px 'Geist',sans-serif;letter-spacing:0;cursor:pointer;transition:background .13s ease,color .13s ease;} .operations-tabs button:hover{color:#bcbcc0;} .operations-tabs button.on{background:#202021;color:#efeff1;box-shadow:0 1px 2px rgba(0,0,0,.3);} .operations-actions{display:flex;align-items:center;gap:7px;} .operations-search{width:220px;height:34px;display:flex;align-items:center;gap:7px;padding:0 10px;border-radius:7px;background:#141415;color:#59595e;transition:background .13s ease,color .13s ease;} .operations-search:focus-within{background:#1a1a1b;color:#8e8e93;} .operations-search svg{width:13px;height:13px;flex:0 0 auto;} .operations-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#d8d8db;font:400 11px 'Geist',sans-serif;letter-spacing:0;} .operations-search input::placeholder{color:#55555a;} .operation-add,.operation-primary{height:34px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 13px;border:0;border-radius:7px;background:#e8e8ea;color:#111112;font:600 10.5px 'Geist',sans-serif;letter-spacing:0;cursor:pointer;transition:background .13s ease,transform .13s ease;} .operation-add:hover,.operation-primary:hover{background:#fff;} .operation-add:active,.operation-primary:active{transform:translateY(1px);} .operation-add svg{width:13px;height:13px;} .operations-content{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;padding:0 3px 30px 0;scrollbar-gutter:stable;} .project-list-head,.project-row{display:grid;grid-template-columns:minmax(250px,2.2fr) minmax(120px,.85fr) minmax(96px,.65fr) minmax(100px,.7fr) minmax(105px,.72fr) 16px;align-items:center;gap:15px;} .project-list-head{height:27px;padding:0 14px;color:#4f4f54;font-size:8.5px;font-weight:600;text-transform:uppercase;letter-spacing:0;} .project-list{display:flex;flex-direction:column;gap:5px;} .project-row{min-height:74px;padding:11px 14px;border:0;outline:1px solid transparent;border-radius:8px;background:#111112;cursor:pointer;transition:background .13s ease,outline-color .13s ease;} .project-row:hover,.project-row:focus-visible{background:#151516;outline-color:#252527;} .project-row:focus-visible{outline-color:#4a4a4f;} .project-row-main{min-width:0;display:flex;align-items:center;gap:12px;} .project-row-main>div{min-width:0;} .project-row-main h2{margin:0 0 5px;overflow:hidden;text-overflow:ellipsis;color:#dedee1;font-size:12px;font-weight:560;line-height:1.25;white-space:nowrap;letter-spacing:0;} .project-row-main p{margin:0;overflow:hidden;text-overflow:ellipsis;color:#5f5f64;font-size:9.5px;line-height:1.35;white-space:nowrap;} .project-row-main p span{color:#3f3f43;} .operation-status{display:inline-flex;align-items:center;gap:6px;color:#808085;font-size:9px;font-weight:550;line-height:1;white-space:nowrap;} .operation-status i{width:5px;height:5px;flex:0 0 auto;border-radius:50%;background:#77777c;} .operation-status.good{color:#82a68e}.operation-status.good i{background:#6f9d7f;} .operation-status.risk{color:#ad986b}.operation-status.risk i{background:#aa8d55;} .operation-status.done{color:#77777c}.operation-status.done i{background:#65656a;} .operation-status.muted{color:#66666b}.operation-status.muted i{background:#545459;} .operation-status.neutral{color:#85858a}.operation-status.neutral i{background:#7a7a80;} .project-row-main>.operation-status{width:62px;flex:0 0 62px;} .project-owner,.operation-person{min-width:0;display:flex;align-items:center;gap:7px;} .project-owner>span{overflow:hidden;text-overflow:ellipsis;color:#75757a;font-size:9.5px;white-space:nowrap;} .operation-avatar{width:23px;height:23px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;object-fit:cover;background:#252527;color:#bcbcc1;font-size:7px;font-weight:600;} .operation-avatar.small{width:20px;height:20px;font-size:6px;} .operation-avatar-fallback{border:1px solid rgba(255,255,255,.04);} .project-team{min-width:0;display:flex;align-items:center;padding-left:4px;} .project-team .operation-avatar{margin-left:-4px;border:2px solid #111112;} .project-row:hover .project-team .operation-avatar{border-color:#151516;} .project-team b{height:20px;min-width:20px;margin-left:3px;display:grid;place-items:center;border-radius:50%;background:#202021;color:#77777c;font-size:7px;font-weight:550;} .project-team-empty{color:#505055;font-size:9px;} .project-progress-cell>div{display:flex;align-items:center;gap:8px;} .project-progress-cell span{width:28px;color:#727277;font-size:9px;font-variant-numeric:tabular-nums;} .project-progress-cell i,.operation-progress-detail>i{height:4px;display:block;overflow:hidden;flex:1;border-radius:999px;background:#272729;} .project-progress-cell b,.operation-progress-detail b{height:100%;display:block;border-radius:inherit;background:#89898e;} .project-due{color:#66666b;font-size:9px;white-space:nowrap;} .project-due.soon{color:#a58d5f}.project-due.overdue{color:#b86d6d;} .project-chevron{width:13px;height:13px;color:#47474c;} .clients-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:start;} .client-card{min-width:0;min-height:230px;padding:15px;border:0;outline:1px solid transparent;border-radius:8px;background:#111112;cursor:pointer;transition:background .13s ease,outline-color .13s ease;} .client-card:hover,.client-card:focus-visible{background:#151516;outline-color:#252527;} .client-card:focus-visible{outline-color:#4a4a4f;} .client-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;} .client-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:7px;background:#202021;color:#b5b5ba;font-size:10px;font-weight:600;} .client-mark.large{width:43px;height:43px;flex:0 0 auto;border-radius:8px;font-size:12px;} .client-card-copy{min-height:68px;padding-top:14px;} .client-card-copy h2{margin:0 0 6px;overflow:hidden;text-overflow:ellipsis;color:#dedee1;font-size:14px;font-weight:570;white-space:nowrap;letter-spacing:0;} .client-card-copy p{margin:0;overflow:hidden;text-overflow:ellipsis;color:#65656a;font-size:9.5px;white-space:nowrap;} .client-card-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:7px 0 14px;} .client-card-stats>div{min-height:45px;padding:8px 9px;border-radius:6px;background:#171718;display:flex;flex-direction:column;justify-content:center;gap:3px;} .client-card-stats strong{color:#aaaab0;font-size:11px;font-weight:560;font-variant-numeric:tabular-nums;} .client-card-stats span{color:#525257;font-size:8px;} .client-card-foot{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px;} .client-card-foot>div{min-width:0;display:flex;align-items:center;gap:7px;} .client-card-foot>div span,.client-card-foot>span{overflow:hidden;text-overflow:ellipsis;color:#5b5b60;font-size:8.5px;white-space:nowrap;} .client-card-foot>span{max-width:48%;text-align:right;} .archive-group+ .archive-group{margin-top:25px;} .archive-group>h3{margin:0 0 9px;color:#77777c;font-size:10px;font-weight:550;} .archive-group>h3 span{margin-left:4px;color:#4f4f54;font-weight:500;} .operations-empty,.operation-state{min-height:310px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;} .operations-empty-icon{width:42px;height:42px;margin-bottom:13px;display:grid;place-items:center;border-radius:8px;background:#151516;color:#66666b;font-size:11px;font-weight:600;} .operations-empty-icon svg{width:19px;height:19px;} .operations-empty strong,.operation-state strong{color:#aaaab0;font-size:12px;font-weight:550;} .operations-empty p{max-width:330px;margin:7px 0 0;color:#56565b;font-size:9.5px;line-height:1.5;} .operations-empty button{height:31px;margin-top:13px;padding:0 12px;border:0;border-radius:6px;background:#202021;color:#c7c7cb;font:550 10px 'Geist',sans-serif;cursor:pointer;} .operations-empty button:hover{background:#29292b;color:#fff;} .operations-overlay{position:fixed;inset:0;z-index:10082;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.72);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility .15s ease;} .operations-overlay.on{opacity:1;visibility:visible;pointer-events:auto;} .operations-modal{width:min(720px,calc(100vw - 32px));max-height:min(88dvh,840px);overflow:hidden;border:1px solid rgba(255,255,255,.075);border-radius:10px;background:#101011;box-shadow:0 28px 80px rgba(0,0,0,.66);transform:translateY(8px);transition:transform .16s ease;} .operations-overlay.on .operations-modal{transform:none;} #operations-modal-content,.operation-editor{max-height:inherit;display:flex;flex-direction:column;min-height:0;} .operation-modal-head{min-height:78px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:17px 20px 13px;} .operation-modal-head.client{align-items:center;justify-content:flex-start;} .operation-modal-head.client>div:nth-child(2){min-width:0;flex:1;} .operation-modal-head h2{margin:7px 0 0;color:#ededee;font-size:20px;font-weight:570;line-height:1.3;letter-spacing:0;} .operation-modal-head p{margin:4px 0 0;color:#5f5f64;font-size:9.5px;} .operation-close{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;border:0;border-radius:6px;background:transparent;color:#66666b;cursor:pointer;transition:background .13s ease,color .13s ease;} .operation-close:hover{background:#202021;color:#d5d5d8;} .operation-close svg{width:14px;height:14px;} .operation-detail-body,.operation-editor-body{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;padding:4px 20px 22px;} .operation-brief{max-width:650px;margin:0 0 20px;color:#85858a;font-size:11.5px;line-height:1.65;white-space:pre-wrap;} .operation-detail-meta,.client-contact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:22px;} .operation-detail-meta>div,.client-contact-grid>div{min-width:0;min-height:62px;padding:11px;border-radius:7px;background:#171718;display:flex;flex-direction:column;justify-content:center;gap:7px;} .operation-detail-meta span,.client-contact-grid span,.client-notes>span{color:#55555a;font-size:8.5px;font-weight:550;text-transform:uppercase;letter-spacing:0;} .operation-detail-meta strong,.client-contact-grid strong,.client-contact-grid a{overflow:hidden;text-overflow:ellipsis;color:#aaaab0;font-size:9.5px;font-weight:520;white-space:nowrap;text-decoration:none;} .client-contact-grid a:hover{color:#e1e1e3;} .operation-person{color:#aaaab0;} .operation-progress-detail{margin-bottom:24px;} .operation-progress-detail>div{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:#707075;font-size:9.5px;} .operation-progress-detail strong{color:#aaaab0;font-weight:550;font-variant-numeric:tabular-nums;} .operation-progress-detail>i{height:5px;} .operation-detail-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px;} .operation-detail-section-head>strong{color:#bdbdc1;font-size:10.5px;font-weight:550;} .operation-detail-section-head>span{color:#57575c;font-size:9px;} .operation-team-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;} .operation-team-list>div{min-width:0;height:39px;display:flex;align-items:center;gap:8px;padding:0 9px;border-radius:6px;background:#171718;} .operation-team-list span{overflow:hidden;text-overflow:ellipsis;color:#89898e;font-size:9.5px;white-space:nowrap;} .operation-detail-empty{min-height:42px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:#151516;color:#55555a;font-size:9.5px;} .operation-modal-foot{min-height:58px;display:flex;align-items:center;justify-content:flex-end;gap:7px;padding:10px 20px;border-top:1px solid rgba(255,255,255,.045);} .operation-secondary{height:34px;padding:0 13px;border:0;border-radius:7px;background:#202021;color:#aaaab0;font:550 10.5px 'Geist',sans-serif;letter-spacing:0;cursor:pointer;} .operation-secondary:hover{background:#29292b;color:#fff;} .operation-secondary.quiet{margin-right:auto;background:transparent;color:#68686d;} .operation-secondary.quiet:hover{background:rgba(177,87,87,.08);color:#bd7474;} .operation-primary{min-width:104px;} .operation-primary:disabled{opacity:.55;cursor:default;transform:none;} .operation-editor-body{display:flex;flex-direction:column;gap:13px;} .operation-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;} .operation-field{min-width:0;display:flex;flex-direction:column;gap:7px;} .operation-field>span,.operation-progress-editor>div>span{color:#626267;font-size:8.5px;font-weight:600;text-transform:uppercase;letter-spacing:0;} .operation-field input,.operation-field textarea,.operation-field select{width:100%;border:1px solid transparent;outline:0;border-radius:7px;background:#19191a;color:#d9d9dc;font:400 11px 'Geist',sans-serif;letter-spacing:0;transition:background .13s ease,border-color .13s ease;} .operation-field input,.operation-field select{height:36px;padding:0 11px;} .operation-field textarea{height:70px;min-height:70px;padding:9px 11px;resize:vertical;line-height:1.5;} .operation-field input:focus,.operation-field textarea:focus,.operation-field select:focus{border-color:#3b3b3e;background:#1d1d1e;} .operation-field input::placeholder,.operation-field textarea::placeholder{color:#515156;} .operation-progress-editor{padding:10px 12px;border-radius:7px;background:#171718;} .operation-progress-editor>div{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;} .operation-progress-editor output{color:#bcbcc0;font-size:10px;font-weight:550;font-variant-numeric:tabular-nums;} .operation-progress-editor input{width:100%;height:4px;margin:0;accent-color:#bcbcc0;cursor:pointer;} #project-team-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;} .project-team-option{height:38px;min-width:0;display:flex;align-items:center;gap:8px;padding:0 9px;border:0;border-radius:6px;background:#171718;color:#77777c;font:450 9.5px 'Geist',sans-serif;letter-spacing:0;cursor:pointer;} .project-team-option:hover{background:#1c1c1d;color:#aaaab0;} .project-team-option.on{background:#202021;color:#d0d0d3;} .project-team-option>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .project-team-option>i{width:16px;height:16px;margin-left:auto;display:grid;place-items:center;flex:0 0 auto;border:1px solid #3a3a3d;border-radius:4px;color:#111112;font-size:8px;font-style:normal;} .project-team-option.on>i{border-color:#b9b9bd;background:#b9b9bd;} .client-notes{margin-bottom:22px;padding:12px;border-radius:7px;background:#171718;} .client-notes p{margin:7px 0 0;color:#85858a;font-size:10.5px;line-height:1.6;white-space:pre-wrap;} .client-project-list{display:flex;flex-direction:column;gap:5px;} .client-project-list button{min-height:40px;display:grid;grid-template-columns:74px minmax(0,1fr) 38px;align-items:center;gap:8px;padding:0 11px;border:0;border-radius:6px;background:#171718;color:#85858a;text-align:left;cursor:pointer;} .client-project-list button:hover{background:#1c1c1d;} .client-project-list strong{overflow:hidden;text-overflow:ellipsis;color:#aaaab0;font-size:9.5px;font-weight:520;white-space:nowrap;} .client-project-list button>span:last-child{text-align:right;color:#646469;font-size:9px;font-variant-numeric:tabular-nums;} @media(max-width:1120px){ .operations-shell{padding:24px 22px 28px;} .operations-header{gap:18px;} .operations-metrics{gap:16px;} .operations-metrics>div{min-width:55px;} .project-list-head,.project-row{grid-template-columns:minmax(230px,2fr) minmax(110px,.8fr) minmax(90px,.65fr) minmax(95px,.7fr) 16px;} .project-list-head>span:nth-child(3),.project-row>.project-team{display:none;} .clients-grid{grid-template-columns:repeat(2,minmax(0,1fr));} } @media(max-width:760px){ #panel-projects{overflow:auto;} #projects-root{height:auto;min-height:100%;} .operations-shell{height:auto;min-height:100%;padding:18px 14px 28px;} .operations-header{flex-direction:column;margin-bottom:18px;} .operations-metrics{width:100%;justify-content:space-between;gap:8px;} .operations-toolbar{align-items:stretch;flex-direction:column;} .operations-tabs{width:100%;} .operations-tabs button{min-width:0;flex:1;padding:0 7px;} .operations-actions{width:100%;} .operations-search{width:auto;flex:1;} .operation-add{width:36px;padding:0;} .operation-add span{display:none;} .project-list-head{display:none;} .project-row{grid-template-columns:minmax(0,1fr) auto;gap:10px;min-height:0;padding:13px;} .project-row-main{grid-column:1/-1;align-items:flex-start;} .project-row-main>.operation-status{width:58px;flex-basis:58px;margin-top:3px;} .project-owner{grid-column:1;} .project-progress-cell{grid-column:1/-1;} .project-due{grid-column:2;grid-row:2;text-align:right;} .project-chevron{display:none;} .clients-grid{grid-template-columns:1fr;} .client-card{min-height:0;} .operations-overlay{align-items:stretch;padding:0;} .operations-modal{width:100vw;max-height:none;height:100dvh;border:0;border-radius:0;} #operations-modal-content,.operation-editor{height:100%;max-height:100%;} .operation-modal-head{min-height:76px;padding:15px 14px 12px;} .operation-modal-head h2{font-size:18px;} .operation-detail-body,.operation-editor-body{padding-left:14px;padding-right:14px;} .operation-detail-meta,.client-contact-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .operation-field-grid,.operation-team-list,#project-team-options{grid-template-columns:1fr;} .operation-modal-foot{padding:10px 14px;} } /* Integrated black workspace canvas */ #panel-projects,#panel-clients,#panel-goals,#panel-activity, #projects-root,#clients-root,#goals-root,#activity-root{background:#000;} .operations-shell.workspace-shell,.crm-shell.workspace-shell,.goals-shell.workspace-shell,.activity-shell.workspace-shell{ width:100%;background:transparent; } .workspace-header,.workspace-toolbar,.workspace-content,.operations-content,.crm-content,.goals-content,.activity-content{width:100%;} .workspace-header>div:first-child{min-width:0;} .workspace-metrics{min-height:38px;align-items:flex-start;} @media(max-width:760px){ .operations-shell.workspace-shell,.crm-shell.workspace-shell,.goals-shell.workspace-shell,.activity-shell.workspace-shell{background:transparent;} } /* v5c: unified controls and channel-aware CRM cards */ .workspace-shell{--workspace-control-height:36px;} .workspace-toolbar{min-height:var(--workspace-control-height);align-items:center;} .workspace-tabs{height:var(--workspace-control-height);box-sizing:border-box;padding:3px;} .workspace-tabs button, .operations-tabs.workspace-tabs button, .goals-tabs.workspace-tabs button, .activity-tabs.workspace-tabs button{height:30px;line-height:30px;} .workspace-actions{min-height:var(--workspace-control-height);} .workspace-search, .operations-search.workspace-search, .goal-search.workspace-search, .activity-search.workspace-search, .workspace-add, .operation-add.workspace-add, .goal-add.workspace-add, .health-refresh{height:var(--workspace-control-height);box-sizing:border-box;} .workspace-add{min-width:36px;} .crm-column{padding:9px;background:#0e0e0f;} .crm-column>div{gap:9px;} .crm-card,.crm-row{--client-tone:112,112,118;position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(var(--client-tone),.12);outline:0;background:linear-gradient(145deg,rgba(var(--client-tone),.055),rgba(var(--client-tone),.012) 44%),#161617;box-shadow:0 5px 14px rgba(0,0,0,.18);} .crm-card::before,.crm-row::before{content:"";position:absolute;z-index:-1;inset:0 auto 0 0;width:2px;background:rgba(var(--client-tone),.46);} .crm-card.tone-slate,.crm-row.tone-slate{--client-tone:122,126,135;} .crm-card.tone-blue,.crm-row.tone-blue{--client-tone:77,116,178;} .crm-card.tone-teal,.crm-row.tone-teal{--client-tone:67,139,133;} .crm-card.tone-violet,.crm-row.tone-violet{--client-tone:124,94,164;} .crm-card.tone-amber,.crm-row.tone-amber{--client-tone:157,124,70;} .crm-card.tone-rose,.crm-row.tone-rose{--client-tone:157,83,101;} .crm-card:hover,.crm-card:focus-visible,.crm-row:hover,.crm-row:focus-visible{border-color:rgba(var(--client-tone),.25);outline:0;background:linear-gradient(145deg,rgba(var(--client-tone),.085),rgba(var(--client-tone),.018) 48%),#1a1a1b;box-shadow:0 8px 20px rgba(0,0,0,.26);} .client-channel-avatar{width:32px;height:32px;display:block;flex:0 0 auto;border-radius:50%;object-fit:cover;background:#222;border:1px solid rgba(var(--client-tone,112,112,118),.28);} .client-channel-avatar.large{width:48px;height:48px;} .client-channel-picker{grid-column:1/-1;padding:13px;border-radius:8px;background:#161617;} .client-channel-picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:10px;} .client-channel-picker-head span{display:block;color:#8e8e93;font-size:9px;font-weight:600;text-transform:uppercase;} .client-channel-picker-head p{margin:4px 0 0;color:#56565b;font-size:9.5px;line-height:1.35;} .client-channel-picker-head button{height:24px;padding:0 7px;border:0;border-radius:5px;background:transparent;color:#77777c;font:500 9px 'Geist',sans-serif;cursor:pointer;} .client-channel-picker-head button:hover{background:#222224;color:#c8c8cc;} .client-channel-selected{min-height:50px;display:grid;grid-template-columns:36px minmax(0,1fr) 18px;align-items:center;gap:10px;margin:0 0 9px;padding:7px 9px;border-radius:7px;background:#202021;} .client-channel-selected img,.client-channel-results img{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#29292b;} .client-channel-selected div,.client-channel-results span{min-width:0;display:flex;flex-direction:column;gap:3px;} .client-channel-selected strong,.client-channel-results strong{overflow:hidden;text-overflow:ellipsis;color:#e1e1e3;font-size:10.5px;font-weight:560;white-space:nowrap;} .client-channel-selected span,.client-channel-results small{overflow:hidden;text-overflow:ellipsis;color:#6c6c71;font-size:8.5px;font-weight:400;white-space:nowrap;} .client-channel-selected i{width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:#353538;color:#dadadd;font-size:8px;font-style:normal;} .client-channel-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;} .client-channel-search input{height:34px;min-width:0;padding:0 10px;border:1px solid transparent;border-radius:7px;outline:0;background:#1d1d1e;color:#dddde0;font:400 10.5px 'Geist',sans-serif;} .client-channel-search input:focus{border-color:#3a3a3d;background:#202021;} .client-channel-search button{height:34px;padding:0 12px;border:0;border-radius:7px;background:#29292b;color:#d2d2d5;font:550 10px 'Geist',sans-serif;cursor:pointer;} .client-channel-search button:hover{background:#333336;color:#fff;}.client-channel-search button:disabled{opacity:.55;cursor:wait;} .client-channel-results{display:grid;gap:3px;margin-top:7px;padding:4px;border-radius:7px;background:#111112;} .client-channel-results>button{min-width:0;display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:9px;padding:6px;border:0;border-radius:6px;background:transparent;text-align:left;cursor:pointer;} .client-channel-results>button:hover{background:#202021;} @media(max-width:760px){ .workspace-toolbar{align-items:stretch;} .workspace-actions{height:var(--workspace-control-height);} .crm-column>div{gap:8px;} } /* v6a: Client 360 */ .operations-modal.client360-modal{width:min(980px,calc(100vw - 32px));height:min(88dvh,820px);max-height:min(88dvh,820px);background:#0d0d0e;} .client360-modal #operations-modal-content{height:100%;max-height:100%;} .client360-head{--client-tone:112,112,118;min-height:102px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 24px 17px;background:linear-gradient(120deg,rgba(var(--client-tone),.09),rgba(var(--client-tone),.015) 42%,transparent 72%);} .client360-head.tone-slate{--client-tone:122,126,135}.client360-head.tone-blue{--client-tone:77,116,178}.client360-head.tone-teal{--client-tone:67,139,133}.client360-head.tone-violet{--client-tone:124,94,164}.client360-head.tone-amber{--client-tone:157,124,70}.client360-head.tone-rose{--client-tone:157,83,101} .client360-identity{min-width:0;display:flex;align-items:center;gap:14px;} .client360-avatar,.client-channel-avatar.client360-avatar{width:52px;height:52px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;object-fit:cover;background:#242426;color:#bcbcc1;font-size:13px;font-weight:600;} .client360-identity>div:last-child{min-width:0;} .client360-status{display:flex;align-items:center;gap:8px;margin-bottom:5px;} .client360-status>span:last-child{max-width:280px;overflow:hidden;text-overflow:ellipsis;color:#646469;font-size:9px;white-space:nowrap;} .client360-identity h2{margin:0;overflow:hidden;text-overflow:ellipsis;color:#f0f0f1;font-size:22px;font-weight:580;line-height:1.2;white-space:nowrap;} .client360-identity p{margin:4px 0 0;color:#717176;font-size:10px;} .client360-head-actions{display:flex;align-items:center;gap:5px;} .client360-head-actions>a,.client360-head-actions>.operation-close{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:7px;background:#19191a;color:#77777c;} .client360-head-actions>a:hover,.client360-head-actions>.operation-close:hover{background:#242426;color:#e1e1e3;} .client360-head-actions svg{width:14px;height:14px;} .client360-stats{min-height:62px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;padding:0 24px;background:#101011;} .client360-stats>div{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:5px;padding-left:13px;background:#101011;} .client360-stats>div:first-child{padding-left:0;} .client360-stats strong{color:#d8d8db;font-size:16px;font-weight:560;font-variant-numeric:tabular-nums;} .client360-stats span{color:#56565b;font-size:8.5px;} .client360-tabs{height:42px;display:flex;align-items:center;gap:3px;padding:0 24px;background:#101011;} .client360-tabs button{height:30px;display:inline-flex;align-items:center;gap:6px;padding:0 11px;border:0;border-radius:6px;background:transparent;color:#646469;font:520 10px 'Geist',sans-serif;cursor:pointer;} .client360-tabs button:hover{background:#181819;color:#aaaab0;}.client360-tabs button.on{background:#202021;color:#ececee;} .client360-tabs button span{min-width:16px;height:16px;display:grid;place-items:center;padding:0 4px;border-radius:5px;background:#2b2b2d;color:#929297;font-size:8px;} .client360-body{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;padding:18px 24px 24px;} .client360-overview{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,.8fr);gap:28px;} .client360-main,.client360-overview>aside{min-width:0;display:flex;flex-direction:column;gap:25px;} .client360-overview>aside{gap:9px;} .client360-section-head{min-height:34px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:9px;} .client360-section-head>div{display:flex;flex-direction:column;gap:4px;} .client360-section-head strong{color:#c4c4c8;font-size:11px;font-weight:560;} .client360-section-head span{color:#55555a;font-size:8.5px;} .client360-section-head button{height:27px;padding:0 9px;border:0;border-radius:6px;background:#1b1b1c;color:#85858a;font:520 9px 'Geist',sans-serif;cursor:pointer;} .client360-section-head button:hover{background:#242426;color:#d4d4d7;} .client360-section-head .client360-create{background:#e8e8ea;color:#101011;font-weight:600;}.client360-section-head .client360-create:hover{background:#fff;color:#000;} .client360-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;} .client360-info-grid>div{min-width:0;min-height:55px;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:9px 11px;border-radius:7px;background:#151516;} .client360-info-grid span,.client360-owner>span,.client360-channel>span,.client360-note>span{color:#505055;font-size:8px;font-weight:600;text-transform:uppercase;} .client360-info-grid strong,.client360-info-grid a{overflow:hidden;text-overflow:ellipsis;color:#a7a7ac;font-size:9.5px;font-weight:520;text-decoration:none;white-space:nowrap;} .client360-info-grid a:hover{color:#eeeef0;} .client360-owner,.client360-channel,.client360-note{padding:12px;border-radius:8px;background:#151516;} .client360-owner>div{display:flex;align-items:center;gap:9px;margin-top:10px;} .client360-owner>div>div{min-width:0;display:flex;flex-direction:column;gap:3px;} .client360-owner strong{overflow:hidden;text-overflow:ellipsis;color:#b3b3b7;font-size:10px;font-weight:550;white-space:nowrap;}.client360-owner small{color:#57575c;font-size:8px;} .client360-channel>a{min-width:0;display:grid;grid-template-columns:36px minmax(0,1fr) 16px;align-items:center;gap:9px;margin-top:9px;color:inherit;text-decoration:none;} .client360-channel img{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#242426;} .client360-channel a>div{min-width:0;display:flex;flex-direction:column;gap:4px;}.client360-channel strong,.client360-channel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .client360-channel strong{color:#b7b7bb;font-size:10px;font-weight:550;}.client360-channel small{color:#5f5f64;font-size:8px;}.client360-channel svg{width:13px;height:13px;color:#5b5b60;} .client360-note p{max-height:120px;margin:9px 0 0;overflow:auto;color:#85858a;font-size:9.5px;line-height:1.55;white-space:pre-wrap;} .client360-projects{display:flex;flex-direction:column;gap:5px;} .client360-projects>button{min-height:51px;display:grid;grid-template-columns:76px minmax(0,1fr) 110px 14px;align-items:center;gap:11px;padding:6px 11px;border:0;border-radius:7px;background:#151516;color:#77777c;text-align:left;cursor:pointer;} .client360-projects>button:hover{background:#1b1b1c;} .client360-projects>button>div:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:4px;}.client360-projects strong,.client360-projects small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .client360-projects strong{color:#b1b1b5;font-size:10px;font-weight:550;}.client360-projects small{color:#57575c;font-size:8px;} .client360-projects>button>svg{width:13px;height:13px;color:#4d4d52;} .client360-progress{display:flex;flex-direction:column;gap:5px;}.client360-progress>span{align-self:flex-end;color:#747479;font-size:8px;font-variant-numeric:tabular-nums;}.client360-progress>i{height:3px;overflow:hidden;border-radius:3px;background:#29292b;}.client360-progress b{height:100%;display:block;border-radius:inherit;background:#87878c;} .client360-empty{min-height:76px;display:grid;place-items:center;border-radius:7px;background:#141415;color:#4f4f54;font-size:9px;}.client360-empty.compact{min-height:42px;margin-top:9px;} .client360-view{max-width:820px;margin:0 auto;} .client360-timeline{display:flex;flex-direction:column;} .client360-timeline article{min-height:54px;display:grid;grid-template-columns:18px 28px minmax(0,1fr);align-items:center;gap:10px;} .client360-timeline .activity-avatar.small{width:28px;height:28px;font-size:8px;} .client360-timeline-rail{align-self:stretch;position:relative;display:grid;place-items:center;}.client360-timeline-rail::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:#202022;}.client360-timeline article:first-child .client360-timeline-rail::after{top:50%;}.client360-timeline article:last-child .client360-timeline-rail::after{bottom:50%;}.client360-timeline-rail span{position:relative;z-index:1;width:7px;height:7px;border:2px solid #77777c;border-radius:50%;background:#0d0d0e;} .client360-timeline article>div:last-child{min-width:0;}.client360-timeline p{margin:0;overflow:hidden;text-overflow:ellipsis;color:#7a7a7f;font-size:9.5px;white-space:nowrap;}.client360-timeline p strong{color:#b8b8bc;font-weight:550;}.client360-timeline p b{color:#99999e;font-weight:520;}.client360-timeline article>div:last-child>span{display:block;margin-top:4px;color:#505055;font-size:8px;} .client360-foot{justify-content:space-between;background:#101011;}.client360-foot>div{display:flex;align-items:center;gap:7px;}.client360-foot .operation-secondary.quiet{margin-right:0;} @media(max-width:760px){ .operations-modal.client360-modal{width:100vw;height:100dvh;max-height:none;border:0;border-radius:0;} .client360-head{min-height:88px;padding:14px;}.client360-avatar,.client-channel-avatar.client360-avatar{width:44px;height:44px;}.client360-identity h2{font-size:18px;}.client360-status>span:last-child{display:none;} .client360-stats{padding:0 14px;}.client360-stats>div{padding-left:8px;}.client360-tabs{padding:0 14px;}.client360-tabs button{flex:1;justify-content:center;} .client360-body{padding:14px 14px 22px;}.client360-overview{grid-template-columns:1fr;gap:22px;}.client360-overview>aside{display:grid;grid-template-columns:1fr 1fr;}.client360-note{grid-column:1/-1;} .client360-projects>button{grid-template-columns:68px minmax(0,1fr) 14px;}.client360-progress{display:none;}.client360-foot{padding:10px 14px;}.client360-foot>div .operation-secondary{display:none;} } @media(max-width:480px){.client360-stats{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:7px;padding-bottom:7px;row-gap:8px;}.client360-stats>div{padding-left:0;}.client360-info-grid,.client360-overview>aside{grid-template-columns:1fr;}.client360-note{grid-column:auto;}} /* v7a: unified client operations and company pulse */ .dash-tasks-row{grid-template-columns:repeat(4,minmax(0,1fr));} .company-pulse{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;} .company-pulse button{min-width:0;min-height:76px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;padding:12px;border:0;border-radius:8px;background:#151517;color:inherit;text-align:left;cursor:pointer;transition:background .14s ease,transform .14s ease;} .company-pulse button:hover{background:#1b1b1e;transform:translateY(-1px);} .company-pulse span{color:#737379;font-size:9px;font-weight:560;} .company-pulse strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;color:#eeeef0;font-size:20px;font-weight:590;letter-spacing:0;white-space:nowrap;font-variant-numeric:tabular-nums;} .company-pulse small{color:#505056;font-size:8px;} .company-pulse button.attention strong{color:#d9a1a1;} .workspace-metrics .metric-alert strong{color:#d19a9a;} .workspace-tabs button>span{min-width:15px;height:15px;display:inline-grid;place-items:center;margin-left:3px;padding:0 4px;border-radius:4px;background:#303034;color:#b4b4b9;font-size:8px;line-height:15px;} .crm-column{padding:8px;background:#0d0d0f;border-radius:8px;} .crm-column>div{gap:7px;} .crm-card,.crm-row{border:0!important;outline:0!important;background:#151517!important;box-shadow:none!important;} .crm-card::before,.crm-row::before{display:none!important;} .crm-card:hover,.crm-card:focus-visible,.crm-row:hover,.crm-row:focus-visible{background:#1b1b1e!important;box-shadow:none!important;} .crm-card{padding:12px;} .crm-card-head{grid-template-columns:34px minmax(0,1fr) auto;gap:9px;} .crm-card-head .client-channel-avatar,.crm-card-head .client-mark{width:34px;height:34px;} .crm-card-head h2{margin-bottom:3px;color:#e1e1e4;font-size:11px;font-weight:580;} .crm-card-head p{color:#65656b;font-size:8.5px;} .crm-card-action{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 7px;margin:12px 0 11px;padding:9px 10px;border-radius:6px;background:#111113;} .crm-card-action>span{grid-row:1/3;align-self:center;color:#505056;font-size:7.5px;font-weight:650;text-transform:uppercase;} .crm-card-action strong{overflow:hidden;text-overflow:ellipsis;color:#aaaab0;font-size:9px;font-weight:540;white-space:nowrap;} .crm-card-action small{color:#57575d;font-size:7.5px;} .crm-card-action.overdue{background:#1b1315;}.crm-card-action.overdue small{color:#b87a80;} .crm-card-action.today,.crm-card-action.soon{background:#191711;}.crm-card-action.today small,.crm-card-action.soon small{color:#ad9565;} .crm-card-foot{min-height:24px;} .crm-card-signals{display:flex;align-items:center;gap:7px;} .crm-card-signals>span:last-child{color:#55555b;font-size:8px;} .client-health{display:inline-flex;align-items:center;gap:4px;color:#74747a;font-size:8px;white-space:nowrap;} .client-health i{width:5px;height:5px;border-radius:50%;background:#74747a;}.client-health.good i{background:#769982}.client-health.risk i{background:#b08d5d}.client-health.neutral i{background:#74747a;} .crm-contact-actions a{background:transparent;} .crm-followups{display:flex;flex-direction:column;gap:5px;} .crm-followups-head,.crm-followup-row{display:grid;grid-template-columns:minmax(190px,1.05fr) minmax(260px,1.55fr) minmax(140px,.8fr) 105px 14px;align-items:center;gap:14px;} .crm-followups-head{height:28px;padding:0 13px;color:#505056;font-size:8px;font-weight:620;text-transform:uppercase;} .crm-followup-row{min-height:64px;padding:9px 13px;border-radius:8px;background:#131315;cursor:pointer;transition:background .14s ease;} .crm-followup-row:hover,.crm-followup-row:focus-visible{background:#19191c;outline:0;} .crm-followup-copy{min-width:0;display:flex;flex-direction:column;gap:4px;} .crm-followup-copy strong{overflow:hidden;text-overflow:ellipsis;color:#c6c6ca;font-size:10px;font-weight:550;white-space:nowrap;} .crm-followup-copy span{color:#5d5d63;font-size:8px;} .crm-followup-row>svg{width:13px;height:13px;color:#4e4e54;} .client-action-date{justify-self:start;padding:4px 6px;border-radius:5px;background:#1d1d20;color:#737379;font-size:8px;white-space:nowrap;} .client-action-date.overdue{background:#251719;color:#ca858c}.client-action-date.today,.client-action-date.soon{background:#252117;color:#c2a269;} .operations-modal.client360-modal{width:min(1040px,calc(100vw - 32px));height:min(90dvh,850px);max-height:min(90dvh,850px);overflow:hidden;background:#0b0b0c;} .client360-head{min-height:96px;padding:18px 22px;background:#101012;} .client360-avatar,.client-channel-avatar.client360-avatar{width:50px;height:50px;border:0;} .client360-status{margin-bottom:4px;}.client360-status .client-health{padding:3px 6px;border-radius:5px;background:#1b1b1e;} .client360-identity h2{font-size:21px;font-weight:590;letter-spacing:0;}.client360-identity p{color:#68686e;} .client360-head-actions>a,.client360-head-actions>.operation-close{background:#18181a;}.client360-head-actions>a:hover,.client360-head-actions>.operation-close:hover{background:#242427;} .client360-tabs{height:42px;padding:0 22px;background:#101012;} .client360-tabs button{height:30px;padding:0 12px;border-radius:6px;color:#66666c;}.client360-tabs button.on{background:#242427;color:#eeeef0;} .client360-body{padding:18px 22px 24px;background:#0b0b0c;} .client360-layout{display:grid;grid-template-columns:minmax(0,1.65fr) 270px;gap:18px;} .client360-layout>main{min-width:0;display:flex;flex-direction:column;gap:15px;} .client360-focus{min-height:104px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 17px;border-radius:8px;background:#161618;} .client360-focus>div:first-child{min-width:0;}.client360-focus span,.client360-profile>section>span{color:#59595f;font-size:8px;font-weight:650;text-transform:uppercase;} .client360-focus h3{margin:7px 0 4px;overflow:hidden;text-overflow:ellipsis;color:#dedee1;font-size:14px;font-weight:580;white-space:nowrap;}.client360-focus p{margin:0;color:#68686e;font-size:9px;} .client360-focus.overdue{background:#1a1315;}.client360-focus.overdue p{color:#b97980;}.client360-focus.today,.client360-focus.soon{background:#191711;} .client360-focus-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto;}.client360-focus-actions button{height:31px;padding:0 10px;border:0;border-radius:6px;background:#252528;color:#a2a2a8;font:550 9px 'Geist',sans-serif;cursor:pointer;}.client360-focus-actions button:hover{background:#303034;color:#eeeef0;}.client360-focus-actions button.primary{background:#e7e7e9;color:#111113;}.client360-focus-actions button.primary:hover{background:#fff;color:#000;} .client360-stats{min-height:68px;gap:6px;padding:0;background:transparent;}.client360-stats>div{min-height:68px;gap:5px;padding:12px;border-radius:7px;background:#131315;}.client360-stats>div:first-child{padding-left:12px;}.client360-stats strong{font-size:16px;}.client360-stats span{font-size:8px;} .client360-section{min-width:0;padding-top:2px;}.client360-section-head{min-height:31px;margin-bottom:7px;}.client360-section-head strong{font-size:10.5px;}.client360-section-head span{font-size:8px;} .client360-projects{gap:5px;}.client360-projects>button{min-height:50px;background:#131315;}.client360-projects>button:hover{background:#19191c;} .client360-notes>p{min-height:52px;margin:0;padding:12px;border-radius:7px;background:#131315;color:#77777d;font-size:9.5px;line-height:1.55;white-space:pre-wrap;} .client360-profile{min-width:0;display:flex;flex-direction:column;gap:6px;} .client360-profile>section{padding:12px;border-radius:7px;background:#131315;} .client360-owner-row{display:flex;align-items:center;gap:9px;margin-top:10px;}.client360-owner-row>div{min-width:0;display:flex;flex-direction:column;gap:3px;}.client360-owner-row strong{overflow:hidden;text-overflow:ellipsis;color:#bdbdc1;font-size:10px;white-space:nowrap;}.client360-owner-row small{color:#5c5c62;font-size:8px;} .client360-contact-list{display:grid;gap:8px;margin-top:10px;}.client360-contact-list>div{min-width:0;display:grid;grid-template-columns:55px minmax(0,1fr);gap:7px;}.client360-contact-list small{color:#55555b;font-size:8px;}.client360-contact-list strong,.client360-contact-list a{overflow:hidden;text-overflow:ellipsis;color:#a6a6ac;font-size:8.5px;font-weight:500;text-decoration:none;white-space:nowrap;} .client360-commercial{margin-top:10px;}.client360-commercial strong{display:block;color:#e0e0e3;font-size:16px;font-weight:590;}.client360-commercial small{display:block;margin-top:3px;color:#74747a;font-size:8.5px;}.client360-commercial p{margin:7px 0 0;color:#55555b;font-size:8px;} .client360-channel-row{min-width:0;display:grid;grid-template-columns:34px minmax(0,1fr) 14px;align-items:center;gap:8px;margin-top:10px;color:inherit;text-decoration:none;}.client360-channel-row img{width:34px;height:34px;border-radius:50%;object-fit:cover;}.client360-channel-row>div{min-width:0;display:flex;flex-direction:column;gap:3px;}.client360-channel-row strong,.client360-channel-row small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.client360-channel-row strong{color:#b9b9bd;font-size:9px;}.client360-channel-row small{color:#5e5e64;font-size:8px;}.client360-channel-row svg{width:12px;height:12px;color:#55555b;}.client360-muted{margin:9px 0 0;color:#55555b;font-size:8.5px;} .client360-view{max-width:880px;}.client360-foot{background:#101012;} .operation-editor-section{grid-column:1/-1;margin-top:3px;padding:12px;border-radius:8px;background:#151517;}.operation-editor-section-title{display:block;margin-bottom:10px;color:#68686e;font-size:8px;font-weight:650;text-transform:uppercase;} @media(max-width:1100px){.dash-tasks-row{grid-template-columns:repeat(2,minmax(0,1fr));}.company-pulse{grid-template-columns:repeat(3,minmax(0,1fr));}} @media(max-width:900px){.crm-followups-head,.crm-followup-row{grid-template-columns:minmax(170px,1fr) minmax(230px,1.4fr) 100px 14px;}.crm-followups-head span:nth-child(3),.crm-followup-row>.project-owner{display:none;}.client360-layout{grid-template-columns:minmax(0,1fr) 240px;}} @media(max-width:760px){ .dash-tasks-row{grid-template-columns:1fr;}.company-pulse{grid-template-columns:repeat(2,minmax(0,1fr));} .crm-followups-head{display:none;}.crm-followup-row{grid-template-columns:minmax(0,1fr) auto 13px;gap:8px;padding:11px;}.crm-followup-row .crm-row-client{grid-column:1/-1;}.crm-followup-copy{grid-column:1;}.client-action-date{grid-column:2;}.crm-followup-row>svg{grid-column:3;grid-row:2;} .operations-modal.client360-modal{width:100vw;height:100dvh;max-height:none;}.client360-head{min-height:82px;padding:13px 14px;}.client360-tabs{padding:0 14px;}.client360-body{padding:14px 14px 22px;}.client360-layout{grid-template-columns:1fr;}.client360-profile{display:grid;grid-template-columns:1fr 1fr;}.client360-profile>section{min-width:0;}.client360-focus{align-items:flex-start;flex-direction:column;}.client360-focus-actions{width:100%;}.client360-focus-actions button{flex:1;}.client360-foot{padding:10px 14px;}.client360-foot>div .operation-secondary{display:inline-flex;} } @media(max-width:480px){.company-pulse{grid-template-columns:1fr 1fr;}.company-pulse button{min-height:76px;padding:10px;}.company-pulse strong{font-size:17px;}.client360-profile{grid-template-columns:1fr;}.client360-stats{grid-template-columns:repeat(2,minmax(0,1fr));}.client360-projects>button{grid-template-columns:65px minmax(0,1fr) 13px;}.client360-progress{display:none;}} /* v8: daily command center and organized client editor */ .home-greeting{grid-column:1/-1;min-height:64px;display:flex;align-items:center;justify-content:space-between;padding:4px 2px 8px;} .home-greeting #dash-greet-txt{color:#f0f0f2;font-size:23px;font-weight:620;line-height:1.2;letter-spacing:0;} .home-greeting p{margin:5px 0 0;color:#65656b;font-size:11px;} .home-summary{grid-column:1/-1;display:grid;grid-template-columns:1.55fr 1fr 1fr;gap:10px;} .home-metric{position:relative;min-width:0;min-height:128px;display:grid;grid-template-columns:42px minmax(0,1fr) 18px;align-items:start;gap:13px;padding:17px;border:0;border-radius:9px;background:#131315;color:inherit;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);transition:background .14s ease,transform .14s ease,box-shadow .14s ease;} .home-metric:hover{background:#18181b;transform:translateY(-1px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.065),0 12px 28px rgba(0,0,0,.22);} .home-metric-featured{background:#15151b;box-shadow:inset 0 -2px #1a23ce,inset 0 0 0 1px rgba(61,71,255,.12);} .home-metric-featured:hover{background:#181820;box-shadow:inset 0 -2px #2932df,inset 0 0 0 1px rgba(61,71,255,.17),0 12px 28px rgba(0,0,0,.22);} .home-metric-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:8px;background:#1a23ce;color:#fff;} .home-metric-icon.neutral{background:#222225;color:#b7b7bd;} .home-metric-icon svg{width:19px;height:19px;} .home-metric-copy{min-width:0;display:flex;flex-direction:column;} .home-metric-copy small{margin:1px 0 8px;color:#78787f;font-size:10px;font-style:normal;font-weight:560;} .home-metric-copy strong{overflow:hidden;text-overflow:ellipsis;color:#f3f3f5;font-size:29px;font-weight:620;line-height:1;letter-spacing:0;white-space:nowrap;font-variant-numeric:tabular-nums;} .home-metric-copy em{margin-top:9px;color:#5e5e65;font-size:9px;font-style:normal;white-space:nowrap;} .home-metric-arrow{width:16px;height:16px;margin-top:12px;color:#4d4d54;} .home-progress-card{cursor:default;} .home-progress-card:hover{transform:none;} .home-progress-track{position:absolute;right:17px;bottom:17px;left:72px;height:4px;overflow:hidden;border-radius:4px;background:#29292d;} .home-progress-track i{height:100%;display:block;border-radius:inherit;background:#d8d8dc;transition:width .25s ease;} .home-insights{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr);gap:10px;} .home-insight-card{min-width:0;min-height:236px;padding:16px 17px;border-radius:9px;background:#111113;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);} .home-insight-card>header{min-height:39px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;} .home-insight-card>header div>span{display:block;color:#d0d0d4;font-size:11px;font-weight:590;} .home-insight-card>header p{margin:5px 0 0;color:#55555b;font-size:9px;} .home-insight-card>header button{height:28px;padding:0 9px;border:0;border-radius:6px;background:#1d1d20;color:#85858c;font:540 9px 'Geist',sans-serif;cursor:pointer;} .home-insight-card>header button:hover{background:#27272b;color:#d8d8dc;} .home-business-values{display:grid;grid-template-columns:1.15fr .85fr;gap:8px;margin:12px 0 9px;} .home-business-values>div{min-width:0;min-height:74px;padding:12px;border-radius:7px;background:#171719;} .home-business-values small,.home-health-strip button>span{display:block;color:#626269;font-size:8.5px;font-weight:560;} .home-business-values strong{display:block;margin-top:8px;overflow:hidden;text-overflow:ellipsis;color:#e8e8eb;font-size:21px;font-weight:600;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;} .home-business-values span{display:block;margin-top:7px;color:#4f4f55;font-size:8px;} .home-health-strip{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:7px;} .home-health-strip>button,.home-health-result{min-width:0;min-height:68px;padding:10px;border:0;border-radius:7px;background:#171719;color:inherit;text-align:left;} .home-health-strip>button{cursor:pointer;transition:background .13s ease;} .home-health-strip>button:hover{background:#1e1e21;} .home-health-strip>button strong{display:block;margin-top:5px;color:#d0d0d4;font-size:16px;font-weight:590;} .home-health-strip>button small{display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;color:#55555b;font-size:7.5px;white-space:nowrap;} .home-health-strip>button.attention{background:#1a1416;}.home-health-strip>button.attention strong{color:#d49a9f;} .home-health-result{display:flex;align-items:center;gap:9px;} .home-health-result>i{width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:#1c2921;color:#8db59a;font-size:12px;font-style:normal;font-weight:650;} .home-health-result.attention>i{background:#2a1d20;color:#d4949a;} .home-health-result>span{min-width:0;display:flex;flex-direction:column;gap:4px;}.home-health-result strong{overflow:hidden;text-overflow:ellipsis;color:#bdbdc2;font-size:9px;font-weight:570;white-space:nowrap;}.home-health-result small{overflow:hidden;text-overflow:ellipsis;color:#55555b;font-size:7.5px;white-space:nowrap;} .home-activity-list{display:flex;flex-direction:column;margin-top:8px;} .home-activity-row{min-height:34px;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:9px;padding:5px 0;} .home-activity-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;background:#242427;color:#8a8a90;font-size:7.5px;display:grid;place-items:center;} .home-activity-row>div{min-width:0;}.home-activity-row p{margin:0;overflow:hidden;text-overflow:ellipsis;color:#73737a;font-size:8.5px;line-height:1.35;white-space:nowrap;}.home-activity-row p strong{color:#bcbcc1;font-weight:560;}.home-activity-row p b{color:#9999a0;font-weight:530;}.home-activity-row span{display:block;margin-top:3px;color:#49494f;font-size:7.5px;} .home-activity-empty{min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#77777d;font-size:10px;}.home-activity-empty small{color:#4f4f55;font-size:8.5px;} .home-section-head{grid-column:1/-1;min-height:48px;display:flex;align-items:flex-end;justify-content:space-between;padding:4px 2px 0;} .home-section-head>div:first-child>span{display:block;color:#d4d4d8;font-size:13px;font-weight:600;}.home-section-head p{margin:5px 0 0;color:#57575d;font-size:9px;}.home-section-head>div:last-child{display:flex;align-items:baseline;gap:5px;}.home-section-head>div:last-child strong{color:#bcbcc1;font-size:11px;font-weight:580;font-variant-numeric:tabular-nums;}.home-section-head>div:last-child span{color:#55555b;font-size:8px;} .dash-tasks-row{grid-column:1/-1;gap:10px;} .dash-tasks-row>.bento{height:360px;} .operations-modal.client-editor-modal{width:min(980px,calc(100vw - 32px));height:min(88dvh,820px);max-height:min(88dvh,820px);background:#0d0d0e;} .client-editor-head{min-height:88px;align-items:center;padding:16px 20px;background:#111112;} .client-editor-heading{min-width:0;display:flex;align-items:center;gap:12px;}.client-editor-heading>img,.client-editor-mark{width:44px;height:44px;display:grid;place-items:center;flex:0 0 auto;border-radius:9px;object-fit:cover;background:#222225;color:#b4b4ba;font-size:11px;font-weight:600;}.client-editor-heading>div{min-width:0;}.client-editor-head h2{margin-top:4px;font-size:19px;}.client-editor-head p{font-size:9px;} .client-editor-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(310px,.8fr);align-items:start;gap:12px;padding:14px 16px 18px;background:#0d0d0e;} .client-editor-main,.client-editor-aside{min-width:0;display:flex;flex-direction:column;gap:10px;} .client-edit-section{min-width:0;padding:14px;border-radius:8px;background:#151516;} .client-edit-section>header{margin-bottom:13px;}.client-edit-section>header>span{display:block;color:#c7c7cb;font-size:10px;font-weight:590;}.client-edit-section>header>p{margin:5px 0 0;color:#56565c;font-size:8.5px;line-height:1.4;} .client-edit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:9px;}.client-edit-grid.three{grid-template-columns:repeat(3,minmax(0,1fr));}.client-edit-grid.money{grid-template-columns:minmax(0,1fr) 88px;}.client-edit-grid .operation-field{min-width:0;} .client-edit-followup{background:#171719;box-shadow:inset 2px 0 #34343a;} .client-edit-notes textarea{height:104px;min-height:104px;resize:vertical;} .client-editor .operation-field>span{color:#717177;font-size:8px;}.client-editor .operation-field input,.client-editor .operation-field select{height:39px;background:#1d1d1f;}.client-editor .operation-field textarea{background:#1d1d1f;}.client-editor .operation-field input:focus,.client-editor .operation-field select:focus,.client-editor .operation-field textarea:focus{border-color:#45454a;background:#212124;} .client-editor-aside .client-channel-picker{padding:14px;background:#151516;}.client-editor-aside .client-channel-picker-head span{color:#c7c7cb;font-size:10px;text-transform:none;}.client-editor-aside .client-channel-picker-head p{color:#56565c;font-size:8.5px;}.client-editor-aside .client-channel-search input{height:39px;background:#1d1d1f;}.client-editor-aside .client-channel-search button{height:39px;} .client-editor-foot{min-height:62px;justify-content:space-between;padding:10px 16px;background:#111112;}.client-editor-foot>span{color:#505056;font-size:8.5px;}.client-editor-foot>div{display:flex;align-items:center;gap:7px;} @media(max-width:1100px){ .home-summary{grid-template-columns:1.35fr 1fr 1fr;}.home-metric{padding:14px;grid-template-columns:38px minmax(0,1fr) 14px;}.home-metric-icon{width:38px;height:38px;}.home-metric-copy strong{font-size:24px;}.home-progress-track{left:65px;right:14px;bottom:14px;} .home-insights{grid-template-columns:1fr 340px;}.home-health-strip{grid-template-columns:1fr 1fr;}.home-health-result{display:none;} } @media(max-width:860px){ .home-summary{grid-template-columns:1fr 1fr;}.home-metric-featured{grid-column:1/-1;}.home-insights{grid-template-columns:1fr;}.home-activity-card{min-height:0;}.home-activity-list{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;} .operations-modal.client-editor-modal{width:min(760px,calc(100vw - 24px));}.client-editor-layout{grid-template-columns:1fr;}.client-editor-aside{display:grid;grid-template-columns:1fr 1fr;align-items:start;}.client-edit-notes{grid-column:1/-1;} } @media(max-width:640px){ .home-greeting{min-height:58px;padding-bottom:5px;}.home-greeting #dash-greet-txt{font-size:19px;}.home-summary{grid-template-columns:1fr 1fr;gap:8px;}.home-metric{min-height:116px;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:12px;}.home-metric-featured{grid-column:1/-1;}.home-metric-icon{width:34px;height:34px;}.home-metric-icon svg{width:16px;height:16px;}.home-metric-arrow{display:none;}.home-metric-copy strong{font-size:22px;}.home-metric-copy em{font-size:7.5px;}.home-progress-track{left:56px;right:12px;bottom:12px;}.home-insight-card{padding:14px;}.home-business-values{grid-template-columns:1fr 1fr;}.home-health-strip{grid-template-columns:1fr 1fr;}.home-activity-list{grid-template-columns:1fr;}.home-activity-row:nth-child(n+4){display:none;}.home-section-head{min-height:45px;}.dash-tasks-row>.bento{height:auto;min-height:330px;} .operations-modal.client-editor-modal{width:100vw;height:100dvh;max-height:none;}.client-editor-head{min-height:78px;padding:12px 14px;}.client-editor-heading>img,.client-editor-mark{width:38px;height:38px;border-radius:8px;}.client-editor-head p{display:none;}.client-editor-layout{padding:10px 12px 18px;}.client-editor-aside{display:flex;}.client-edit-section{padding:12px;}.client-edit-grid.three,.client-edit-grid{grid-template-columns:1fr 1fr;}.client-edit-grid.three .operation-field:last-child{grid-column:1/-1;}.client-editor-foot{padding:9px 12px;}.client-editor-foot>span{display:none;} } @media(max-width:420px){.client-edit-grid,.client-edit-grid.three{grid-template-columns:1fr;}.client-edit-grid.three .operation-field:last-child{grid-column:auto;}.home-business-values{grid-template-columns:1fr;}.home-health-strip{grid-template-columns:1fr 1fr;}} /* v9: polished operational Home */ .dash{gap:12px;padding:4px 0 28px;} .home-greeting{min-height:72px;padding:5px 3px 10px;} .home-greeting #dash-greet-txt{font-size:25px;font-weight:610;line-height:1.15;} .home-greeting p{margin-top:7px;color:#686970;font-size:11px;} .home-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;} .home-metric{min-height:172px;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:18px 19px 17px;border:1px solid rgba(255,255,255,.055);border-radius:10px;background:#111216;box-shadow:0 10px 28px rgba(0,0,0,.18);} .home-metric:hover{background:#15161a;border-color:rgba(255,255,255,.09);box-shadow:0 16px 38px rgba(0,0,0,.26);transform:translateY(-1px);} .home-metric-featured{background:#12131a;border-color:rgba(56,66,230,.2);box-shadow:inset 0 -2px #1a23ce,0 10px 28px rgba(0,0,0,.18);} .home-metric-featured:hover{background:#151620;border-color:rgba(74,84,242,.27);box-shadow:inset 0 -2px #2730dc,0 16px 38px rgba(0,0,0,.28);} .home-metric-top{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#5e5f66;font-size:9px;font-weight:520;} .home-metric-icon,.home-metric-icon.neutral{width:38px;height:38px;border-radius:8px;background:#1d1e23;color:#a9aab1;} .home-metric-featured .home-metric-icon{background:#1a23ce;color:#fff;box-shadow:0 8px 18px rgba(26,35,206,.22);} .home-metric-icon svg{width:18px;height:18px;} .home-metric-copy{margin-top:18px;} .home-metric-copy small{margin:0 0 7px;color:#8a8b92;font-size:10.5px;font-weight:520;} .home-metric-copy strong{font-size:32px;font-weight:610;line-height:1;} .home-metric-copy em{margin-top:8px;color:#5c5d64;font-size:9px;} .home-metric-baseline{height:4px;margin-top:auto;overflow:hidden;border-radius:4px;background:#25262b;}.home-metric-baseline i{width:38%;height:100%;display:block;border-radius:inherit;background:#343de0;box-shadow:0 0 12px rgba(52,61,224,.32);} .home-segment-meter{height:18px;display:grid;grid-template-columns:repeat(28,minmax(3px,1fr));align-items:stretch;gap:3px;margin-top:auto;overflow:hidden;} .home-segment-meter i{display:block;border-radius:3px;background:#28292e;} .home-segment-meter i.active,.home-segment-meter i.done{background:#3b43db;box-shadow:0 0 7px rgba(59,67,219,.24);}.home-segment-meter i.lead{background:#56876c;}.home-segment-meter i.paused{background:#8b714a;}.home-segment-meter i.former,.home-segment-meter i.empty{background:#292a2f;} .home-progress-card{cursor:default;}.home-progress-card:hover{transform:none;} .home-insights{grid-template-columns:minmax(0,1.3fr) minmax(350px,.7fr);gap:12px;} .home-insight-card{min-height:314px;padding:19px 20px;border:1px solid rgba(255,255,255,.05);border-radius:10px;background:#101115;box-shadow:0 10px 28px rgba(0,0,0,.16);} .home-insight-card>header{min-height:44px;align-items:flex-start;}.home-insight-card>header div>span{font-size:12px;font-weight:580;}.home-insight-card>header p{margin-top:6px;font-size:9px;}.home-insight-card>header button{height:30px;padding:0 11px;background:#1b1c21;color:#7d7e85;font-size:9px;}.home-insight-card>header button:hover{background:#24252b;color:#d5d6da;} .home-portfolio-values{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:24px;margin:20px 0 22px;} .home-portfolio-values>div{min-width:0;}.home-portfolio-values small{display:block;color:#606168;font-size:8.5px;font-weight:540;}.home-portfolio-values strong{display:block;margin-top:7px;overflow:hidden;text-overflow:ellipsis;color:#e5e6e9;font-size:22px;font-weight:590;white-space:nowrap;font-variant-numeric:tabular-nums;}.home-portfolio-values .attention strong{color:#cf9298;} .home-portfolio-chart{display:flex;flex-direction:column;gap:13px;} .home-portfolio-row{display:grid;grid-template-columns:58px minmax(0,1fr) 22px;align-items:center;gap:10px;}.home-portfolio-row>span{color:#77787f;font-size:9px;}.home-portfolio-row>div{height:7px;overflow:hidden;border-radius:5px;background:#24252a;}.home-portfolio-row i{height:100%;display:block;border-radius:inherit;background:#36383f;}.home-portfolio-row i.active{background:#444cda;box-shadow:0 0 10px rgba(68,76,218,.28);}.home-portfolio-row i.lead{background:#57876c;}.home-portfolio-row i.paused{background:#8a704b;}.home-portfolio-row i.former{background:#44454b;}.home-portfolio-row>strong{color:#8a8b92;font-size:9px;font-weight:570;text-align:right;font-variant-numeric:tabular-nums;} .home-portfolio-foot{display:flex;align-items:center;gap:18px;margin-top:21px;color:#57585f;font-size:8.5px;}.home-portfolio-foot span{display:flex;align-items:center;gap:6px;}.home-portfolio-foot span::before{content:"";width:5px;height:5px;border-radius:50%;background:#557d65;} .home-activity-list{margin-top:12px;}.home-activity-row{min-height:42px;grid-template-columns:30px minmax(0,1fr);gap:10px;padding:5px 0;}.home-activity-avatar{width:30px;height:30px;font-size:8px;}.home-activity-row p{color:#73747b;font-size:9px;line-height:1.4;}.home-activity-row p strong{color:#c3c4c8;}.home-activity-row p b{color:#9c9da3;}.home-activity-row span{margin-top:3px;color:#4f5056;font-size:8px;} .home-section-head{min-height:62px;padding:14px 3px 1px;}.home-section-head>div:first-child>span{font-size:14px;font-weight:590;}.home-section-head p{margin-top:6px;font-size:9px;} .dash-tasks-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;} .dash-tasks-row>.bento{height:340px;border:1px solid rgba(255,255,255,.045);border-radius:10px;background:#101115;box-shadow:0 10px 26px rgba(0,0,0,.14);} .dash-tasks-row>.bento:hover{background:#111216;box-shadow:0 14px 34px rgba(0,0,0,.2);} .dash-tasks-row .bento-h{min-height:52px;padding:2px 16px 0;}.dash-tasks-row .bento-title{color:#8a8b91;font-size:10px;font-weight:620;letter-spacing:.08em;}.dash-tasks-row .bento-body{padding:8px 13px 13px;}.dash-tasks-row .notes-list{display:grid;grid-auto-rows:min-content;grid-template-columns:1fr;gap:4px;}.dash-tasks-row .note-item{min-height:36px;padding:7px 9px;}.dash-tasks-row .note-add{min-height:40px;background:#17181c;} @media(max-width:1050px){.home-summary{grid-template-columns:repeat(3,minmax(0,1fr));}.home-insights{grid-template-columns:minmax(0,1.15fr) minmax(310px,.85fr);}.home-portfolio-values{gap:14px;}} @media(max-width:820px){.home-summary{grid-template-columns:1fr 1fr;}.home-metric-featured{grid-column:1/-1;}.home-insights{grid-template-columns:1fr;}.home-insight-card{min-height:0;}.dash-tasks-row{grid-template-columns:1fr;}.dash-tasks-row>.bento{height:340px;}} @media(max-width:540px){.home-greeting{min-height:60px;}.home-greeting #dash-greet-txt{font-size:20px;}.home-summary{grid-template-columns:1fr;}.home-metric-featured{grid-column:auto;}.home-metric{min-height:158px;padding:16px;}.home-metric-copy{margin-top:15px;}.home-metric-copy strong{font-size:29px;}.home-insight-card{padding:16px;}.home-portfolio-values{grid-template-columns:1fr 1fr 1fr;gap:9px;}.home-portfolio-values strong{font-size:18px;}.home-portfolio-row{grid-template-columns:52px minmax(0,1fr) 18px;}.home-portfolio-foot{align-items:flex-start;flex-direction:column;gap:7px;}.dash-tasks-row>.bento{min-height:330px;}} /* v10: task-first Home */ .home-summary,.home-insights{display:none!important;} .dash{gap:10px;padding:0 0 24px;} .home-greeting{min-height:60px;padding:4px 3px 5px;} .home-greeting #dash-greet-txt{font-size:23px;font-weight:600;} .home-greeting p{margin-top:5px;color:#65666c;font-size:10px;} .home-section-head{min-height:46px;padding:4px 3px 0;} .home-section-head>div:first-child>span{color:#e7e7e9;font-size:15px;font-weight:590;} .home-section-head p{margin-top:4px;color:#606168;font-size:9px;} .home-section-head>div:last-child{color:#5f6067;} .home-section-head>div:last-child strong{color:#a7a8ad;font-weight:570;} .dash-tasks-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;} .dash-tasks-row>.bento{height:230px;min-height:230px;border-color:rgba(255,255,255,.04);border-radius:8px;background:#101114;box-shadow:0 8px 22px rgba(0,0,0,.12);} .dash-tasks-row>.bento:hover{background:#111215;border-color:rgba(255,255,255,.065);box-shadow:0 10px 26px rgba(0,0,0,.17);transform:none;} .dash-tasks-row .bento-h{min-height:45px;padding:1px 14px 0;} .dash-tasks-row .bento-title{color:#9a9ba0;font-size:10px;font-weight:620;} .dash-tasks-row .bento-body{padding:6px 11px 11px;} .dash-tasks-row .note-item{min-height:33px;padding:6px 8px;} .dash-tasks-row .note-add{min-height:36px;background:#16171a;} .home-compact-stats{grid-column:1/-1;margin-top:7px;} .home-stats-head{min-height:44px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:0 3px 9px;} .home-stats-head>div>span{display:block;color:#d8d9dc;font-size:13px;font-weight:580;} .home-stats-head p{margin-top:4px;color:#5d5e64;font-size:9px;} .home-stats-head>button{height:27px;padding:0 10px;border:0;border-radius:6px;background:#17181b;color:#77787e;font-size:9px;transition:background .15s ease,color .15s ease;} .home-stats-head>button:hover{background:#202125;color:#c9cace;} .home-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;} .home-stat{position:relative;min-width:0;min-height:104px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:15px 16px;border:1px solid rgba(255,255,255,.035);border-radius:8px;background:#101114;color:inherit;text-align:left;box-shadow:0 7px 20px rgba(0,0,0,.1);transition:background .15s ease,border-color .15s ease;} button.home-stat{cursor:pointer;} button.home-stat:hover{background:#151619;border-color:rgba(255,255,255,.065);} .home-stat-label{color:#73747a;font-size:9px;font-weight:540;} .home-stat strong{display:block;margin-top:8px;color:#ededee;font-size:23px;font-weight:590;line-height:1;font-variant-numeric:tabular-nums;} .home-stat small{display:block;margin-top:7px;overflow:hidden;color:#55565c;font-size:8.5px;text-overflow:ellipsis;white-space:nowrap;} .home-stat-track{position:absolute;right:16px;bottom:15px;left:16px;height:3px;overflow:hidden;border-radius:3px;background:#242529;} .home-stat-track i{height:100%;display:block;border-radius:inherit;background:#85878d;} .home-stat-progress{padding-bottom:25px;} @media(max-width:820px){.dash-tasks-row{grid-template-columns:1fr;}.dash-tasks-row>.bento{height:260px;min-height:260px;}.home-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}} @media(max-width:540px){.home-greeting{min-height:56px;}.home-greeting #dash-greet-txt{font-size:20px;}.home-section-head{min-height:43px;}.dash-tasks-row>.bento{height:250px;min-height:250px;}.home-stats-grid{grid-template-columns:1fr 1fr;gap:7px;}.home-stat{min-height:98px;padding:14px;}.home-stat strong{font-size:21px;}.home-stat-track{right:14px;bottom:13px;left:14px;}} /* v11: four-column neutral task workspace */ .dash-tasks-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;} .dash-tasks-row>.bento{height:410px;min-height:410px;border-color:rgba(255,255,255,.04);background:#111;box-shadow:0 8px 22px rgba(0,0,0,.14);} .dash-tasks-row>.bento:hover{background:#131313;border-color:rgba(255,255,255,.065);box-shadow:0 10px 26px rgba(0,0,0,.18);} .dash-tasks-row .bento-h{background:transparent;} .dash-tasks-row .bento-title{color:#999;} .dash-tasks-row .note-item{background:#131313;} .dash-tasks-row .note-item:hover{background:#171717;} .dash-tasks-row .note-add{background:#161616;border-color:rgba(255,255,255,.04);} .home-stats-head>div>span{color:#d7d7d7;} .home-stats-head p{color:#606060;} .home-stats-head>button{background:#171717;color:#777;} .home-stats-head>button:hover{background:#202020;color:#cacaca;} .home-stat{border-color:rgba(255,255,255,.035);background:#111;color:inherit;box-shadow:0 7px 20px rgba(0,0,0,.12);} button.home-stat:hover{background:#151515;border-color:rgba(255,255,255,.065);} .home-stat-label{color:#777;} .home-stat strong{color:#ededed;} .home-stat small{color:#575757;} .home-stat-track{background:#252525;} .home-stat-track i{background:#888;} @media(max-width:1180px){.dash-tasks-row{grid-template-columns:repeat(2,minmax(0,1fr));}.dash-tasks-row>.bento{height:300px;min-height:300px;}} @media(max-width:720px){.dash-tasks-row{grid-template-columns:1fr;}.dash-tasks-row>.bento{height:270px;min-height:270px;}} /* v12: unified Monteluce design system */ :root{ --bg:#0b0b0c;--bg2:#0e0e0f; --panel:#121213;--panel2:#181819;--panel3:#202021; --border:rgba(255,255,255,.045);--border2:rgba(255,255,255,.085); --text:#ededee;--text2:#929297;--text3:#58585d; --brand:#1a23ce;--accent:#1a23ce;--secondary:#0f135c; --adim:rgba(26,35,206,.14);--aglow:rgba(26,35,206,.07); --r:8px;--rsm:7px;--rlg:10px; --ds-canvas:#0b0b0c;--ds-sidebar:#09090a;--ds-surface:#121213;--ds-raised:#181819;--ds-hover:#1d1d1e; --ds-text:#ededee;--ds-muted:#929297;--ds-faint:#58585d; --ds-control-h:36px;--ds-card-r:8px;--ds-control-r:7px;--ds-modal-r:10px; --shadow:0 18px 50px rgba(0,0,0,.44);--shadow-sm:0 8px 24px rgba(0,0,0,.18); } body.light{ --bg:#f4f4f5;--bg2:#efeff1;--panel:#fff;--panel2:#f4f4f5;--panel3:#e9e9ec; --border:rgba(20,20,24,.07);--border2:rgba(20,20,24,.13); --text:#161618;--text2:#626267;--text3:#98989d; --adim:rgba(26,35,206,.09);--aglow:rgba(26,35,206,.045); --ds-canvas:#f4f4f5;--ds-sidebar:#ededee;--ds-surface:#fff;--ds-raised:#f4f4f5;--ds-hover:#eaeaec; --ds-text:#161618;--ds-muted:#626267;--ds-faint:#98989d; } body{background:var(--ds-canvas);color:var(--ds-text);font-size:12px;letter-spacing:0;} button,input,textarea,select{letter-spacing:0;} button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:1px solid rgba(116,122,255,.72);outline-offset:2px;} /* Application frame */ .sb{background:var(--ds-sidebar);} .main{background:var(--ds-canvas);} .topbar,.tfbar{background:var(--ds-surface);} .topbar{height:52px;padding:0 18px;} .tfbar{height:38px;padding:0 18px;} .content{padding:18px;background:var(--ds-canvas);} .sblabel{color:var(--ds-faint);font-size:8px;font-weight:600;} .navbtn{min-height:34px;padding:7px 10px;border-radius:7px;color:var(--ds-muted);} .navbtn:hover{background:var(--ds-raised);color:var(--ds-text);} .navbtn.on{background:var(--ds-raised);color:var(--ds-text);font-weight:560;} .navbtn.on::after{width:2px;height:14px;} .nvcnt{background:transparent;color:var(--ds-faint);} .navbtn.on .nvcnt{background:transparent;color:var(--ds-muted);} .sbaccount{min-height:48px;padding:7px 8px;border:0;border-radius:8px;background:var(--ds-surface);} .sbfoot .themetog{width:36px;height:36px;border:0;border-radius:8px;background:var(--ds-surface);} /* Shared controls */ .sbox,.zbtns,.reorderbar,.tagbox,.task-date-btn,.task-date-native, .field input,.field textarea,.stepinp,.goal-field input,.goal-field textarea,.goal-field select, .operation-field input,.operation-field textarea,.operation-field select,.mockups-input,.mockups-textarea,.mockups-select,.mockups-mini-input{ border:1px solid var(--border);border-radius:var(--ds-control-r);background:var(--ds-raised);color:var(--ds-text);box-shadow:none; } .sbox{min-height:32px;padding:6px 10px;} .field input,.stepinp,.goal-field input,.goal-field select,.operation-field input,.operation-field select,.mockups-input,.mockups-select{min-height:var(--ds-control-h);} .field input:focus,.field textarea:focus,.stepinp:focus,.goal-field input:focus,.goal-field textarea:focus,.goal-field select:focus, .operation-field input:focus,.operation-field textarea:focus,.operation-field select:focus,.mockups-input:focus,.mockups-textarea:focus,.mockups-select:focus,.mockups-mini-input:focus{ border-color:rgba(255,255,255,.16);background:var(--ds-hover);outline:0; } body.light .field input:focus,body.light .field textarea:focus,body.light .stepinp:focus,body.light .goal-field input:focus, body.light .operation-field input:focus,body.light .mockups-input:focus{border-color:rgba(20,20,24,.22);} .flbl,.task-slbl,.goal-field>span,.operation-field>span,.mockups-field-label{color:var(--ds-faint);font-size:9px;font-weight:600;letter-spacing:.04em;} .addbtn,.bsave,.gbtn,.access-save{border-radius:var(--ds-control-r);box-shadow:none;} .bghst,.boutl,.bcanc,.activity-button,.goal-primary,.goal-secondary,.operation-primary,.operation-secondary,.access-quickbtn{ min-height:32px;border-radius:var(--ds-control-r);font-weight:550;box-shadow:none; } .bghst,.bcanc,.goal-secondary,.operation-secondary,.access-quickbtn{border-color:var(--border);background:var(--ds-raised);color:var(--ds-muted);} .bghst:hover,.bcanc:hover,.goal-secondary:hover,.operation-secondary:hover,.access-quickbtn:hover{border-color:var(--border2);background:var(--ds-hover);color:var(--ds-text);} .zbtn,.rbtn,.ib,.tb2,.mclose,.mx,.task-mclose,.goal-close,.operation-close,.activity-icon-button{border-radius:6px;} .zbtn:hover,.rbtn:hover,.tb2:hover,.mclose:hover,.mx:hover,.task-mclose:hover,.goal-close:hover,.operation-close:hover,.activity-icon-button:hover{background:var(--ds-hover);color:var(--ds-text);} /* Selection and filter language */ .tpill,.operations-tabs button,.goals-tabs button,.activity-tabs button,.activity-filters button{border-radius:6px;} .tpill.on{border-color:var(--border2);background:var(--ds-hover);color:var(--ds-text);} .operations-tabs.workspace-tabs,.goals-tabs.workspace-tabs,.activity-tabs.workspace-tabs,.activity-tabs,.goals-tabs,.operations-tabs{background:var(--ds-surface);} .operations-tabs.workspace-tabs button.on,.goals-tabs.workspace-tabs button.on,.activity-tabs.workspace-tabs button.on, .operations-tabs button.on,.goals-tabs button.on,.activity-tabs button.on,.activity-filters button.on{background:var(--ds-hover);color:var(--ds-text);box-shadow:none;} /* Shared cards and repeated items */ .card,.tcard,.pcard,.bento,.goal-card,.project-row,.client-card,.crm-card,.crm-row,.access-card,.health-row{ border-radius:var(--ds-card-r);background:var(--ds-surface);box-shadow:none; } .card:hover,.tcard:hover,.pcard:hover,.bento:hover,.goal-card:hover,.project-row:hover,.client-card:hover,.crm-card:hover,.crm-row:hover{ background:var(--ds-raised);box-shadow:none; } .cthumb,.cph,.pimgw,.tfav,.task-img-item{background:var(--ds-raised);} .ctag,.tchip,.rtag,.note-badge{border-color:var(--border);background:var(--ds-raised);color:var(--ds-muted);} .note-item{border-color:transparent;background:var(--ds-raised);} .note-item:hover{background:var(--ds-hover);} .note-add{border-color:var(--border);border-radius:7px;background:var(--ds-raised);} .note-add:focus-within{border-color:var(--border2);background:var(--ds-hover);} /* Workspace page rhythm */ .operations-shell.workspace-shell,.crm-shell.workspace-shell,.goals-shell.workspace-shell,.activity-shell.workspace-shell{ padding:26px 30px 24px;background:var(--ds-canvas);color:var(--ds-text); } .operations-header.workspace-header,.goals-header.workspace-header,.activity-header.workspace-header{margin-bottom:20px;} .operations-header h1,.goals-header h1,.activity-header h1{color:var(--ds-text);font-size:22px;font-weight:590;line-height:1.2;} .operations-header p,.goals-header p,.activity-header p{color:var(--ds-faint);font-size:11px;} .operations-metrics strong,.goals-metrics strong,.activity-metrics strong{color:#d7d7d9;font-size:16px;font-weight:580;} .operations-metrics span,.goals-metrics span,.activity-metrics span{color:var(--ds-faint);} .operations-toolbar.workspace-toolbar,.goals-toolbar.workspace-toolbar,.activity-toolbar.workspace-toolbar{margin-bottom:14px;} .operations-content,.goals-content,.activity-content,.crm-content{padding-right:3px;padding-bottom:24px;} /* Dialogs, popovers, menus, and feedback */ .ov,.task-ov,.goal-overlay,.operations-overlay,.confov{background:rgba(0,0,0,.72);backdrop-filter:blur(8px);} .modal,.mmod,.task-modal,.goal-modal,.operations-modal,.confbox{ border:1px solid var(--border2);border-radius:var(--ds-modal-r);background:#111112;box-shadow:0 28px 90px rgba(0,0,0,.64); } .mhead,.task-mhead,.goal-modal-head,.operation-modal-head{background:#111112;} .mfoot,.task-mfoot,.goal-modal-foot,.operation-modal-foot{border-top:0;background:#111112;} .task-modal{width:min(760px,calc(100vw - 28px));} .task-section,.operation-editor-section,.client-edit-section{border:0;border-radius:8px;background:#171718;} .ctxmenu{min-width:188px;padding:5px;border:1px solid var(--border2);border-radius:8px;background:rgba(16,16,17,.98);box-shadow:0 18px 48px rgba(0,0,0,.48);backdrop-filter:blur(16px);} .ctxmenu-item{min-height:32px;border-radius:6px;color:var(--ds-muted);font-weight:540;} .ctxmenu-item:hover,.ctxmenu-item:focus-visible{background:var(--ds-hover);color:var(--ds-text);} .ctxmenu-sep{height:3px;margin:1px 0;background:transparent;} .toast{border-color:var(--border2);border-radius:8px;background:var(--ds-raised);box-shadow:0 16px 42px rgba(0,0,0,.45);} .nvtip{border-color:var(--border2);border-radius:6px;background:var(--ds-raised);box-shadow:0 10px 30px rgba(0,0,0,.36);} /* Mockup builder uses the same shell without touching canvas rendering */ .mockups-shell{gap:10px;} .mockups-panel{border:1px solid var(--border);border-radius:10px;background:var(--ds-surface);box-shadow:none;} .mockups-settings-section{border:0;border-radius:8px;background:var(--ds-raised);} .mockups-template-card,.mockups-mode-segment,.mockups-upload-slot{border-radius:8px;} @media(max-width:860px){ .operations-shell.workspace-shell,.crm-shell.workspace-shell,.goals-shell.workspace-shell,.activity-shell.workspace-shell{padding:20px 18px;} } @media(max-width:640px){ .content{padding:14px;}.topbar,.tfbar{padding-right:14px;padding-left:14px;} .operations-shell.workspace-shell,.crm-shell.workspace-shell,.goals-shell.workspace-shell,.activity-shell.workspace-shell{padding:17px 14px;} .operations-header h1,.goals-header h1,.activity-header h1{font-size:20px;} } /* v12b: true-black canvas and restrained client identity colors */ :root{--bg:#000;--bg2:#000;--ds-canvas:#000;--ds-sidebar:#0b0b0c;} body,.main,.content,.operations-shell.workspace-shell,.crm-shell.workspace-shell,.goals-shell.workspace-shell,.activity-shell.workspace-shell{background:#000;} .sb{background:#0b0b0c;} .crm-card,.crm-row{ --client-tone:116,120,128; position:relative;isolation:isolate;overflow:hidden; border:1px solid rgba(var(--client-tone),.14)!important; background:linear-gradient(145deg,rgba(var(--client-tone),.075),rgba(var(--client-tone),.018) 52%),#121212!important; } .crm-card::before,.crm-row::before{content:""!important;display:block!important;position:absolute;z-index:-1;inset:0 auto 0 0;width:2px;background:rgba(var(--client-tone),.58);} .crm-card.tone-slate,.crm-row.tone-slate{--client-tone:116,122,132;} .crm-card.tone-blue,.crm-row.tone-blue{--client-tone:69,112,184;} .crm-card.tone-teal,.crm-row.tone-teal{--client-tone:53,137,127;} .crm-card.tone-violet,.crm-row.tone-violet{--client-tone:123,88,168;} .crm-card.tone-amber,.crm-row.tone-amber{--client-tone:170,121,48;} .crm-card.tone-rose,.crm-row.tone-rose{--client-tone:166,73,101;} .crm-card:hover,.crm-card:focus-visible,.crm-row:hover,.crm-row:focus-visible{ border-color:rgba(var(--client-tone),.26)!important; background:linear-gradient(145deg,rgba(var(--client-tone),.11),rgba(var(--client-tone),.025) 55%),#161616!important; } /* v12c: resolve legacy Home specificity against shared surfaces */ .dash-tasks-row>.bento,.home-stat{background:var(--ds-surface);} .dash-tasks-row>.bento:hover{background:var(--ds-surface);border-color:var(--border2);box-shadow:0 8px 22px rgba(0,0,0,.14);} .dash-tasks-row .note-item{background:var(--ds-raised);} .dash-tasks-row .note-item:hover{background:var(--ds-hover);} .dash-tasks-row .note-add{border-color:var(--border);background:var(--ds-raised);} .dash-tasks-row .note-add:focus-within{border-color:var(--border2);background:var(--ds-hover);} button.home-stat:hover{background:var(--ds-raised);} /* v12d: black workspace chrome and simplified account footer */ .topbar,.tfbar{background:#000;} .sbfoot{min-height:66px;padding:8px;} .sbaccount{min-height:50px;padding:7px 68px 7px 6px;border:0;border-radius:7px;background:transparent;} .sbaccount:hover{background:#111;} .sbfoot .themetog{width:27px;height:27px;border:0;border-radius:6px;background:transparent;color:#747479;} .sbfoot .themetog:hover{background:#181818;color:#ededee;} aside.sb.col .sbaccount{background:transparent!important;} aside.sb.col .sbaccount:hover{background:#111!important;} .task-modal input:focus-visible,.task-modal textarea:focus-visible,.task-modal select:focus-visible{outline:0;outline-offset:0;} .task-notes-inp:focus,.task-notes-inp:focus-visible{border-color:transparent;background:transparent;box-shadow:none;} .task-section{transition:background .14s ease,box-shadow .14s ease;} .task-section:focus-within{background:#171717;box-shadow:inset 0 0 0 1px rgba(255,255,255,.075);} /* 2026-07-18 v1: business analytics */ .analytics-shell.workspace-shell{min-height:100%;padding:26px 30px 34px;background:#000;color:var(--ds-text);} .analytics-header{min-height:58px;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:20px;} .analytics-header h1{margin-top:5px;color:var(--ds-text);font-size:22px;font-weight:590;line-height:1.2;} .analytics-header p{margin-top:7px;color:var(--ds-faint);font-size:11px;} .analytics-header-controls{display:flex;align-items:flex-end;gap:9px;} .analytics-header-controls label{display:grid;gap:5px;} .analytics-header-controls label>span{color:#5d5d62;font-size:8px;font-weight:600;text-transform:uppercase;} .analytics-header-controls select{width:88px;height:32px;padding:0 25px 0 10px;border:1px solid var(--border);border-radius:6px;background:#121213;color:#c9c9cc;font:550 10px Geist,sans-serif;outline:0;} .analytics-header-controls select:hover,.analytics-header-controls select:focus{border-color:var(--border2);background:#171718;} .analytics-range{display:flex;height:32px;padding:3px;border-radius:7px;background:#121213;} .analytics-range button{width:43px;border:0;border-radius:5px;background:transparent;color:#69696e;font-size:9px;font-weight:600;} .analytics-range button:hover{color:#b7b7ba;}.analytics-range button.on{background:#222223;color:#ededee;} .analytics-currency-note{min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-3px 0 16px;padding:8px 10px;border-radius:7px;background:#0d0d0e;color:#616166;font-size:9px;} .analytics-currency-note>div{display:flex;gap:4px}.analytics-currency-note button{height:24px;padding:0 9px;border:0;border-radius:5px;background:transparent;color:#6e6e73;font-size:8.5px;font-weight:600;}.analytics-currency-note button.on{background:#1b1b1c;color:#d3d3d5;} .analytics-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:10px;} .analytics-metric{min-width:0;min-height:116px;display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid rgba(255,255,255,.035);border-radius:8px;background:#121213;} .analytics-metric-icon{width:29px;height:29px;display:grid;place-items:center;flex:0 0 auto;border-radius:6px;background:rgba(26,35,206,.12);color:#747cff;} .analytics-metric-icon svg{width:14px;height:14px;} .analytics-metric>div{min-width:0;display:flex;flex-direction:column;} .analytics-metric>div>span{overflow:hidden;color:#727277;font-size:8.5px;font-weight:550;text-overflow:ellipsis;white-space:nowrap;} .analytics-metric strong{margin-top:13px;color:#ededee;font-size:22px;font-weight:590;line-height:1;font-variant-numeric:tabular-nums;} .analytics-metric small{margin-top:8px;overflow:hidden;color:#56565b;font-size:8px;text-overflow:ellipsis;white-space:nowrap;} .analytics-metric.positive small{color:#747cff}.analytics-metric.negative small{color:#a26d6d}.analytics-metric.watch small{color:#9b825e} .analytics-card{min-width:0;border:1px solid rgba(255,255,255,.04);border-radius:8px;background:#121213;overflow:hidden;} .analytics-card>header{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 17px;} .analytics-card>header span{display:block;color:#d5d5d7;font-size:11px;font-weight:580;} .analytics-card>header p{margin-top:5px;color:#5c5c61;font-size:8.5px;} .analytics-card>header>strong{color:#dcdcdf;font-size:17px;font-weight:590;font-variant-numeric:tabular-nums;} .analytics-card>header button{height:27px;padding:0 9px;border:0;border-radius:5px;background:#1a1a1b;color:#737378;font-size:8px;font-weight:550;}.analytics-card>header button:hover{background:#222223;color:#c9c9cc;} .analytics-primary-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(300px,.85fr);gap:10px;margin-bottom:10px;} .analytics-revenue-card,.analytics-clients-card{min-height:342px;} .analytics-chart-wrap{height:230px;padding:0 11px 0 2px;} .analytics-line-chart{width:100%;height:100%;display:block;overflow:visible;} .analytics-grid line{stroke:rgba(255,255,255,.045);stroke-width:1;vector-effect:non-scaling-stroke;}.analytics-grid text,.analytics-axis-month{fill:#4f4f54;font:8px Geist,sans-serif;}.analytics-axis-month.current{fill:#88888d;} .analytics-area{fill:url(#analytics-area);}.analytics-line{fill:none;stroke:#626cff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;}.analytics-line-chart circle{fill:#111112;stroke:#747cff;stroke-width:2;vector-effect:non-scaling-stroke;} .analytics-revenue-card>footer{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 17px;color:#535358;font-size:8px;} .analytics-client-list{display:grid;padding:0 10px 10px;} .analytics-client-row{min-width:0;height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 7px;border:0;border-radius:6px;background:transparent;color:inherit;text-align:left;}.analytics-client-row:hover{background:#19191a;} .analytics-client-identity{min-width:0;display:flex;align-items:center;gap:9px;}.analytics-client-identity>img,.analytics-client-identity>i{width:25px;height:25px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:#232324;color:#8a8a8e;font-size:8px;font-style:normal;object-fit:cover;}.analytics-client-identity>span{min-width:0;display:grid;gap:3px;}.analytics-client-identity strong{overflow:hidden;color:#bfc0c3;font-size:9.5px;font-weight:560;text-overflow:ellipsis;white-space:nowrap;}.analytics-client-identity small{color:#55555a;font-size:7.5px;} .analytics-client-value{width:92px;display:grid;justify-items:end;gap:5px;}.analytics-client-value>strong{color:#9a9b9f;font-size:9px;font-weight:560;font-variant-numeric:tabular-nums;}.analytics-client-value>i{width:72px;height:2px;display:block;border-radius:2px;background:#252526;}.analytics-client-value b{height:100%;display:block;border-radius:inherit;background:#5963e8;} .analytics-empty-compact{height:210px;display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;}.analytics-empty-compact strong{color:#96969a;font-size:10px;font-weight:560;}.analytics-empty-compact span{color:#505055;font-size:8px;} .analytics-secondary-grid{display:grid;grid-template-columns:minmax(230px,.78fr) minmax(300px,1.12fr) minmax(250px,.9fr);gap:10px;margin-bottom:10px;} .analytics-secondary-grid>.analytics-card{min-height:244px;} .analytics-mix-body{height:170px;display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:14px;padding:2px 18px 18px;} .analytics-donut{width:106px;height:106px;display:grid;place-content:center;justify-items:center;border-radius:50%;background:radial-gradient(circle at center,#121213 0 54%,transparent 55%),conic-gradient(#5963e8 0 var(--retainer-end),#858ad0 var(--retainer-end) var(--project-end),#55586a var(--project-end) 360deg);}.analytics-donut strong{color:#e0e0e2;font-size:20px;font-weight:590;line-height:1;}.analytics-donut span{margin-top:4px;color:#616166;font-size:8px;} .analytics-legend{display:grid;gap:13px;}.analytics-legend>div{display:grid;grid-template-columns:7px minmax(0,1fr) auto;align-items:center;gap:8px;color:#6a6a6f;font-size:8.5px;}.analytics-legend i{width:6px;height:6px;border-radius:50%;background:#55586a;}.analytics-legend i.retainer{background:#5963e8}.analytics-legend i.project{background:#858ad0}.analytics-legend strong{color:#aaaab0;font-size:9px;font-weight:570;} .analytics-delivery-list{display:grid;gap:12px;padding:8px 17px 18px;}.analytics-delivery-row{display:grid;grid-template-columns:78px minmax(0,1fr) 18px;align-items:center;gap:9px;}.analytics-delivery-row>span{display:flex;align-items:center;gap:6px;color:#6e6e73;font-size:8px;}.analytics-delivery-row>span i{width:5px;height:5px;border-radius:50%;background:#787a7f}.analytics-delivery-row>span i.good{background:#5963e8}.analytics-delivery-row>span i.risk{background:#a06b68}.analytics-delivery-row>span i.done{background:#6a6e9a}.analytics-delivery-row>div{height:4px;overflow:hidden;border-radius:3px;background:#232324;}.analytics-delivery-row b{height:100%;display:block;border-radius:inherit;background:#5963e8;}.analytics-delivery-row>strong{color:#89898e;font-size:8.5px;font-weight:570;text-align:right;} .analytics-execution{display:grid;gap:19px;padding:9px 17px 18px;}.analytics-execution>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:7px;}.analytics-execution span{color:#69696e;font-size:8.5px;}.analytics-execution strong{color:#c7c7ca;font-size:14px;font-weight:580;}.analytics-execution i{height:4px;overflow:hidden;border-radius:3px;background:#242425;}.analytics-execution i b{height:100%;display:block;border-radius:inherit;background:#5963e8;}.analytics-execution small{color:#4f4f54;font-size:7.5px;text-align:right;} .analytics-attention-card>header{min-height:56px}.analytics-attention-list{display:grid;padding:0 10px 10px;}.analytics-attention-list>button{height:46px;display:grid;grid-template-columns:minmax(0,1fr) auto 16px;align-items:center;gap:12px;padding:0 7px;border:0;border-radius:6px;background:transparent;color:inherit;text-align:left;}.analytics-attention-list>button:hover{background:#19191a;}.analytics-attention-list svg{width:13px;color:#4d4d52;}.analytics-attention-client{min-width:0;display:flex;align-items:center;gap:9px;}.analytics-attention-client>img,.analytics-attention-client>i{width:26px;height:26px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:#242425;color:#85858a;font-size:8px;font-style:normal;object-fit:cover;}.analytics-attention-client>span{min-width:0;display:grid;gap:3px}.analytics-attention-client strong{overflow:hidden;color:#bdbdc0;font-size:9.5px;font-weight:560;text-overflow:ellipsis;white-space:nowrap;}.analytics-attention-client small{color:#5a5a5f;font-size:8px;}.analytics-attention-state{padding:5px 7px;border-radius:5px;background:#1a1a1b;color:#77777c;font-size:8px;}.analytics-attention-state.overdue,.analytics-attention-state.watch{background:rgba(145,82,78,.11);color:#a87571}.analytics-attention-state.renewal{background:rgba(153,126,83,.11);color:#a68b63;} .analytics-clear-state{min-height:92px;display:flex;align-items:center;justify-content:center;gap:11px;color:#5963e8;}.analytics-clear-state svg{width:25px;}.analytics-clear-state>div{display:grid;gap:4px}.analytics-clear-state strong{color:#9da0c9;font-size:9.5px;font-weight:560}.analytics-clear-state span{color:#55566b;font-size:8px;} @media(max-width:1180px){.analytics-metrics{grid-template-columns:repeat(3,minmax(0,1fr));}.analytics-primary-grid{grid-template-columns:minmax(0,1.45fr) minmax(280px,.85fr);}.analytics-secondary-grid{grid-template-columns:1fr 1fr;}.analytics-goals-card{grid-column:1/-1;}} @media(max-width:900px){.analytics-shell.workspace-shell{padding:20px 18px 30px}.analytics-primary-grid{grid-template-columns:1fr}.analytics-secondary-grid{grid-template-columns:1fr 1fr}.analytics-revenue-card,.analytics-clients-card{min-height:320px}} @media(max-width:680px){.analytics-header{align-items:stretch;flex-direction:column}.analytics-header-controls{align-items:flex-end;justify-content:space-between}.analytics-currency-note{align-items:flex-start;flex-direction:column}.analytics-metrics{grid-template-columns:1fr 1fr}.analytics-secondary-grid{grid-template-columns:1fr}.analytics-goals-card{grid-column:auto}.analytics-card>header{padding:14px}.analytics-chart-wrap{height:200px}.analytics-revenue-card>footer{align-items:flex-start;flex-direction:column;justify-content:center;gap:3px}.analytics-mix-body{grid-template-columns:105px 1fr}.analytics-donut{width:94px;height:94px}} @media(max-width:440px){.analytics-shell.workspace-shell{padding:17px 14px 26px}.analytics-metrics{grid-template-columns:1fr}.analytics-metric{min-height:94px}.analytics-primary-grid,.analytics-secondary-grid{gap:8px}.analytics-client-value{width:76px}.analytics-client-value>i{width:58px}} /* 2026-07-19 v3: unified command, selection, and menu controls */ :root{ --control-h:34px; --control-h-sm:30px; --control-r:7px; --control-bg:#171718; --control-bg-hover:#202021; --control-bg-active:#252526; --control-border:rgba(255,255,255,.055); --control-border-hover:rgba(255,255,255,.10); --control-text:#a5a5aa; --control-text-hover:#f0f0f2; --control-focus:rgba(255,255,255,.13); --menu-bg:rgba(17,17,18,.985); --menu-shadow:0 20px 54px rgba(0,0,0,.58); } button,select{font-family:'Geist',sans-serif;letter-spacing:0;} button{cursor:pointer;} button:disabled,select:disabled,[aria-disabled="true"]{ cursor:default!important; opacity:.46!important; pointer-events:none!important; filter:none!important; transform:none!important; } button:focus-visible,select:focus-visible,[role="button"]:focus-visible{ outline:0!important; box-shadow:0 0 0 3px var(--control-focus)!important; } /* Primary commands are the only controls that carry the brand color. */ :is(.gbtn:not(.subtle),.addbtn,.bsave,.workspace-add,.operation-add,.operation-primary, .goal-add,.goal-primary,.talent-create-btn,.talent-save-btn,.mockups-btn.primary, .activity-button.primary,.client360-create,.access-save){ min-height:var(--control-h); border:1px solid #1A23CE; border-radius:var(--control-r); background:#1A23CE; color:#fff; box-shadow:none; font-weight:620; transition:background-color .12s ease,border-color .12s ease,transform .08s ease,opacity .12s ease; } :is(.gbtn:not(.subtle),.addbtn,.bsave,.workspace-add,.operation-add,.operation-primary, .goal-add,.goal-primary,.talent-create-btn,.talent-save-btn,.mockups-btn.primary, .activity-button.primary,.client360-create,.access-save):hover{ border-color:#2831df; background:#2831df; color:#fff; filter:none; } :is(.gbtn:not(.subtle),.addbtn,.bsave,.workspace-add,.operation-add,.operation-primary, .goal-add,.goal-primary,.talent-create-btn,.talent-save-btn,.mockups-btn.primary, .activity-button.primary,.client360-create,.access-save):active{transform:translateY(1px);} /* Secondary commands share one quiet, readable surface. */ :is(.bghst,.boutl,.bcanc,.gbtn.subtle,.activity-button:not(.primary),.goal-secondary, .operation-secondary,.access-quickbtn,.talent-mini-btn,.mockups-btn:not(.primary), .mockups-search-btn,.mockups-settings-btn,.mockups-history-trigger,.health-refresh,.client-channel-search button, .client360-section-head button:not(.client360-create),.home-insight-card>header button, .analytics-card>header button){ min-height:var(--control-h-sm); border:1px solid var(--control-border); border-radius:var(--control-r); background:var(--control-bg); color:var(--control-text); box-shadow:none; font-weight:550; transition:background-color .12s ease,border-color .12s ease,color .12s ease,transform .08s ease,opacity .12s ease; } :is(.bghst,.boutl,.bcanc,.gbtn.subtle,.activity-button:not(.primary),.goal-secondary, .operation-secondary,.access-quickbtn,.talent-mini-btn,.mockups-btn:not(.primary), .mockups-search-btn,.mockups-settings-btn,.mockups-history-trigger,.health-refresh,.client-channel-search button, .client360-section-head button:not(.client360-create),.home-insight-card>header button, .analytics-card>header button):hover{ border-color:var(--control-border-hover); background:var(--control-bg-hover); color:var(--control-text-hover); } :is(.bghst,.boutl,.bcanc,.gbtn.subtle,.activity-button:not(.primary),.goal-secondary, .operation-secondary,.access-quickbtn,.talent-mini-btn,.mockups-btn:not(.primary), .mockups-search-btn,.mockups-settings-btn,.mockups-history-trigger,.health-refresh,.client-channel-search button, .client360-section-head button:not(.client360-create),.home-insight-card>header button, .analytics-card>header button):active{background:var(--control-bg-active);transform:translateY(1px);} .mockups-search-btn{height:40px;min-height:40px;} .mockups-age-btn{height:40px;min-height:40px;} .mockups-history-trigger{ height:34px; min-height:34px; padding:0 11px; border-radius:var(--control-r); } /* Destructive commands stay restrained until interaction. */ :is(.bdel,.talent-delete-btn,.activity-icon-button.danger,.goal-secondary.quiet,.operation-secondary.quiet){ border-color:rgba(239,102,102,.12); background:rgba(239,102,102,.055); color:#c97c7c; } :is(.bdel,.talent-delete-btn,.activity-icon-button.danger,.goal-secondary.quiet,.operation-secondary.quiet):hover{ border-color:rgba(239,102,102,.22); background:rgba(239,102,102,.11); color:#ef9a9a; } /* Icon controls use stable square hit areas and identical feedback. */ :is(.zbtn,.rbtn,.thtogbtn,.themetog,.sbtog,.mx,.mclose,.task-mclose,.goal-close, .operation-close,.activity-icon-button,.access-refresh,.seldeselect,.note-btn, .pbtn,.rth-btn,.tbtns .tb2,.mockups-search-clear,.mockups-upload-clear, .mockups-channel-star,.goal-remove){ border-color:transparent; border-radius:6px; background:transparent; color:#707075; box-shadow:none; transition:background-color .11s ease,color .11s ease,border-color .11s ease,opacity .11s ease; } :is(.zbtn,.rbtn,.thtogbtn,.themetog,.sbtog,.mx,.mclose,.task-mclose,.goal-close, .operation-close,.activity-icon-button,.access-refresh,.seldeselect,.note-btn, .pbtn,.rth-btn,.tbtns .tb2,.mockups-search-clear,.mockups-upload-clear, .mockups-channel-star,.goal-remove):hover{ border-color:transparent; background:var(--control-bg-hover); color:var(--control-text-hover); } /* Segmented controls and filter chips stay neutral and visibly selected. */ :is(.workspace-tabs,.operations-tabs,.goals-tabs,.activity-tabs,.analytics-range, .mockups-mode-segment,.zbtns){ border:0; border-radius:8px; background:#111112; box-shadow:none; } :is(.workspace-tabs,.operations-tabs,.goals-tabs,.activity-tabs,.analytics-range, .mockups-mode-segment) button, :is(.tpill,.workspace-subfilters button,.activity-filters button,.mockups-template-card, .mockups-count-chip,.mockups-mode-option,.mockups-age-option,.analytics-currency-note button){ border-color:transparent; border-radius:6px; background:transparent; color:#69696e; box-shadow:none; transition:background-color .11s ease,color .11s ease,border-color .11s ease; } :is(.workspace-tabs,.operations-tabs,.goals-tabs,.activity-tabs,.analytics-range, .mockups-mode-segment) button:hover, :is(.tpill,.workspace-subfilters button,.activity-filters button,.mockups-template-card, .mockups-count-chip,.mockups-mode-option,.mockups-age-option,.analytics-currency-note button):hover{ border-color:transparent; background:#19191a; color:#bdbdc1; } :is(.workspace-tabs,.operations-tabs,.goals-tabs,.activity-tabs,.analytics-range, .mockups-mode-segment) button.on, :is(.tpill,.workspace-subfilters button,.activity-filters button,.mockups-template-card, .mockups-count-chip,.mockups-mode-option,.mockups-age-option,.analytics-currency-note button).on{ border-color:transparent; background:#252526; color:#f1f1f2; box-shadow:inset 0 0 0 1px rgba(255,255,255,.045); } .operations-tabs.workspace-tabs button.on, .goals-tabs.workspace-tabs button.on, .activity-tabs.workspace-tabs button.on{ border-color:transparent; background:#252526; color:#f1f1f2; box-shadow:inset 0 0 0 1px rgba(255,255,255,.045); } .operations-tabs.workspace-tabs button:hover, .goals-tabs.workspace-tabs button:hover, .activity-tabs.workspace-tabs button:hover{ background:#19191a; color:#bdbdc1; } /* Dropdown triggers, native selects, and search controls use one field language. */ :is(.access-status select,.goal-field select,.operation-field select,.talent-field select, .mockups-select,.mockups-modal-grid .field select,.crm-filters label, .analytics-header-controls select,.mockups-age-btn){ min-height:var(--control-h); border:1px solid var(--control-border); border-radius:var(--control-r); background-color:#151516; color:#b6b6bb; box-shadow:none; transition:background-color .11s ease,border-color .11s ease,color .11s ease; } :is(.access-status select,.goal-field select,.operation-field select,.talent-field select, .mockups-select,.mockups-modal-grid .field select,.crm-filters label, .analytics-header-controls select,.mockups-age-btn):hover{ border-color:var(--control-border-hover); background-color:#1a1a1b; color:#e5e5e7; } :is(.access-status select,.goal-field select,.operation-field select,.talent-field select, .mockups-select,.mockups-modal-grid .field select,.analytics-header-controls select, .mockups-age-btn):focus{ border-color:rgba(255,255,255,.14); background-color:#1c1c1d; box-shadow:0 0 0 3px rgba(255,255,255,.045); } select option{background:#181819;color:#dedee1;} /* Every floating list now reads as the same menu. */ :is(.ctxmenu,.mockups-age-menu,.mockups-history-menu,.client-channel-results){ border:1px solid var(--control-border-hover); border-radius:9px; background:var(--menu-bg); box-shadow:var(--menu-shadow); backdrop-filter:blur(16px); } :is(.ctxmenu-item,.mockups-age-option,.client-channel-results>button,.mockups-history-item){ border:0; border-radius:6px; background:transparent; color:#99999e; transition:background-color .11s ease,color .11s ease; } :is(.ctxmenu-item,.mockups-age-option,.client-channel-results>button,.mockups-history-item):hover, :is(.ctxmenu-item,.mockups-age-option,.client-channel-results>button,.mockups-history-item):focus-visible{ background:#202021; color:#f1f1f2; } /* 2026-08-17-v2: minimal video import and mockup output controls */ .mockups-import-field{display:flex;flex-direction:column;gap:7px;} .mockups-import-status{min-height:12px;font-size:8.5px;font-weight:550;color:#77777c;letter-spacing:.02em;} .mockups-import-status.success{color:#8b9f68;} .mockups-import-status.error{color:#c77c7c;} .mockups-import-status.loading{color:#8a8a90;} .mockups-import-input-wrap{position:relative;min-width:0;} .mockups-import-input-wrap .mockups-input{padding-inline:34px 30px;font-size:10.5px;} .mockups-import-link{position:absolute;left:11px;top:50%;width:14px;height:14px;color:#5f5f64;transform:translateY(-50%);pointer-events:none;z-index:1;} .mockups-import-clear{position:absolute;right:6px;top:50%;width:25px;height:25px;border:0;border-radius:6px;background:transparent;color:#68686d;font:400 16px/1 'Geist',sans-serif;transform:translateY(-50%);cursor:pointer;transition:background .16s ease,color .16s ease;} .mockups-import-clear:hover{background:#28282a;color:#d7d7da;} .mockups-import-error{margin-top:-1px;color:#b87070;font-size:8.5px;line-height:1.35;} .mockups-add-channel{height:24px;padding:0 7px;border:0;border-radius:6px;background:transparent;color:#77777c;font:550 9px/1 'Geist',sans-serif;display:inline-flex;align-items:center;gap:5px;cursor:pointer;transition:background .16s ease,color .16s ease;} .mockups-add-channel:hover{background:#202021;color:#d7d7da;} .mockups-add-channel span{font-size:13px;font-weight:400;line-height:1;} .mockups-channel-pair{display:flex;flex-direction:column;gap:5px;} .mockups-channel-and{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:0 9px;color:#505055;font-size:8.5px;font-weight:500;line-height:1;} .mockups-channel-and::before,.mockups-channel-and::after{content:'';height:1px;background:#202022;} .mockups-channel-slot{padding:7px 8px;gap:7px;border:1px solid transparent;transition:border-color .16s ease,background .16s ease;} .mockups-channel-slot.on{border-color:rgba(255,255,255,.085);background:#1a1a1b;} .mockups-selected-main{min-width:0;flex:1;padding:0;border:0;background:transparent;color:inherit;display:flex;align-items:center;gap:9px;text-align:left;cursor:pointer;} .mockups-selected-main .mockups-selected-info{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;} .mockups-selected-main .mockups-selected-name{max-width:100%;font-size:10.5px;font-weight:550;} .mockups-selected-main .mockups-selected-info small{color:#56565b;font-size:8px;font-weight:450;} .mockups-channel-slot .mockups-channel-avatar{width:32px;height:32px;flex:0 0 auto;border:0;} .mockups-channel-slot .mockups-verified{width:14px;height:14px;} .mockups-channel-slot .mockups-selected-actions{gap:3px;} .mockups-channel-slot .mockups-channel-star,.mockups-channel-remove{width:26px;height:26px;border:0;border-radius:6px;background:transparent;color:#66666b;display:grid;place-items:center;cursor:pointer;transition:background .16s ease,color .16s ease;} .mockups-channel-slot .mockups-channel-star:hover,.mockups-channel-remove:hover{background:#262628;color:#d4d4d7;} .mockups-channel-remove{font:400 15px/1 'Geist',sans-serif;} .mockups-channel-target-note{min-height:30px;padding:0 9px;border-radius:7px;background:#151515;color:#66666b;font-size:9px;display:flex;align-items:center;gap:7px;} .mockups-channel-target-note span{width:5px;height:5px;border-radius:50%;background:#8a8a8f;box-shadow:0 0 0 3px rgba(255,255,255,.035);} /* 2026-08-21-v2: compact, consistently sized mockup settings */ .mockups-panel.settings{padding:10px;gap:8px;} .mockups-settings-stack{gap:8px;} .mockups-settings-section{padding:10px;gap:9px;} .mockups-settings-kicker{padding:0 2px;font-size:9px;letter-spacing:.13em;color:#5f5f64;} .mockups-template-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;} .mockups-template-card{ min-width:0; min-height:72px; aspect-ratio:auto; padding:8px 4px 7px; gap:7px; border-radius:7px; background:#171718; } .mockups-template-card:hover{background:#1d1d1e;} .mockups-template-card.on{background:#242425;box-shadow:inset 0 0 0 1px rgba(255,255,255,.045);} .mockups-template-title{font-size:9.5px;font-weight:600;color:#85858a;} .mockups-template-card.on .mockups-template-title{color:#d5d5d8;} .mockups-template-preview{ width:38px; height:29px; padding:3px; border-radius:4px; background:#0e0e0f; box-shadow:inset 0 0 0 1px rgba(255,255,255,.045); display:grid; gap:2px; overflow:hidden; } .mockups-template-preview i{display:block;min-width:0;min-height:0;border-radius:1.5px;background:#373739;} .mockups-template-preview.stack{grid-template-rows:1fr 1fr;} .mockups-template-preview.before{grid-template-rows:.36fr 1fr;} .mockups-template-preview.before i:first-child{width:55%;justify-self:center;background:#2b2b2d;} .mockups-template-preview.split{grid-template-columns:1fr 1fr;padding-top:8px;position:relative;} .mockups-template-preview.split::before{content:'';position:absolute;left:8px;right:8px;top:3px;height:2px;border-radius:2px;background:#2b2b2d;} .mockups-template-card.on .mockups-template-preview i{background:#5b5b60;} .mockups-template-card.on .mockups-template-preview.before i:first-child, .mockups-template-card.on .mockups-template-preview.split::before{background:#424246;} .mockups-settings-list{display:flex;flex-direction:column;gap:2px;} .mockups-setting-static,.mockups-setting-toggle{ width:100%; min-width:0; min-height:40px; padding:5px 6px; border:0; border-radius:6px; background:transparent; color:#77777c; display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; gap:5px; font-family:'Geist',sans-serif; text-align:left; } .mockups-setting-toggle{cursor:pointer;transition:background-color .12s ease,color .12s ease;} .mockups-setting-toggle:hover,.mockups-setting-static:hover{background:#19191a;} .mockups-setting-icon{width:26px;height:26px;display:grid;place-items:center;color:#66666b;} .mockups-setting-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;} .mockups-setting-label{min-width:0;font-size:10px;font-weight:550;line-height:1.1;color:#85858a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .mockups-setting-toggle.on .mockups-setting-icon,.mockups-setting-toggle.on .mockups-setting-label{color:#b7b7bb;} .mockups-switch{width:29px;height:16px;padding:2.5px;border-radius:999px;background:#252526;display:block;transition:background-color .14s ease;} .mockups-switch i{display:block;width:11px;height:11px;border-radius:50%;background:#68686d;transform:translateX(0);transition:transform .16s cubic-bezier(.2,.75,.25,1),background-color .14s ease;} .mockups-setting-toggle.on .mockups-switch{background:#343436;} .mockups-setting-toggle.on .mockups-switch i{background:#d5d5d8;transform:translateX(13px);} .mockups-mini-count,.mockups-theme-control{display:flex;align-items:center;gap:2px;padding:2px;border-radius:6px;background:#111112;} .mockups-mini-count button,.mockups-theme-option{ width:28px; height:25px; padding:0; border:0; border-radius:4px; background:transparent; color:#626267; font:550 9.5px/1 'Geist',sans-serif; display:grid; place-items:center; cursor:pointer; transition:background-color .12s ease,color .12s ease; } .mockups-mini-count button:hover,.mockups-theme-option:hover{background:#1d1d1e;color:#b7b7bb;} .mockups-mini-count button.on,.mockups-theme-option.on{background:#2a2a2c;color:#eeeeef;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);} .mockups-theme-option svg{width:13px;height:13px;} .mockups-history-wrap,.mockups-history-trigger{width:100%;} .mockups-history-trigger{height:36px;min-height:36px;border-radius:7px;} @media(max-width:1180px) and (min-width:981px){ .mockups-shell{grid-template-columns:minmax(210px,220px) minmax(280px,1fr) minmax(205px,220px);} .mockups-panel.settings{padding:7px;} .mockups-settings-section{padding:7px;} .mockups-template-card{min-height:64px;padding-inline:2px;} .mockups-template-preview{width:34px;height:26px;} .mockups-setting-static,.mockups-setting-toggle{grid-template-columns:22px minmax(0,1fr) auto;gap:3px;padding-inline:3px;} .mockups-setting-icon{width:22px;} .mockups-setting-label{font-size:9.5px;} .mockups-mini-count button,.mockups-theme-option{width:24px;} } @media(max-width:980px){ .mockups-panel.settings{overflow:hidden;} .mockups-settings-stack{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);overflow:visible;} .mockups-settings-section{height:100%;} } @media(max-width:620px){ .mockups-settings-stack{grid-template-columns:1fr;} } @media(prefers-reduced-motion:reduce){ button,select,[role="button"]{transition:none!important;} } /* 2026-08-21-v4: reduced client pipeline and true edge-to-edge mockup text */ .crm-header-simple{ min-height:0; margin-bottom:18px; display:block; } .crm-header-simple h1{margin:0;} .crm-pipeline{ min-width:700px; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:10px; } .crm-column{ min-height:180px; padding:8px; border:1px solid rgba(255,255,255,.035); border-radius:9px; background:#0e0e0f; } .crm-column>header{ height:36px; padding:0 5px; } .crm-column>header strong{ color:#a9a9ae; font-size:10.5px; font-weight:580; } .crm-column>header>span{ min-width:20px; height:20px; padding:0 5px; border-radius:6px; background:#181819; color:#6f6f74; font-size:8.5px; } .crm-column>div{gap:5px;} .crm-column-empty{ min-height:72px; color:#444449; font-size:9px; } .crm-pipeline-client{ width:100%; min-width:0; height:48px; padding:7px 8px; border:0; border-radius:7px; background:#151516; color:#dedee1; display:grid; grid-template-columns:30px minmax(0,1fr) 14px; align-items:center; gap:9px; cursor:pointer; transition:background-color .12s ease; } .crm-pipeline-client:hover,.crm-pipeline-client:focus-visible{ outline:0; background:#1c1c1e; } .crm-pipeline-client .client-channel-avatar,.crm-pipeline-client .client-mark{ width:30px; height:30px; border:0; border-radius:7px; flex:0 0 auto; } .crm-pipeline-client .client-mark{ display:grid; place-items:center; background:#242426; color:#a4a4a9; font-size:9px; font-weight:620; } .crm-pipeline-client strong{ min-width:0; overflow:hidden; text-overflow:ellipsis; color:#dedee1; font-size:11px; font-weight:570; line-height:1.2; white-space:nowrap; } .crm-pipeline-client svg{ width:13px; height:13px; color:#444449; opacity:0; transform:translateX(-2px); transition:opacity .12s ease,transform .12s ease; } .crm-pipeline-client:hover svg,.crm-pipeline-client:focus-visible svg{ opacity:1; transform:none; } @media(max-width:760px){ .crm-header-simple{margin-bottom:14px;} .crm-pipeline{min-width:0;grid-template-columns:1fr;gap:8px;} .crm-column{min-height:0;} .crm-pipeline-client svg{opacity:1;transform:none;} } @media(prefers-reduced-motion:reduce){ .crm-pipeline-client,.crm-pipeline-client svg{transition:none!important;} } /* 2026-08-21-v6: direct client status dragging with blue accent normalization */ .crm-pipeline-client.can-drag{ cursor:grab; user-select:none; -webkit-user-select:none; touch-action:pan-y; } .crm-pipeline-client.can-drag:active{cursor:grabbing;} .crm-pipeline-client.is-status-syncing{cursor:progress;} body.client-pipeline-dragging,body.client-pipeline-dragging *{ cursor:grabbing!important; user-select:none!important; -webkit-user-select:none!important; } .crm-column{ position:relative; transition:border-color .16s cubic-bezier(.22,1,.36,1),background-color .16s cubic-bezier(.22,1,.36,1),box-shadow .16s cubic-bezier(.22,1,.36,1); } .crm-column-list{ min-height:72px; display:flex; flex-direction:column; gap:5px; } .crm-pipeline-client.is-drag-source{ opacity:.16; transform:scale(.985); } .crm-pipeline-client.is-drop-committing{opacity:0;} .crm-client-drag-ghost{ position:fixed!important; inset:0 auto auto 0!important; z-index:10040; pointer-events:none!important; margin:0!important; opacity:.98; transform-origin:center; box-shadow:0 14px 34px rgba(0,0,0,.42),0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent); will-change:transform; } .crm-client-drag-ghost svg{opacity:0!important;} .crm-client-drag-ghost.is-settling{ transition:transform .15s cubic-bezier(.22,1,.36,1),opacity .12s ease; } .crm-column.is-client-drop-ready:not(.is-client-drop-source){ border-color:color-mix(in srgb,var(--accent) 22%,transparent); } .crm-column.is-client-drop-target,.crm-column.is-client-drop-committing{ border-color:color-mix(in srgb,var(--accent) 48%,transparent); background:color-mix(in srgb,var(--accent) 5%,#0e0e0f); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 8%,transparent); } .crm-column.is-client-drop-target .crm-column-empty{display:none;} .crm-client-drop-slot{ width:100%; height:48px; flex:0 0 48px; border:1px dashed color-mix(in srgb,var(--accent) 52%,transparent); border-radius:7px; background:color-mix(in srgb,var(--accent) 7%,transparent); pointer-events:none; animation:client-drop-slot-in .14s cubic-bezier(.22,1,.36,1) both; } @keyframes client-drop-slot-in{ from{opacity:0;transform:scale(.985);} to{opacity:1;transform:scale(1);} } .crm-pipeline-client.is-status-arrival{ animation:client-status-arrive .26s cubic-bezier(.22,1,.36,1) both; } @keyframes client-status-arrive{ from{opacity:.3;transform:translate3d(0,-5px,0) scale(.99);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 44%,transparent);} to{opacity:1;transform:translate3d(0,0,0) scale(1);box-shadow:0 0 0 1px transparent;} } .crm-pipeline-client.is-status-rollback{ animation:client-status-rollback .34s cubic-bezier(.22,1,.36,1) both; } @keyframes client-status-rollback{ 0%{box-shadow:0 0 0 1px rgba(245,88,88,.5);transform:translate3d(0,-4px,0);} 100%{box-shadow:0 0 0 1px rgba(245,88,88,0);transform:translate3d(0,0,0);} } @media(pointer:coarse){ .crm-pipeline-client.can-drag{cursor:pointer;touch-action:pan-y;} } @media(prefers-reduced-motion:reduce){ .crm-column,.crm-pipeline-client.is-drag-source,.crm-client-drag-ghost.is-settling{transition:none!important;} .crm-client-drop-slot,.crm-pipeline-client.is-status-arrival,.crm-pipeline-client.is-status-rollback{animation:none!important;} } /* Tasks workspace - 2026-08-25 v2 */ body[data-tab="tasks"] .content{padding:0;overflow:hidden} body[data-tab="tasks"] #panel-tasks,body[data-tab="tasks"] #tasks-root{height:100%;min-height:0} .tasks-workspace{--task-blue:#1a23ce;--task-surface:#0d0d0e;--task-raised:#121214;display:grid;grid-template-columns:248px minmax(0,1fr);height:100%;min-height:0;background:#080809;color:#f4f4f5} .tasks-workspace button,.workspace-task-overlay button,.tasks-workspace input,.workspace-task-overlay input,.workspace-task-overlay textarea,.workspace-task-overlay select{font:inherit} .task-folder-rail{display:flex;min-width:0;min-height:0;flex-direction:column;padding:20px 12px 14px;background:#0b0b0c;border-right:1px solid #1a1a1d} .task-folder-rail-head{display:flex;align-items:center;justify-content:space-between;padding:0 8px 12px;color:#8c8c94} .task-folder-rail-head strong{font-size:10px;font-weight:600;letter-spacing:.105em;text-transform:uppercase} .task-folder-rail-head button,.task-folder-title button{display:grid;place-items:center;width:27px;height:27px;border:0;border-radius:8px;background:transparent;color:#74747c;cursor:pointer;transition:background .18s ease,color .18s ease,transform .18s ease} .task-folder-rail-head button:hover,.task-folder-title button:hover{background:#1a1a1d;color:#fff} .task-folder-rail-head button:active,.task-folder-title button:active{transform:scale(.94)} .task-folder-rail-head svg,.task-folder-title button svg{width:14px;height:14px} .task-folder-list{display:flex;min-height:0;flex:1;flex-direction:column;gap:4px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#28282c transparent} .task-folder{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:9px;width:100%;min-height:58px;padding:9px 9px;border:0;border-radius:11px;background:transparent;color:#a3a3aa;text-align:left;cursor:pointer;transition:background .2s cubic-bezier(.22,1,.36,1),color .2s ease,transform .16s ease} .task-folder:hover{background:#121214;color:#dedee2} .task-folder:active{transform:scale(.985)} .task-folder.on{background:#17171a;color:#fff} .task-folder.on:before{position:absolute;left:0;top:16px;bottom:16px;width:2px;border-radius:2px;background:var(--folder-tone,#1a23ce);content:""} .task-folder-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#17171a;color:var(--folder-tone,#4952ed)} .task-folder.on .task-folder-mark{background:color-mix(in srgb,var(--folder-tone,#1a23ce) 15%,#17171a)} .task-folder-mark svg{width:14px;height:14px} .task-folder-copy{display:flex;min-width:0;flex-direction:column;gap:3px} .task-folder-copy strong{overflow:hidden;font-size:12px;font-weight:540;line-height:1.2;text-overflow:ellipsis;white-space:nowrap} .task-folder-copy small{overflow:hidden;color:#66666d;font-size:9px;line-height:1.1;text-overflow:ellipsis;white-space:nowrap} .task-folder-copy>i{display:block;width:100%;height:2px;margin-top:2px;overflow:hidden;border-radius:2px;background:#242428} .task-folder-copy>i b{display:block;height:100%;border-radius:inherit;background:var(--folder-tone,#1a23ce);transition:width .32s cubic-bezier(.22,1,.36,1)} .task-folder-progress{color:#707077;font-size:9px;font-variant-numeric:tabular-nums} .task-folder.on .task-folder-progress{color:#a0a0a7} .task-folder.tone-blue,.task-folder-dot.tone-blue{--folder-tone:#4952ed}.task-folder.tone-slate,.task-folder-dot.tone-slate{--folder-tone:#7c8495}.task-folder.tone-amber,.task-folder-dot.tone-amber{--folder-tone:#b9873b}.task-folder.tone-red,.task-folder-dot.tone-red{--folder-tone:#d6525d} .task-folder-archive-toggle{display:flex;align-items:center;gap:9px;width:100%;min-height:34px;margin-top:10px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:#66666d;font-size:10px;cursor:pointer;transition:background .18s ease,color .18s ease} .task-folder-archive-toggle:hover,.task-folder-archive-toggle.on{background:#121214;color:#b5b5bc} .task-folder-archive-toggle svg{width:13px;height:13px} .task-folder-main{display:flex;min-width:0;min-height:0;flex-direction:column;background:#09090a} .task-folder-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:23px 28px 19px;border-bottom:1px solid #171719;background:#0b0b0c} .task-folder-title{display:flex;align-items:center;gap:9px} .task-folder-dot{width:7px;height:7px;border-radius:50%;background:var(--folder-tone,#4952ed);box-shadow:0 0 0 4px color-mix(in srgb,var(--folder-tone,#4952ed) 10%,transparent)} .task-folder-title h1{margin:0;color:#f1f1f3;font-size:18px;font-weight:560;letter-spacing:-.025em} .task-folder-header>div>p{max-width:640px;margin:6px 0 0 16px;color:#6f6f77;font-size:10px;line-height:1.45} .task-folder-summary{display:grid;grid-template-columns:auto auto;align-items:end;gap:3px 8px;min-width:116px;padding-top:1px;text-align:right} .task-folder-summary strong{font-size:17px;font-weight:560;font-variant-numeric:tabular-nums} .task-folder-summary span{padding-bottom:2px;color:#74747b;font-size:9px} .task-folder-summary i{grid-column:1/-1;display:block;height:3px;overflow:hidden;border-radius:3px;background:#252529} .task-folder-summary i b{display:block;height:100%;border-radius:inherit;background:#313be0;transition:width .32s cubic-bezier(.22,1,.36,1)} .workspace-task-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 28px;border-bottom:1px solid #141416} .workspace-task-filters{display:flex;align-items:center;gap:3px;padding:3px;border-radius:9px;background:#101012} .workspace-task-filters button{height:27px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:#6f6f76;font-size:10px;cursor:pointer;transition:background .18s ease,color .18s ease} .workspace-task-filters button:hover{color:#c1c1c6}.workspace-task-filters button.on{background:#1c1c1f;color:#f2f2f4} .workspace-task-actions{display:flex;align-items:center;gap:7px} .workspace-task-actions>label{display:flex;align-items:center;gap:7px;width:184px;height:32px;padding:0 10px;border:1px solid #1c1c1f;border-radius:9px;background:#0d0d0f;color:#5f5f66;transition:border-color .18s ease,background .18s ease} .workspace-task-actions>label:focus-within{border-color:#34343a;background:#111113;color:#85858c} .workspace-task-actions>label svg{width:13px;height:13px;flex:0 0 auto} .workspace-task-actions input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:#e9e9eb;font-size:10px} .workspace-task-actions input::placeholder{color:#525258} .workspace-task-actions>button,.workspace-task-empty button,.workspace-task-first button{display:flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border:1px solid #2730cf;border-radius:9px;background:#1a23ce;color:#fff;font-size:10px;font-weight:560;cursor:pointer;box-shadow:0 6px 20px rgba(26,35,206,.14);transition:background .18s ease,transform .16s ease,box-shadow .18s ease} .workspace-task-actions>button:hover,.workspace-task-empty button:hover,.workspace-task-first button:hover{background:#2530df;box-shadow:0 8px 24px rgba(26,35,206,.22)} .workspace-task-actions>button:active,.workspace-task-empty button:active,.workspace-task-first button:active{transform:scale(.97)} .workspace-task-actions>button svg{width:13px;height:13px} .workspace-task-content{min-height:0;flex:1;padding:14px 28px 30px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#27272b transparent} .workspace-task-list{display:flex;flex-direction:column;gap:4px} .workspace-task-row{position:relative;display:grid;grid-template-columns:24px minmax(180px,1fr) minmax(60px,auto) auto 14px;align-items:center;gap:12px;min-height:52px;padding:8px 12px;border:1px solid transparent;border-radius:11px;background:#101012;color:#e5e5e7;cursor:pointer;outline:0;transition:background .18s ease,border-color .18s ease,transform .22s cubic-bezier(.22,1,.36,1),opacity .2s ease} .workspace-task-row:hover,.workspace-task-row:focus-visible{border-color:#242429;background:#141416} .workspace-task-row:active{transform:scale(.994)} .workspace-task-row.just-completed{animation:task-complete-move .46s cubic-bezier(.22,1,.36,1)} @keyframes task-complete-move{0%{transform:translateY(-8px);opacity:.58}100%{transform:translateY(0);opacity:1}} .workspace-task-check{display:grid;place-items:center;width:20px;height:20px;padding:0;border:1px solid #303036;border-radius:6px;background:#141416;color:transparent;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .16s ease,color .18s ease} .workspace-task-check:hover{border-color:#4b55e9;transform:scale(1.06)} .workspace-task-check svg{width:12px;height:12px} .workspace-task-row.done{opacity:.58}.workspace-task-row.done:hover{opacity:.78} .workspace-task-row.done .workspace-task-check{border-color:#3039d5;background:#1a23ce;color:#fff} .workspace-task-row.done .workspace-task-copy strong{text-decoration:line-through;text-decoration-color:#696971} .workspace-task-copy{min-width:0}.workspace-task-copy strong{display:-webkit-box;overflow:hidden;font-size:11px;font-weight:520;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2} .workspace-task-copy p{display:block;overflow:hidden;margin:3px 0 0;color:#66666e;font-size:9px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap} .workspace-task-people{display:flex;align-items:center;justify-content:flex-end;min-width:26px;padding-left:7px} .workspace-task-avatar{position:relative;z-index:calc(8 - var(--avatar-index));width:24px;height:24px;margin-left:-7px;border:2px solid #101012;border-radius:50%;object-fit:cover;background:#242429;color:#bdbdc4;font-size:8px;font-weight:600} span.workspace-task-avatar{display:grid;place-items:center}.workspace-task-row:hover .workspace-task-avatar{border-color:#141416} .workspace-task-unassigned{display:grid;place-items:center;width:22px;height:22px;border:1px dashed #34343a;border-radius:50%;color:#606067;font-size:12px} .workspace-task-more{display:grid;place-items:center;width:24px;height:24px;margin-left:-6px;border:2px solid #101012;border-radius:50%;background:#25252a;color:#9999a1;font-size:8px} .workspace-task-meta{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:104px} .workspace-task-due,.workspace-task-priority{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 7px;border-radius:6px;background:#171719;color:#77777f;font-size:8px;font-weight:530;white-space:nowrap} .workspace-task-due svg{width:10px;height:10px}.workspace-task-due.today,.workspace-task-due.soon{color:#8188f7;background:rgba(49,59,224,.1)}.workspace-task-due.overdue{color:#e16a74;background:rgba(214,82,93,.1)} .workspace-task-priority.high{color:#8f95f7;background:rgba(49,59,224,.11)}.workspace-task-priority.urgent{color:#ec7780;background:rgba(214,82,93,.11)} .workspace-task-row.done .workspace-task-due,.workspace-task-row.done .workspace-task-priority{color:#5f5f66;background:#151517} .workspace-task-chevron{width:12px;height:12px;color:#494950;transition:transform .18s ease,color .18s ease}.workspace-task-row:hover .workspace-task-chevron{transform:translateX(2px);color:#85858d} .workspace-task-completed{margin-top:26px}.workspace-task-section-label{display:flex;align-items:center;gap:7px;padding:0 3px 8px;color:#606067;font-size:9px;font-weight:560;letter-spacing:.05em;text-transform:uppercase}.workspace-task-section-label b{display:grid;place-items:center;min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:#171719;color:#74747c;font-size:8px;font-weight:500} .workspace-task-empty,.workspace-task-first{display:flex;min-height:250px;align-items:center;justify-content:center;flex-direction:column;text-align:center}.workspace-task-empty>span,.workspace-task-first strong{color:#c7c7cc;font-size:12px;font-weight:560}.workspace-task-empty p,.workspace-task-first p{max-width:320px;margin:7px 0 14px;color:#626269;font-size:10px;line-height:1.55}.workspace-task-empty button,.workspace-task-first button{height:30px;font-size:9px} .tasks-workspace.empty{display:grid;place-items:center}.workspace-task-first>span{display:grid;place-items:center;width:44px;height:44px;margin-bottom:13px;border-radius:13px;background:#121214;color:#5d64e9}.workspace-task-first>span svg{width:21px;height:21px} .workspace-task-state{display:flex;height:100%;align-items:center;justify-content:center;gap:10px;color:#8a8a92;font-size:11px} .workspace-task-overlay{position:fixed;inset:0;z-index:440;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.72);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease} .workspace-task-overlay.on{opacity:1;visibility:visible} .workspace-task-modal{width:min(620px,calc(100vw - 32px));max-height:min(760px,calc(100vh - 32px));overflow:hidden;border:1px solid #28282d;border-radius:16px;background:#111113;box-shadow:0 30px 90px rgba(0,0,0,.64);transform:translateY(10px) scale(.985);transition:transform .24s cubic-bezier(.22,1,.36,1)} .workspace-task-overlay.on .workspace-task-modal{transform:translateY(0) scale(1)} .workspace-task-editor,.task-folder-editor{display:flex;max-height:min(760px,calc(100vh - 32px));flex-direction:column} .workspace-task-editor>header,.task-folder-editor>header{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 17px;border-bottom:1px solid #1d1d20} .workspace-task-editor>header span,.task-folder-editor>header span{display:block;margin-bottom:4px;color:#66666e;font-size:8px;font-weight:600;letter-spacing:.11em;text-transform:uppercase} .workspace-task-editor>header h2,.task-folder-editor>header h2{margin:0;color:#f2f2f4;font-size:17px;font-weight:560;letter-spacing:-.025em} .workspace-task-editor>header button,.task-folder-editor>header button{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:9px;background:#18181b;color:#74747c;cursor:pointer;transition:background .18s ease,color .18s ease,transform .16s ease}.workspace-task-editor>header button:hover,.task-folder-editor>header button:hover{background:#202024;color:#fff}.workspace-task-editor>header button:active,.task-folder-editor>header button:active{transform:scale(.94)}.workspace-task-editor>header svg,.task-folder-editor>header svg{width:14px;height:14px} .workspace-task-editor-body{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:21px 22px;overflow:auto;scrollbar-width:thin;scrollbar-color:#2d2d32 transparent} .workspace-task-field{display:flex;min-width:0;flex-direction:column;gap:7px;margin:0;padding:0;border:0}.workspace-task-field.wide,.workspace-task-assignees,.workspace-task-priorities,.task-folder-tones{grid-column:1/-1} .workspace-task-field>span,.workspace-task-field>legend{padding:0;color:#85858d;font-size:9px;font-weight:550}.workspace-task-field>span small{color:#55555c;font-size:8px;font-weight:400} .workspace-task-field input,.workspace-task-field textarea,.workspace-task-field select{width:100%;min-height:38px;padding:0 11px;border:1px solid #29292e;border-radius:10px;outline:0;background:#171719;color:#ededf0;font-size:11px;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}.workspace-task-field textarea{min-height:96px;padding:10px 11px;line-height:1.55;resize:vertical}.workspace-task-field input:focus,.workspace-task-field textarea:focus,.workspace-task-field select:focus{border-color:#414ae4;background:#19191c;box-shadow:0 0 0 3px rgba(26,35,206,.1)} .workspace-task-field input::placeholder,.workspace-task-field textarea::placeholder{color:#505057}.workspace-task-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#74747c 50%),linear-gradient(135deg,#74747c 50%,transparent 50%);background-position:calc(100% - 15px) 16px,calc(100% - 11px) 16px;background-size:4px 4px,4px 4px;background-repeat:no-repeat} .workspace-task-editor.readonly .workspace-task-field input:disabled,.workspace-task-editor.readonly .workspace-task-field textarea:disabled,.workspace-task-editor.readonly .workspace-task-field select:disabled{opacity:1;color:#d8d8dc;-webkit-text-fill-color:#d8d8dc;cursor:default}.workspace-task-editor.readonly .workspace-task-person:disabled{opacity:1;cursor:default}.workspace-task-editor.readonly .workspace-task-priorities label{cursor:default} .workspace-task-field-grid{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px} .workspace-task-date-field{position:relative}.workspace-task-date-field input{padding-right:36px;color-scheme:dark}.workspace-task-date-field button{position:absolute;right:5px;top:5px;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:7px;background:#1d1d20;color:#66666d;cursor:pointer}.workspace-task-date-field button:hover{color:#fff}.workspace-task-date-field button svg{width:12px;height:12px} .workspace-task-assignees>div{display:flex;flex-wrap:wrap;gap:7px}.workspace-task-person{display:flex;align-items:center;gap:7px;min-height:36px;padding:4px 8px 4px 4px;border:1px solid #29292e;border-radius:10px;background:#171719;color:#8f8f97;cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease,transform .16s ease}.workspace-task-person:hover{border-color:#3a3a40;color:#d8d8dc}.workspace-task-person:active{transform:scale(.98)}.workspace-task-person.on{border-color:#353ed7;background:rgba(26,35,206,.1);color:#ededf0}.workspace-task-person .workspace-task-avatar{width:26px;height:26px;margin:0;border:0;font-size:8px}.workspace-task-person>span{max-width:140px;overflow:hidden;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.workspace-task-person>i{display:grid;place-items:center;width:14px;height:14px;border-radius:5px;background:#25252a;color:transparent}.workspace-task-person.on>i{background:#1a23ce;color:#fff}.workspace-task-person>i svg{width:9px;height:9px}.workspace-task-no-members{color:#5f5f66;font-size:9px} .workspace-task-priorities>div{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:3px;border-radius:10px;background:#171719}.workspace-task-priorities label{cursor:pointer}.workspace-task-priorities input{position:absolute;opacity:0;pointer-events:none}.workspace-task-priorities label span{display:grid;place-items:center;height:31px;border-radius:8px;color:#717178;font-size:9px;transition:background .18s ease,color .18s ease}.workspace-task-priorities input:checked+span{background:#242429;color:#ededf0}.workspace-task-priorities label.high input:checked+span{background:rgba(49,59,224,.16);color:#9ba0fa}.workspace-task-priorities label.urgent input:checked+span{background:rgba(214,82,93,.14);color:#ef7d86} .task-folder-tones>div{display:flex;align-items:center;gap:8px}.task-folder-tones label{display:grid;place-items:center;width:34px;height:34px;border:1px solid #29292e;border-radius:10px;background:#171719;cursor:pointer}.task-folder-tones input{position:absolute;opacity:0}.task-folder-tones label span{width:12px;height:12px;border-radius:50%;background:var(--folder-tone)}.task-folder-tones label:has(input:checked){border-color:var(--folder-tone);box-shadow:0 0 0 3px color-mix(in srgb,var(--folder-tone) 12%,transparent)}.task-folder-tones .tone-blue{--folder-tone:#4952ed}.task-folder-tones .tone-slate{--folder-tone:#7c8495}.task-folder-tones .tone-amber{--folder-tone:#b9873b}.task-folder-tones .tone-red{--folder-tone:#d6525d} .workspace-task-editor>footer,.task-folder-editor>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;border-top:1px solid #1d1d20}.workspace-task-editor>footer>div,.task-folder-editor>footer>div{display:flex;align-items:center;gap:7px}.workspace-task-editor footer button,.task-folder-editor footer button{height:34px;padding:0 12px;border-radius:9px;font-size:9px;font-weight:550;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .16s ease}.workspace-task-editor footer button:active,.task-folder-editor footer button:active{transform:scale(.97)}.workspace-task-secondary{border:1px solid #29292e;background:#171719;color:#9b9ba2}.workspace-task-secondary:hover{background:#202024;color:#fff}.workspace-task-primary{border:1px solid #2730cf;background:#1a23ce;color:#fff}.workspace-task-primary:hover{background:#2732df}.workspace-task-primary:disabled{opacity:.45;cursor:wait}.workspace-task-danger{border:0;background:transparent;color:#8f4d54}.workspace-task-danger:hover{background:rgba(214,82,93,.08);color:#e16a74} @media(max-width:760px){ body[data-tab="tasks"] .content{padding-bottom:64px} .tasks-workspace{display:flex;flex-direction:column} .task-folder-rail{display:block;flex:0 0 auto;padding:10px 12px 8px;border-right:0;border-bottom:1px solid #19191c;overflow:hidden} .task-folder-rail-head{padding:0 2px 8px}.task-folder-list{display:flex;flex-direction:row;gap:6px;overflow-x:auto;scrollbar-width:none}.task-folder-list::-webkit-scrollbar{display:none} .task-folder{grid-template-columns:26px minmax(86px,1fr) auto;flex:0 0 174px;min-height:56px;padding:7px 8px;border:1px solid #17171a;background:#0e0e10}.task-folder.on{border-color:#2a2a30}.task-folder.on:before{display:none}.task-folder-mark{width:26px;height:26px;border-radius:7px}.task-folder-mark svg{width:12px;height:12px}.task-folder-copy strong{font-size:10px}.task-folder-copy small{font-size:8px}.task-folder-archive-toggle{display:none}.task-folder-rail-head button{width:36px;height:36px} .task-folder-header{align-items:center;padding:15px 15px 13px}.task-folder-title h1{font-size:15px}.task-folder-header>div>p{display:none}.task-folder-summary{min-width:94px}.task-folder-summary strong{font-size:14px} .workspace-task-toolbar{align-items:stretch;flex-direction:column;padding:9px 12px}.workspace-task-filters{align-self:flex-start}.workspace-task-filters button{height:34px;padding:0 13px}.workspace-task-actions{width:100%}.workspace-task-actions>label{width:auto;min-width:0;height:40px;flex:1}.workspace-task-actions>button{width:40px;height:40px;padding:0;font-size:0}.workspace-task-actions>button svg{width:15px;height:15px} .workspace-task-content{padding:10px 12px 22px}.workspace-task-row{grid-template-columns:30px minmax(0,1fr) auto 11px;gap:8px;min-height:60px;padding:8px}.workspace-task-check{width:28px;height:28px}.workspace-task-people{display:none}.workspace-task-meta{min-width:0}.workspace-task-priority{display:none}.workspace-task-copy strong{font-size:10px}.workspace-task-copy p{max-width:58vw}.workspace-task-due{font-size:7px;padding:0 5px} .workspace-task-overlay{align-items:flex-end;padding:0}.workspace-task-modal{width:100%;max-height:92dvh;border-radius:17px 17px 0 0;transform:translateY(28px)}.workspace-task-editor,.task-folder-editor{max-height:92dvh}.workspace-task-editor-body{grid-template-columns:1fr;padding:17px 15px}.workspace-task-field-grid{grid-template-columns:1fr}.workspace-task-editor>header,.task-folder-editor>header{padding:16px 15px 14px}.workspace-task-editor>header button,.task-folder-editor>header button{width:38px;height:38px}.workspace-task-editor>footer,.task-folder-editor>footer{padding:12px 15px calc(12px + env(safe-area-inset-bottom))}.workspace-task-editor>footer>div,.task-folder-editor>footer>div{margin-left:auto}.workspace-task-editor footer button,.task-folder-editor footer button{height:40px}.workspace-task-assignees>div{display:grid;grid-template-columns:1fr 1fr}.workspace-task-person{min-width:0;min-height:42px}.workspace-task-person>span{min-width:0} } @media(prefers-reduced-motion:reduce){.workspace-task-row.just-completed{animation:none}.workspace-task-overlay,.workspace-task-modal,.task-folder,.workspace-task-row,.workspace-task-check{transition:none}} /* Tasks card dashboard - 2026-08-27 v1 */ .tasks-dashboard{ --task-accent:#1a23ce; --task-canvas:#080809; --task-card:#101011; --task-raised:#151516; --task-hover:#19191b; --task-border:rgba(255,255,255,.065); --task-border-strong:rgba(255,255,255,.105); display:flex; height:100%; min-height:0; flex-direction:column; overflow:hidden; background:var(--task-canvas); color:#f1f1f2; } .tasks-dashboard button,.tasks-dashboard input{font:inherit} .task-board-toolbar{ z-index:2; display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:62px; padding:12px 22px; border-bottom:1px solid var(--task-border); background:rgba(10,10,11,.96); } .task-board-overview{display:flex;align-items:center;gap:5px;flex:0 0 auto;color:#69696f;font-size:10px;white-space:nowrap} .task-board-overview span{display:flex;align-items:baseline;gap:4px;padding:6px 8px;border-radius:7px} .task-board-overview span+span:before{display:inline-block;width:2px;height:2px;margin-right:3px;border-radius:50%;background:#3e3e43;content:"";vertical-align:middle} .task-board-overview strong{color:#b7b7bc;font-size:10px;font-weight:600;font-variant-numeric:tabular-nums} .task-board-controls{display:flex;min-width:0;align-items:center;justify-content:flex-end;gap:7px} .tasks-dashboard .workspace-task-filters{height:34px;padding:3px;border:1px solid var(--task-border);border-radius:9px;background:#111112} .tasks-dashboard .workspace-task-filters button{height:26px;padding:0 10px;border-radius:6px;color:#77777e;font-size:9px;font-weight:520} .tasks-dashboard .workspace-task-filters button:hover{color:#c9c9cd} .tasks-dashboard .workspace-task-filters button.on{background:#202022;color:#f2f2f3;box-shadow:0 1px 3px rgba(0,0,0,.22)} .task-board-search{display:flex;width:184px;height:34px;align-items:center;gap:7px;padding:0 8px 0 10px;border:1px solid var(--task-border);border-radius:9px;background:#111112;color:#5f5f65;transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease} .task-board-search:focus-within{border-color:rgba(255,255,255,.14);background:#141415;color:#919198;box-shadow:0 0 0 3px rgba(255,255,255,.025)} .task-board-search>svg{width:13px;height:13px;flex:0 0 auto} .task-board-search input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:#e8e8ea;font-size:9px} .task-board-search input::placeholder{color:#54545a} .task-board-search button{display:grid;width:22px;height:22px;place-items:center;flex:0 0 auto;padding:0;border:0;border-radius:6px;background:transparent;color:#64646b;cursor:pointer} .task-board-search button:hover{background:#202023;color:#d5d5d8} .task-board-search button svg{width:11px;height:11px} .task-board-archive,.task-board-new{display:flex;height:34px;align-items:center;justify-content:center;gap:6px;padding:0 10px;border:1px solid var(--task-border);border-radius:9px;background:#131314;color:#85858c;font-size:9px;font-weight:540;white-space:nowrap;cursor:pointer;transition:border-color .16s ease,background .16s ease,color .16s ease,transform .14s ease} .task-board-archive:hover{border-color:var(--task-border-strong);background:#19191b;color:#d8d8db} .task-board-archive.on{border-color:rgba(255,255,255,.12);background:#1d1d1f;color:#f0f0f2} .task-board-new{border-color:#2730ce;background:var(--task-accent);color:#fff;box-shadow:0 5px 16px rgba(26,35,206,.13)} .task-board-new:hover{border-color:#3a44e3;background:#242fd8;box-shadow:0 7px 20px rgba(26,35,206,.2)} .task-board-archive:active,.task-board-new:active{transform:scale(.97)} .task-board-archive svg,.task-board-new svg{width:13px;height:13px} .task-board-scroll{min-height:0;flex:1;padding:18px 20px 32px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#2a2a2d transparent} .task-board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr));align-items:start;gap:14px;max-width:1540px;margin:0 auto} .task-board-card{ --folder-tone:#4952ed; display:flex; min-width:0; min-height:178px; flex-direction:column; overflow:hidden; border:1px solid var(--task-border); border-radius:13px; background:var(--task-card); box-shadow:0 10px 30px rgba(0,0,0,.12); contain:layout paint; transition:border-color .18s ease,box-shadow .18s ease; } .task-board-card:hover{border-color:var(--task-border-strong);box-shadow:0 12px 34px rgba(0,0,0,.2)} .task-board-card.archived{opacity:.76} .task-board-card.tone-blue{--folder-tone:#4952ed}.task-board-card.tone-slate{--folder-tone:#7c8495}.task-board-card.tone-amber{--folder-tone:#b9873b}.task-board-card.tone-red{--folder-tone:#d6525d} .task-card-header{display:flex;min-height:64px;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 13px 11px} .task-card-title{display:flex;min-width:0;align-items:flex-start;gap:9px} .task-card-tone{width:6px;height:6px;margin-top:5px;flex:0 0 auto;border-radius:50%;background:var(--folder-tone);box-shadow:0 0 0 3px color-mix(in srgb,var(--folder-tone) 10%,transparent)} .task-card-title>div{min-width:0} .task-card-title h2{display:-webkit-box;overflow:hidden;margin:0;color:#ececee;font-size:12px;font-weight:610;line-height:1.35;letter-spacing:-.01em;-webkit-box-orient:vertical;-webkit-line-clamp:2} .task-card-title p{display:-webkit-box;overflow:hidden;margin:4px 0 0;color:#626269;font-size:8px;line-height:1.4;-webkit-box-orient:vertical;-webkit-line-clamp:2} .task-card-head-actions{display:flex;align-items:center;gap:5px;flex:0 0 auto} .task-card-count{display:flex;align-items:baseline;gap:5px;color:#595960;font-size:8px;font-variant-numeric:tabular-nums} .task-card-count strong{color:#96969d;font-size:9px;font-weight:600} .task-card-count small{font-size:8px} .task-card-head-actions>button{display:grid;width:27px;height:27px;place-items:center;padding:0;border:0;border-radius:7px;background:transparent;color:#55555c;cursor:pointer;transition:background .16s ease,color .16s ease,transform .14s ease} .task-card-head-actions>button:hover{background:#1c1c1e;color:#c8c8cc} .task-card-head-actions>button:active{transform:scale(.94)} .task-card-head-actions>button svg{width:13px;height:13px} .task-card-progress{height:2px;overflow:hidden;background:#1b1b1e} .task-card-progress i{display:block;width:100%;height:100%;transform-origin:left center;border-radius:0 2px 2px 0;background:var(--folder-tone);transition:transform .3s cubic-bezier(.22,1,.36,1)} .task-card-body{min-height:62px;max-height:min(430px,55vh);flex:1;padding:5px 7px 7px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#29292d transparent} .task-card-body>.workspace-task-list,.task-card-body .workspace-task-list{gap:2px} .tasks-dashboard .workspace-task-row{grid-template-columns:20px minmax(0,1fr) auto auto;gap:8px;min-height:43px;padding:5px 6px;border:0;border-radius:8px;background:transparent} .tasks-dashboard .workspace-task-row:hover,.tasks-dashboard .workspace-task-row:focus-visible{border-color:transparent;background:var(--task-hover)} .tasks-dashboard .workspace-task-row:focus-visible{box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)} .tasks-dashboard .workspace-task-check{width:18px;height:18px;border-color:#303035;border-radius:5px;background:#171719} .tasks-dashboard .workspace-task-check:hover{border-color:#5962ea;transform:scale(1.04)} .tasks-dashboard .workspace-task-check:focus-visible{outline:2px solid rgba(73,82,237,.55);outline-offset:2px} .tasks-dashboard .workspace-task-copy{display:flex;min-width:0;align-items:center;gap:6px} .tasks-dashboard .workspace-task-copy strong{font-size:10px;font-weight:520;line-height:1.35;-webkit-line-clamp:2} .task-board-note{display:grid;width:15px;height:15px;place-items:center;flex:0 0 auto;color:#4f4f56} .task-board-note svg{width:10px;height:10px} .tasks-dashboard .workspace-task-meta{min-width:0;gap:4px} .tasks-dashboard .workspace-task-due,.tasks-dashboard .workspace-task-priority{height:19px;padding:0 6px;border-radius:5px;font-size:7px} .tasks-dashboard .workspace-task-due svg{width:9px;height:9px} .tasks-dashboard .workspace-task-people{min-width:22px;padding-left:5px} .tasks-dashboard .workspace-task-avatar{width:21px;height:21px;margin-left:-5px;border-color:var(--task-card);font-size:7px} .tasks-dashboard .workspace-task-row:hover .workspace-task-avatar{border-color:var(--task-hover)} .tasks-dashboard .workspace-task-unassigned{width:20px;height:20px;font-size:10px} .tasks-dashboard .workspace-task-more{width:21px;height:21px;margin-left:-5px;border-color:var(--task-card);font-size:7px} .tasks-dashboard .workspace-task-row.done{opacity:.48} .tasks-dashboard .workspace-task-row.done:hover{opacity:.72} .tasks-dashboard .workspace-task-completed{margin:8px 0 0;padding-top:6px;border-top:1px solid rgba(255,255,255,.045)} .tasks-dashboard .workspace-task-section-label{padding:2px 6px 5px;font-size:7px} .tasks-dashboard .workspace-task-section-label b{min-width:15px;height:15px;font-size:7px} .task-card-empty{display:flex;min-height:66px;align-items:center;justify-content:center;flex-direction:column;gap:3px;color:#5c5c63;text-align:center;font-size:9px} .task-card-empty small{color:#45454b;font-size:8px} .task-card-quick-add{display:grid;grid-template-columns:minmax(0,1fr) 27px;align-items:center;gap:5px;margin:4px 1px 0;padding:4px;border:1px solid rgba(73,82,237,.28);border-radius:9px;background:#141417;box-shadow:0 0 0 3px rgba(26,35,206,.045)} .task-card-quick-add input{min-width:0;height:27px;padding:0 7px;border:0;outline:0;background:transparent;color:#eeeef0;font-size:10px} .task-card-quick-add input::placeholder{color:#55555d} .task-card-quick-add button{display:grid;width:27px;height:27px;place-items:center;padding:0;border:0;border-radius:7px;background:var(--task-accent);color:#fff;cursor:pointer;transition:background .15s ease,transform .14s ease,opacity .15s ease} .task-card-quick-add button:hover{background:#2732df}.task-card-quick-add button:active{transform:scale(.94)}.task-card-quick-add button svg{width:13px;height:13px} .task-card-quick-add.saving{opacity:.56;pointer-events:none} .task-card-footer{display:flex;min-height:43px;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-top:1px solid rgba(255,255,255,.05)} .task-card-footer button{display:flex;height:29px;align-items:center;justify-content:center;gap:6px;padding:0 8px;border:0;border-radius:7px;background:transparent;color:#6e6e75;font-size:8px;font-weight:540;cursor:pointer;transition:background .16s ease,color .16s ease,transform .14s ease} .task-card-footer button:hover{background:#1a1a1c;color:#c9c9cd} .task-card-footer button:active{transform:scale(.97)} .task-card-footer button svg{width:11px;height:11px} .task-card-completed-toggle i{color:#4e4e55;font-size:7px;font-style:normal} .task-card-completed-toggle.on i{color:#77777f} .task-card-add{margin-left:auto;color:#8f949d!important} .task-card-add:hover{color:#fff!important} .task-board-add-card{display:flex;min-height:178px;align-items:center;justify-content:center;flex-direction:column;gap:9px;border:1px dashed rgba(255,255,255,.09);border-radius:13px;background:rgba(255,255,255,.012);color:#55555c;cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease,transform .16s ease} .task-board-add-card:hover{border-color:rgba(73,82,237,.36);background:rgba(26,35,206,.035);color:#a4a8f3} .task-board-add-card:active{transform:scale(.99)} .task-board-add-card span{display:grid;width:31px;height:31px;place-items:center;border:1px solid var(--task-border);border-radius:9px;background:#121214} .task-board-add-card span svg{width:15px;height:15px} .task-board-add-card strong{font-size:9px;font-weight:560} .task-board-empty{display:flex;min-height:calc(100% - 20px);align-items:center;justify-content:center;flex-direction:column;color:#5f5f66;text-align:center} .task-board-empty>span{display:grid;width:42px;height:42px;margin-bottom:12px;place-items:center;border:1px solid var(--task-border);border-radius:12px;background:#111113;color:#626269} .task-board-empty>span svg{width:19px;height:19px} .task-board-empty strong{color:#b9b9be;font-size:11px;font-weight:570} .task-board-empty p{max-width:300px;margin:6px 0 13px;color:#5b5b62;font-size:9px;line-height:1.5} .task-board-empty button{height:31px;padding:0 11px;border:1px solid #2730ce;border-radius:8px;background:var(--task-accent);color:#fff;font-size:9px;cursor:pointer} .tasks-dashboard button:focus-visible{outline:2px solid rgba(73,82,237,.7);outline-offset:2px} @media(max-width:1120px){ .task-board-toolbar{align-items:flex-start;flex-direction:column;gap:8px} .task-board-controls{width:100%;justify-content:flex-start} .task-board-search{margin-left:auto} } @media(max-width:760px){ .tasks-dashboard{height:auto;min-height:100%} .task-board-toolbar{position:sticky;top:0;align-items:stretch;min-height:0;padding:10px 12px;backdrop-filter:blur(16px)} .task-board-overview{overflow-x:auto;scrollbar-width:none}.task-board-overview::-webkit-scrollbar{display:none} .task-board-overview span{min-height:28px;padding:5px 6px} .task-board-controls{display:grid;grid-template-columns:minmax(0,1fr) 42px 42px;gap:7px} .tasks-dashboard .workspace-task-filters{grid-column:1/-1;width:max-content;height:38px} .tasks-dashboard .workspace-task-filters button{height:30px;min-width:54px;font-size:10px} .task-board-search{grid-column:1;width:100%;height:42px;margin:0} .task-board-search input{font-size:16px} .tasks-dashboard .task-board-archive,.tasks-dashboard .task-board-new{width:42px;height:42px;padding:0} .tasks-dashboard .task-board-archive span,.tasks-dashboard .task-board-new span{display:none} .task-board-archive svg,.task-board-new svg{width:15px;height:15px} .task-board-scroll{padding:12px 12px calc(82px + env(safe-area-inset-bottom));overflow:visible} .task-board-grid{grid-template-columns:1fr;gap:10px} .task-board-card,.task-board-add-card{min-height:168px;border-radius:12px} .task-card-header{min-height:62px;padding:13px 12px 10px} .task-card-title h2{font-size:13px}.task-card-title p{font-size:9px} .task-card-head-actions>button{width:38px;height:38px} .task-card-body{max-height:56dvh;padding:5px 6px 7px} .tasks-dashboard .workspace-task-row{grid-template-columns:30px minmax(0,1fr) auto;grid-template-rows:auto auto;gap:3px 8px;min-height:58px;padding:7px 6px} .tasks-dashboard .workspace-task-check{grid-column:1;grid-row:1/3;width:27px;height:27px;align-self:center} .tasks-dashboard .workspace-task-copy{grid-column:2;grid-row:1} .tasks-dashboard .workspace-task-copy strong{font-size:11px} .tasks-dashboard .workspace-task-people{display:flex;grid-column:3;grid-row:1} .tasks-dashboard .workspace-task-meta{grid-column:2/4;grid-row:2;justify-content:flex-start} .tasks-dashboard .workspace-task-due,.tasks-dashboard .workspace-task-priority{height:20px;font-size:8px} .task-card-footer{min-height:48px;padding:7px 8px}.task-card-footer button{min-height:34px;font-size:9px} .task-card-quick-add{grid-template-columns:minmax(0,1fr) 36px}.task-card-quick-add input{height:36px;font-size:16px}.task-card-quick-add button{width:36px;height:36px} .task-board-add-card{min-height:88px;flex-direction:row} } @media(prefers-reduced-motion:reduce){ .task-board-card,.task-board-add-card,.task-board-archive,.task-board-new,.task-card-progress i,.task-card-quick-add button,.task-card-footer button{transition:none!important} } /* Tasks creative operations board - 2026-08-27 v2 */ body[data-tab="tasks"],body[data-tab="tasks"] .main,body[data-tab="tasks"] .content,body[data-tab="tasks"] #panel-tasks,body[data-tab="tasks"] #tasks-root{background:#000} .tasks-dashboard{ --task-accent:var(--accent); --task-canvas:#000; --task-card:#111112; --task-raised:#171718; --task-hover:#1b1b1c; --task-border:var(--border); --task-border-strong:var(--border2); background:#000; color:var(--ds-text); } .task-board-toolbar{min-height:66px;padding:13px 22px;border-bottom:0;background:#000;box-shadow:inset 0 -1px rgba(255,255,255,.045)} .task-board-overview{gap:7px;color:var(--ds-faint);font-size:10.5px} .task-board-overview span{min-height:32px;gap:5px;padding:0 9px;border:1px solid transparent;border-radius:7px;background:transparent} .task-board-overview span:first-child{border-color:var(--border);background:var(--ds-surface)} .task-board-overview span+span:before{display:none} .task-board-overview strong{color:var(--ds-text);font-size:11px;font-weight:590} .task-board-controls{gap:8px} .tasks-dashboard .workspace-task-filters{height:36px;border-color:var(--border);border-radius:var(--ds-control-r);background:var(--ds-surface)} .tasks-dashboard .workspace-task-filters button{height:28px;padding:0 11px;border-radius:5px;color:var(--ds-faint);font-size:10px;font-weight:540} .tasks-dashboard .workspace-task-filters button:hover{background:var(--ds-raised);color:var(--ds-muted)} .tasks-dashboard .workspace-task-filters button.on{background:var(--ds-hover);color:var(--ds-text);box-shadow:none} .task-board-search{width:206px;height:36px;padding:0 9px 0 11px;border-color:var(--border);border-radius:var(--ds-control-r);background:var(--ds-surface);color:var(--ds-faint)} .task-board-search:focus-within{border-color:var(--border2);background:var(--ds-raised);color:var(--ds-muted);box-shadow:0 0 0 3px rgba(255,255,255,.025)} .task-board-search input{color:var(--ds-text);font-size:10.5px} .task-board-search input::placeholder{color:var(--ds-faint)} .task-board-archive,.task-board-new{height:36px;border-radius:var(--ds-control-r);font-size:10px} .task-board-archive{border-color:var(--border);background:var(--ds-surface);color:var(--ds-muted)} .task-board-archive:hover,.task-board-archive.on{border-color:var(--border2);background:var(--ds-hover);color:var(--ds-text)} .task-board-new{border-color:transparent;background:var(--accent);box-shadow:none} .task-board-new:hover{border-color:transparent;background:#2833dc;box-shadow:0 8px 22px rgba(26,35,206,.18);transform:translateY(-1px)} .task-board-scroll{padding:20px 22px 34px;background:#000} .task-board-grid{grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:16px;max-width:1580px} .task-board-card{ --task-tone:79,89,231; position:relative; isolation:isolate; min-height:196px; border-color:rgba(var(--task-tone),.16); border-radius:10px; background:linear-gradient(145deg,rgba(var(--task-tone),.075),rgba(var(--task-tone),.018) 34%,transparent 59%),#111112; box-shadow:0 16px 42px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.025); contain:layout paint; transition:transform .2s cubic-bezier(.22,1,.36,1),border-color .18s ease,background .18s ease,box-shadow .18s ease; } .task-board-card::before{position:absolute;z-index:-1;inset:0 35% auto 0;height:1px;background:linear-gradient(90deg,rgba(var(--task-tone),.72),rgba(var(--task-tone),0));content:""} .task-board-card::after{position:absolute;z-index:-1;top:-70px;left:-45px;width:180px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(var(--task-tone),.08),transparent 68%);content:"";pointer-events:none} .task-board-card:hover{border-color:rgba(var(--task-tone),.26);background:linear-gradient(145deg,rgba(var(--task-tone),.095),rgba(var(--task-tone),.025) 38%,transparent 62%),#131314;box-shadow:0 20px 46px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.035);transform:translateY(-1px)} .task-board-card.tone-blue{--folder-tone:#4f59e7;--task-tone:79,89,231} .task-board-card.tone-slate{--folder-tone:#818a9b;--task-tone:129,138,155} .task-board-card.tone-amber{--folder-tone:#d2953e;--task-tone:210,149,62} .task-board-card.tone-red{--folder-tone:#d94f61;--task-tone:217,79,97} .task-board-card.complete{border-color:rgba(var(--task-tone),.23)} .task-board-card.complete::after{opacity:.7} .task-card-header{min-height:73px;align-items:flex-start;padding:16px 14px 13px} .task-card-title{gap:10px} .task-card-tone{position:relative;width:9px;height:9px;margin-top:4px;border:2px solid rgba(var(--task-tone),.32);background:rgba(var(--task-tone),.86);box-shadow:0 0 0 4px rgba(var(--task-tone),.075)} .task-card-title h2{color:#f0f0f1;font-size:13.5px;font-weight:590;line-height:1.3;letter-spacing:-.015em} .task-card-title p{margin-top:5px;color:#73737a;font-size:9.5px;line-height:1.45} .task-card-head-actions{gap:8px} .task-card-count{align-items:flex-end;flex-direction:column;gap:2px;color:#64646b;line-height:1} .task-card-count strong{color:#d0d0d3;font-size:11px;font-weight:620} .task-card-count small{font-size:8px;letter-spacing:.015em} .task-card-head-actions>button{width:30px;height:30px;border-radius:6px;color:#65656c} .task-card-head-actions>button:hover{background:rgba(255,255,255,.055);color:#d8d8da} .task-card-progress{height:3px;background:rgba(255,255,255,.045)} .task-card-progress i{background:linear-gradient(90deg,rgba(var(--task-tone),.92),rgba(var(--task-tone),.62));box-shadow:0 0 10px rgba(var(--task-tone),.18)} .task-card-body{min-height:76px;max-height:min(440px,56vh);padding:7px 8px 9px;scrollbar-color:rgba(255,255,255,.12) transparent} .task-card-body>.workspace-task-list,.task-card-body .workspace-task-list{gap:3px} .tasks-dashboard .workspace-task-row{grid-template-columns:23px minmax(0,1fr) auto auto;gap:9px;min-height:47px;padding:6px 7px;border:1px solid transparent;border-radius:7px;background:rgba(255,255,255,.012)} .tasks-dashboard .workspace-task-row:hover,.tasks-dashboard .workspace-task-row:focus-visible{border-color:rgba(255,255,255,.055);background:rgba(255,255,255,.045);transform:translateX(1px)} .tasks-dashboard .workspace-task-row:focus-visible{box-shadow:0 0 0 2px rgba(var(--task-tone),.16)} .tasks-dashboard .workspace-task-check{width:20px;height:20px;border-color:rgba(255,255,255,.15);border-radius:5px;background:#171718} .tasks-dashboard .workspace-task-check:hover{border-color:rgba(var(--task-tone),.75);background:rgba(var(--task-tone),.08)} .tasks-dashboard .workspace-task-row.done .workspace-task-check{border-color:rgba(var(--task-tone),.8);background:rgb(var(--task-tone));box-shadow:0 0 0 3px rgba(var(--task-tone),.10)} .tasks-dashboard .workspace-task-copy strong{color:#d9d9dc;font-size:11px;font-weight:520;line-height:1.4} .task-board-note{color:#66666d} .tasks-dashboard .workspace-task-due,.tasks-dashboard .workspace-task-priority{height:21px;padding:0 7px;border:1px solid rgba(255,255,255,.035);border-radius:5px;font-size:8px} .tasks-dashboard .workspace-task-avatar{width:23px;height:23px;border-color:#121213;font-size:7.5px} .tasks-dashboard .workspace-task-row:hover .workspace-task-avatar{border-color:#181819} .tasks-dashboard .workspace-task-unassigned{width:22px;height:22px;border-color:rgba(255,255,255,.13);color:#68686f} .tasks-dashboard .workspace-task-more{width:23px;height:23px;border-color:#121213} .tasks-dashboard .workspace-task-row.done{opacity:.5} .tasks-dashboard .workspace-task-row.done:hover{opacity:.76} .tasks-dashboard .workspace-task-completed{margin-top:10px;padding-top:8px;border-top-color:rgba(255,255,255,.05)} .tasks-dashboard .workspace-task-section-label{padding:2px 7px 6px;color:#6a6a71;font-size:8px} .task-card-empty{min-height:82px;color:#68686f;font-size:10px} .task-card-empty small{color:#505057;font-size:8.5px} .task-card-quick-add{grid-template-columns:minmax(0,1fr) 31px;margin:6px 1px 0;padding:4px;border-color:rgba(var(--task-tone),.34);border-radius:7px;background:#171719;box-shadow:0 0 0 3px rgba(var(--task-tone),.05)} .task-card-quick-add input{height:31px;color:var(--ds-text);font-size:11px} .task-card-quick-add button{width:31px;height:31px;border-radius:6px;background:rgb(var(--task-tone))} .task-card-quick-add button:hover{background:rgb(var(--task-tone));filter:brightness(1.12)} .task-card-footer{min-height:47px;padding:7px 9px;border-top-color:rgba(255,255,255,.05);background:rgba(0,0,0,.09)} .task-card-footer button{height:32px;padding:0 9px;border-radius:6px;color:#77777e;font-size:9px} .task-card-footer button:hover{background:rgba(255,255,255,.045);color:#d7d7da} .task-card-completed-toggle i{color:#56565d;font-size:8px} .task-card-add{border:1px solid transparent!important;color:#a0a0a6!important} .task-card-add:hover{border-color:rgba(var(--task-tone),.15)!important;background:rgba(var(--task-tone),.075)!important;color:#f0f0f1!important} .task-board-add-card{min-height:196px;border-color:rgba(255,255,255,.095);border-radius:10px;background:linear-gradient(145deg,rgba(255,255,255,.018),transparent 55%);color:#68686f} .task-board-add-card:hover{border-color:rgba(79,89,231,.38);background:linear-gradient(145deg,rgba(26,35,206,.07),rgba(26,35,206,.015) 55%);color:#a9adf5;transform:translateY(-1px)} .task-board-add-card span{width:36px;height:36px;border-color:var(--border);border-radius:8px;background:var(--ds-surface)} .task-board-add-card strong{font-size:10px} .workspace-task-overlay{background:rgba(0,0,0,.78);backdrop-filter:blur(8px)} .workspace-task-modal{border-color:var(--border2);border-radius:10px;background:#101011;box-shadow:0 28px 90px rgba(0,0,0,.72)} .workspace-task-editor>header,.task-folder-editor>header{padding:18px 20px 16px;border-bottom-color:var(--border);background:#101011} .workspace-task-editor>header span,.task-folder-editor>header span{color:var(--ds-faint);font-size:8px} .workspace-task-editor>header h2,.task-folder-editor>header h2{color:var(--ds-text);font-size:17px;font-weight:590} .workspace-task-editor>header button,.task-folder-editor>header button{border-radius:6px;background:var(--ds-raised);color:var(--ds-faint)} .workspace-task-editor-body{gap:15px;padding:20px;background:#101011} .workspace-task-field>span,.workspace-task-field>legend{color:var(--ds-muted);font-size:9.5px} .workspace-task-field input,.workspace-task-field textarea,.workspace-task-field select{min-height:40px;border-color:var(--border);border-radius:var(--ds-control-r);background:var(--ds-raised);color:var(--ds-text);font-size:11px} .workspace-task-field input:focus,.workspace-task-field textarea:focus,.workspace-task-field select:focus{border-color:var(--border2);background:var(--ds-hover);box-shadow:0 0 0 3px rgba(255,255,255,.025)} .task-folder-editor-body{grid-template-columns:1fr 1fr} .task-folder-live-preview{--folder-tone:#4f59e7;--task-tone:79,89,231;position:relative;isolation:isolate;grid-column:1/-1;display:grid;grid-template-columns:11px minmax(0,1fr) 86px;align-items:center;gap:11px;min-height:72px;padding:13px 14px;overflow:hidden;border:1px solid rgba(var(--task-tone),.22);border-radius:8px;background:linear-gradient(140deg,rgba(var(--task-tone),.11),rgba(var(--task-tone),.025) 48%),#151516} .task-folder-live-preview::after{position:absolute;z-index:-1;top:-55px;left:-30px;width:150px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(var(--task-tone),.11),transparent 68%);content:""} .task-folder-live-preview.tone-blue,.task-folder-tone-option.tone-blue{--folder-tone:#4f59e7;--task-tone:79,89,231} .task-folder-live-preview.tone-slate,.task-folder-tone-option.tone-slate{--folder-tone:#818a9b;--task-tone:129,138,155} .task-folder-live-preview.tone-amber,.task-folder-tone-option.tone-amber{--folder-tone:#d2953e;--task-tone:210,149,62} .task-folder-live-preview.tone-red,.task-folder-tone-option.tone-red{--folder-tone:#d94f61;--task-tone:217,79,97} .task-folder-preview-mark{width:9px;height:9px;border:2px solid rgba(var(--task-tone),.35);border-radius:50%;background:rgb(var(--task-tone));box-shadow:0 0 0 4px rgba(var(--task-tone),.08)} .task-folder-live-preview>div{display:flex;min-width:0;flex-direction:column;gap:4px} .task-folder-live-preview strong{overflow:hidden;color:#eeeeef;font-size:12px;font-weight:590;text-overflow:ellipsis;white-space:nowrap} .task-folder-live-preview small{overflow:hidden;color:#77777d;font-size:8.5px;text-overflow:ellipsis;white-space:nowrap} .task-folder-live-preview>i{height:3px;overflow:hidden;border-radius:3px;background:rgba(255,255,255,.07)} .task-folder-live-preview>i b{display:block;width:58%;height:100%;border-radius:inherit;background:rgb(var(--task-tone))} .task-folder-tones>input{display:none} .task-folder-tone-grid{display:grid!important;grid-template-columns:repeat(4,1fr);gap:7px!important} .task-folder-tone-option{--folder-tone:#4f59e7;--task-tone:79,89,231;display:flex!important;min-width:0;height:45px!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;padding:0 10px!important;border:1px solid var(--border)!important;border-radius:7px!important;background:var(--ds-raised)!important;color:var(--ds-muted)!important;cursor:pointer;transition:border-color .16s ease,background .16s ease,color .16s ease,transform .14s ease!important} .task-folder-tone-option:hover{border-color:rgba(var(--task-tone),.28)!important;background:var(--ds-hover)!important;color:var(--ds-text)!important} .task-folder-tone-option:active{transform:scale(.98)} .task-folder-tone-option>span{display:grid;width:20px;height:20px;place-items:center;flex:0 0 auto;border-radius:6px;background:rgba(var(--task-tone),.18);box-shadow:inset 0 0 0 1px rgba(var(--task-tone),.28)} .task-folder-tone-option>span::before{width:8px;height:8px;border-radius:50%;background:rgb(var(--task-tone));content:""} .task-folder-tone-option>span i{position:absolute;display:none;color:#fff} .task-folder-tone-option>span svg{width:11px;height:11px} .task-folder-tone-option strong{overflow:hidden;font-size:9.5px;font-weight:550;text-overflow:ellipsis;white-space:nowrap} .task-folder-tone-option.on{border-color:rgba(var(--task-tone),.56)!important;background:rgba(var(--task-tone),.095)!important;color:#f1f1f2!important;box-shadow:0 0 0 2px rgba(var(--task-tone),.065)} .task-folder-tone-option.on>span{background:rgb(var(--task-tone));box-shadow:none} .task-folder-tone-option.on>span::before{display:none} .task-folder-tone-option.on>span i{position:static;display:grid} .workspace-task-editor>footer,.task-folder-editor>footer{padding:13px 20px;border-top-color:var(--border);background:#101011} .workspace-task-editor footer button,.task-folder-editor footer button{height:36px;border-radius:var(--ds-control-r);font-size:10px} .workspace-task-secondary{border-color:var(--border);background:var(--ds-raised);color:var(--ds-muted)} .workspace-task-primary{border-color:transparent;background:var(--accent)} @media(max-width:1120px){ .task-board-toolbar{gap:9px;padding:12px 18px} } @media(max-width:760px){ .task-board-toolbar{padding:10px 12px;background:rgba(0,0,0,.95)} .task-board-overview{font-size:10px}.task-board-overview span{min-height:30px} .tasks-dashboard .workspace-task-filters{height:40px}.tasks-dashboard .workspace-task-filters button{height:32px;font-size:11px} .task-board-scroll{padding:12px 12px calc(82px + env(safe-area-inset-bottom))} .task-board-card{min-height:186px}.task-board-card:hover{transform:none} .task-card-header{min-height:72px;padding:15px 12px 12px} .task-card-title h2{font-size:14px}.task-card-title p{font-size:10px} .task-card-count strong{font-size:12px}.task-card-count small{font-size:9px} .tasks-dashboard .workspace-task-row{min-height:62px;padding:8px 7px} .tasks-dashboard .workspace-task-row:hover{transform:none} .tasks-dashboard .workspace-task-copy strong{font-size:12px} .tasks-dashboard .workspace-task-due,.tasks-dashboard .workspace-task-priority{font-size:9px} .task-card-footer button{min-height:36px;font-size:10px} .task-folder-editor-body{grid-template-columns:1fr} .task-folder-live-preview{grid-template-columns:11px minmax(0,1fr);min-height:78px}.task-folder-live-preview>i{display:none} .task-folder-tone-grid{grid-template-columns:1fr 1fr} .task-folder-tone-option{height:48px!important}.task-folder-tone-option strong{font-size:11px} } @media(prefers-reduced-motion:reduce){ .task-board-card,.task-board-new,.task-board-add-card,.tasks-dashboard .workspace-task-row,.task-folder-tone-option{transition:none!important} } /* Tasks quiet sortable board - 2026-08-27 v3 */ .tasks-dashboard{ --task-card:#111112; --task-hover:#181819; --task-border:rgba(255,255,255,.065); --task-border-strong:rgba(255,255,255,.115); } .task-board-toolbar{min-height:60px;padding:11px 20px;background:#000;box-shadow:inset 0 -1px rgba(255,255,255,.04)} .task-board-overview{gap:0;color:#696970;font-size:10px} .task-board-overview span,.task-board-overview span:first-child{min-height:28px;padding:0 7px;border:0;background:transparent} .task-board-overview span+span::before{display:inline-block;width:2px;height:2px;margin-right:7px;border-radius:50%;background:#414147;content:""} .task-board-overview strong{color:#b8b8bd;font-size:10px;font-weight:570} .task-board-controls{gap:7px} .tasks-dashboard .workspace-task-filters,.task-board-search,.task-board-archive{background:#101011} .tasks-dashboard .workspace-task-filters button.on{background:#1b1b1d} .task-board-new:hover{background:#252fd8;box-shadow:none;transform:none} .task-board-scroll{padding:16px 20px 30px} .task-board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));grid-auto-flow:row;grid-auto-rows:max-content;align-items:start;column-gap:12px;row-gap:12px;max-width:1540px} .task-board-card{ --task-tone:89,96,184; align-self:start; min-height:174px; border-color:var(--task-border); border-radius:9px; background:#111112; background-image:none; box-shadow:none; contain:layout paint; transition:border-color .16s ease,background-color .16s ease; } .task-board-card::before,.task-board-card::after{display:none;content:none} .task-board-card:hover{border-color:var(--task-border-strong);background:#121213;box-shadow:none;transform:none} .task-board-card.tone-blue{--folder-tone:#5960b8;--task-tone:89,96,184} .task-board-card.tone-slate{--folder-tone:#727680;--task-tone:114,118,128} .task-board-card.tone-amber{--folder-tone:#8d7956;--task-tone:141,121,86} .task-board-card.tone-red{--folder-tone:#8f5e65;--task-tone:143,94,101} .task-board-card.complete{border-color:var(--task-border)} .task-card-header{min-height:62px;align-items:flex-start;padding:13px 12px 10px} .task-card-title{gap:8px} .task-card-tone{width:6px;height:6px;margin-top:5px;border:0;background:var(--folder-tone);box-shadow:none} .task-card-title h2{color:#e7e7e9;font-size:12px;font-weight:570;line-height:1.35;letter-spacing:-.008em} .task-card-title p{margin-top:3px;color:#64646b;font-size:8.5px;line-height:1.4} .task-card-head-actions{gap:6px} .task-card-count{align-items:flex-end;gap:1px;color:#5c5c63} .task-card-count strong{color:#aaaab0;font-size:9.5px;font-weight:580} .task-card-count small{font-size:7.5px} .task-card-head-actions>button{width:27px;height:27px;color:#56565d} .task-card-head-actions>button:hover{background:#1b1b1d;color:#bdbdc2} .task-card-progress{height:2px;background:#1b1b1d} .task-card-progress i{background:var(--folder-tone);box-shadow:none} .task-card-body{min-height:62px;max-height:min(430px,55vh);padding:5px 6px 7px} .task-card-body>.workspace-task-list,.task-card-body .workspace-task-list{gap:1px} .tasks-dashboard .workspace-task-row{grid-template-columns:20px minmax(0,1fr) auto auto;gap:8px;min-height:43px;padding:5px 6px;border:0;border-radius:6px;background:transparent} .tasks-dashboard .workspace-task-row:hover,.tasks-dashboard .workspace-task-row:focus-visible{border-color:transparent;background:#19191a;transform:none} .tasks-dashboard .workspace-task-row:focus-visible{box-shadow:inset 0 0 0 1px var(--border2)} .tasks-dashboard .workspace-task-check{width:18px;height:18px;border-color:#303034;background:#151516} .tasks-dashboard .workspace-task-check:hover{border-color:#525cd8;background:#17171a} .tasks-dashboard .workspace-task-row.done .workspace-task-check{border-color:#3b45cc;background:var(--accent);box-shadow:none} .tasks-dashboard .workspace-task-copy strong{color:#d5d5d8;font-size:10px;font-weight:500} .tasks-dashboard .workspace-task-due,.tasks-dashboard .workspace-task-priority{height:19px;padding:0 6px;border-color:rgba(255,255,255,.035);font-size:7px} .tasks-dashboard .workspace-task-avatar{width:21px;height:21px;border-color:#111112;font-size:7px} .tasks-dashboard .workspace-task-row:hover .workspace-task-avatar{border-color:#19191a} .tasks-dashboard .workspace-task-unassigned,.tasks-dashboard .workspace-task-more{width:20px;height:20px} .task-card-empty{min-height:65px;font-size:9px}.task-card-empty small{font-size:8px} .task-card-quick-add{grid-template-columns:minmax(0,1fr) 28px;margin-top:4px;border-color:var(--border2);background:#151516;box-shadow:none} .task-card-quick-add input{height:28px;font-size:10px}.task-card-quick-add button{width:28px;height:28px;background:var(--accent)} .task-card-quick-add button:hover{background:#2833dc;filter:none} .task-card-footer{min-height:42px;padding:6px 7px;border-top-color:rgba(255,255,255,.045);background:transparent} .task-card-footer button{height:29px;padding:0 7px;font-size:8px} .task-card-add{color:#85858b!important}.task-card-add:hover{border-color:transparent!important;background:#1a1a1c!important;color:#d2d2d5!important} .task-board-card.can-reorder{cursor:grab;touch-action:pan-y} .task-board-card.can-reorder:active{cursor:grabbing} .task-board-card.can-reorder button,.task-board-card.can-reorder input,.task-board-card.can-reorder textarea,.task-board-card.can-reorder select,.task-board-card.can-reorder a{cursor:pointer} body.task-folder-dragging,body.task-folder-dragging *{cursor:grabbing!important;user-select:none!important} .task-board-card.is-drag-source{display:none} .task-folder-drop-slot{min-width:0;border:1px dashed rgba(92,102,225,.42);border-radius:9px;background:rgba(26,35,206,.035);box-shadow:inset 0 0 0 1px rgba(26,35,206,.025);animation:task-slot-in .12s ease-out both} .task-folder-drag-ghost{position:fixed;z-index:80;top:0;left:0;overflow:hidden;pointer-events:none;border-color:rgba(255,255,255,.16);background:#141415;box-shadow:0 18px 44px rgba(0,0,0,.46);opacity:.96;transform-origin:top left;will-change:transform,opacity;transition:opacity .1s ease,filter .1s ease} .task-folder-drag-ghost.is-dropping{opacity:0;filter:brightness(.9)} @keyframes task-slot-in{from{opacity:.4}to{opacity:1}} .task-folder-editor-body{display:grid;grid-template-columns:1fr;gap:14px} .task-folder-tones{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:2px} .task-folder-tones>legend{float:left;margin:0} .task-folder-tone-grid{display:flex!important;grid-template-columns:none;gap:6px!important} .task-folder-tone-option{--task-tone:89,96,184;position:relative;display:grid!important;width:34px!important;min-width:34px!important;height:34px!important;place-items:center!important;padding:0!important;border-color:var(--border)!important;border-radius:7px!important;background:#151516!important} .task-folder-tone-option.tone-blue{--folder-tone:#5960b8;--task-tone:89,96,184}.task-folder-tone-option.tone-slate{--folder-tone:#727680;--task-tone:114,118,128}.task-folder-tone-option.tone-amber{--folder-tone:#8d7956;--task-tone:141,121,86}.task-folder-tone-option.tone-red{--folder-tone:#8f5e65;--task-tone:143,94,101} .task-folder-tone-option>span{display:block;width:10px;height:10px;border-radius:50%;background:var(--folder-tone);box-shadow:none} .task-folder-tone-option>span::before{display:none} .task-folder-tone-option>i{position:absolute;right:3px;bottom:3px;display:none;width:10px;height:10px;place-items:center;border-radius:50%;background:#e7e7e9;color:#111112} .task-folder-tone-option>i svg{width:7px;height:7px} .task-folder-tone-option:hover{border-color:var(--border2)!important;background:#19191a!important} .task-folder-tone-option.on{border-color:rgba(var(--task-tone),.58)!important;background:#19191a!important;box-shadow:none} .task-folder-tone-option.on>i{display:grid} @media(max-width:760px){ .task-board-toolbar{padding:9px 12px}.task-board-scroll{padding:10px 12px calc(82px + env(safe-area-inset-bottom))} .task-board-grid{grid-template-columns:1fr;row-gap:10px} .task-board-card{min-height:168px}.task-card-header{min-height:62px;padding:13px 12px 10px} .task-board-card.can-reorder{cursor:default;touch-action:auto} .task-folder-tones{align-items:flex-start;flex-direction:column}.task-folder-tone-option{width:44px!important;height:44px!important} } @media(prefers-reduced-motion:reduce){.task-folder-drop-slot{animation:none}.task-folder-drag-ghost{transition:none}} /* Tasks Home-aligned board - 2026-08-27 v4 */ .task-board-toolbar{min-height:64px;padding:12px 22px} .task-board-overview{font-size:10.5px}.task-board-overview span{padding:0 8px}.task-board-overview strong{font-size:10.5px} .tasks-dashboard .workspace-task-filters{height:38px;padding:3px;border-radius:7px}.tasks-dashboard .workspace-task-filters button{height:30px;padding:0 12px;font-size:10px} .task-board-search{width:220px;height:38px;border-radius:7px}.task-board-search input{font-size:10.5px} .task-board-archive,.task-board-new{height:38px;border-radius:7px;font-size:10px} .task-board-scroll{padding:18px 22px 36px} .task-board-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:14px;row-gap:14px;max-width:1380px} .task-board-card{ min-height:218px; border-color:rgba(255,255,255,.072); border-radius:11px; background:#111112; box-shadow:inset 0 1px rgba(255,255,255,.018); transition:border-color .16s ease,background-color .16s ease,box-shadow .18s ease; } .task-board-card:hover{border-color:rgba(255,255,255,.125);background:#121213;box-shadow:0 10px 30px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.025)} .task-card-header{min-height:72px;padding:15px 14px 12px} .task-card-title{gap:9px}.task-card-tone{width:7px;height:7px;margin-top:5px} .task-card-title h2{font-size:13px;font-weight:580;line-height:1.35}.task-card-title p{max-width:270px;margin-top:4px;font-size:9px;line-height:1.45} .task-card-head-actions{gap:7px}.task-card-count{gap:2px}.task-card-count strong{font-size:10.5px}.task-card-count small{font-size:8px} .task-card-head-actions>button{width:29px;height:29px;opacity:.55;transition:opacity .16s ease,background .16s ease,color .16s ease,transform .14s ease} .task-board-card:hover .task-card-head-actions>button,.task-card-head-actions>button:focus-visible{opacity:1} .task-card-progress{height:2px} .task-card-body{min-height:94px;max-height:min(510px,60vh);padding:7px 8px 9px} .task-card-body>.workspace-task-list,.task-card-body .workspace-task-list{gap:2px} .tasks-dashboard .workspace-task-row{grid-template-columns:22px minmax(0,1fr) auto auto;gap:9px;min-height:49px;padding:6px 7px;border-radius:7px} .tasks-dashboard .workspace-task-copy strong{font-size:11px;font-weight:510;line-height:1.42} .tasks-dashboard .workspace-task-check{width:20px;height:20px;border-radius:5px} .tasks-dashboard .workspace-task-due,.tasks-dashboard .workspace-task-priority{height:20px;padding:0 7px;font-size:7.5px} .tasks-dashboard .workspace-task-avatar{width:22px;height:22px;font-size:7.5px}.tasks-dashboard .workspace-task-unassigned,.tasks-dashboard .workspace-task-more{width:21px;height:21px} .tasks-dashboard .workspace-task-completed{margin-top:10px;padding-top:8px}.tasks-dashboard .workspace-task-section-label{padding:2px 7px 6px;font-size:8px} .task-card-empty{min-height:92px;font-size:9.5px}.task-card-empty small{font-size:8.5px} .task-card-quick-add{grid-template-columns:minmax(0,1fr) 32px;margin:6px 1px 0;padding:4px;border-radius:7px}.task-card-quick-add input{height:32px;font-size:10.5px}.task-card-quick-add button{width:32px;height:32px;border-radius:6px} .task-card-footer{min-height:48px;padding:7px 9px}.task-card-footer button{height:32px;padding:0 9px;font-size:8.5px} .task-folder-drop-slot{border-radius:11px;background:rgba(26,35,206,.025)} .task-folder-drag-ghost{border-radius:11px;box-shadow:0 24px 60px rgba(0,0,0,.52);opacity:.975} @media(max-width:1100px){.task-board-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){ .task-board-toolbar{padding:9px 12px}.task-board-scroll{padding:10px 12px calc(82px + env(safe-area-inset-bottom))} .task-board-grid{grid-template-columns:1fr;row-gap:10px} .task-board-card{min-height:190px;border-radius:10px}.task-card-header{min-height:68px;padding:14px 12px 11px} .task-card-title h2{font-size:13px}.task-card-title p{font-size:9px}.task-card-head-actions>button{opacity:1} .task-card-body{padding:6px 6px 8px}.tasks-dashboard .workspace-task-row{min-height:58px;padding:7px 6px} .tasks-dashboard .workspace-task-copy strong{font-size:11.5px}.task-card-footer{min-height:49px} } /* Rich task hierarchy - 2026-08-27 v5 */ .task-board-card{min-height:248px} .task-card-header{min-height:78px;padding:17px 16px 13px} .task-card-title h2{font-size:14px;font-weight:590;line-height:1.32} .task-card-title p{max-width:300px;margin-top:5px;font-size:10px;line-height:1.48} .task-card-count strong{font-size:11px}.task-card-count small{font-size:8.5px} .task-card-body{min-height:116px;max-height:min(650px,68vh);padding:3px 9px 8px} .task-card-body>.workspace-task-list,.task-card-body .workspace-task-list{gap:0} .tasks-dashboard .workspace-task-row{ display:grid; grid-template-columns:24px minmax(0,1fr); align-items:start; gap:11px; min-height:68px; padding:14px 8px 15px; border:0; border-bottom:1px solid rgba(255,255,255,.055); border-radius:0; background:transparent; transition:background-color .16s ease,opacity .16s ease; } .tasks-dashboard .workspace-task-row:first-child{padding-top:12px} .tasks-dashboard .workspace-task-row:last-child{border-bottom:0} .tasks-dashboard .workspace-task-row:hover,.tasks-dashboard .workspace-task-row:focus-visible{border-color:rgba(255,255,255,.055);background:rgba(255,255,255,.022);transform:none} .tasks-dashboard .workspace-task-row:focus-visible{box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);border-radius:7px} .tasks-dashboard .workspace-task-check{width:22px;height:22px;margin-top:1px;border-radius:5px} .tasks-dashboard .workspace-task-content{display:flex;min-width:0;flex-direction:column;gap:10px} .tasks-dashboard .workspace-task-copy{display:block;min-width:0} .tasks-dashboard .workspace-task-copy strong{display:block;overflow:visible;color:#ededee;font-size:14px;font-weight:560;line-height:1.42;letter-spacing:-.012em;-webkit-line-clamp:unset} .tasks-dashboard .workspace-task-copy p{display:-webkit-box;overflow:hidden;margin:5px 0 0;color:#8b8b91;font-size:11px;line-height:1.52;white-space:pre-line;-webkit-box-orient:vertical;-webkit-line-clamp:3} .tasks-dashboard .workspace-task-foot{display:flex;min-height:22px;align-items:center;justify-content:space-between;gap:10px} .tasks-dashboard .workspace-task-meta{display:flex;min-width:0;align-items:center;flex-wrap:wrap;gap:5px} .tasks-dashboard .workspace-task-due,.tasks-dashboard .workspace-task-priority{height:22px;padding:0 7px;border:1px solid rgba(255,255,255,.045);border-radius:5px;font-size:8.5px} .tasks-dashboard .workspace-task-people{display:flex;min-width:23px;align-items:center;justify-content:flex-end;padding-left:5px} .tasks-dashboard .workspace-task-avatar{width:23px;height:23px;margin-left:-6px;font-size:7.5px} .tasks-dashboard .workspace-task-unassigned,.tasks-dashboard .workspace-task-more{width:23px;height:23px;margin-left:-5px;font-size:7.5px} .task-board-images{display:grid;width:min(100%,330px);gap:5px} .task-board-images.count-1{grid-template-columns:minmax(0,1fr);width:min(76%,310px)} .task-board-images.count-2{grid-template-columns:repeat(2,minmax(0,1fr))} .task-board-images.count-3{grid-template-columns:repeat(3,minmax(0,1fr))} .task-board-image{position:relative;display:block;overflow:hidden;min-width:0;aspect-ratio:16/9;padding:0;border:1px solid rgba(255,255,255,.075);border-radius:7px;background:#09090a;cursor:zoom-in} .task-board-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .22s cubic-bezier(.22,1,.36,1),filter .18s ease} .task-board-image:hover img{transform:scale(1.018);filter:brightness(1.04)} .task-board-image>span{position:absolute;right:5px;bottom:5px;display:grid;min-width:24px;height:20px;place-items:center;padding:0 6px;border:1px solid rgba(255,255,255,.13);border-radius:5px;background:rgba(8,8,9,.86);color:#eeeef0;font-size:8px;font-weight:600} .task-board-links{display:flex;min-width:0;align-items:center;flex-wrap:wrap;gap:5px} .task-board-links a{display:flex;max-width:100%;height:25px;align-items:center;gap:6px;padding:0 8px;border:1px solid rgba(255,255,255,.065);border-radius:6px;background:#171718;color:#a9a9af;text-decoration:none;transition:border-color .16s ease,background-color .16s ease,color .16s ease} .task-board-links a:hover{border-color:rgba(255,255,255,.13);background:#1b1b1d;color:#e1e1e4} .task-board-links a svg{width:11px;height:11px;flex:0 0 auto;color:#777780}.task-board-links a span{overflow:hidden;font-size:9.5px;text-overflow:ellipsis;white-space:nowrap} .task-board-link-more{color:#66666d;font-size:8.5px} .tasks-dashboard .workspace-task-row.done .task-board-images,.tasks-dashboard .workspace-task-row.done .task-board-links{filter:saturate(.45);opacity:.62} .tasks-dashboard .workspace-task-row.done .workspace-task-copy p{color:#66666c} .task-card-footer{min-height:52px;padding:8px 11px}.task-card-footer button{height:34px;font-size:9.5px} .workspace-task-modal{width:min(720px,calc(100vw - 32px));max-height:min(840px,calc(100vh - 32px))} .workspace-task-editor{max-height:min(840px,calc(100vh - 32px))} .workspace-task-editor-body{gap:19px;padding:22px 24px 26px} .workspace-task-field>span,.workspace-task-field>legend{font-size:10px} .workspace-task-field input,.workspace-task-field textarea,.workspace-task-field select{font-size:12px} .workspace-task-field textarea{min-height:112px;font-size:12px;line-height:1.55} .workspace-task-attachments{grid-column:1/-1;display:flex;min-width:0;flex-direction:column;gap:10px;padding-top:18px;border-top:1px solid rgba(255,255,255,.06)} .workspace-task-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px} .workspace-task-section-heading>div{display:flex;min-width:0;align-items:baseline;gap:8px}.workspace-task-section-heading strong{color:#d9d9dc;font-size:11px;font-weight:580}.workspace-task-section-heading span{color:#5f5f66;font-size:9px} .workspace-task-attach-button{position:relative;display:flex;height:31px;align-items:center;gap:6px;padding:0 9px;border:1px solid #2b2b30;border-radius:7px;background:#171719;color:#9a9aa1;font-size:9px;font-weight:540;cursor:pointer;transition:border-color .16s ease,background-color .16s ease,color .16s ease} .workspace-task-attach-button:hover{border-color:#3a3a40;background:#1c1c1f;color:#e1e1e4}.workspace-task-attach-button input{position:absolute;width:1px;height:1px;opacity:0}.workspace-task-attach-button svg{width:12px;height:12px} .workspace-task-image-editor{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;min-height:0;border-radius:8px;transition:background-color .16s ease,box-shadow .16s ease} .workspace-task-image-editor.is-empty{grid-template-columns:1fr;min-height:104px;border:1px dashed #2b2b30;background:#131315} .workspace-task-image-editor.drag-over{background:rgba(26,35,206,.06);box-shadow:inset 0 0 0 1px rgba(68,78,226,.34)} .workspace-task-image-editor.is-uploading{grid-template-columns:1fr;min-height:104px} .workspace-task-image-draft{position:relative;overflow:hidden;aspect-ratio:16/9;border:1px solid #29292e;border-radius:8px;background:#0b0b0c} .workspace-task-image-draft>button:first-child{display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:zoom-in}.workspace-task-image-draft img{display:block;width:100%;height:100%;object-fit:cover} .workspace-task-image-remove{position:absolute;top:6px;right:6px;display:grid;width:25px;height:25px;place-items:center;padding:0;border:1px solid rgba(255,255,255,.13);border-radius:6px;background:rgba(10,10,11,.82);color:#c5c5ca;cursor:pointer;transition:background-color .16s ease,color .16s ease}.workspace-task-image-remove:hover{background:#1d1d20;color:#fff}.workspace-task-image-remove svg{width:11px;height:11px} .workspace-task-attachment-empty,.workspace-task-uploading{display:flex;min-height:102px;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#626269;font-size:9.5px}.workspace-task-attachment-empty svg{width:22px;height:22px;color:#4f4f56}.workspace-task-uploading .activity-state-spinner{width:16px;height:16px}.workspace-task-uploading strong{font-size:9.5px;font-weight:500} .workspace-task-link-editor{display:flex;flex-direction:column;gap:5px} .workspace-task-link-draft{display:flex;min-width:0;height:36px;align-items:center;border:1px solid #29292e;border-radius:7px;background:#151517} .workspace-task-link-draft>a{display:flex;min-width:0;flex:1;align-items:center;gap:8px;padding:0 10px;color:#aaaab0;text-decoration:none}.workspace-task-link-draft>a:hover{color:#eeeef0}.workspace-task-link-draft>a svg{width:13px;height:13px;flex:0 0 auto}.workspace-task-link-draft>a span{overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap} .workspace-task-link-draft>button{display:grid;width:34px;height:34px;place-items:center;padding:0;border:0;background:transparent;color:#5f5f66;cursor:pointer}.workspace-task-link-draft>button:hover{color:#d8d8dc}.workspace-task-link-draft>button svg{width:11px;height:11px}.workspace-task-link-empty{padding:3px 0;color:#55555c;font-size:9.5px} .workspace-task-link-add{display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:6px}.workspace-task-link-add input{min-width:0;height:36px;padding:0 10px;border:1px solid #29292e;border-radius:7px;outline:0;background:#151517;color:#ededf0;font-size:11px}.workspace-task-link-add input:focus{border-color:#3b3b42}.workspace-task-link-add input::placeholder{color:#505057}.workspace-task-link-add button{display:grid;width:36px;height:36px;place-items:center;padding:0;border:1px solid #29292e;border-radius:7px;background:#19191b;color:#9c9ca3;cursor:pointer}.workspace-task-link-add button:hover{border-color:#3a3a40;color:#fff}.workspace-task-link-add button svg{width:13px;height:13px} @media(max-width:760px){ .task-card-header{min-height:74px;padding:15px 13px 12px}.task-card-title h2{font-size:14px}.task-card-title p{font-size:10px} .task-card-body{padding:3px 7px 8px}.tasks-dashboard .workspace-task-row{grid-template-columns:27px minmax(0,1fr);grid-template-rows:auto;gap:10px;min-height:76px;padding:14px 7px} .tasks-dashboard .workspace-task-check{grid-column:1;grid-row:1;width:25px;height:25px}.tasks-dashboard .workspace-task-content{grid-column:2;grid-row:1} .tasks-dashboard .workspace-task-copy strong{font-size:14px}.tasks-dashboard .workspace-task-copy p{max-width:none;font-size:11px} .task-board-images{width:100%}.task-board-images.count-1{width:min(88%,320px)} .tasks-dashboard .workspace-task-due,.tasks-dashboard .workspace-task-priority{font-size:8.5px} .workspace-task-modal{width:100%;max-height:92dvh}.workspace-task-editor{max-height:92dvh}.workspace-task-editor-body{gap:17px;padding:18px 15px 24px}.workspace-task-image-editor{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-task-section-heading>div{align-items:flex-start;flex-direction:column;gap:2px} } /* Column-first task masonry and content-sized rows - 2026-08-27 v6 */ .task-board-grid{ display:block; max-width:1380px; column-count:3; column-gap:14px; column-fill:balance; } .task-board-card,.task-folder-drop-slot{ display:inline-flex; width:100%; margin:0 0 14px; break-inside:avoid; vertical-align:top; } .task-board-card{min-height:0} .task-folder-drop-slot{box-sizing:border-box} .task-card-body{min-height:0;flex:0 1 auto;padding:3px 9px 7px} .task-card-empty{min-height:72px} .tasks-dashboard .workspace-task-row{ grid-template-columns:22px minmax(0,1fr); gap:9px; min-height:0; padding:9px 8px 10px; } .tasks-dashboard .workspace-task-row:first-child{padding-top:9px} .tasks-dashboard .workspace-task-check{align-self:start;width:20px;height:20px;margin-top:0} .tasks-dashboard .workspace-task-content{gap:7px;padding:0} .tasks-dashboard .workspace-task-copy strong{line-height:20px} .tasks-dashboard .workspace-task-copy p{margin-top:3px} .tasks-dashboard .workspace-task-foot{min-height:0;margin-top:1px} .tasks-dashboard .workspace-task-row:not(.has-notes):not(.has-images):not(.has-links):not(.has-meta){padding-top:8px;padding-bottom:9px} @media(max-width:1100px){.task-board-grid{column-count:2}} @media(max-width:760px){ .task-board-grid{column-count:1;column-gap:0} .task-board-card,.task-folder-drop-slot{margin-bottom:10px} .task-board-card{min-height:0} .task-card-body{padding:3px 7px 7px} .tasks-dashboard .workspace-task-row{grid-template-columns:25px minmax(0,1fr);gap:9px;min-height:0;padding:11px 7px 12px} .tasks-dashboard .workspace-task-row:first-child{padding-top:11px} .tasks-dashboard .workspace-task-check{width:23px;height:23px;margin-top:0} .tasks-dashboard .workspace-task-copy strong{line-height:23px} .tasks-dashboard .workspace-task-row:not(.has-notes):not(.has-images):not(.has-links):not(.has-meta){padding-top:9px;padding-bottom:10px} } /* Task accents, emphasis, and compact hierarchy - 2026-08-29 v1 */ .task-board-card.tone-blue,.task-folder-tone-option.tone-blue{--folder-tone:#4f62ff;--task-tone:79,98,255} .task-board-card.tone-sky,.task-folder-tone-option.tone-sky{--folder-tone:#2498ff;--task-tone:36,152,255} .task-board-card.tone-teal,.task-folder-tone-option.tone-teal{--folder-tone:#19b8ad;--task-tone:25,184,173} .task-board-card.tone-green,.task-folder-tone-option.tone-green{--folder-tone:#31c876;--task-tone:49,200,118} .task-board-card.tone-slate,.task-folder-tone-option.tone-slate{--folder-tone:#8a91a2;--task-tone:138,145,162} .task-board-card.tone-amber,.task-folder-tone-option.tone-amber{--folder-tone:#e3b33c;--task-tone:227,179,60} .task-board-card.tone-orange,.task-folder-tone-option.tone-orange{--folder-tone:#f0833c;--task-tone:240,131,60} .task-board-card.tone-red,.task-folder-tone-option.tone-red{--folder-tone:#ef5363;--task-tone:239,83,99} .task-board-card.tone-pink,.task-folder-tone-option.tone-pink{--folder-tone:#e75ba8;--task-tone:231,91,168} .task-board-card.tone-violet,.task-folder-tone-option.tone-violet{--folder-tone:#9b6ef3;--task-tone:155,110,243} .task-board-card.emphasis-outline{border-color:rgba(var(--task-tone),.42);box-shadow:inset 0 0 0 1px rgba(var(--task-tone),.055)} .task-board-card.emphasis-outline:hover{border-color:rgba(var(--task-tone),.58);box-shadow:inset 0 0 0 1px rgba(var(--task-tone),.075)} .task-board-card.emphasis-tint{background:linear-gradient(145deg,rgba(var(--task-tone),.075),rgba(var(--task-tone),.018) 44%,transparent 70%),#111112} .task-board-card.emphasis-tint:hover{background:linear-gradient(145deg,rgba(var(--task-tone),.095),rgba(var(--task-tone),.025) 44%,transparent 70%),#121213} .tasks-dashboard .workspace-task-heading{display:flex;min-width:0;align-items:flex-start;gap:10px} .tasks-dashboard .workspace-task-copy{min-width:0;flex:1} .tasks-dashboard .workspace-task-copy strong{display:flex;min-width:0;align-items:center;gap:6px;text-decoration:none} .tasks-dashboard .workspace-task-copy strong>span{min-width:0} .tasks-dashboard .workspace-task-priority-icon{display:grid;width:14px;height:20px;place-items:center;flex:0 0 14px} .tasks-dashboard .workspace-task-priority-icon svg{width:13px;height:13px} .tasks-dashboard .workspace-task-priority-icon.high{color:#d2a53c} .tasks-dashboard .workspace-task-priority-icon.urgent{color:#ef5967} .tasks-dashboard .workspace-task-row.priority-urgent .workspace-task-copy strong>span{color:#ef6672} .tasks-dashboard .workspace-task-people{display:flex;height:20px;min-width:20px;align-self:flex-start;align-items:center;justify-content:flex-end;padding:0;flex:0 0 auto} .tasks-dashboard .workspace-task-avatar{width:20px;height:20px;margin-left:-5px;font-size:7px} .tasks-dashboard .workspace-task-more{width:20px;height:20px;margin-left:-5px;font-size:7px} .tasks-dashboard .workspace-task-foot{justify-content:flex-start} .tasks-dashboard .workspace-task-row.done .workspace-task-copy strong{color:#77777d;text-decoration:none} .tasks-dashboard .workspace-task-row.done .workspace-task-copy strong>span{text-decoration:line-through;text-decoration-color:#66666c} .tasks-dashboard .workspace-task-row.done .workspace-task-priority-icon{color:#696970} .task-folder-tones{display:grid;align-items:start;justify-content:stretch;gap:9px;padding-top:2px} .task-folder-tones>legend{float:none} .task-folder-tone-grid{display:grid!important;grid-template-columns:repeat(10,34px);gap:8px!important} .task-folder-tone-option{position:relative;display:grid!important;width:34px!important;min-width:34px!important;height:34px!important;place-items:center!important;padding:0!important;border:1px solid #29292e!important;border-radius:8px!important;background:#151516!important;box-shadow:none!important;transition:border-color .15s ease,background-color .15s ease,transform .15s cubic-bezier(.22,1,.36,1)!important} .task-folder-tone-option>span{display:block;width:13px;height:13px;border-radius:50%;background:var(--folder-tone);box-shadow:0 0 0 1px rgba(var(--task-tone),.18);transition:transform .15s cubic-bezier(.22,1,.36,1),box-shadow .15s ease} .task-folder-tone-option>span::before,.task-folder-tone-option>i{display:none!important} .task-folder-tone-option:hover{border-color:rgba(var(--task-tone),.5)!important;background:#19191b!important} .task-folder-tone-option:hover>span{transform:scale(1.08)} .task-folder-tone-option.on{border-color:rgba(var(--task-tone),.72)!important;background:rgba(var(--task-tone),.085)!important;box-shadow:0 0 0 2px rgba(var(--task-tone),.09)!important} .task-folder-tone-option.on>span{transform:scale(1.16);box-shadow:0 0 0 3px #151516,0 0 0 4px rgba(var(--task-tone),.32)} .task-folder-tone-option:focus-visible{outline:2px solid rgba(var(--task-tone),.52);outline-offset:2px} .task-folder-emphasis{display:grid;gap:9px;padding-top:3px} .task-folder-emphasis>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .task-folder-emphasis label{display:flex;height:42px;align-items:center;justify-content:space-between;gap:12px;padding:0 11px;border:1px solid #29292e;border-radius:8px;background:#151516;color:#85858c;cursor:pointer;transition:border-color .15s ease,background-color .15s ease,color .15s ease} .task-folder-emphasis label:hover{border-color:#38383e;background:#19191b;color:#c8c8cd} .task-folder-emphasis label>span{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:540} .task-folder-emphasis label>span svg{width:13px;height:13px;color:#696970} .task-folder-emphasis label>input{position:absolute;width:1px;height:1px;opacity:0} .task-folder-emphasis label>i{position:relative;width:30px;height:18px;flex:0 0 auto;border:1px solid #37373d;border-radius:999px;background:#222225;transition:border-color .16s ease,background-color .16s ease} .task-folder-emphasis label>i::after{position:absolute;top:3px;left:3px;width:10px;height:10px;border-radius:50%;background:#77777f;content:"";transition:transform .18s cubic-bezier(.22,1,.36,1),background-color .16s ease} .task-folder-emphasis label:has(input:checked){border-color:#343747;background:#17181f;color:#d9d9dc} .task-folder-emphasis label:has(input:checked)>span svg{color:#7d86ff} .task-folder-emphasis label input:checked+i{border-color:#3e47c7;background:#242b85} .task-folder-emphasis label input:checked+i::after{background:#e6e8ff;transform:translateX(12px)} .task-folder-emphasis label:has(input:focus-visible){outline:2px solid rgba(79,98,255,.5);outline-offset:2px} @media(max-width:760px){ .task-folder-tone-grid{grid-template-columns:repeat(5,44px);gap:8px!important} .task-folder-tone-option{width:44px!important;min-width:44px!important;height:44px!important} .task-folder-tone-option>span{width:15px;height:15px} .task-folder-emphasis label{min-height:44px} .tasks-dashboard .workspace-task-priority-icon{height:23px} .tasks-dashboard .workspace-task-people{height:23px}.tasks-dashboard .workspace-task-avatar,.tasks-dashboard .workspace-task-more{width:23px;height:23px} } /* Task filters, views, calendar, and reliable attachments - 2026-08-30 v1 */ .task-board-card.tone-blue,.task-list-group.tone-blue,.task-calendar-chip.tone-blue{--folder-tone:#4f62ff;--task-tone:79,98,255} .task-board-card.tone-sky,.task-list-group.tone-sky,.task-calendar-chip.tone-sky{--folder-tone:#2498ff;--task-tone:36,152,255} .task-board-card.tone-teal,.task-list-group.tone-teal,.task-calendar-chip.tone-teal{--folder-tone:#19b8ad;--task-tone:25,184,173} .task-board-card.tone-green,.task-list-group.tone-green,.task-calendar-chip.tone-green{--folder-tone:#31c876;--task-tone:49,200,118} .task-board-card.tone-slate,.task-list-group.tone-slate,.task-calendar-chip.tone-slate{--folder-tone:#8a91a2;--task-tone:138,145,162} .task-board-card.tone-amber,.task-list-group.tone-amber,.task-calendar-chip.tone-amber{--folder-tone:#e3b33c;--task-tone:227,179,60} .task-board-card.tone-orange,.task-list-group.tone-orange,.task-calendar-chip.tone-orange{--folder-tone:#f0833c;--task-tone:240,131,60} .task-board-card.tone-red,.task-list-group.tone-red,.task-calendar-chip.tone-red{--folder-tone:#ef5363;--task-tone:239,83,99} .task-board-card.tone-pink,.task-list-group.tone-pink,.task-calendar-chip.tone-pink{--folder-tone:#e75ba8;--task-tone:231,91,168} .task-board-card.tone-violet,.task-list-group.tone-violet,.task-calendar-chip.tone-violet{--folder-tone:#9b6ef3;--task-tone:155,110,243} .task-board-toolbar{align-items:flex-start;gap:14px;padding-top:13px;padding-bottom:13px} .task-board-overview{min-height:36px;align-items:center} .task-board-controls{flex:1;flex-wrap:wrap;row-gap:7px} .tasks-dashboard .workspace-task-filters{height:36px;overflow:hidden} .tasks-dashboard .workspace-task-filters button{padding:0 9px} .task-board-sort{position:relative;display:flex;width:46px;height:36px;align-items:center;justify-content:center;gap:2px;flex:0 0 auto;border:1px solid var(--border);border-radius:7px;background:#111112;color:#73737a;cursor:pointer;transition:border-color .16s ease,background-color .16s ease,color .16s ease} .task-board-sort:hover,.task-board-sort:focus-within{border-color:var(--border2);background:#171719;color:#d0d0d4} .task-board-sort.on{border-color:rgba(79,98,255,.34);color:#8f98ff} .task-board-sort>svg:first-child{width:14px;height:14px;pointer-events:none} .task-board-sort .task-board-sort-arrow{width:9px;height:9px;pointer-events:none} .task-board-sort select{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;cursor:pointer} .task-view-switch{display:flex;height:36px;align-items:center;gap:2px;padding:3px;border:1px solid var(--border);border-radius:7px;background:#111112} .task-view-switch button{display:grid;width:28px;height:28px;place-items:center;padding:0;border:0;border-radius:5px;background:transparent;color:#65656c;cursor:pointer;transition:background-color .15s ease,color .15s ease} .task-view-switch button:hover{color:#c8c8cd}.task-view-switch button.on{background:#202022;color:#f0f0f2} .task-view-switch svg{width:13px;height:13px} .task-view-list,.task-view-calendar{padding-top:16px} .task-list-view{display:flex;width:min(100%,1120px);margin:0 auto;flex-direction:column;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:#101011} .task-list-group{--task-tone:79,98,255;min-width:0;border-bottom:1px solid rgba(255,255,255,.06)} .task-list-group:last-child{border-bottom:0} .task-list-group>header{display:flex;min-height:48px;align-items:center;justify-content:space-between;gap:12px;padding:8px 11px 8px 14px;background:rgba(var(--task-tone),.022)} .task-list-group>header>div{display:flex;min-width:0;align-items:center;gap:8px} .task-list-tone{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--folder-tone)} .task-list-group h2{overflow:hidden;margin:0;color:#d9d9dc;font-size:12px;font-weight:580;text-overflow:ellipsis;white-space:nowrap} .task-list-group header small{color:#66666d;font-size:8.5px} .task-list-group>header>button{display:grid;width:29px;height:29px;place-items:center;padding:0;border:0;border-radius:6px;background:transparent;color:#66666d;cursor:pointer} .task-list-group>header>button:hover{background:#1c1c1e;color:#d8d8dc}.task-list-group>header>button svg{width:12px;height:12px} .task-list-group>.workspace-task-list{padding:0 8px 7px} .task-list-group .workspace-task-row{min-height:0;padding:9px 7px 10px;border-bottom:1px solid rgba(255,255,255,.04)} .task-list-group .workspace-task-row:last-child{border-bottom:0} .task-calendar-view{width:min(100%,1380px);margin:0 auto} .task-calendar-head{display:flex;min-height:48px;align-items:center;justify-content:space-between;gap:16px;padding:0 2px 10px} .task-calendar-head>div:first-child{display:flex;align-items:baseline;gap:9px}.task-calendar-head strong{color:#e1e1e3;font-size:14px;font-weight:590}.task-calendar-head span{color:#626269;font-size:9px} .task-calendar-head>div:last-child{display:flex;align-items:center;gap:4px} .task-calendar-head button{display:grid;width:30px;height:30px;place-items:center;padding:0;border:1px solid var(--border);border-radius:6px;background:#111112;color:#73737a;cursor:pointer} .task-calendar-head button:hover{border-color:var(--border2);background:#171719;color:#d5d5d8}.task-calendar-head button svg{width:12px;height:12px} .task-calendar-head .task-calendar-today{width:auto;padding:0 10px;font-size:9px;font-weight:540} .task-calendar-scroll{overflow:auto;border:1px solid rgba(255,255,255,.075);border-radius:10px;background:#0d0d0e;scrollbar-width:thin;scrollbar-color:#2a2a2d transparent} .task-calendar-weekdays,.task-calendar-grid{display:grid;min-width:840px;grid-template-columns:repeat(7,minmax(120px,1fr))} .task-calendar-weekdays{border-bottom:1px solid rgba(255,255,255,.065);background:#111112} .task-calendar-weekdays span{padding:9px 10px;color:#66666d;font-size:8px;font-weight:600;letter-spacing:.07em;text-transform:uppercase} .task-calendar-day{min-width:0;min-height:128px;padding:7px;border-right:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);background:#0f0f10} .task-calendar-day:nth-child(7n){border-right:0}.task-calendar-day:nth-last-child(-n+7){border-bottom:0}.task-calendar-day.outside{background:#0b0b0c;opacity:.46} .task-calendar-day.today{background:rgba(26,35,206,.035);box-shadow:inset 0 0 0 1px rgba(76,88,235,.21)} .task-calendar-day>header{display:flex;height:22px;align-items:flex-start;justify-content:space-between}.task-calendar-day time{display:grid;width:21px;height:21px;place-items:center;border-radius:50%;color:#78787f;font-size:9px;font-weight:540} .task-calendar-day.today time{background:#2732cf;color:#f2f3ff}.task-calendar-day>header button{display:grid;width:20px;height:20px;place-items:center;padding:0;border:0;border-radius:5px;background:transparent;color:#4f4f55;cursor:pointer;opacity:0;transition:opacity .15s ease,background-color .15s ease,color .15s ease} .task-calendar-day:hover>header button,.task-calendar-day>header button:focus-visible{opacity:1}.task-calendar-day>header button:hover{background:#1c1c1f;color:#bbbcc1}.task-calendar-day>header button svg{width:10px;height:10px} .task-calendar-day>div{display:flex;min-width:0;flex-direction:column;gap:3px;padding-top:3px} .task-calendar-chip{--task-tone:79,98,255;display:flex;width:100%;min-width:0;height:25px;align-items:center;gap:4px;padding:0 6px;border:1px solid rgba(var(--task-tone),.17);border-radius:5px;background:rgba(var(--task-tone),.07);color:#c7c7cc;cursor:pointer;text-align:left;transition:border-color .14s ease,background-color .14s ease,color .14s ease} .task-calendar-chip:hover{border-color:rgba(var(--task-tone),.38);background:rgba(var(--task-tone),.12);color:#f0f0f2}.task-calendar-chip>span:last-child{overflow:hidden;min-width:0;font-size:8px;font-weight:520;text-overflow:ellipsis;white-space:nowrap} .task-calendar-chip .workspace-task-priority-icon{display:grid;width:10px;height:15px;place-items:center;flex:0 0 10px}.task-calendar-chip .workspace-task-priority-icon svg{width:9px;height:9px}.task-calendar-chip .workspace-task-priority-icon.high{color:#d5aa43}.task-calendar-chip .workspace-task-priority-icon.urgent{color:#ef5967} .task-calendar-chip.priority-urgent>span:last-child{color:#f07780}.task-calendar-chip.done{opacity:.42}.task-calendar-chip.done>span:last-child{text-decoration:line-through} .task-calendar-more{height:22px;padding:0 5px;border:0;background:transparent;color:#696970;font-size:8px;text-align:left;cursor:pointer}.task-calendar-more:hover{color:#b4b4b9} .task-calendar-undated{margin-top:12px;border:1px solid rgba(255,255,255,.065);border-radius:9px;background:#101011} .task-calendar-undated>header{display:flex;height:39px;align-items:center;gap:7px;padding:0 11px;border-bottom:1px solid rgba(255,255,255,.05)}.task-calendar-undated>header strong{color:#a9a9ae;font-size:9px;font-weight:580}.task-calendar-undated>header span{color:#595960;font-size:8px} .task-calendar-undated>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:8px}.task-calendar-undated .task-calendar-chip{height:28px} .workspace-task-attach-button{cursor:pointer}.workspace-task-attach-button:active{transform:translateY(1px)} .workspace-task-image-editor.drag-over{border-color:rgba(79,98,255,.48);background:rgba(26,35,206,.075);box-shadow:inset 0 0 0 1px rgba(79,98,255,.16)} @media(max-width:1250px){ .task-board-toolbar{align-items:stretch;flex-direction:column;gap:8px}.task-board-controls{justify-content:flex-start}.task-board-search{margin-left:auto} .task-calendar-undated>div{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:760px){ .task-board-toolbar{padding:10px 12px}.task-board-controls{display:flex;align-items:center;overflow:visible;flex-wrap:wrap} .tasks-dashboard .workspace-task-filters{width:100%;height:40px;overflow-x:auto;overflow-y:hidden;justify-content:flex-start;scrollbar-width:none}.tasks-dashboard .workspace-task-filters::-webkit-scrollbar{display:none}.tasks-dashboard .workspace-task-filters button{height:32px;min-width:auto;padding:0 11px;white-space:nowrap} .task-board-sort{width:44px;height:40px}.task-view-switch{height:40px}.task-view-switch button{width:32px;height:32px} .task-board-search{order:4;width:calc(100% - 98px);height:42px;margin:0}.task-board-archive,.task-board-new{order:5;width:42px;height:42px}.task-board-new{order:6} .task-view-list,.task-view-calendar{padding-top:10px}.task-list-view{border-radius:9px}.task-list-group>header{min-height:50px;padding-inline:11px}.task-list-group>.workspace-task-list{padding-inline:5px} .task-calendar-head{padding:0 0 8px}.task-calendar-head strong{font-size:13px}.task-calendar-head span{display:none}.task-calendar-head button{width:34px;height:34px}.task-calendar-head .task-calendar-today{padding-inline:9px} .task-calendar-scroll{margin-right:-12px;border-right:0;border-radius:9px 0 0 9px}.task-calendar-weekdays,.task-calendar-grid{min-width:770px;grid-template-columns:repeat(7,110px)}.task-calendar-day{min-height:116px}.task-calendar-day>header button{opacity:1} .task-calendar-undated>div{display:flex;overflow-x:auto}.task-calendar-undated .task-calendar-chip{min-width:210px} } /* Keep v2 task refinements after the legacy cascade. */ .tasks-dashboard .workspace-task-people{height:27px;min-width:27px;gap:3px} .tasks-dashboard .workspace-task-avatar{width:27px;height:27px;margin-left:0;border-width:2px;font-size:8px;object-fit:cover}.tasks-dashboard .workspace-task-avatar:first-child{margin-left:0}.tasks-dashboard .workspace-task-more{width:27px;height:27px;margin-left:0;font-size:8px} .task-list-view{display:flex;max-width:1120px;margin:0 auto;flex-direction:column;gap:15px;border:0;background:transparent} .task-list-group{overflow:hidden;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:#111112;box-shadow:0 8px 24px rgba(0,0,0,.12)}.task-list-group+.task-list-group{border-top:1px solid rgba(255,255,255,.07)} .task-list-group>header{min-height:62px;padding:11px 15px;border-bottom:1px solid rgba(255,255,255,.055);background:#151516}.task-list-group>header>div{min-width:0;align-items:center;gap:10px}.task-list-group>header>div>div{min-width:0}.task-list-group>header h2{font-size:13px;font-weight:610;line-height:1.3}.task-list-group>header p{overflow:hidden;margin:3px 0 0;color:#696970;font-size:9px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.task-list-group>header small{margin-left:2px;padding:3px 6px;border:1px solid rgba(255,255,255,.06);border-radius:5px;background:#101011;color:#77777e;font-size:8px}.task-list-group>.workspace-task-list{padding:3px 10px 7px}.task-list-group .workspace-task-row{padding:10px 8px 11px}.task-list-group .workspace-task-avatar{width:29px;height:29px}.task-list-group .workspace-task-people{height:29px;min-width:29px} .task-calendar-chip{min-height:33px;height:auto;align-items:center;justify-content:space-between;gap:7px;padding:4px 5px 4px 8px}.task-calendar-chip-title{display:flex;min-width:0;align-items:center;gap:4px}.task-calendar-chip-title>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.task-calendar-people{display:flex;min-width:21px;align-items:center;justify-content:flex-end;flex:0 0 auto;gap:1px}.task-calendar-people .workspace-task-avatar{width:21px;height:21px;margin-left:0;border:1.5px solid #171719;font-size:6px}.task-calendar-people .workspace-task-avatar:first-child{margin-left:0}.task-calendar-people i{display:grid;width:21px;height:21px;margin-left:0;place-items:center;border:1.5px solid #171719;border-radius:50%;background:#252528;color:#aaaab0;font-size:6px;font-style:normal} .task-calendar-chip>span.task-calendar-people{overflow:visible;min-width:21px;font-size:inherit;font-weight:400;text-overflow:clip;white-space:normal}.task-calendar-chip.priority-urgent>span.task-calendar-people{color:inherit}.task-calendar-chip.priority-urgent>.task-calendar-chip-title>span:last-child{color:#f07780}.task-calendar-chip.done>span.task-calendar-people{text-decoration:none}.task-calendar-chip.done>.task-calendar-chip-title>span:last-child{text-decoration:line-through} .workspace-task-date-pop{z-index:20;top:calc(100% + 7px);right:auto;bottom:auto;left:0;width:286px;transform:translateY(-5px) scale(.99);transform-origin:top left;border:1px solid rgba(255,255,255,.08);background:#151516;box-shadow:0 22px 55px rgba(0,0,0,.55)}.workspace-task-date-picker.open .workspace-task-date-pop{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)} .workspace-task-image-editor{cursor:pointer}.workspace-task-image-editor:not(.is-empty){padding:2px}.workspace-task-image-editor.is-uploading{cursor:wait}.workspace-task-image-draft{cursor:default} @media(max-width:900px){.task-people-view{grid-template-columns:1fr}.task-list-view,.task-people-view{max-width:none}.workspace-task-date-pop{right:0;left:auto}} @media(max-width:640px){.task-list-view{gap:11px}.task-list-group>header{min-height:56px;padding-inline:11px}.task-list-group>.workspace-task-list{padding-inline:5px}.task-board-search{width:calc(100% - 50px)}.workspace-task-date-pop{position:fixed;top:auto;right:12px;bottom:12px;left:12px;width:auto;transform:translateY(8px) scale(.99);transform-origin:bottom center}} /* Stable section rendering - 2026-08-30 v3 */ .panel.on{opacity:1;transform:none;animation:none!important} html:not(.viewport-zooming) .panel.on.section-entering{animation:panelIn .16s cubic-bezier(.22,1,.36,1)!important} /* Row-first independent task columns - 2026-08-30 v4 */ .task-board-grid{ display:grid; grid-template-columns:repeat(var(--task-board-columns,3),minmax(0,1fr)); align-items:start; gap:14px; column-count:auto; column-gap:14px; } .task-board-column{display:flex;min-width:0;min-height:150px;align-items:stretch;flex-direction:column;gap:14px} .task-board-column>.task-board-card,.task-board-column>.task-folder-drop-slot{display:flex;width:100%;margin:0;break-inside:auto} .task-board-column>.task-folder-drop-slot{flex:0 0 auto} @media(max-width:760px){ .task-board-grid{gap:10px;column-gap:0} .task-board-column{min-height:0;gap:10px} } /* Horizontal list and ownership lanes - 2026-08-30 v6 */ .task-list-view,.task-people-view{ display:flex; width:100%; max-width:none; margin:0; align-items:flex-start; flex-direction:row; gap:14px; padding:0 0 12px; overflow-x:auto; overflow-y:visible; border:0; background:transparent; overscroll-behavior-inline:contain; scroll-behavior:smooth; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:#303034 transparent; } .task-list-view::-webkit-scrollbar,.task-people-view::-webkit-scrollbar{height:7px} .task-list-view::-webkit-scrollbar-thumb,.task-people-view::-webkit-scrollbar-thumb{border-radius:10px;background:#303034} .task-horizontal-item{width:clamp(450px,36vw,510px);min-width:clamp(450px,36vw,510px);align-self:flex-start;scroll-snap-align:start} .task-horizontal-item>.task-board-card{display:flex;width:100%;margin:0} .task-person-group{width:clamp(420px,34vw,480px);min-width:clamp(420px,34vw,480px);align-self:flex-start;scroll-snap-align:start} @media(max-width:760px){ .task-list-view,.task-people-view{gap:10px;padding-bottom:10px;scroll-padding-inline:0} .task-horizontal-item,.task-person-group{width:min(88vw,430px);min-width:min(88vw,430px)} } /* Full-width board and directional list workspace - 2026-08-30 v7 */ .task-view-board{padding-inline:14px} .task-board-grid{width:100%;max-width:none} .task-list-orientation-switch{ display:flex; height:36px; align-items:center; gap:2px; padding:3px; border:1px solid var(--border); border-radius:7px; background:#111112; } .task-list-orientation-switch button{ display:grid; width:28px; height:28px; place-items:center; padding:0; border:0; border-radius:5px; background:transparent; color:#65656c; cursor:pointer; transition:background-color .15s ease,color .15s ease; } .task-list-orientation-switch button:hover{color:#c8c8cd} .task-list-orientation-switch button.on{background:#202022;color:#f0f0f2} .task-list-orientation-switch svg{width:13px;height:13px} .task-board-scroll.task-view-list.task-list-layout-horizontal, .task-board-scroll.task-view-people{ display:flex; min-height:0; flex-direction:column; padding:14px 14px 0; overflow:hidden; } .task-view-list.task-list-layout-horizontal>.task-list-view, .task-view-people>.task-people-view{ min-height:0; flex:1; padding-bottom:0; overflow-x:auto; overflow-y:auto; scroll-behavior:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent; } .task-horizontal-rail::-webkit-scrollbar{width:5px;height:5px} .task-horizontal-rail::-webkit-scrollbar-track{background:transparent} .task-horizontal-rail::-webkit-scrollbar-thumb{border-radius:999px;background:rgba(255,255,255,.14)} .task-horizontal-rail::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24)} .task-board-scroll.task-view-list.task-list-layout-vertical{ overflow:auto; padding:14px 14px 36px; } .task-list-view.task-list-vertical{ display:flex; width:min(100%,600px); max-width:600px; margin:0 auto; flex-direction:column; gap:14px; padding:0; overflow:visible; scroll-snap-type:none; } .task-list-vertical .task-horizontal-item{width:100%;min-width:0;scroll-snap-align:none} @media(max-width:760px){ .task-view-board{padding-inline:10px} .task-list-orientation-switch{height:40px} .task-list-orientation-switch button{width:32px;height:32px} .task-board-scroll.task-view-list.task-list-layout-horizontal, .task-board-scroll.task-view-people{display:block;padding:10px 12px calc(82px + env(safe-area-inset-bottom));overflow:visible} .task-view-list.task-list-layout-horizontal>.task-list-view, .task-view-people>.task-people-view{overflow-x:auto;overflow-y:visible;padding-bottom:8px} .task-board-scroll.task-view-list.task-list-layout-vertical{padding:10px 12px calc(82px + env(safe-area-inset-bottom))} .task-list-view.task-list-vertical{width:100%;max-width:none;gap:10px} } /* Left-aligned view controls and fitted calendar - 2026-08-30 v8 */ .task-board-toolbar{align-items:center;justify-content:space-between;gap:14px} .task-board-primary{display:flex;min-width:0;align-items:center;gap:0;flex:0 0 auto} .task-board-controls{flex:0 1 auto} .task-list-orientation-switch{ position:relative; height:28px; gap:3px; margin-left:9px; padding:0 0 0 10px; border:0; border-left:1px solid rgba(255,255,255,.09); border-radius:0; background:transparent; } .task-list-orientation-switch button{ width:25px; height:28px; border-radius:0; background:transparent!important; color:#55555c; } .task-list-orientation-switch button:hover{color:#aaaab0} .task-list-orientation-switch button.on{background:transparent;color:#858eff} .task-list-orientation-switch svg{width:14px;height:14px} .task-board-scroll.task-view-calendar{ min-height:0; padding:14px; overflow:hidden; background:#000; } .task-calendar-view{ display:flex; width:100%; max-width:none; height:100%; min-height:0; margin:0; flex-direction:column; } .task-calendar-head{min-height:44px;flex:0 0 44px;padding:0 2px 8px} .task-calendar-scroll{ display:flex; min-height:0; flex:1; flex-direction:column; overflow:hidden; border-color:rgba(255,255,255,.09); box-shadow:0 0 0 1px rgba(0,0,0,.75),0 10px 30px rgba(0,0,0,.18); } .task-calendar-weekdays,.task-calendar-grid{width:100%;min-width:0;grid-template-columns:repeat(7,minmax(0,1fr))} .task-calendar-weekdays{flex:0 0 29px} .task-calendar-weekdays span{display:flex;align-items:center;padding:0 8px} .task-calendar-grid{min-height:0;flex:1;grid-template-rows:repeat(6,minmax(0,1fr))} .task-calendar-day{min-height:0;padding:5px 6px;overflow:hidden} .task-calendar-day>header{height:20px} .task-calendar-day time{width:19px;height:19px;font-size:8px} .task-calendar-day>div{min-height:0;gap:2px;padding-top:2px;overflow:hidden} .task-calendar-day .task-calendar-chip{min-height:23px;height:23px;padding:1px 5px} .task-calendar-more{display:flex;height:17px;align-items:center;padding:0 4px;color:#606067;font-size:7.5px;pointer-events:none} @media(max-width:1250px){ .task-board-toolbar{align-items:center;flex-direction:row;gap:10px} .task-board-primary{align-self:flex-start} .task-board-controls{justify-content:flex-end} } @media(max-width:900px){ .task-board-toolbar{align-items:stretch;flex-direction:column} .task-board-primary{align-self:flex-start} .task-board-controls{width:100%;justify-content:flex-start} .task-board-search{margin-left:auto} } @media(max-width:760px){ .task-list-orientation-switch{height:32px;margin-left:7px;padding-left:8px} .task-list-orientation-switch button{width:28px;height:32px} .task-board-scroll.task-view-calendar{height:calc(100dvh - 170px);min-height:520px;padding:10px 10px calc(12px + env(safe-area-inset-bottom));overflow:hidden} .task-calendar-head{min-height:42px;flex-basis:42px;padding-bottom:6px} .task-calendar-scroll{margin:0;border:1px solid rgba(255,255,255,.09);border-radius:9px} .task-calendar-weekdays,.task-calendar-grid{min-width:0;grid-template-columns:repeat(7,minmax(0,1fr))} .task-calendar-weekdays span{justify-content:center;padding:0;font-size:7px} .task-calendar-day{min-height:0;padding:3px} .task-calendar-day>header{height:18px}.task-calendar-day time{width:17px;height:17px;font-size:7px} .task-calendar-day>header button{width:17px;height:17px;opacity:1} .task-calendar-day .task-calendar-chip{min-height:18px;height:18px;padding:0 3px} .task-calendar-chip .workspace-task-priority-icon,.task-calendar-people{display:none} .task-calendar-chip-title>span:last-child{font-size:7px} .task-calendar-more{height:14px;padding:0 2px;font-size:6.5px} } /* Compact title-only task lists - 2026-08-30 v9 */ .task-card-header{ min-height:50px; align-items:center; padding:9px 12px; border-bottom:1px solid rgba(255,255,255,.055); } .task-card-title{align-items:center;gap:9px} .task-card-tone{margin-top:0} .task-card-title h2{ color:#ededf0; font-size:15px; font-weight:590; line-height:1.25; letter-spacing:-.015em; } .task-card-head-actions{align-items:center} .task-card-head-actions>button{opacity:.6} .task-board-card:hover .task-card-head-actions>button,.task-card-head-actions>button:focus-visible{opacity:1} @media(max-width:760px){ .task-card-header{min-height:50px;padding:9px 11px} .task-card-title h2{font-size:15px} } /* Collapsible task lists with direct title settings - 2026-08-31 v1 */ button.task-card-title{ min-width:0; max-width:calc(100% - 38px); padding:0; border:0; outline:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; } button.task-card-title:hover h2{color:#fff} button.task-card-title:focus-visible{border-radius:5px;box-shadow:0 0 0 2px rgba(79,98,255,.5)} .task-card-title-copy{display:flex;min-width:0;align-items:baseline;gap:8px} .task-card-title-copy h2{min-width:0} .task-card-title-copy small{ flex:0 0 auto; color:#5f5f66; font-size:8.5px; font-weight:500; line-height:1; white-space:nowrap; } .task-card-menu-trigger svg{width:14px!important;height:14px!important;fill:currentColor;stroke:none} .task-board-card.is-collapsed{min-height:0} .task-board-card.is-collapsed .task-card-header{border-bottom:0} .task-board-card.is-collapsed .task-card-head-actions>button{opacity:.82} @media(max-width:760px){ button.task-card-title{max-width:calc(100% - 44px)} .task-card-title-copy{gap:6px} .task-card-title-copy small{font-size:8px} } /* Full-header collapse and expansion target - 2026-08-31 v6 */ .task-card-header.is-collapse-target{cursor:pointer} .task-card-header.is-collapse-target:hover{background:rgba(255,255,255,.014)} .task-card-title{max-width:calc(100% - 38px)} .task-card-title-button{ display:block; min-width:0; max-width:100%; padding:0; border:0; outline:0; background:transparent; color:inherit; font:inherit; text-align:left; } button.task-card-title-button{cursor:pointer} button.task-card-title-button:hover h2{color:#fff} button.task-card-title-button:focus-visible{border-radius:5px;box-shadow:0 0 0 2px rgba(79,98,255,.5)} .task-folder-tone-grid{ display:grid!important; grid-template-columns:repeat(10,34px)!important; align-items:center!important; justify-content:start!important; gap:8px!important; } .task-folder-tone-option{ box-sizing:border-box!important; width:34px!important; min-width:34px!important; height:34px!important; margin:0!important; place-items:center!important; border:1px solid #2b2b30!important; border-radius:8px!important; background:#151516!important; box-shadow:none!important; transform:none!important; } .task-folder-tone-option>span{ width:14px!important; height:14px!important; transform:none!important; box-shadow:0 0 0 1px rgba(var(--task-tone),.24)!important; } .task-folder-tone-option:hover{border-color:rgba(var(--task-tone),.54)!important;background:#19191b!important;transform:none!important} .task-folder-tone-option:hover>span{transform:none!important} .task-folder-tone-option.on{ border-color:rgba(var(--task-tone),.9)!important; background:rgba(var(--task-tone),.12)!important; box-shadow:inset 0 0 0 1px rgba(var(--task-tone),.16)!important; } .task-folder-tone-option.on>span{transform:none!important;box-shadow:0 0 0 1px rgba(var(--task-tone),.34)!important} .task-folder-tone-option:focus-visible{outline:2px solid rgba(var(--task-tone),.48);outline-offset:2px} @media(max-width:760px){ .task-card-title{max-width:calc(100% - 44px)} .task-folder-tone-grid{grid-template-columns:repeat(5,44px)!important} .task-folder-tone-option{width:44px!important;min-width:44px!important;height:44px!important} .task-folder-tone-option>span{width:15px!important;height:15px!important} } /* Consistent task attachment previews - 2026-08-31 v3 */ .task-board-images.count-1, .task-board-images.count-2, .task-board-images.count-3{ width:min(100%,330px); grid-template-columns:repeat(3,minmax(0,1fr)); justify-content:start; } /* Precisely centered task-list accent dots - 2026-08-31 v4 */ .task-folder-tone-option{ grid-template-columns:1fr!important; grid-template-rows:1fr!important; align-content:center!important; justify-content:center!important; align-items:center!important; justify-items:center!important; } /* Compact list action menu trigger - 2026-08-31 v7 */ .task-card-menu-trigger{opacity:.62} .task-board-card:hover .task-card-menu-trigger,.task-card-menu-trigger:focus-visible{opacity:1} /* 2026-08-31 v8: task quick actions and direct manipulation */ .ctxmenu.task-quick-menu{width:326px;max-width:calc(100vw - 24px);padding:7px;border-radius:12px;border-color:rgba(255,255,255,.095);background:#111112;gap:0;box-shadow:0 22px 58px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.03)} .task-quick-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px;padding:2px 3px 7px 7px;border-bottom:1px solid rgba(255,255,255,.065)} .task-quick-head strong{min-width:0;overflow:hidden;color:#e8e8ea;font-size:11.5px;font-weight:620;line-height:1.25;text-overflow:ellipsis;white-space:nowrap} .task-quick-head button,.task-quick-actions button{display:grid;width:28px;height:28px;place-items:center;border:0;border-radius:7px;background:transparent;color:#77777e;cursor:pointer} .task-quick-head button:hover,.task-quick-actions button:hover{background:#1d1d20;color:#dedee1} .task-quick-section{padding:9px 7px 8px;border-bottom:1px solid rgba(255,255,255,.055)} .task-quick-section>span{display:block;margin-bottom:7px;color:#5f5f66;font-size:8px;font-weight:720;letter-spacing:.1em;text-transform:uppercase} .task-quick-avatars{display:flex;align-items:center;gap:6px;min-height:30px;overflow:hidden} .task-quick-avatars>small{color:#68686f;font-size:10px} .task-quick-avatar{position:relative;display:grid;width:29px;height:29px;flex:0 0 29px;place-items:center;padding:0;border:1px solid #303034;border-radius:50%;background:#1a1a1c;color:#aaaab0;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease} .task-quick-avatar:hover{border-color:#55555c;transform:translateY(-1px)} .task-quick-avatar.on{border-color:#5563ff;box-shadow:0 0 0 2px rgba(26,35,206,.28)} .task-quick-avatar img,.task-quick-avatar>i{display:grid;width:100%;height:100%;place-items:center;border-radius:inherit;object-fit:cover;font-size:9px;font-style:normal;font-weight:700} .task-quick-avatar>b{position:absolute;right:-2px;bottom:-2px;display:none;width:12px;height:12px;place-items:center;border:2px solid #111112;border-radius:50%;background:#1a23ce;color:#fff} .task-quick-avatar.on>b{display:grid}.task-quick-avatar>b svg{width:8px;height:8px} .task-quick-dates{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) 28px;gap:4px} .task-quick-date,.task-quick-more{height:42px;padding:0;border:1px solid #29292d;border-radius:7px;background:#171719;color:#8b8b92;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease} .task-quick-date{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px} .task-quick-date small{font-size:7px;font-weight:650;line-height:1;color:#64646b}.task-quick-date b{font-size:11px;font-weight:620;line-height:1} .task-quick-date:hover,.task-quick-more:hover{border-color:#414148;background:#1d1d20;color:#e2e2e5} .task-quick-date.today{border-color:rgba(79,98,255,.42)}.task-quick-date.today small{color:#7f89ff} .task-quick-date.on{border-color:#5968ff;background:rgba(26,35,206,.2);color:#fff;box-shadow:inset 0 0 0 1px rgba(111,123,255,.16)} .task-quick-more{display:flex;align-items:center;justify-content:center;gap:2px}.task-quick-more i{width:2.5px;height:2.5px;border-radius:50%;background:currentColor} .task-quick-bottom{display:flex;align-items:center;justify-content:space-between;padding:7px 4px 1px 7px} .task-quick-priorities,.task-quick-actions{display:flex;align-items:center;gap:3px} .task-quick-priority{display:grid;width:29px;height:29px;place-items:center;padding:0;border:1px solid transparent;border-radius:7px;background:transparent;color:#66666e;cursor:pointer} .task-quick-priority svg{width:15px;height:15px}.task-quick-priority:hover{background:#1c1c1f;color:#cccdd1}.task-quick-priority.on{border-color:#38383f;background:#202023;color:#ededf0} .task-quick-priority.high.on{border-color:rgba(227,179,60,.38);background:rgba(227,179,60,.09);color:#e3b33c}.task-quick-priority.urgent.on{border-color:rgba(239,83,99,.4);background:rgba(239,83,99,.1);color:#ef5363} .task-quick-actions .danger:hover{background:rgba(239,83,99,.1);color:#ef7783} .tasks-dashboard .workspace-task-row{touch-action:pan-y}.tasks-dashboard .workspace-task-row:not(.done){cursor:grab}.tasks-dashboard .workspace-task-row:not(.done):active{cursor:grabbing} body.workspace-task-dragging,body.workspace-task-dragging *{cursor:grabbing!important;user-select:none!important} .workspace-task-row.is-task-drag-source{visibility:hidden} .workspace-task-drop-slot{min-height:40px;margin:3px 5px;border:1px dashed rgba(91,105,255,.55);border-radius:7px;background:rgba(26,35,206,.085);box-shadow:inset 0 0 0 1px rgba(26,35,206,.05)} .workspace-task-drag-ghost{position:fixed;z-index:760;top:0;left:0;max-height:170px;overflow:hidden;pointer-events:none;border:1px solid rgba(255,255,255,.13)!important;border-radius:8px!important;background:#171719!important;box-shadow:0 18px 44px rgba(0,0,0,.48)!important;opacity:.97;will-change:transform,opacity;transition:opacity .1s ease} .workspace-task-drag-ghost.is-dropping{opacity:0}.workspace-task-drag-ghost .workspace-task-people{display:flex} body.workspace-task-dragging .workspace-task-list[data-task-list-kind="open"]:empty{min-height:42px;margin:4px;border:1px dashed rgba(255,255,255,.09);border-radius:7px} @media(max-width:700px){.ctxmenu.task-quick-menu{width:min(326px,calc(100vw - 20px))}.task-quick-dates{grid-template-columns:repeat(5,minmax(0,1fr)) 26px}.task-quick-avatar{width:27px;height:27px;flex-basis:27px}} @media(prefers-reduced-motion:reduce){.task-quick-avatar,.task-quick-date,.workspace-task-drag-ghost{transition:none!important}} /* 2026-08-31 v9: manual task order and stable direct manipulation */ .tasks-dashboard .workspace-task-title-text{ display:inline; min-width:0; } .tasks-dashboard .workspace-task-title-text .workspace-task-due{ display:inline-flex; height:18px; margin-left:6px; padding:0 5px; vertical-align:2px; border:1px solid rgba(255,255,255,.05); border-radius:5px; font-size:7.5px; line-height:1; } .tasks-dashboard .workspace-task-title-text .workspace-task-due svg{width:8px;height:8px} .tasks-dashboard .workspace-task-title-text .workspace-task-due.today{ border-color:rgba(227,179,60,.19); background:rgba(227,179,60,.1); color:#e3b33c; } .tasks-dashboard .workspace-task-title-text .workspace-task-due.overdue{ border-color:rgba(239,83,99,.2); background:rgba(239,83,99,.1); color:#ef6672; } .tasks-dashboard .workspace-task-title-text .workspace-task-due.soon{ border-color:rgba(79,98,255,.16); background:rgba(79,98,255,.08); color:#8d96ff; } .tasks-dashboard .workspace-task-row.done .workspace-task-title-text .workspace-task-due{ border-color:rgba(255,255,255,.04); background:#151517; color:#5f5f66; } .task-board-card.is-drag-source, .workspace-task-row.is-task-drag-source{display:none!important} .task-folder-drop-slot, .workspace-task-drop-slot{box-sizing:border-box!important} .workspace-task-drop-slot{ min-height:0; margin:0; border-color:rgba(91,105,255,.44); background:rgba(26,35,206,.055); } .task-folder-drag-ghost{ position:fixed; z-index:760; top:0; left:0; max-height:none!important; overflow:visible!important; pointer-events:none; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; opacity:.98; transform-origin:top left; will-change:transform,opacity; transition:opacity .1s ease; } .task-folder-drag-ghost>.task-board-card{ display:flex!important; width:100%!important; height:100%!important; margin:0!important; filter:none!important; box-shadow:0 20px 54px rgba(0,0,0,.5)!important; } .task-folder-drag-ghost .task-card-header, .task-folder-drag-ghost .task-card-body, .task-folder-drag-ghost .task-card-footer{ filter:none!important; opacity:1!important; } .task-folder-drag-ghost .task-card-header{background:inherit!important} .task-folder-drag-ghost.is-dropping{opacity:0;filter:none} .workspace-task-drag-ghost{ position:fixed; z-index:761; top:0; left:0; max-height:none!important; overflow:visible!important; pointer-events:none; border:1px solid rgba(255,255,255,.11)!important; border-radius:8px!important; background:#111112!important; box-shadow:0 18px 44px rgba(0,0,0,.48)!important; opacity:.98; will-change:transform,opacity; transition:opacity .1s ease; } .workspace-task-drag-ghost>.workspace-task-drag-preview{ display:grid!important; width:100%!important; height:100%!important; margin:0!important; border:0!important; border-radius:8px!important; background:#171719!important; box-shadow:none!important; opacity:1!important; } .workspace-task-drag-ghost.is-dropping{opacity:0} .workspace-task-drag-ghost .workspace-task-people{display:flex} @media(prefers-reduced-motion:reduce){ .task-folder-drag-ghost,.workspace-task-drag-ghost{transition:none!important} } /* 2026-08-31 v11: clearer completed-task workflow */ .task-done-mode-toggle{ display:flex; height:28px; align-items:center; gap:7px; margin-left:9px; padding:0 1px 0 10px; border:0; border-left:1px solid rgba(255,255,255,.09); background:transparent; color:#66666d; cursor:pointer; font:inherit; transition:color .15s ease; } .task-done-mode-toggle:hover{color:#bfc0c5} .task-done-mode-toggle>svg{width:14px;height:14px;flex:0 0 auto} .task-done-mode-toggle>span{font-size:8.5px;font-weight:560;white-space:nowrap} .task-done-mode-toggle>i{ position:relative; display:block; width:27px; height:15px; flex:0 0 27px; border:1px solid #34343a; border-radius:999px; background:#1b1b1e; transition:border-color .16s ease,background-color .16s ease; } .task-done-mode-toggle>i>b{ position:absolute; top:2px; left:2px; width:9px; height:9px; border-radius:50%; background:#77777f; transition:transform .18s cubic-bezier(.22,1,.36,1),background-color .16s ease; } .task-done-mode-toggle.on{color:#d4d5da} .task-done-mode-toggle.on>svg{color:#8790ff} .task-done-mode-toggle.on>i{border-color:rgba(79,98,255,.46);background:rgba(26,35,206,.18)} .task-done-mode-toggle.on>i>b{transform:translateX(12px);background:#8790ff} .task-done-mode-toggle:focus-visible{outline:2px solid rgba(79,98,255,.5);outline-offset:3px;border-radius:4px} .task-card-completed-actions{display:flex;min-width:0;align-items:center;gap:2px} .task-card-completed-count{ display:flex; height:29px; align-items:center; gap:6px; padding:0 7px; color:#696970; font-size:8px; font-weight:540; white-space:nowrap; } .task-card-completed-count svg{width:11px;height:11px;color:#747bde} .task-card-footer .task-card-clear-completed{gap:5px;color:#606067} .task-card-footer .task-card-clear-completed:hover{background:rgba(239,83,99,.075);color:#e16a75} .task-card-clear-completed span{font-size:8px} .workspace-task-list.shows-done-inline .workspace-task-row.done{cursor:grab} .workspace-task-list.shows-done-inline .workspace-task-row.done:active{cursor:grabbing} @media(max-width:760px){ .task-done-mode-toggle{height:32px;margin-left:7px;padding-left:8px} .task-done-mode-toggle>span{font-size:8px} .task-card-completed-count{height:34px;font-size:9px} .task-card-clear-completed span{font-size:9px} } @media(max-width:520px){ .task-done-mode-toggle{gap:6px} .task-done-mode-toggle>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} } @media(prefers-reduced-motion:reduce){ .task-done-mode-toggle,.task-done-mode-toggle>i,.task-done-mode-toggle>i>b{transition:none!important} } /* 2026-08-31 v12: quieter task cards and a true compact context menu */ .tasks-dashboard .task-board-card:not(.is-collapsed) .task-card-header{border-bottom:1px solid rgba(255,255,255,.055)} .tasks-dashboard .task-card-body{border-bottom:0} .tasks-dashboard .task-card-footer{display:none!important} .task-card-head-actions{display:flex;align-items:center;gap:1px} .task-card-head-add, .task-card-menu-trigger{display:grid;width:28px;height:28px;place-items:center;padding:0;border:0;border-radius:6px;background:transparent;color:#66666d;cursor:pointer;transition:background-color .14s ease,color .14s ease,opacity .14s ease} .task-card-head-add{opacity:.38} .task-card-head-add svg,.task-card-menu-trigger svg{width:14px;height:14px} .task-board-card:hover .task-card-head-add,.task-card-head-add:focus-visible{opacity:.82} .task-card-head-add:hover,.task-card-menu-trigger:hover{background:#222225;color:#e1e1e4;opacity:1} .task-card-head-add:focus-visible,.task-card-menu-trigger:focus-visible{outline:2px solid rgba(85,98,255,.48);outline-offset:1px} .task-done-mode-toggle{ display:inline-flex; height:32px; align-items:center; gap:7px; margin-left:8px; padding:0 10px; border:0; border-left:1px solid rgba(255,255,255,.075); border-radius:0 7px 7px 0; background:transparent; color:#77777e; cursor:pointer; font:inherit; transition:background-color .14s ease,color .14s ease; } .task-done-mode-toggle>svg{width:14px;height:14px;flex:0 0 14px} .task-done-mode-toggle>span{font-size:9.5px;font-weight:590;white-space:nowrap} .task-done-mode-toggle:hover{background:#171719;color:#d0d0d4} .task-done-mode-toggle.on{background:#191a27;color:#aeb4ff} .task-done-mode-toggle:focus-visible{outline:2px solid rgba(85,98,255,.48);outline-offset:2px} .task-done-mode-toggle>i{display:none!important} .ctxmenu.task-quick-menu{ width:288px; max-width:calc(100vw - 24px); padding:5px; gap:0; border:1px solid rgba(255,255,255,.1); border-radius:9px; background:#111112; box-shadow:0 20px 52px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.025); } .task-quick-actions-list{display:flex;flex-direction:column;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.065)} .task-quick-action{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:8px;width:100%;min-height:31px;padding:0 8px;border:0;border-radius:5px;background:transparent;color:#c7c7cb;text-align:left;cursor:pointer;font:560 10.5px/1 'Geist',sans-serif} .task-quick-action svg{width:14px;height:14px;color:#77777e} .task-quick-action:hover,.task-quick-action:focus-visible{outline:0;background:#1d1d20;color:#f0f0f2} .task-quick-action.danger{color:#e56b76} .task-quick-action.danger svg{color:#d25b66} .task-quick-action.danger:hover,.task-quick-action.danger:focus-visible{background:rgba(239,83,99,.1);color:#ff7c88} .task-quick-section{padding:8px 7px;border-bottom:1px solid rgba(255,255,255,.055)} .task-quick-section>span,.task-quick-priority-section>span{display:block;margin-bottom:6px;color:#606067;font-size:7.5px;font-weight:720;letter-spacing:.1em;text-transform:uppercase} .task-quick-avatars{gap:5px;min-height:28px} .task-quick-avatar{width:27px;height:27px;flex-basis:27px} .task-quick-dates{grid-template-columns:repeat(5,minmax(0,1fr)) 25px;gap:3px} .task-quick-date,.task-quick-more{height:38px;border-radius:6px} .task-quick-date small{font-size:6.5px}.task-quick-date b{font-size:10px} .task-quick-priority-section{padding:8px 7px 6px} .task-quick-priorities{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px;border-radius:7px;background:#19191b} .task-quick-priority{display:flex;width:auto;height:29px;align-items:center;justify-content:center;padding:0 5px;border:0;border-radius:5px;background:transparent;color:#6f6f76;cursor:pointer;font:570 8.5px/1 'Geist',sans-serif;transition:background-color .14s ease,color .14s ease} .task-quick-priority:hover{background:#222225;color:#d0d0d4} .task-quick-priority.on{background:#2a2a2e;color:#eeeef0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.055)} .task-quick-priority.high.on{background:rgba(227,179,60,.12);color:#e9bd50;box-shadow:inset 0 0 0 1px rgba(227,179,60,.16)} .task-quick-priority.urgent.on{background:rgba(239,83,99,.12);color:#f06a77;box-shadow:inset 0 0 0 1px rgba(239,83,99,.17)} .workspace-task-list.shows-done-inline .workspace-task-row.done{border-top-color:rgba(255,255,255,.035)} /* Library cards now use the same calm lift, slot, and settle treatment as task cards. */ .library-drop-slot{border:1px dashed rgba(91,105,255,.44)!important;border-radius:9px!important;background:rgba(26,35,206,.055)!important;box-shadow:inset 0 0 0 1px rgba(26,35,206,.025)!important;animation:task-slot-in .12s ease-out both!important} .library-drag-ghost{opacity:.98!important;box-shadow:0 18px 44px rgba(0,0,0,.48)!important;transition:opacity .1s ease!important} .library-drag-ghost.is-dropping{opacity:0!important;filter:none!important} @media(max-width:700px){.ctxmenu.task-quick-menu{width:min(288px,calc(100vw - 20px))}.task-done-mode-toggle{height:32px;padding-inline:9px}.task-done-mode-toggle>span{font-size:9px}} @media(prefers-reduced-motion:reduce){.task-card-head-add,.task-card-menu-trigger,.task-done-mode-toggle,.task-quick-action,.task-quick-priority,.library-drag-ghost{transition:none!important}} /* 2026-08-31 v13: reference-aligned multiplier and adaptive transparency preview */ .mockups-canvas-frame.is-transparent{ overflow:hidden; background-color:var(--transparent-preview-base); background-image:linear-gradient(45deg,var(--transparent-preview-check) 25%,transparent 25%),linear-gradient(-45deg,var(--transparent-preview-check) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--transparent-preview-check) 75%),linear-gradient(-45deg,transparent 75%,var(--transparent-preview-check) 75%); background-position:0 0,0 10px,10px -10px,-10px 0; background-size:20px 20px; } .mockups-canvas-frame.is-transparent.is-light{ --transparent-preview-base:#d7d7da; --transparent-preview-check:rgba(255,255,255,.24); } .mockups-canvas-frame.is-transparent.is-dark{ --transparent-preview-base:#1d1d1f; --transparent-preview-check:rgba(255,255,255,.045); } .mockups-multiplier-editor{ display:flex; flex-direction:row; align-items:center; gap:6px; width:100%; margin:0; padding:0; border:0; background:transparent; } .mockups-multiplier-value{position:relative;display:block;width:68px;min-width:0;flex:0 0 68px} .mockups-multiplier-value>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .mockups-multiplier-value>i{position:absolute;right:9px;top:50%;transform:translateY(-51%);color:#8d8d94;font:600 10.5px/1 'Geist',sans-serif;font-style:normal;pointer-events:none} .mockups-multiplier-editor input{ width:100%; height:36px; padding:0 21px 0 8px; border:1px solid #2b2b2f; border-radius:8px; outline:0; background:#171719; color:#f1f1f3; font:600 10.5px/1 'Geist',sans-serif; text-align:center; } .mockups-multiplier-editor input:hover{border-color:#3a3a3f;background:#1e1e20} .mockups-multiplier-editor input:focus{border-color:rgba(85,98,255,.68);box-shadow:0 0 0 3px rgba(26,35,206,.14)} .mockups-multiplier-colors{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;min-width:0;flex:1} .mockups-multiplier-colors button{display:grid;min-width:0;height:36px;place-items:center;padding:0;border:1px solid transparent;border-radius:7px;background:transparent;cursor:pointer;transition:background-color .12s ease,border-color .12s ease,transform .12s ease} .mockups-multiplier-colors button:hover{border-color:#3b3b40;background:#202022;transform:translateY(-1px)} .mockups-multiplier-colors button:focus-visible{outline:2px solid rgba(85,98,255,.5);outline-offset:1px} .mockups-multiplier-colors i{position:relative;display:block;width:16px;height:16px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:var(--multiplier-color);box-shadow:0 2px 4px rgba(0,0,0,.28)} .mockups-multiplier-colors button.on{border-color:color-mix(in srgb,var(--multiplier-color) 72%,#fff 10%);background:color-mix(in srgb,var(--multiplier-color) 12%,#1b1b1d);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--multiplier-color) 18%,transparent)} .mockups-multiplier-colors button.on i{border-color:rgba(255,255,255,.78);box-shadow:0 0 0 2px color-mix(in srgb,var(--multiplier-color) 26%,transparent)} @media(max-width:1100px){.mockups-multiplier-editor{gap:4px}.mockups-multiplier-value{width:58px;flex-basis:58px}.mockups-multiplier-value>i{right:7px}.mockups-multiplier-colors{gap:1px}.mockups-multiplier-colors button{height:34px}.mockups-multiplier-colors i{width:14px;height:14px}} /* 2026-08-31 v14: assignee avatars never change task row height */ .tasks-dashboard .workspace-task-row.has-assignees .workspace-task-copy{padding-right:122px} .tasks-dashboard .workspace-task-row .workspace-task-people{ position:absolute; z-index:2; top:8px; right:8px; width:auto; max-width:122px; } .task-list-group .workspace-task-row .workspace-task-people{top:10px;right:8px} @media(max-width:760px){ .tasks-dashboard .workspace-task-row.has-assignees .workspace-task-copy{padding-right:96px} .tasks-dashboard .workspace-task-row .workspace-task-people{top:11px;right:7px;max-width:96px} .tasks-dashboard .workspace-task-more{display:none} } /* 2026-09-01 v5: responsive task composer and stable direct manipulation */ .tasks-dashboard .task-card-add-zone{ padding:7px 1px 1px; border-top:1px solid rgba(255,255,255,.045); } .tasks-dashboard .task-card-add-bar{ display:flex; width:100%; height:41px; align-items:center; gap:8px; padding:0 11px; border:1px solid #252529; border-radius:8px; background:#141416; color:#85858c; cursor:text; font:560 10px/1 'Geist',sans-serif; transition:border-color .14s ease,background-color .14s ease,color .14s ease,transform .12s ease; } .tasks-dashboard .task-card-add-bar svg{width:14px;height:14px;flex:0 0 auto;color:#68686f;transition:color .14s ease} .tasks-dashboard .task-card-add-bar:hover,.tasks-dashboard .task-card-add-bar:focus-visible{border-color:#38383d;background:#18181a;color:#e0e0e3;outline:0} .tasks-dashboard .task-card-add-bar:hover svg,.tasks-dashboard .task-card-add-bar:focus-visible svg{color:#8991ff} .tasks-dashboard .task-card-add-bar:active{transform:scale(.995)} .tasks-dashboard .task-card-composer{ display:grid; grid-template-columns:minmax(0,1fr) 33px 31px; min-height:41px; align-items:center; gap:4px; margin:0; padding:4px; border:1px solid #37373c; border-radius:8px; background:#151517; box-shadow:0 0 0 3px rgba(26,35,206,.08); animation:task-composer-in .17s cubic-bezier(.22,1,.36,1) both; } @keyframes task-composer-in{from{opacity:.55;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}} .tasks-dashboard .task-card-composer input{ min-width:0; height:31px; padding:0 8px; border:0; outline:0; background:transparent; color:#eeeef0; font:500 10.5px/1 'Geist',sans-serif; } .tasks-dashboard .task-card-composer input::placeholder{color:#5d5d65} .tasks-dashboard .task-card-composer.saving{opacity:.58;pointer-events:none} .tasks-dashboard .task-card-empty{min-height:52px} .tasks-dashboard .task-done-mode-toggle{ display:inline-flex; height:30px; align-items:center; gap:6px; margin-left:8px; padding:0 9px; border:1px solid #242428!important; border-radius:7px!important; background:#111113!important; color:#77777f; cursor:pointer; font:inherit; transition:border-color .14s ease,background-color .14s ease,color .14s ease; } .tasks-dashboard .task-done-mode-toggle>svg{width:12px;height:12px;flex:0 0 12px} .tasks-dashboard .task-done-mode-toggle>span{font-size:9px;font-weight:570;white-space:nowrap} .tasks-dashboard .task-done-mode-toggle:hover{border-color:#35353a!important;background:#171719!important;color:#c5c5ca} .tasks-dashboard .task-done-mode-toggle.on{border-color:#30313d!important;background:#151620!important;color:#aeb4ff} .tasks-dashboard .task-done-mode-toggle:focus-visible{outline:2px solid rgba(85,98,255,.48);outline-offset:2px} .tasks-dashboard .workspace-task-row.task-status-moving{position:relative;z-index:4;will-change:transform} .workspace-task-row.just-completed{animation:none!important} .library-drop-slot{ contain:layout paint; animation:none!important; transition:none!important; } .library-drag-ghost{contain:layout paint style;transform-origin:top left} body.library-reordering [data-id]:not(.library-drag-ghost){animation:none!important;transition:none!important} @media(max-width:760px){ .tasks-dashboard .task-card-add-bar,.tasks-dashboard .task-card-composer{min-height:44px} .tasks-dashboard .task-card-add-bar{height:44px;font-size:11px} .tasks-dashboard .task-card-composer input{height:34px;font-size:16px} .tasks-dashboard .task-done-mode-toggle{height:32px;padding-inline:8px} } @media(max-width:520px){ .tasks-dashboard .task-done-mode-toggle>span{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:nowrap} } @media(prefers-reduced-motion:reduce){ .tasks-dashboard .task-card-add-bar,.tasks-dashboard .task-card-composer,.tasks-dashboard .task-done-mode-toggle{animation:none!important;transition:none!important} } /* 2026-09-01 v6: owner-controlled temporary homepage notice */ .workspace-temporary-card{flex-direction:row;align-items:center;justify-content:space-between;gap:18px;padding:13px 14px} .workspace-temporary-copy{display:flex;min-width:0;align-items:center;gap:11px} .workspace-temporary-icon{display:grid;width:32px;height:32px;place-items:center;flex:0 0 32px;border-radius:7px;background:#1b1b1e;color:#858bff} .workspace-temporary-icon svg{width:15px;height:15px} .workspace-temporary-copy>div{display:flex;min-width:0;flex-direction:column;gap:4px} .workspace-temporary-copy strong{color:#dedee1;font-size:11px;font-weight:590} .workspace-temporary-copy small{color:#696970;font-size:9px;line-height:1.4} .workspace-setting-switch{display:flex;align-items:center;gap:7px;flex:0 0 auto;color:#74747b;font-size:8.5px;font-weight:570;cursor:pointer} .workspace-setting-switch input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none} .workspace-setting-switch i{position:relative;width:32px;height:18px;border:1px solid #35353a;border-radius:999px;background:#1b1b1e;transition:border-color .16s ease,background-color .16s ease} .workspace-setting-switch i::after{content:"";position:absolute;top:3px;left:3px;width:10px;height:10px;border-radius:50%;background:#77777e;transition:transform .18s cubic-bezier(.22,1,.36,1),background-color .16s ease} .workspace-setting-switch input:checked+i{border-color:rgba(78,91,255,.58);background:rgba(26,35,206,.22)} .workspace-setting-switch input:checked+i::after{transform:translateX(14px);background:#8991ff} .workspace-setting-switch input:focus-visible+i{outline:2px solid rgba(85,98,255,.48);outline-offset:2px} .workspace-setting-switch:has(input:disabled){opacity:.52;cursor:wait} body[data-tab="home"].home-construction-mode .content{overflow:hidden} #home-dash.home-under-construction{position:relative;min-height:calc(100vh - 102px);overflow:hidden} #home-dash.home-under-construction>.dash{filter:blur(9px);opacity:.2;transform:scale(.992);transform-origin:50% 18%;pointer-events:none;user-select:none;transition:filter .24s ease,opacity .24s ease,transform .24s ease} .home-construction-notice{position:absolute;z-index:8;inset:0;display:grid;min-height:calc(100vh - 102px);place-items:center;padding:24px;background:rgba(0,0,0,.18)} .home-construction-card{width:min(390px,calc(100vw - 48px));padding:25px 26px 24px;border:1px solid rgba(255,255,255,.085);border-radius:11px;background:#101012;box-shadow:0 24px 70px rgba(0,0,0,.46)} .home-construction-kicker{display:flex;align-items:center;gap:7px;color:#77777f;font-size:8px;font-weight:680;letter-spacing:.11em;text-transform:uppercase} .home-construction-kicker i{width:6px;height:6px;border-radius:50%;background:#5660ef;box-shadow:0 0 0 3px rgba(86,96,239,.12)} .home-construction-card h1{margin:15px 0 0;color:#f0f0f2;font-size:24px;font-weight:610;line-height:1.15;letter-spacing:-.025em} .home-construction-card p{max-width:310px;margin:9px 0 0;color:#77777e;font-size:10.5px;line-height:1.55} .home-construction-card button{display:inline-flex;height:36px;align-items:center;justify-content:center;gap:8px;margin-top:21px;padding:0 13px;border:1px solid #3039d7;border-radius:7px;background:#1a23ce;color:#fff;cursor:pointer;font:580 10px/1 'Geist',sans-serif;transition:background-color .14s ease,transform .12s ease,box-shadow .14s ease} .home-construction-card button svg{width:13px;height:13px;transition:transform .14s ease} .home-construction-card button:hover{background:#2731dc;box-shadow:0 8px 22px rgba(26,35,206,.2)} .home-construction-card button:hover svg{transform:translateX(2px)} .home-construction-card button:active{transform:scale(.98)} .home-construction-card button:focus-visible{outline:2px solid rgba(117,128,255,.62);outline-offset:3px;box-shadow:none!important} body.light #home-dash.home-under-construction>.dash{opacity:.24} body.light .home-construction-notice{background:rgba(239,238,235,.14)} body.light .home-construction-card{border-color:rgba(20,20,25,.1);background:#f3f2ef;box-shadow:0 24px 70px rgba(30,30,35,.16)} body.light .home-construction-card h1{color:#17171a} body.light .home-construction-card p{color:#66666c} @media(max-width:620px){ .workspace-temporary-card{align-items:flex-start;flex-direction:column}.workspace-setting-switch{align-self:flex-end} #home-dash.home-under-construction,.home-construction-notice{min-height:calc(100dvh - 92px)} .home-construction-notice{padding:14px}.home-construction-card{width:min(100%,390px);padding:22px}.home-construction-card h1{font-size:22px} } @media(prefers-reduced-motion:reduce){ #home-dash.home-under-construction>.dash,.workspace-setting-switch i,.workspace-setting-switch i::after,.home-construction-card button,.home-construction-card button svg{transition:none!important} } /* 2026-09-01 v7: minimal single-field task creation */ .tasks-dashboard .task-card-add-zone{ margin-top:2px; padding:3px 0 0; border-top:0; } .tasks-dashboard .task-card-add-bar{ height:39px; gap:7px; padding:0 8px; border:0; border-radius:6px; background:transparent; box-shadow:none; color:#707078; font-size:10px; } .tasks-dashboard .task-card-add-bar svg{ width:13px; height:13px; color:#5f5f67; } .tasks-dashboard .task-card-add-bar:hover, .tasks-dashboard .task-card-add-bar:focus-visible{ border-color:transparent; outline:0; background:#161618; color:#c5c5ca; } .tasks-dashboard .task-card-add-bar:hover svg, .tasks-dashboard .task-card-add-bar:focus-visible svg{color:#858bff} .tasks-dashboard .task-card-composer.task-card-composer-minimal{ display:grid; grid-template-columns:13px minmax(0,1fr); min-height:39px; align-items:center; gap:7px; margin:0; padding:0 8px; border:0; border-radius:6px; background:#161618; box-shadow:none; animation:none; } .tasks-dashboard .task-card-composer-icon{ width:13px; height:13px; color:#858bff; pointer-events:none; } .tasks-dashboard .task-card-composer.task-card-composer-minimal input{ width:100%; height:39px; padding:0; border:0; outline:0; background:transparent; color:#eeeef0; font:520 10.5px/1 'Geist',sans-serif; } .tasks-dashboard .task-card-composer.task-card-composer-minimal input::placeholder{color:#606068} .tasks-dashboard .task-card-composer.task-card-composer-minimal:focus-within{background:#19191b} @media(max-width:760px){ .tasks-dashboard .task-card-add-bar, .tasks-dashboard .task-card-composer.task-card-composer-minimal{height:44px;min-height:44px} .tasks-dashboard .task-card-composer.task-card-composer-minimal input{height:44px;font-size:16px} } /* 2026-09-01 v8: coherent done controls and quieter task typography */ .tasks-dashboard .task-done-controls{ display:flex; height:28px; align-items:center; gap:1px; margin-left:9px; padding-left:9px; border-left:1px solid rgba(255,255,255,.075); } .tasks-dashboard .task-done-mode-toggle, .tasks-dashboard .task-clear-done{ display:inline-flex; height:28px; align-items:center; justify-content:center; margin:0; padding:0 7px; border:0!important; border-radius:5px!important; background:transparent!important; color:#686870; cursor:pointer; font:540 8.75px/1 'Geist',sans-serif; white-space:nowrap; transition:background-color .13s ease,color .13s ease; } .tasks-dashboard .task-done-mode-toggle>span{font:inherit} .tasks-dashboard .task-done-mode-toggle:hover, .tasks-dashboard .task-done-mode-toggle:focus-visible{background:#171719!important;color:#c7c7cc} .tasks-dashboard .task-done-mode-toggle.on{background:transparent!important;color:#686870} .tasks-dashboard .task-done-mode-toggle.on:hover, .tasks-dashboard .task-done-mode-toggle.on:focus-visible{background:#171719!important;color:#c7c7cc} .tasks-dashboard .task-clear-done{color:#5f5f67} .tasks-dashboard .task-clear-done:hover, .tasks-dashboard .task-clear-done:focus-visible{background:rgba(239,83,99,.07)!important;color:#df737d} .tasks-dashboard .task-done-mode-toggle:focus-visible, .tasks-dashboard .task-clear-done:focus-visible{outline:2px solid rgba(85,98,255,.4);outline-offset:1px} .tasks-dashboard .workspace-task-copy strong, .tasks-dashboard .workspace-task-title-text, .tasks-dashboard .task-calendar-chip-title{font-weight:400} .tasks-dashboard .task-card-composer.task-card-composer-minimal, .tasks-dashboard .task-card-composer.task-card-composer-minimal:focus-within{ border-radius:6px; background:transparent; box-shadow:none; } .tasks-dashboard .task-card-composer.task-card-composer-minimal input{ caret-color:#858bff; font-weight:400; } .tasks-dashboard .task-card-composer-icon{color:#66666e} .tasks-dashboard .task-card-composer.task-card-composer-minimal:focus-within .task-card-composer-icon{color:#858bff} @media(max-width:760px){ .tasks-dashboard .task-done-controls{height:32px;margin-left:7px;padding-left:7px} .tasks-dashboard .task-done-mode-toggle, .tasks-dashboard .task-clear-done{height:32px;padding-inline:6px;font-size:8.5px} } @media(prefers-reduced-motion:reduce){ .tasks-dashboard .task-done-mode-toggle, .tasks-dashboard .task-clear-done{transition:none!important} } /* 2026-09-02 v1: native mobile workspace */ .mobile-tabbar,.mobile-nav-scrim,.workspace-task-mobile-menu{display:none} @media(max-width:760px), (max-width:900px) and (max-height:520px){ :root{ --mobile-topbar-height:56px; --mobile-tabbar-height:66px; --mobile-gutter:12px; } html,body{ width:100%; height:100%; min-height:100%; overflow:hidden; overscroll-behavior:none; background:#080809; } body{ -webkit-tap-highlight-color:transparent; text-rendering:optimizeLegibility; } body.mobile-nav-open{touch-action:none} button,a,[role="button"]{touch-action:manipulation} button:hover,.card:hover,.tcard:hover,.pcard:hover{transform:none} .drag-item,.task-board-card.can-reorder,.workspace-task-row{ -webkit-touch-callout:none; touch-action:pan-y; } .library-drag-ghost,.task-folder-drag-ghost,.workspace-task-drag-ghost{ max-width:calc(100vw - 24px)!important; pointer-events:none!important; } #app{ position:relative; display:block; width:100%; height:100dvh; min-height:0; overflow:hidden; background:#080809; } #gate{padding:calc(16px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));background:#080809} .gi{ width:100%; max-width:390px; gap:15px; padding:28px 20px; border-radius:18px; border-color:rgba(255,255,255,.075); background:#101012; box-shadow:0 24px 70px rgba(0,0,0,.48); animation:none; } .glogo .brand-logo{width:64px}.gtitle{font-size:23px}.gdesc{max-width:31ch;font-size:14px;line-height:1.5} .gbtn{min-height:50px;border-radius:12px;font-size:15px} .gmini{font-size:11px;line-height:1.5} .main{ width:100%; height:100%; min-width:0; min-height:0; overflow:hidden; background:#080809; } /* Mobile app header */ .topbar{ position:relative; z-index:30; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:var(--mobile-topbar-height) auto; width:100%; height:auto; min-height:calc(var(--mobile-topbar-height) + env(safe-area-inset-top)); padding:env(safe-area-inset-top) var(--mobile-gutter) 0; gap:0 8px; border-bottom:1px solid rgba(255,255,255,.065); background:#0b0b0d; box-shadow:0 1px 0 rgba(0,0,0,.4); } .tbleft{ display:flex; height:var(--mobile-topbar-height); min-width:0; align-items:center; padding:0 2px; overflow:hidden; color:#f1f1f3; font-size:20px; font-weight:600; letter-spacing:-.035em; text-overflow:ellipsis; white-space:nowrap; } .tbright{ display:flex; height:var(--mobile-topbar-height); align-items:center; justify-content:flex-end; gap:4px; } .tbcenter{ grid-column:1/-1; grid-row:2; width:100%; padding:0 0 10px; } .tbcenter[style*="display: none"]{display:none!important} .sbox{ width:100%; height:44px; border:1px solid rgba(255,255,255,.075); border-radius:12px; background:#151517; box-shadow:inset 0 1px rgba(255,255,255,.025); } .sbox svg{width:16px;height:16px;margin-left:2px;color:#72727b} .sbox input{ height:42px; color:#ededf0; font-size:16px; } .sbox input::placeholder{color:#66666e} .zbtns,.reorderbar{display:none!important} .thtogbtn,.themetog,.zbtn,.sbtog,.mx,.mclose,.task-mclose,.goal-close,.operation-close{ width:44px!important; min-width:44px!important; height:44px!important; min-height:44px!important; border-radius:11px!important; } .thtogbtn svg,.themetog svg{width:18px;height:18px} .addbtn{ min-width:44px; height:44px; padding:0 12px; border-radius:11px; font-size:11px; gap:6px; } .addbtn svg{width:15px;height:15px} .tfbar{ position:relative; z-index:24; width:100%; min-height:46px; padding:7px 12px; gap:6px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; background:#0b0b0d; } .tfbar::-webkit-scrollbar{display:none} .tpill{min-height:32px;padding:0 12px;border-radius:9px;white-space:nowrap} .content{ flex:1; min-height:0; width:100%; padding:12px var(--mobile-gutter) calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom) + 14px); overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; background:#080809; scroll-padding-bottom:calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom) + 18px); } .panel.on{width:100%;min-width:0;min-height:100%} .panel.section-entering{animation:none!important} /* Drawer keeps every permission-aware destination available. */ .sb,.sb.col{ position:fixed; z-index:920; inset:0 auto 0 0; display:flex!important; width:min(86vw,336px)!important; height:100dvh; min-height:0; padding-top:env(safe-area-inset-top); overflow:hidden; border-right:1px solid rgba(255,255,255,.08); background:#0d0d0f; box-shadow:none; transform:translate3d(-104%,0,0); transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease; will-change:transform; } body.mobile-nav-open .sb{ transform:translate3d(0,0,0); box-shadow:24px 0 64px rgba(0,0,0,.6); } .sbh{ display:flex!important; width:100%; height:60px; min-height:60px; align-items:center; padding:0 10px 0 14px; } .brand,.sb.col .brand{display:flex!important;min-width:0;gap:11px} .bicon,.sb.col .bicon{width:30px!important;height:30px!important} .bname,.sb.col .bname{display:block!important;font-size:15px!important;font-weight:600!important} .sbtog,.sb.col .sbtog{display:flex!important;margin-left:auto} .sbtog svg{width:18px;height:18px;transform:none!important} .sbnav{ flex:1; width:100%; min-height:0; padding:4px 10px 112px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .sblabel,.sb.col .sblabel{ display:block!important; padding:18px 10px 8px; color:#5e5e66; font-size:10px; letter-spacing:.12em; } .navbtn,.sb.col .navbtn{ display:flex; width:100%!important; height:48px; min-height:48px; margin:1px 0; padding:0 12px!important; justify-content:flex-start!important; gap:12px; border-radius:10px; } .navbtn.on{background:#19191d;color:#f0f0f3;box-shadow:inset 3px 0 #5963ff} .nvi,.sb.col .nvi{width:20px!important;height:20px!important;flex:0 0 20px} .nvlbl,.sb.col .nvlbl{display:block!important;font-size:14px!important;font-weight:520!important} .nvcnt,.sb.col .nvcnt{display:block!important;margin-left:auto} .nvtip{display:none!important} .sbfoot,.sb.col .sbfoot{ position:absolute; z-index:2; right:0; bottom:0; left:0; display:flex!important; min-height:96px; align-items:center; padding:12px 12px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid rgba(255,255,255,.065); background:#0d0d0f; } .sbaccount,.sb.col .sbaccount{display:flex!important;min-width:0;flex:1} .sbaccount-avatar{width:38px;height:38px} .sbaccount-meta,.sb.col .sbaccount-meta{display:block!important;min-width:0} .sbaccount-name{font-size:13px} .sbfoot-actions,.sb.col .sbfoot-actions{display:flex!important;gap:4px} .sbfoot .themetog{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important} .mobile-nav-scrim{ position:fixed; z-index:910; inset:0; display:block; width:100%; height:100%; padding:0; border:0; background:rgba(0,0,0,.62); opacity:0; pointer-events:none; transition:opacity .2s ease; } body.mobile-nav-open .mobile-nav-scrim{opacity:1;pointer-events:auto} .mobile-tabbar{ position:fixed; z-index:900; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); height:calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom)); padding:6px 8px env(safe-area-inset-bottom); border-top:1px solid rgba(255,255,255,.075); background:#0d0d0f; box-shadow:0 -12px 28px rgba(0,0,0,.32); } .mobile-tabbar>button{ position:relative; display:flex; min-width:0; height:54px; align-items:center; justify-content:center; flex-direction:column; gap:3px; padding:0; border:0; border-radius:11px; background:transparent; color:#717179; font:540 10px/1 'Geist',sans-serif; } .mobile-tabbar>button::before{ position:absolute; top:1px; width:20px; height:2px; border-radius:2px; background:#7078ff; opacity:0; content:""; } .mobile-tabbar>button svg{width:21px;height:21px;flex:0 0 21px} .mobile-tabbar>button.on{color:#afb3ff;background:#151519} .mobile-tabbar>button.on::before{opacity:1} /* Shared mobile collections */ .bgrid,.tgrid{ grid-template-columns:minmax(0,1fr)!important; gap:10px!important; } .pgrid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; } .card,.tcard,.pcard,.ghost,.tgadd{ min-width:0; border-radius:13px!important; box-shadow:none!important; } .card{min-height:0} .cthumb,.cph,.tprev{border-radius:12px 12px 0 0} .cbody{padding:13px 14px 14px} .ctitle{font-size:15px;line-height:1.35} .cprev,.wfprev,.tdesc{font-size:13px;line-height:1.55} .cfoot,.tbtns,.pbtns{ opacity:1!important; visibility:visible!important; transform:none!important; } .cfoot{min-height:54px;padding:5px 8px} .ib,.tb2,.pbtn{ width:44px!important; min-width:44px!important; height:44px!important; min-height:44px!important; border-radius:10px!important; } .ib svg,.tb2 svg,.pbtn svg{width:16px;height:16px} .trow{min-height:64px;padding:10px 11px} .tfav{width:36px;height:36px} .tname{font-size:14px}.tdom{font-size:11px} .pimgw{border-radius:12px;overflow:hidden} .pcheck{top:7px;left:7px;width:32px;height:32px;opacity:1} .pbtns{top:6px;right:6px;gap:3px} .pfoot{padding:7px 5px 4px;min-height:0} .ptags{gap:4px}.ptag{font-size:9px} .ghost,.tgadd{min-height:118px} .empty-state{grid-column:1/-1!important;min-height:260px;padding:28px 18px} /* Menus and feedback behave like mobile surfaces. */ .ctxmenu.on,.ctxmenu.task-quick-menu.on{ position:fixed!important; z-index:1100!important; top:auto!important; right:8px!important; bottom:calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom) + 8px)!important; left:8px!important; width:auto!important; max-width:none!important; max-height:min(72dvh,620px); overflow-x:hidden; overflow-y:auto; padding:7px!important; border-radius:16px!important; border-color:rgba(255,255,255,.09)!important; background:#141416!important; box-shadow:0 24px 70px rgba(0,0,0,.66)!important; } .ctxmenu-item{min-height:46px!important;padding:0 12px!important;border-radius:10px!important;font-size:14px!important} .ctxmenu-icon{width:20px;height:20px}.ctxmenu-icon svg{width:17px;height:17px} .ctxmenu-head{padding:8px 10px 7px;font-size:10px} .selbar{ right:10px!important; bottom:calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom) + 10px)!important; left:10px!important; width:auto!important; min-height:52px; border-radius:14px; } .toast{ right:12px!important; bottom:calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom) + 12px)!important; left:12px!important; width:auto!important; max-width:none!important; min-height:48px; border-radius:13px!important; } .dropov{z-index:1200;padding:16px} .dropinner{width:100%;max-width:360px;min-height:220px;border-radius:18px} /* Dialogs use thumb-reachable bottom sheets. */ .ov,.confov,.newtag-ov,.task-ov,.operations-overlay,.goal-overlay,.workspace-task-overlay{ align-items:flex-end!important; justify-content:center!important; padding:12px 0 0!important; } .modal,.mmod,.confbox,.newtag-box,.task-modal,.operations-modal,.goal-modal,.workspace-task-modal{ width:100%!important; max-width:none!important; max-height:92dvh!important; margin:0!important; overflow:hidden; border-radius:20px 20px 0 0!important; border-right:0!important; border-bottom:0!important; border-left:0!important; background:#111113!important; box-shadow:0 -18px 56px rgba(0,0,0,.62)!important; transform:none!important; } .mh,.operation-modal-head,.goal-modal-head,.workspace-task-editor>header{ min-height:62px; padding:10px 12px 10px 16px!important; } .mhtitle,.operation-modal-head h2,.goal-modal-head h2,.workspace-task-editor>header h2{font-size:19px!important;letter-spacing:-.025em} .mbody,.task-mbody,.operation-editor-body,.goal-editor-body,.goal-detail-body,.workspace-task-editor-body{ padding:16px!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch; } .mfoot,.task-mfoot,.goal-modal-foot,.workspace-task-editor>footer{ min-height:66px; padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important; background:#111113; } .mfoot button,.task-mfoot button,.goal-modal-foot button,.workspace-task-editor>footer button, .bghst,.bsave,.confbox button{min-height:44px!important;border-radius:11px!important} .field input,.field textarea,.field select,.finp,.task-title-inp,.task-notes-inp,.task-link-inp, .operation-field input,.operation-field textarea,.operation-field select,.goal-field input,.goal-field textarea,.goal-field select, .workspace-task-field input,.workspace-task-field textarea,.workspace-task-field select,.workspace-task-link-add input{ min-height:46px; border-radius:11px!important; font-size:16px!important; } .task-date-pop,.workspace-task-date-pop{ position:fixed!important; z-index:1250!important; right:10px!important; bottom:calc(12px + env(safe-area-inset-bottom))!important; left:10px!important; top:auto!important; width:auto!important; max-width:none!important; padding:12px!important; border-radius:16px!important; box-shadow:0 24px 70px rgba(0,0,0,.7)!important; } .task-date-grid button{min-height:42px;border-radius:9px} .task-date-nav{width:44px!important;height:44px!important} /* Workspace pages */ .workspace-shell,.operations-shell.workspace-shell,.crm-shell.workspace-shell,.goals-shell.workspace-shell,.activity-shell.workspace-shell,.analytics-shell.workspace-shell{ width:100%; min-height:100%; height:auto; padding:10px 0 24px!important; overflow:visible; background:#080809!important; } .workspace-header,.operations-header,.crm-header,.goals-header,.activity-header,.analytics-header{ display:flex!important; align-items:flex-start!important; flex-direction:column!important; gap:14px!important; margin:0 2px 18px!important; } .workspace-header h1,.operations-header h1,.crm-header h1,.goals-header h1,.activity-header h1,.analytics-header h1{ font-size:26px!important; line-height:1.08!important; letter-spacing:-.045em!important; } .workspace-header p,.operations-header p,.goals-header p,.activity-header p,.analytics-header p{max-width:34ch;font-size:13px!important;line-height:1.5} .workspace-metrics,.operations-metrics,.activity-metrics,.analytics-metrics{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; width:100%!important; gap:8px!important; } .workspace-metrics>div,.operations-metrics>div,.activity-metrics>div,.analytics-metric{ min-width:0!important; min-height:82px!important; padding:13px!important; border-radius:13px!important; } .workspace-toolbar,.operations-toolbar,.crm-toolbar,.goals-toolbar,.activity-toolbar{ position:sticky!important; z-index:12; top:0; display:flex!important; width:100%!important; align-items:stretch!important; flex-direction:column!important; gap:8px!important; margin:0 0 12px!important; padding:8px 0!important; background:#080809!important; } .workspace-tabs,.operations-tabs,.goals-tabs,.activity-tabs{ display:flex!important; width:100%; min-height:44px; padding:3px; overflow-x:auto; scrollbar-width:none; border-radius:12px!important; } .workspace-tabs::-webkit-scrollbar{display:none} .workspace-tabs button,.operations-tabs button,.goals-tabs button,.activity-tabs button{ min-width:max-content; min-height:38px!important; padding:0 14px!important; border-radius:9px!important; font-size:12px!important; } .workspace-actions,.operations-actions,.goals-actions{ display:grid!important; grid-template-columns:minmax(0,1fr) auto; width:100%; gap:8px!important; } .workspace-search,.operations-search,.goal-search,.activity-search{ width:100%!important; min-width:0!important; height:44px!important; border-radius:11px!important; } .workspace-search input,.operations-search input,.goal-search input,.activity-search input{font-size:16px!important} .workspace-add,.operation-add,.goal-add,.health-refresh{ min-width:44px; height:44px!important; padding:0 12px!important; border-radius:11px!important; } .workspace-content,.operations-content,.crm-content,.activity-content{min-width:0;width:100%} .project-list-head,.crm-directory-head{display:none!important} .project-list,.crm-directory,.clients-grid,.goals-grid,.analytics-primary-grid,.analytics-secondary-grid{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:9px!important; } .project-row,.crm-row,.crm-card,.goal-card,.analytics-card,.activity-event,.trash-row{ min-width:0!important; border-radius:13px!important; box-shadow:none!important; } .project-row,.crm-row{display:flex!important;align-items:flex-start!important;flex-direction:column!important;gap:12px!important;padding:15px!important} .crm-filters,.workspace-subfilters,.activity-filters{ display:flex!important; width:100%; gap:7px!important; margin:0 0 10px!important; overflow-x:auto; scrollbar-width:none; } .crm-filters::-webkit-scrollbar,.workspace-subfilters::-webkit-scrollbar{display:none} .crm-filters label{min-width:150px}.crm-filters select{height:44px;font-size:16px} .crm-pipeline{ display:flex!important; grid-template-columns:none!important; width:calc(100% + var(--mobile-gutter)); gap:10px!important; padding:0 var(--mobile-gutter) 10px 0; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; } .crm-pipeline::-webkit-scrollbar{display:none} .crm-column{ width:84vw!important; min-width:84vw!important; max-width:340px!important; min-height:430px; scroll-snap-align:start; border-radius:14px!important; } .crm-column>header{min-height:52px;padding:0 14px}.crm-pipeline-client{min-height:58px;padding:11px} .goal-card{padding:16px}.goal-card-copy h2{font-size:18px} .activity-event{grid-template-columns:34px minmax(0,1fr)!important;padding:13px 10px!important} .activity-event-line{font-size:13px!important;line-height:1.45!important} .trash-row{display:flex!important;align-items:flex-start!important;flex-direction:column!important;gap:12px!important;padding:14px!important} .analytics-primary-grid,.analytics-secondary-grid{margin-top:9px} .analytics-card{min-height:250px!important;padding:15px!important} /* Tasks: dense native board, swipe lanes, readable editor. */ body[data-tab="tasks"] .content{padding:0 0 calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom))} #panel-tasks,#tasks-root,.tasks-dashboard{width:100%;height:100%;min-height:0} .tasks-dashboard{display:flex;flex-direction:column;overflow:hidden;background:#080809} .task-board-toolbar{ position:sticky!important; z-index:18!important; top:0!important; display:flex!important; min-height:0!important; align-items:stretch!important; flex-direction:column!important; gap:8px!important; padding:9px 12px!important; border-bottom:1px solid rgba(255,255,255,.055)!important; background:#080809!important; box-shadow:none!important; backdrop-filter:none!important; } .task-board-primary,.task-board-controls{display:flex!important;width:100%;min-width:0;align-items:center;gap:6px!important} .task-board-primary{overflow-x:auto;scrollbar-width:none}.task-board-primary::-webkit-scrollbar{display:none} .task-board-controls{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important} .task-view-switch{min-width:max-content;height:50px!important;padding:3px!important;border-radius:12px!important} .task-view-switch button{width:44px!important;height:44px!important;min-width:44px!important;border-radius:9px!important} .tasks-dashboard .task-done-controls{height:46px!important;margin-left:5px!important;padding-left:7px!important} .tasks-dashboard .task-done-mode-toggle,.tasks-dashboard .task-clear-done{height:44px!important;min-height:44px!important;padding:0 10px!important;font-size:10px!important} .workspace-task-filters{ grid-column:1/-1; grid-row:2; display:flex!important; width:100%; height:46px; gap:3px; padding:3px; overflow-x:auto; scrollbar-width:none; border-radius:10px!important; } .workspace-task-filters::-webkit-scrollbar{display:none} .workspace-task-filters button{min-width:max-content;min-height:40px!important;padding:0 12px!important;border-radius:8px!important} .task-board-search{width:100%!important;height:44px!important;margin:0!important;border-radius:11px!important} .task-board-search input{font-size:16px!important} .task-board-new{width:44px!important;min-width:44px!important;height:44px!important;padding:0!important;border-radius:11px!important} .task-board-new span{display:none} .task-board-scroll{ flex:1; width:100%; min-height:0; padding:10px 12px 18px!important; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; } .task-board-grid{ display:flex!important; width:100%!important; max-width:none!important; align-items:stretch!important; flex-direction:column!important; gap:10px!important; } .task-board-column{display:contents!important} .task-board-card{ width:100%!important; min-width:0!important; margin:0!important; break-inside:auto!important; border-radius:14px!important; box-shadow:none!important; } .task-card-header{min-height:56px!important;padding:0 12px!important} .task-card-title-button{min-height:54px!important;font-size:16px!important} .task-card-menu-trigger{width:44px!important;height:44px!important} .workspace-task-row{min-height:52px!important;padding:10px 48px 10px 12px!important;touch-action:pan-y} .workspace-task-check{ position:relative; width:38px!important; min-width:38px!important; height:38px!important; margin:-3px!important; border:0!important; background:transparent!important; box-shadow:none!important; } .workspace-task-check::before{ position:absolute; inset:8px; border:1px solid #35353b; border-radius:6px; background:#151517; content:""; } .workspace-task-check svg{position:relative;z-index:1;width:13px!important;height:13px!important} .workspace-task-row.done .workspace-task-check::before{border-color:#4650e2;background:#1a23ce} .workspace-task-copy{font-size:14px!important;line-height:1.4!important} .workspace-task-row.has-assignees .workspace-task-copy{padding-right:84px!important} .workspace-task-people{right:52px!important;top:10px!important;height:32px!important} .workspace-task-avatar{width:30px!important;height:30px!important;flex-basis:30px!important} .workspace-task-mobile-menu{ position:absolute; z-index:3; top:5px; right:5px; display:grid; width:42px; height:42px; place-items:center; padding:0; border:0; border-radius:10px; background:transparent; color:#6f6f77; } .workspace-task-mobile-menu:active{background:#1b1b1e;color:#d4d4d9} .workspace-task-mobile-menu svg{width:17px;height:17px} .task-board-images{max-width:218px!important} .tasks-dashboard .task-card-add-bar,.tasks-dashboard .task-card-composer.task-card-composer-minimal{ height:48px!important; min-height:48px!important; padding:0 12px!important; border-radius:0 0 13px 13px!important; } .tasks-dashboard .task-card-add-bar{font-size:12px!important} .task-horizontal-rail{ width:100%!important; padding:0 12px 12px!important; gap:10px!important; scroll-padding-left:12px; } .task-horizontal-item{width:88vw!important;min-width:88vw!important;max-width:380px!important;scroll-snap-align:start} .task-list-view.task-list-vertical{display:flex!important;flex-direction:column!important;gap:10px!important} .task-calendar-view{min-width:690px} .task-board-scroll.task-view-calendar{overflow:auto!important;padding:10px 12px 18px!important} .task-calendar-weekdays,.task-calendar-grid{min-width:666px} .workspace-task-modal{height:min(92dvh,820px)!important} .workspace-task-editor{height:100%;display:flex;flex-direction:column} .workspace-task-editor-body{flex:1;min-height:0} .workspace-task-field-grid{grid-template-columns:minmax(0,1fr)!important} .workspace-task-assignees>div{display:flex!important;overflow-x:auto;scrollbar-width:none} .workspace-task-person{min-width:max-content;min-height:44px!important} .workspace-task-priorities>div{grid-template-columns:repeat(3,minmax(0,1fr))!important} .workspace-task-priorities label{min-height:44px} .workspace-task-image-editor{min-height:132px!important} /* Mockup builder becomes a scrollable creation flow. */ body[data-tab="mockups"] .content{padding:0 0 calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom));overflow-y:auto} #panel-mockups,#mockups-root{height:auto!important;min-height:100%!important;overflow:visible!important} .mockups-shell{ display:flex!important; width:100%; height:auto!important; min-height:0!important; align-items:stretch!important; flex-direction:column!important; gap:10px!important; padding:12px!important; overflow:visible!important; } .mockups-shell>*{min-width:0!important;width:100%!important;height:auto!important;max-height:none!important} #mockup-preview-slot{order:-1} #mockup-preview-slot .mockups-panel.preview{min-height:0!important;height:auto!important;overflow:visible!important} .mockups-panel{padding:13px!important;border-radius:14px!important;overflow:visible!important} .mockups-panel-head{min-height:44px!important} .mockups-stage{ flex:0 0 auto!important; width:100%!important; height:auto!important; min-height:0!important; aspect-ratio:1.24/1; padding:8px!important; overflow:hidden!important; border-radius:12px!important; } .mockups-canvas-wrap{width:100%!important;height:100%!important;min-height:0!important;aspect-ratio:auto} .mockups-canvas-frame{max-width:100%!important;max-height:100%!important} .mockups-field input,.mockups-input,.mockups-select,.mockups-search-input,.mockups-video-input{ min-height:46px!important; border-radius:11px!important; font-size:16px!important; } .mockups-upload,.mockups-thumb-input{min-height:128px!important;border-radius:12px!important} .mockups-search-results{ position:relative!important; top:auto!important; width:100%!important; max-height:360px!important; margin-top:6px; border-radius:12px!important; } .mockups-search-result{min-height:58px!important;padding:7px!important} .mockups-setting-toggle,.mockups-mode-option,.mockups-count-option{min-height:44px!important;border-radius:10px!important} .mockups-history-menu{ position:fixed!important; z-index:1120!important; top:auto!important; right:8px!important; bottom:calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom) + 8px)!important; left:8px!important; width:auto!important; max-height:68dvh!important; border-radius:16px!important; } .mockups-preview-actions{position:relative!important;z-index:8;bottom:auto!important;width:100%!important;padding:8px 0 0!important} .mockups-preview-bar{width:100%!important;min-width:0!important;grid-template-columns:44px minmax(0,1fr) minmax(0,1fr)!important;gap:5px!important;padding:5px!important;border-radius:13px!important;background:#141416!important;backdrop-filter:none!important} .mockups-preview-bar .mockups-btn{min-width:0!important;padding:0 8px!important;gap:6px!important;font-size:10px!important} .mockups-preview-bar .mockups-btn svg{width:15px;height:15px} .mockups-export-btn{min-height:44px!important;border-radius:10px!important} /* Home keeps its information hierarchy without desktop-width assumptions. */ .dash{padding:4px 0 24px!important} .home-greeting{display:flex!important;align-items:flex-start!important;flex-direction:column!important;gap:8px!important} .home-greeting h1{font-size:27px!important}.dash-time{font-size:12px!important} .home-summary,.home-insights,.dash-tasks-row,.home-compact-stats,.home-stats-grid{ grid-template-columns:minmax(0,1fr)!important; gap:9px!important; } .home-metric,.home-insight-card,.home-stat{min-height:0!important;border-radius:14px!important;padding:15px!important} #home-dash.home-under-construction,.home-construction-notice{min-height:calc(100dvh - var(--mobile-topbar-height) - var(--mobile-tabbar-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px)!important} .home-construction-notice{padding:10px!important} .home-construction-card{width:100%!important;padding:24px 20px!important;border-radius:16px!important} /* Lightbox fills the screen cleanly on touch devices. */ .lbox{padding:calc(54px + env(safe-area-inset-top)) 0 calc(62px + env(safe-area-inset-bottom))} .limg-wrap{width:100%;height:100%;padding:8px} .limg{max-width:100%;max-height:100%;border-radius:10px} .lclose{top:calc(8px + env(safe-area-inset-top));right:8px;width:44px;height:44px} .lnav{display:none!important} .lcounter{bottom:calc(18px + env(safe-area-inset-bottom))} } @media(max-width:360px){ .pgrid{grid-template-columns:minmax(0,1fr)!important} .mobile-tabbar>button{font-size:9px} .mobile-tabbar>button svg{width:20px;height:20px} .workspace-metrics,.operations-metrics,.activity-metrics,.analytics-metrics{grid-template-columns:minmax(0,1fr)!important} .addbtn{padding:0 10px;font-size:10px} } @media(max-width:900px) and (orientation:landscape) and (max-height:520px){ :root{--mobile-tabbar-height:58px} .mobile-tabbar{padding-top:3px}.mobile-tabbar>button{height:48px} .mobile-tabbar>button span{display:none} .modal,.mmod,.confbox,.newtag-box,.task-modal,.operations-modal,.goal-modal,.workspace-task-modal{max-height:96dvh!important} } /* 2026-09-02 v3: stable task-view order and grouped ownership lanes */ .task-person-folder{ --task-tone:79,98,255; padding:5px 0 3px; border-bottom:1px solid rgba(255,255,255,.055); } .task-person-folder:last-child{border-bottom:0} .task-person-folder.tone-blue{--folder-tone:#4f62ff;--task-tone:79,98,255} .task-person-folder.tone-sky{--folder-tone:#2498ff;--task-tone:36,152,255} .task-person-folder.tone-teal{--folder-tone:#19b8ad;--task-tone:25,184,173} .task-person-folder.tone-green{--folder-tone:#31c876;--task-tone:49,200,118} .task-person-folder.tone-slate{--folder-tone:#8a91a2;--task-tone:138,145,162} .task-person-folder.tone-amber{--folder-tone:#e3b33c;--task-tone:227,179,60} .task-person-folder.tone-orange{--folder-tone:#f0833c;--task-tone:240,131,60} .task-person-folder.tone-red{--folder-tone:#ef5363;--task-tone:239,83,99} .task-person-folder.tone-pink{--folder-tone:#e75ba8;--task-tone:231,91,168} .task-person-folder.tone-violet{--folder-tone:#9b6ef3;--task-tone:155,110,243} .task-person-folder>header{ display:grid; min-height:28px; align-items:center; grid-template-columns:7px minmax(0,1fr) auto; gap:8px; padding:3px 8px 4px; } .task-person-folder-tone{width:7px;height:7px;border-radius:50%;background:var(--folder-tone);box-shadow:0 0 0 3px rgba(var(--task-tone),.07)} .task-person-folder>header strong{overflow:hidden;color:#aaaab0;font-size:9px;font-weight:610;letter-spacing:.01em;text-overflow:ellipsis;white-space:nowrap} .task-person-folder>header small{color:#5f5f66;font-size:8px;font-weight:550} .task-person-folder-tasks .workspace-task-row{border:0;border-top:1px solid rgba(255,255,255,.035)} .task-person-folder-tasks .workspace-task-people{display:none} @media(max-width:760px){ .task-person-folder>header{min-height:34px;padding:5px 8px} .task-person-folder>header strong{font-size:11px} .task-person-folder>header small{font-size:9px} } /* 2026-09-02 v2: align desktop thumbnail actions with prompt cards */ @media(hover:hover) and (pointer:fine) and (min-width:761px){ #grid-thumbs .pbtns.cfoot{ top:8px; right:8px; align-items:center; gap:4px; padding:0; } #grid-thumbs .pbtns.cfoot .pbtn{ width:27px; height:27px; border:1px solid rgba(255,255,255,.065); border-radius:6px; background:rgba(18,18,19,.94); color:#a0a0a5; box-shadow:0 8px 18px rgba(0,0,0,.32); backdrop-filter:none; } #grid-thumbs .pbtns.cfoot .pbtn svg{width:11px;height:11px} #grid-thumbs .pbtns.cfoot .pbtn:hover, #grid-thumbs .pbtns.cfoot .pbtn:focus-visible{ background:#29292a; color:#f5f5f6; outline:none; } #grid-thumbs .pbtns.cfoot .pbtn:focus-visible{box-shadow:0 0 0 2px rgba(112,120,255,.62),0 8px 18px rgba(0,0,0,.32)} #grid-thumbs .pbtns.cfoot .pbtn.dl:hover, #grid-thumbs .pbtns.cfoot .pbtn.dl:focus-visible{ background:rgba(196,62,68,.2); color:#ef7b81; } body.light #grid-thumbs .pbtns.cfoot .pbtn{ border-color:rgba(16,16,20,.08); background:rgba(255,255,255,.94)!important; color:#505056!important; box-shadow:0 7px 18px rgba(20,20,28,.16); } body.light #grid-thumbs .pbtns.cfoot .pbtn:hover, body.light #grid-thumbs .pbtns.cfoot .pbtn:focus-visible{background:#f0f0f2!important;color:#111114!important} body.light #grid-thumbs .pbtns.cfoot .pbtn.dl:hover, body.light #grid-thumbs .pbtns.cfoot .pbtn.dl:focus-visible{background:#fae7e8!important;color:#b4373d!important} } /* 2026-09-02 v4: full scheduling calendar */ .task-board-scroll.task-view-calendar{ min-height:0!important; padding:14px 16px 22px!important; overflow:auto!important; background:#000!important; } .task-calendar-view{display:flex!important;width:100%!important;max-width:none!important;height:auto!important;min-height:100%!important;margin:0!important;flex-direction:column!important} .task-calendar-head{ display:grid!important; min-height:58px!important; align-items:center!important; grid-template-columns:minmax(220px,1fr) auto auto; gap:14px!important; padding:0 2px 12px!important; flex:0 0 auto!important; } .task-calendar-period{display:flex!important;min-width:0;align-items:baseline!important;gap:10px!important} .task-calendar-period strong{overflow:hidden;color:#ececef!important;font-size:18px!important;font-weight:590!important;letter-spacing:-.025em;text-overflow:ellipsis;white-space:nowrap} .task-calendar-period span{color:#74747b!important;font-size:10px!important;font-weight:480} .task-calendar-mode-switch{display:flex;height:34px;align-items:center;gap:2px;padding:3px;border:1px solid rgba(255,255,255,.075);border-radius:8px;background:#101011} .task-calendar-mode-switch button{height:26px!important;padding:0 11px!important;border:0!important;border-radius:6px!important;background:transparent!important;color:#67676f!important;font:540 9px/1 'Geist',sans-serif;cursor:pointer;transition:background-color .14s ease,color .14s ease} .task-calendar-mode-switch button:hover{color:#c9c9ce!important}.task-calendar-mode-switch button.on{background:#232326!important;color:#f0f0f2!important} .task-calendar-nav{display:flex!important;align-items:center!important;gap:4px!important} .task-calendar-nav button{display:grid!important;width:34px!important;height:34px!important;place-items:center;padding:0!important;border:1px solid rgba(255,255,255,.075)!important;border-radius:8px!important;background:#101011!important;color:#77777f!important;cursor:pointer;transition:border-color .14s ease,background-color .14s ease,color .14s ease} .task-calendar-nav button:hover{border-color:rgba(255,255,255,.14)!important;background:#18181a!important;color:#e4e4e7!important}.task-calendar-nav button svg{width:13px!important;height:13px!important} .task-calendar-nav .task-calendar-today{width:auto!important;padding:0 12px!important;font:540 9px/1 'Geist',sans-serif!important} .task-calendar-layout{display:flex;min-height:0;align-items:flex-start;gap:12px} .task-calendar-main{min-width:0;flex:1} .task-calendar-scroll{display:block!important;width:100%;min-height:0!important;overflow:auto!important;border:1px solid rgba(255,255,255,.085)!important;border-radius:11px!important;background:#0b0b0c!important;box-shadow:0 14px 34px rgba(0,0,0,.22)!important;scrollbar-width:thin;scrollbar-color:#303034 transparent} .task-calendar-scroll::-webkit-scrollbar{width:7px;height:7px}.task-calendar-scroll::-webkit-scrollbar-thumb{border-radius:8px;background:#303034} .task-calendar-weekdays,.task-calendar-grid{display:grid!important;width:100%!important;min-width:1050px!important;grid-template-columns:repeat(7,minmax(150px,1fr))!important} .task-calendar-weekdays{position:sticky;z-index:3;top:0;height:36px!important;border-bottom:1px solid rgba(255,255,255,.07);background:#111112!important} .task-calendar-weekdays span{display:flex!important;align-items:center!important;padding:0 12px!important;color:#82828a!important;font-size:10px!important;font-style:normal;font-weight:590!important;letter-spacing:.045em;text-transform:uppercase} .task-calendar-weekdays span em{display:none}.task-calendar-weekdays span b{font:inherit} .task-calendar-grid{grid-template-rows:none!important} .task-calendar-day{min-width:0!important;min-height:196px!important;padding:8px!important;overflow:hidden!important;border-right:1px solid rgba(255,255,255,.055)!important;border-bottom:1px solid rgba(255,255,255,.055)!important;background:#0e0e0f!important;cursor:pointer;transition:background-color .13s ease,box-shadow .13s ease} .task-calendar-day:hover{background:#111113!important}.task-calendar-day:nth-child(7n){border-right:0!important}.task-calendar-day.outside{background:#0a0a0b!important;opacity:.52!important}.task-calendar-day.today{background:rgba(26,35,206,.045)!important;box-shadow:inset 0 0 0 1px rgba(75,87,235,.24)!important}.task-calendar-day.selected{position:relative;z-index:1;background:#121216!important;box-shadow:inset 0 0 0 1px rgba(85,98,255,.55)!important} .task-calendar-day>header{display:flex!important;height:30px!important;align-items:flex-start!important;justify-content:space-between!important} .task-calendar-date{display:flex!important;height:26px!important;min-width:0;align-items:center;gap:7px;padding:0!important;border:0!important;background:transparent!important;color:inherit;cursor:pointer} .task-calendar-mobile-date{display:none} .task-calendar-date time{display:grid!important;width:25px!important;height:25px!important;place-items:center;border-radius:7px!important;color:#9a9aa1!important;font-size:11px!important;font-weight:600!important} .task-calendar-date>span:last-child{overflow:hidden;color:#6d6d75;font-size:9px;font-weight:520;text-overflow:ellipsis;white-space:nowrap} .task-calendar-day.today .task-calendar-date time{background:#1a23ce!important;color:#f4f5ff!important}.task-calendar-day.selected .task-calendar-date time{color:#dfe1ff!important} .task-calendar-add{display:grid!important;width:25px!important;height:25px!important;place-items:center;padding:0!important;border:0!important;border-radius:6px!important;background:transparent!important;color:#56565e!important;cursor:pointer;opacity:0;transition:opacity .13s ease,background-color .13s ease,color .13s ease} .task-calendar-day:hover .task-calendar-add,.task-calendar-add:focus-visible{opacity:1}.task-calendar-add:hover{background:#222225!important;color:#d6d6da!important}.task-calendar-add svg{width:11px!important;height:11px!important} .task-calendar-day-tasks{display:flex!important;min-height:0!important;flex-direction:column!important;gap:4px!important;padding:2px 0 0!important;overflow:hidden!important} .task-calendar-chip{--task-tone:79,98,255;position:relative;display:flex!important;width:100%!important;min-width:0!important;min-height:46px!important;align-items:stretch!important;padding:0!important;overflow:hidden;border:1px solid rgba(var(--task-tone),.22)!important;border-radius:7px!important;background:rgba(var(--task-tone),.08)!important;color:#dedee2!important;text-align:left;transition:border-color .13s ease,background-color .13s ease,opacity .13s ease} .task-calendar-chip::before{width:2px;flex:0 0 2px;background:rgb(var(--task-tone));content:"";opacity:.8} .task-calendar-chip.tone-blue,.task-calendar-focus-group.tone-blue{--folder-tone:#4f62ff;--task-tone:79,98,255}.task-calendar-chip.tone-sky,.task-calendar-focus-group.tone-sky{--folder-tone:#2498ff;--task-tone:36,152,255}.task-calendar-chip.tone-teal,.task-calendar-focus-group.tone-teal{--folder-tone:#19b8ad;--task-tone:25,184,173}.task-calendar-chip.tone-green,.task-calendar-focus-group.tone-green{--folder-tone:#31c876;--task-tone:49,200,118}.task-calendar-chip.tone-slate,.task-calendar-focus-group.tone-slate{--folder-tone:#8a91a2;--task-tone:138,145,162}.task-calendar-chip.tone-amber,.task-calendar-focus-group.tone-amber{--folder-tone:#e3b33c;--task-tone:227,179,60}.task-calendar-chip.tone-orange,.task-calendar-focus-group.tone-orange{--folder-tone:#f0833c;--task-tone:240,131,60}.task-calendar-chip.tone-red,.task-calendar-focus-group.tone-red{--folder-tone:#ef5363;--task-tone:239,83,99}.task-calendar-chip.tone-pink,.task-calendar-focus-group.tone-pink{--folder-tone:#e75ba8;--task-tone:231,91,168}.task-calendar-chip.tone-violet,.task-calendar-focus-group.tone-violet{--folder-tone:#9b6ef3;--task-tone:155,110,243} .task-calendar-chip:hover{border-color:rgba(var(--task-tone),.36)!important;background:rgba(var(--task-tone),.1)!important;color:#f2f2f4!important}.task-calendar-chip.done{opacity:.46} .task-calendar-chip[draggable="true"]{cursor:grab}.task-calendar-chip.is-calendar-dragging{opacity:.28!important;cursor:grabbing}.task-calendar-day.is-calendar-drop,.task-calendar-week-day.is-calendar-drop{position:relative;z-index:2;background:rgba(26,35,206,.075)!important;box-shadow:inset 0 0 0 2px rgba(91,103,255,.62)!important} .task-calendar-chip-main{display:flex!important;min-width:0;min-height:44px;align-items:center;gap:7px;flex:1;padding:5px 6px 5px 8px!important;border:0!important;background:transparent!important;color:inherit!important;text-align:left;cursor:pointer} .task-calendar-chip-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px} .task-calendar-chip-title{display:flex!important;min-width:0;align-items:center!important;gap:4px!important;color:inherit;font-size:12px!important;font-weight:490!important;line-height:1.25} .task-calendar-chip-title>span:last-child{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.task-calendar-chip.done .task-calendar-chip-title>span:last-child{text-decoration:line-through} .task-calendar-chip-list{display:flex;min-width:0;align-items:center;gap:4px;overflow:hidden;color:#8a8a92;font-size:9.5px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}.task-calendar-chip-list i{width:5px;height:5px;flex:0 0 auto;border-radius:50%;background:var(--folder-tone)} .task-calendar-chip .workspace-task-priority-icon{display:grid!important;width:11px!important;height:14px!important;place-items:center!important;flex:0 0 11px}.task-calendar-chip .workspace-task-priority-icon svg{width:10px!important;height:10px!important}.task-calendar-chip .workspace-task-priority-icon.high{color:#d5aa43}.task-calendar-chip .workspace-task-priority-icon.urgent{color:#ef5967}.task-calendar-chip.priority-urgent .task-calendar-chip-title{color:#ef7a84} .task-calendar-people{display:flex!important;min-width:22px!important;align-items:center!important;justify-content:flex-end!important;flex:0 0 auto;gap:1px!important}.task-calendar-people .workspace-task-avatar{display:block!important;width:21px!important;height:21px!important;margin:0!important;flex:0 0 21px!important;border:1.5px solid #171719!important;font-size:6px!important}.task-calendar-people i{display:grid;width:21px;height:21px;margin:0;place-items:center;border:1.5px solid #171719;border-radius:50%;background:#252528;color:#aaaab0;font-size:6px;font-style:normal} .task-calendar-more{display:flex!important;width:100%;height:23px!important;align-items:center;padding:0 7px!important;border:0!important;border-radius:5px!important;background:transparent!important;color:#6d6d75!important;font:520 8px/1 'Geist',sans-serif!important;text-align:left;cursor:pointer;pointer-events:auto!important}.task-calendar-more:hover{background:#18181a!important;color:#c3c3c8!important} .task-calendar-week-grid{display:grid;min-width:1120px;grid-template-columns:repeat(7,minmax(160px,1fr));align-items:stretch} .task-calendar-week-day{min-width:0;min-height:600px;border-right:1px solid rgba(255,255,255,.06);background:#0e0e0f}.task-calendar-week-day:last-child{border-right:0}.task-calendar-week-day.today{background:rgba(26,35,206,.035)}.task-calendar-week-day.selected{box-shadow:inset 0 0 0 1px rgba(85,98,255,.42)} .task-calendar-week-day>header{display:grid;height:58px;align-items:center;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;padding:0 10px;border-bottom:1px solid rgba(255,255,255,.055);cursor:default}.task-calendar-week-day>header>div{display:flex;min-width:0;align-items:center;gap:8px}.task-calendar-week-day>header span{color:#6d6d75;font-size:8px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.task-calendar-week-day>header time{display:grid;width:29px;height:29px;place-items:center;border-radius:8px;color:#c5c5ca;font-size:12px;font-weight:590}.task-calendar-week-day.today>header time{background:#1a23ce;color:#f3f4ff}.task-calendar-week-day>header small{color:#5f5f66;font-size:8px}.task-calendar-week-day>header>button{display:grid;width:28px;height:28px;place-items:center;padding:0;border:0;border-radius:7px;background:transparent;color:#55555d;cursor:pointer;opacity:0}.task-calendar-week-day:hover>header>button,.task-calendar-week-day>header>button:focus-visible{opacity:1}.task-calendar-week-day>header>button:hover{background:#222225;color:#d6d6da}.task-calendar-week-day>header>button svg{width:11px;height:11px} .task-calendar-week-tasks{display:flex;flex-direction:column;gap:6px;padding:8px}.task-calendar-week .task-calendar-chip{min-height:62px!important}.task-calendar-week .task-calendar-chip-main{min-height:60px;padding:8px!important}.task-calendar-week .task-calendar-chip-title{font-size:12px!important;line-height:1.35}.task-calendar-week .task-calendar-chip-title>span:last-child{display:-webkit-box;overflow:hidden!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal!important}.task-calendar-week .task-calendar-chip-list{font-size:9.5px}.task-calendar-week-empty{display:flex;width:100%;height:44px;align-items:center;justify-content:center;border:1px dashed rgba(255,255,255,.055);border-radius:7px;background:transparent;color:#5f5f66;font:500 9px/1 'Geist',sans-serif;cursor:pointer}.task-calendar-week-empty:hover{border-color:rgba(255,255,255,.1);color:#85858c} .task-calendar-chip-check{display:grid;width:34px;min-width:34px;place-items:center;padding:0;border:0;border-left:1px solid rgba(var(--task-tone),.11);background:transparent;color:#5f5f67;cursor:pointer}.task-calendar-chip-check:hover{background:rgba(var(--task-tone),.08);color:#cfd0d5}.task-calendar-chip-check svg{width:13px;height:13px}.task-calendar-chip.done .task-calendar-chip-check{color:var(--folder-tone)} .task-calendar-focus{position:sticky;top:0;display:flex;width:350px;min-width:350px;max-height:calc(100dvh - 172px);overflow:hidden;flex-direction:column;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:#101011;box-shadow:0 20px 50px rgba(0,0,0,.34)} .task-calendar-focus-scrim{display:none} .task-calendar-focus>header{display:flex;min-height:72px;align-items:flex-start;justify-content:space-between;gap:12px;padding:13px 13px 11px;border-bottom:1px solid rgba(255,255,255,.06);background:#131314}.task-calendar-focus>header>div{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:2px 8px}.task-calendar-focus>header span{grid-column:1/-1;color:#6d75ef;font-size:8px;font-weight:620;letter-spacing:.07em;text-transform:uppercase}.task-calendar-focus>header strong{color:#ededf0;font-size:16px;font-weight:590;letter-spacing:-.02em}.task-calendar-focus>header small{color:#66666d;font-size:8px}.task-calendar-focus>header>button{display:grid;width:30px;height:30px;place-items:center;padding:0;border:0;border-radius:7px;background:transparent;color:#66666d;cursor:pointer}.task-calendar-focus>header>button:hover{background:#222225;color:#dedee1}.task-calendar-focus>header svg{width:12px;height:12px} .task-calendar-focus-body{min-height:120px;padding:5px 9px 10px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#303034 transparent}.task-calendar-focus-group{--task-tone:79,98,255;padding:8px 0 4px}.task-calendar-focus-group+ .task-calendar-focus-group{border-top:1px solid rgba(255,255,255,.05)}.task-calendar-focus-group h3{display:flex;height:25px;align-items:center;gap:7px;margin:0;padding:0 4px;color:#9c9ca3;font-size:9px;font-weight:580}.task-calendar-focus-group h3>i{width:6px;height:6px;border-radius:50%;background:var(--folder-tone)}.task-calendar-focus-group h3>span{margin-left:auto;color:#56565d;font-size:8px}.task-calendar-focus-group>div{display:flex;flex-direction:column;gap:5px}.task-calendar-focus .task-calendar-chip{min-height:58px!important}.task-calendar-focus .task-calendar-chip-main{min-height:56px;padding:7px 8px!important}.task-calendar-focus .task-calendar-chip-title{font-size:11px!important}.task-calendar-focus .task-calendar-chip-title>span:last-child{white-space:normal!important}.task-calendar-focus-empty{display:flex;min-height:170px;align-items:center;justify-content:center;flex-direction:column;gap:5px;color:#55555c}.task-calendar-focus-empty strong{color:#909097;font-size:11px;font-weight:560}.task-calendar-focus-empty span{font-size:9px} .task-calendar-focus>footer{padding:8px;border-top:1px solid rgba(255,255,255,.055)}.task-calendar-focus>footer button{display:flex;width:100%;height:40px;align-items:center;justify-content:center;gap:7px;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:#171719;color:#bcbcc2;font:550 9px/1 'Geist',sans-serif;cursor:pointer}.task-calendar-focus>footer button:hover{border-color:rgba(79,91,235,.35);background:#1a1a1d;color:#f0f0f3}.task-calendar-focus>footer svg{width:13px;height:13px;color:#7f87f4} @media(max-width:1500px){ .task-calendar-head{grid-template-columns:minmax(170px,1fr) auto auto} .task-calendar-period span{display:none!important} .task-calendar-focus{position:fixed;z-index:46;top:96px;right:14px;bottom:14px;max-height:none;box-shadow:0 28px 80px rgba(0,0,0,.72)} .task-calendar-focus-scrim{position:fixed;z-index:45;inset:0;display:block;border:0;background:rgba(0,0,0,.36);cursor:default} } @media(max-width:760px){ .task-board-scroll.task-view-calendar{height:auto!important;min-height:0!important;padding:10px 12px calc(22px + var(--mobile-tabbar-height) + env(safe-area-inset-bottom))!important;overflow:auto!important} .task-calendar-view{width:calc(100vw - 24px)!important;min-width:0!important;max-width:calc(100vw - 24px)!important;min-height:0!important;overflow:hidden!important} .task-calendar-head{display:grid!important;width:100%!important;max-width:100%!important;min-height:96px!important;box-sizing:border-box;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:44px 42px!important;gap:6px!important;padding:0 0 10px!important} .task-calendar-period{grid-column:1;grid-row:1}.task-calendar-period strong{font-size:17px!important}.task-calendar-period span{display:none!important} .task-calendar-mode-switch{grid-column:1;grid-row:2;justify-self:start;width:max-content;height:38px}.task-calendar-mode-switch button{height:30px!important;min-width:62px;font-size:10px} .task-calendar-nav{grid-column:1;grid-row:2;align-self:center;justify-self:end}.task-calendar-nav button{width:40px!important;height:40px!important;border-radius:10px!important}.task-calendar-nav .task-calendar-today{width:auto!important;padding-inline:9px!important;font-size:9px!important} .task-calendar-layout{display:block;width:100%!important;max-width:100%!important}.task-calendar-main,.task-calendar-scroll{width:100%!important;max-width:100%!important}.task-calendar-scroll{margin:0!important;border-radius:11px!important} .task-calendar-month .task-calendar-weekdays{display:grid!important;height:30px!important;min-width:0!important;grid-template-columns:repeat(7,minmax(0,1fr))!important}.task-calendar-weekdays span{justify-content:center!important;padding:0!important;font-size:7px!important}.task-calendar-weekdays span b{display:block}.task-calendar-weekdays span em{display:none} .task-calendar-month .task-calendar-grid{display:grid!important;min-width:0!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;grid-template-rows:none!important} .task-calendar-month .task-calendar-day{position:relative;min-height:52px!important;padding:3px!important;overflow:visible!important}.task-calendar-month .task-calendar-day>header{height:45px!important;align-items:center!important;justify-content:center!important}.task-calendar-month .task-calendar-date{height:44px!important;justify-content:center!important}.task-calendar-month .task-calendar-date time{width:32px!important;height:32px!important;font-size:11px!important}.task-calendar-month .task-calendar-date>span:last-child{position:absolute;right:4px;bottom:3px;width:5px;height:5px;overflow:hidden;border-radius:50%;background:#737bf0;color:transparent;font-size:0}.task-calendar-month .task-calendar-date>span:last-child:empty{display:none}.task-calendar-mobile-date,.task-calendar-month .task-calendar-add,.task-calendar-month .task-calendar-day-tasks{display:none!important} .task-calendar-week-grid{display:flex;min-width:0;flex-direction:column}.task-calendar-week-day{min-height:0;border-right:0;border-bottom:1px solid rgba(255,255,255,.06)}.task-calendar-week-day:last-child{border-bottom:0}.task-calendar-week-day>header{height:56px;padding:0 12px}.task-calendar-week-day>header>button{width:40px;height:40px;opacity:1}.task-calendar-week-day>header time{width:34px;height:34px;font-size:13px}.task-calendar-week-day>header span{font-size:9px}.task-calendar-week-tasks{gap:7px;padding:9px 10px 12px}.task-calendar-week .task-calendar-chip{min-height:64px!important}.task-calendar-week-empty{height:46px;font-size:9px} .task-calendar-chip-title{font-size:12px!important}.task-calendar-chip-list{font-size:9px}.task-calendar-people .workspace-task-avatar{width:24px!important;height:24px!important;flex-basis:24px!important} .task-calendar-focus-scrim{z-index:1149;background:rgba(0,0,0,.58)}.task-calendar-focus{position:fixed;z-index:1150;top:auto;right:8px;bottom:calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom) + 8px);left:8px;width:auto;min-width:0;max-height:72dvh;border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.78)}.task-calendar-focus>header{min-height:78px;padding:14px 15px 12px}.task-calendar-focus>header>button{width:40px;height:40px;border-radius:10px}.task-calendar-focus-body{padding:6px 10px 12px}.task-calendar-focus>footer{padding:9px}.task-calendar-focus>footer button{height:46px;border-radius:10px;font-size:11px} } @media(prefers-reduced-motion:reduce){.task-calendar-chip,.task-calendar-day,.task-calendar-mode-switch button,.task-calendar-nav button{transition:none!important}} /* 2026-09-02 v5: fitted calendar and shared task controls */ .task-board-controls>.task-done-controls{ height:34px; margin:0 2px 0 0; padding:0 9px 0 0; border-left:0; border-right:1px solid rgba(255,255,255,.075); } .task-board-controls>.task-done-controls .task-done-mode-toggle, .task-board-controls>.task-done-controls .task-clear-done{height:30px;padding-inline:8px;font-size:9px} .task-board-controls>.task-done-controls .task-clear-done:disabled{opacity:.38;pointer-events:none} .task-calendar-mode-switch{ display:grid!important; width:146px!important; min-width:146px!important; height:40px!important; box-sizing:border-box; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px!important; padding:3px!important; border-radius:10px!important; flex:0 0 146px; } .task-calendar-mode-switch button{ width:100%!important; min-width:0!important; height:32px!important; padding:0!important; border-radius:7px!important; font-size:10px!important; overflow:visible!important; } .task-calendar-mode-switch button.on{background:#26262a!important;box-shadow:0 1px 2px rgba(0,0,0,.32)!important} .task-board-scroll.task-view-calendar{ display:flex!important; height:auto!important; min-height:0!important; flex:1 1 auto!important; padding:12px 16px 16px!important; overflow:hidden!important; } .task-calendar-view{height:100%!important;min-height:0!important} .task-calendar-head{min-height:52px!important;padding-bottom:10px!important} .task-calendar-layout{min-height:0!important;align-items:stretch!important;flex:1!important;overflow:hidden!important} .task-calendar-main{display:flex;min-height:0;height:100%;flex:1} .task-calendar-month{ display:grid!important; min-height:0!important; height:100%!important; grid-template-rows:36px minmax(0,1fr); overflow:hidden!important; } .task-calendar-month .task-calendar-weekdays{position:relative!important;top:auto!important} .task-calendar-month .task-calendar-grid{ min-height:0!important; height:100%!important; grid-template-rows:repeat(var(--calendar-rows,6),minmax(0,1fr))!important; overflow:hidden!important; } .task-calendar-month .task-calendar-day{ min-height:0!important; height:auto!important; cursor:default!important; } .task-calendar-month .task-calendar-date{cursor:default} .task-calendar-month .task-calendar-activity{display:none} .task-calendar-month .task-calendar-day-tasks{ min-height:0!important; max-height:calc(100% - 30px); padding-right:2px!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:transparent transparent; } .task-calendar-month .task-calendar-day:hover .task-calendar-day-tasks{scrollbar-color:#35353a transparent} .task-calendar-month .task-calendar-day-tasks::-webkit-scrollbar{width:4px} .task-calendar-month .task-calendar-day-tasks::-webkit-scrollbar-thumb{border-radius:4px;background:transparent} .task-calendar-month .task-calendar-day:hover .task-calendar-day-tasks::-webkit-scrollbar-thumb{background:#35353a} .task-calendar-week{height:100%!important} .task-calendar-week-day>header{grid-template-columns:minmax(0,1fr) auto} .task-calendar-week-day>header>button{grid-column:2} @media(max-width:900px) and (min-width:761px){ .task-board-scroll.task-view-calendar{padding-top:10px!important} .task-calendar-head{grid-template-columns:minmax(150px,1fr) auto auto!important;gap:8px!important} .task-calendar-mode-switch{width:132px!important;min-width:132px!important;flex-basis:132px} } @media(max-width:760px){ .task-board-toolbar{flex:0 0 auto!important} .task-board-controls{ min-height:96px!important; grid-template-columns:auto minmax(0,1fr) auto!important; grid-template-rows:44px 46px!important; align-items:center!important; gap:6px!important; flex:0 0 auto!important; } .task-board-controls>.task-done-controls{ grid-column:1!important; grid-row:2!important; justify-self:start; height:44px!important; margin:0!important; padding:0!important; border:0!important; } .task-board-controls>.task-done-controls .task-done-mode-toggle, .task-board-controls>.task-done-controls .task-clear-done{height:40px!important;min-height:40px!important;padding-inline:8px!important;font-size:10px!important} .task-board-controls>.workspace-task-filters{grid-column:2/4!important;grid-row:2!important;width:100%!important} .task-board-controls>.task-board-search{grid-column:1/3!important;grid-row:1!important} .task-board-controls>.task-board-new{grid-column:3!important;grid-row:1!important} .task-board-scroll.task-view-calendar{display:block!important;height:auto!important;padding:10px 12px calc(22px + var(--mobile-tabbar-height) + env(safe-area-inset-bottom))!important;overflow:auto!important} .task-calendar-view{height:auto!important;overflow:hidden!important} .task-calendar-layout,.task-calendar-main{display:block!important;height:auto!important;overflow:visible!important} .task-calendar-mode-switch{width:134px!important;min-width:134px!important;height:40px!important;flex-basis:134px} .task-calendar-mode-switch button{height:32px!important;font-size:10px!important} .task-calendar-month{display:block!important;height:auto!important;overflow:hidden!important} .task-calendar-month .task-calendar-grid{height:auto!important;grid-template-rows:none!important} .task-calendar-month .task-calendar-day{height:auto!important;cursor:pointer!important} .task-calendar-month .task-calendar-date{cursor:pointer} .task-calendar-month .task-calendar-activity{display:block!important} .task-calendar-month .task-calendar-day-tasks{display:none!important} .task-calendar-week{height:auto!important} } /* 2026-09-02 v6: compact month tasks and full-height week */ .task-calendar-month .task-calendar-chip.is-compact{min-height:32px!important} .task-calendar-month .task-calendar-chip.is-compact .task-calendar-chip-main{ min-height:30px!important; gap:5px!important; padding:4px 5px 4px 7px!important; } .task-calendar-month .task-calendar-chip.is-compact .task-calendar-chip-copy{gap:0} .task-calendar-month .task-calendar-chip.is-compact .task-calendar-chip-title{font-size:11px!important;line-height:1.15!important} .task-calendar-month .task-calendar-chip.is-compact .task-calendar-people{min-width:18px!important} .task-calendar-month .task-calendar-chip.is-compact .task-calendar-people .workspace-task-avatar, .task-calendar-month .task-calendar-chip.is-compact .task-calendar-people i{ width:18px!important; height:18px!important; flex-basis:18px!important; } .task-calendar-week-grid{height:100%;min-height:0} .task-calendar-week-day{height:100%;min-height:0;overflow:hidden} .task-calendar-week-tasks{ height:calc(100% - 58px); min-height:0; box-sizing:border-box; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#303034 transparent; } .task-calendar-week-tasks:empty{padding:0} @media(max-width:760px){ .task-calendar-week-grid{height:auto!important;min-height:0!important} .task-calendar-week-day{height:auto!important;min-height:0!important;overflow:visible!important} .task-calendar-week-tasks{height:auto!important;min-height:0!important;overflow:visible!important} } /* 2026-09-03 v1: personal home workspace */ body[data-tab="home"] .content{padding:0;overflow-y:auto;background:#080809} #home-dash{position:relative;min-height:100%;isolation:isolate;overflow:hidden;background:#080809} #home-dash::before{position:absolute;z-index:-2;inset:0;content:"";background:radial-gradient(900px 540px at 17% -7%,rgba(35,47,219,.2),transparent 65%),radial-gradient(720px 470px at 93% 16%,rgba(60,72,176,.1),transparent 68%),linear-gradient(180deg,#0a0a0c 0,#080809 55%,#070708 100%);pointer-events:none} #home-dash::after{position:absolute;z-index:-1;top:-150px;left:10%;width:460px;height:330px;border:1px solid rgba(103,114,255,.1);border-radius:50%;content:"";filter:blur(1px);opacity:.55;transform:rotate(-8deg);pointer-events:none} .home-workspace{width:min(1480px,100%);min-height:100%;margin:0 auto;padding:clamp(27px,3vw,48px) clamp(22px,3.4vw,54px) 48px;color:#eeeef1} .home-welcome{display:flex;min-height:102px;align-items:flex-start;justify-content:space-between;gap:28px;margin-bottom:22px;padding:0 2px} .home-welcome-copy{min-width:0}.home-eyebrow{display:flex;align-items:center;gap:8px;color:#74747d;font-size:10px;font-weight:620;letter-spacing:.045em}.home-eyebrow i{width:6px;height:6px;border-radius:50%;background:#5360f4;box-shadow:0 0 0 4px rgba(83,96,244,.1)} .home-welcome h1{margin:13px 0 0;color:#f4f4f6;font-size:clamp(28px,2.4vw,38px);font-weight:590;line-height:1.05;letter-spacing:-.04em}.home-welcome p{margin:9px 0 0;color:#787880;font-size:12px;line-height:1.5} .home-welcome-actions{display:flex;align-items:center;gap:10px;padding-top:4px}.home-current-time{height:38px;padding:0 4px;color:#66666e;font-size:11px;font-variant-numeric:tabular-nums;line-height:38px} .home-new-task{display:flex;height:38px;align-items:center;gap:8px;padding:0 13px;border:1px solid #303ada;border-radius:9px;background:#1a23ce;color:#fff;box-shadow:0 8px 24px rgba(17,26,181,.17);cursor:pointer;font:590 11px/1 'Geist',sans-serif;transition:background-color .15s ease,border-color .15s ease,transform .12s ease}.home-new-task:hover{border-color:#4c56ed;background:#2731d9}.home-new-task:active{transform:scale(.98)}.home-new-task svg{width:14px;height:14px} .home-workspace-grid{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(330px,.82fr);align-items:start;gap:15px} .home-card{overflow:hidden;border:1px solid rgba(255,255,255,.075);border-radius:16px;background:rgba(16,16,18,.93);box-shadow:0 18px 55px rgba(0,0,0,.18);backdrop-filter:blur(18px)} .home-card-head{display:flex;min-height:69px;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.058);background:rgba(255,255,255,.012)} .home-card-head>div{display:flex;min-width:0;align-items:center;gap:11px}.home-card-head>div>span:last-child{display:flex;min-width:0;flex-direction:column;gap:4px}.home-card-head strong{overflow:hidden;color:#e9e9ec;font-size:13px;font-weight:620;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.home-card-head small{color:#65656d;font-size:9px;font-weight:470;line-height:1.2} .home-card-icon{display:grid;width:34px;height:34px;flex:0 0 34px;place-items:center;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:#18181b;color:#797981}.home-card-icon.primary{border-color:rgba(82,94,242,.23);background:rgba(49,60,215,.1);color:#7480ff}.home-card-icon svg{width:16px;height:16px} .home-card-link{display:flex;height:31px;align-items:center;gap:6px;padding:0 9px;border:1px solid rgba(255,255,255,.065);border-radius:7px;background:#161618;color:#85858d;cursor:pointer;font:560 9px/1 'Geist',sans-serif;transition:border-color .14s ease,background-color .14s ease,color .14s ease}.home-card-link:hover{border-color:#35353a;background:#1c1c1f;color:#e4e4e7}.home-card-link svg{width:12px;height:12px} .home-icon-link{display:grid;width:31px;height:31px;place-items:center;padding:0;border:0;border-radius:8px;background:transparent;color:#606068;cursor:pointer;transition:background-color .14s ease,color .14s ease}.home-icon-link:hover{background:#1c1c1f;color:#d8d8dc}.home-icon-link svg{width:14px;height:14px} .home-tasks-card{min-height:620px}.home-tasks-body{max-height:calc(100dvh - 260px);min-height:550px;overflow-y:auto;padding:8px 12px 15px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#29292d transparent} .home-task-group{--home-tone:#5b67f4;padding:7px 0 2px}.home-task-group.tone-blue{--home-tone:#5968ff}.home-task-group.tone-sky{--home-tone:#2498ff}.home-task-group.tone-teal{--home-tone:#19b8ad}.home-task-group.tone-green{--home-tone:#31c876}.home-task-group.tone-slate{--home-tone:#8a91a2}.home-task-group.tone-amber{--home-tone:#e3b33c}.home-task-group.tone-orange{--home-tone:#f0833c}.home-task-group.tone-red{--home-tone:#ef5363}.home-task-group.tone-pink{--home-tone:#e75ba8}.home-task-group.tone-violet{--home-tone:#9b6ef3} .home-task-group>header{display:flex;height:32px;align-items:center;justify-content:space-between;padding:0 9px;color:#777780}.home-task-group>header>span{display:flex;min-width:0;align-items:center;gap:8px;overflow:hidden;font-size:9px;font-weight:630;letter-spacing:.035em;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}.home-task-group>header i{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:var(--home-tone)}.home-task-group>header small{font-size:8px;font-variant-numeric:tabular-nums} .home-task-group>div{overflow:hidden;border:1px solid rgba(255,255,255,.048);border-radius:10px;background:#0d0d0f} .home-task-row{position:relative;display:grid;min-height:56px;grid-template-columns:24px minmax(0,1fr) auto 15px;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.047);cursor:pointer;outline:0;transition:background-color .13s ease}.home-task-row:last-child{border-bottom:0}.home-task-row:hover,.home-task-row:focus-visible{background:#141417}.home-task-row:focus-visible{box-shadow:inset 0 0 0 1px rgba(92,104,255,.38)} .home-task-check{display:grid;width:22px;height:22px;place-items:center;padding:0;border:1px solid #303035;border-radius:7px;background:#151517;color:transparent;cursor:pointer;transition:border-color .14s ease,background-color .14s ease,color .14s ease,transform .12s ease}.home-task-check:hover{border-color:#5965ec;background:rgba(65,77,222,.12);color:#7e88ff}.home-task-check:active{transform:scale(.9)}.home-task-check:disabled{cursor:default;opacity:.5}.home-task-check svg{width:12px;height:12px} .home-task-copy{display:flex;min-width:0;align-items:center;gap:9px}.home-task-copy>strong{display:flex;min-width:0;align-items:center;gap:6px;color:#d5d5d9;font-size:12px;font-weight:470;line-height:1.35}.home-task-copy>strong>span:last-child{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home-task-copy .workspace-task-priority-icon{width:15px;height:15px;flex:0 0 15px}.home-task-copy .workspace-task-priority-icon svg{width:13px;height:13px}.home-task-copy>small{display:flex;flex:0 0 auto;align-items:center;gap:4px;padding:3px 5px;border:1px solid rgba(255,255,255,.05);border-radius:5px;background:#171719;color:#777780;font-size:8px;font-weight:540;white-space:nowrap}.home-task-copy>small svg{width:9px;height:9px}.home-task-copy>small.today{border-color:rgba(227,179,60,.17);background:rgba(227,179,60,.08);color:#d7ad48}.home-task-copy>small.overdue{border-color:rgba(239,83,99,.17);background:rgba(239,83,99,.08);color:#e76472}.home-task-copy>small.soon{color:#8d95ee} .home-task-people{display:flex;height:26px;align-items:center}.home-task-people .workspace-task-avatar{width:26px;height:26px;margin-left:-5px;flex:0 0 26px;border:2px solid #0d0d0f;font-size:7px;object-fit:cover}.home-task-row:hover .home-task-people .workspace-task-avatar{border-color:#141417}.home-task-people .workspace-task-avatar:first-child{margin-left:0}.home-task-people>i{display:grid;width:26px;height:26px;margin-left:-5px;place-items:center;border:2px solid #0d0d0f;border-radius:50%;background:#202023;color:#777780;font-size:7px;font-style:normal}.home-row-arrow{width:13px;height:13px;color:#414148;opacity:0;transform:translateX(-3px);transition:opacity .13s ease,transform .13s ease}.home-task-row:hover .home-row-arrow,.home-task-row:focus-visible .home-row-arrow{opacity:1;transform:none} .home-panel-empty{display:flex;min-height:400px;align-items:center;justify-content:center;flex-direction:column;padding:40px;text-align:center}.home-panel-empty .activity-state-spinner{margin-bottom:14px}.home-empty-icon{display:grid;width:46px;height:46px;margin-bottom:15px;place-items:center;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:#151517;color:#74747c}.home-empty-icon svg{width:20px;height:20px}.home-panel-empty strong{color:#cfcfd3;font-size:13px;font-weight:590}.home-panel-empty p{max-width:260px;margin:7px 0 0;color:#626269;font-size:10px;line-height:1.5}.home-panel-empty button{margin-top:16px;padding:8px 11px;border:1px solid #303035;border-radius:7px;background:#171719;color:#aaaab1;cursor:pointer;font:550 9px/1 'Geist',sans-serif}.home-panel-empty button:hover{border-color:#414148;color:#ededf0} .home-side-rail{display:flex;min-width:0;flex-direction:column;gap:15px}.home-prompts-card{min-height:344px}.home-prompts-body{padding:7px}.home-prompt-row{display:grid;width:100%;min-height:51px;grid-template-columns:34px minmax(0,1fr) 24px;align-items:center;gap:10px;padding:7px;border:0;border-radius:9px;background:transparent;color:inherit;text-align:left;cursor:pointer;transition:background-color .13s ease}.home-prompt-row:hover,.home-prompt-row:focus-visible{background:#19191c;outline:0}.home-prompt-row>img,.home-prompt-mark{width:34px;height:34px;border-radius:8px;object-fit:cover}.home-prompt-mark{display:grid;place-items:center;border:1px solid rgba(255,255,255,.06);background:#171719;color:#686870;font-size:8px;font-variant-numeric:tabular-nums}.home-prompt-copy{display:flex;min-width:0;flex-direction:column;gap:5px}.home-prompt-copy strong{overflow:hidden;color:#cfcfd3;font-size:11px;font-weight:520;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.home-prompt-copy small{overflow:hidden;color:#5f5f67;font-size:8px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap;text-transform:capitalize}.home-prompt-row>svg{width:14px;height:14px;justify-self:center;color:#494950;transition:color .13s ease}.home-prompt-row:hover>svg{color:#83838b}.home-rail-empty{display:grid;min-height:220px;place-items:center;padding:28px;color:#626269;font-size:10px;text-align:center} .home-private-card{min-height:297px}.home-private-card .home-card-head{padding-right:11px}.home-private-save.error{color:#db626d}.home-private-tabs{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid rgba(255,255,255,.055);border-radius:8px;background:#0d0d0f}.home-private-tabs button{height:25px;padding:0 8px;border:0;border-radius:5px;background:transparent;color:#66666e;cursor:pointer;font:540 8.5px/1 'Geist',sans-serif;transition:background-color .13s ease,color .13s ease}.home-private-tabs button.on{background:#202023;color:#d8d8dc}.home-private-tabs button i{display:inline-grid;min-width:15px;height:15px;place-items:center;margin-left:3px;border-radius:5px;background:#29292d;color:#92929a;font-size:7px;font-style:normal} .home-private-body{min-height:226px;padding:11px}.home-private-note-wrap{position:relative;height:204px}.home-private-note-wrap textarea{width:100%;height:100%;resize:none;padding:12px 12px 28px;border:1px solid rgba(255,255,255,.06);border-radius:10px;outline:0;background:#0d0d0f;color:#cacace;font:470 11px/1.62 'Geist',sans-serif;caret-color:#7380ff;transition:border-color .15s ease,background-color .15s ease}.home-private-note-wrap textarea::placeholder{color:#4f4f56}.home-private-note-wrap textarea:focus{border-color:rgba(91,104,245,.36);background:#0e0e11}.home-private-note-wrap>span{position:absolute;right:10px;bottom:9px;color:#48484f;font-size:7px;font-variant-numeric:tabular-nums;pointer-events:none} .home-private-checklist>form{display:grid;height:39px;grid-template-columns:15px minmax(0,1fr);align-items:center;gap:8px;padding:0 10px;border:1px solid rgba(255,255,255,.065);border-radius:9px;background:#0d0d0f}.home-private-checklist>form:focus-within{border-color:rgba(91,104,245,.34)}.home-private-checklist>form svg{width:14px;height:14px;color:#66666e}.home-private-checklist>form input{width:100%;height:100%;border:0;outline:0;background:transparent;color:#d0d0d4;font:480 10px/1 'Geist',sans-serif}.home-private-checklist>form input::placeholder{color:#505057}.home-private-items{max-height:148px;margin-top:7px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#29292d transparent}.home-private-item{display:grid;min-height:38px;grid-template-columns:20px minmax(0,1fr) 24px;align-items:center;gap:8px;padding:3px 4px;border-bottom:1px solid rgba(255,255,255,.042)}.home-private-item:last-child{border-bottom:0}.home-private-item-check{display:grid;width:19px;height:19px;place-items:center;padding:0;border:1px solid #303035;border-radius:6px;background:#141416;color:transparent;cursor:pointer}.home-private-item-check svg{width:10px;height:10px}.home-private-item.done .home-private-item-check{border-color:#3843ca;background:#1a23ce;color:#fff}.home-private-item>span{overflow:hidden;color:#bdbdc2;font-size:10px;font-weight:460;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.home-private-item.done>span{color:#57575e;text-decoration:line-through}.home-private-item-delete{display:grid;width:24px;height:24px;place-items:center;padding:0;border:0;border-radius:6px;background:transparent;color:#48484f;cursor:pointer;opacity:0;transition:opacity .13s ease,background-color .13s ease,color .13s ease}.home-private-item:hover .home-private-item-delete,.home-private-item-delete:focus-visible{opacity:1}.home-private-item-delete:hover{background:rgba(239,83,99,.08);color:#df5b68}.home-private-item-delete svg{width:11px;height:11px}.home-private-empty{display:grid;min-height:120px;place-items:center;color:#55555c;font-size:9px}.home-private-clear{display:block;margin:7px 2px 0 auto;padding:5px 6px;border:0;background:transparent;color:#626269;cursor:pointer;font:530 8px/1 'Geist',sans-serif}.home-private-clear:hover{color:#d16a73} body.light[data-tab="home"] .content,body.light #home-dash{background:#eeedea}body.light #home-dash::before{background:radial-gradient(900px 540px at 17% -7%,rgba(63,77,228,.1),transparent 65%),radial-gradient(720px 470px at 93% 16%,rgba(69,79,171,.06),transparent 68%),linear-gradient(180deg,#f4f3f0 0,#eeedea 62%,#ebeae7 100%)}body.light #home-dash::after{border-color:rgba(49,62,202,.09)} body.light .home-workspace{color:#202024}body.light .home-welcome h1{color:#1b1b1f}body.light .home-welcome p,body.light .home-eyebrow{color:#77777d}body.light .home-card{border-color:rgba(25,25,30,.09);background:rgba(248,247,244,.9);box-shadow:0 18px 50px rgba(38,37,42,.07)}body.light .home-card-head{border-color:rgba(25,25,30,.075);background:rgba(255,255,255,.18)}body.light .home-card-head strong{color:#252529}body.light .home-card-icon{border-color:rgba(25,25,30,.08);background:#e9e8e5;color:#696970}body.light .home-card-icon.primary{border-color:rgba(54,66,213,.14);background:rgba(54,66,213,.07);color:#3441d3}body.light .home-card-link{border-color:rgba(20,20,25,.09);background:#efeeeb;color:#68686f}body.light .home-task-group>div,body.light .home-private-note-wrap textarea,body.light .home-private-checklist>form{border-color:rgba(20,20,25,.075);background:rgba(255,255,255,.38)}body.light .home-task-row{border-color:rgba(20,20,25,.06)}body.light .home-task-row:hover,body.light .home-task-row:focus-visible{background:rgba(255,255,255,.62)}body.light .home-task-copy>strong,body.light .home-prompt-copy strong,body.light .home-private-item>span{color:#343438}body.light .home-task-check,body.light .home-task-copy>small{border-color:rgba(20,20,25,.1);background:#efeeeb}body.light .home-task-people .workspace-task-avatar,body.light .home-task-people>i{border-color:#f5f4f1}body.light .home-prompt-row:hover,body.light .home-prompt-row:focus-visible{background:rgba(255,255,255,.58)}body.light .home-prompt-mark,body.light .home-private-tabs{border-color:rgba(20,20,25,.075);background:#eae9e6}body.light .home-private-tabs button.on{background:#fff;color:#29292d;box-shadow:0 1px 3px rgba(20,20,25,.08)}body.light .home-private-note-wrap textarea,body.light .home-private-checklist>form input{color:#36363a}body.light .home-private-item{border-color:rgba(20,20,25,.06)} @media(max-width:1080px){ .home-workspace{padding-right:24px;padding-left:24px}.home-workspace-grid{grid-template-columns:minmax(0,1.5fr) minmax(305px,.8fr)}.home-task-copy{align-items:flex-start;flex-direction:column;gap:4px}.home-task-copy>small{align-self:flex-start}.home-task-row{min-height:62px} } @media(max-width:820px){ body[data-tab="home"] .content{padding-bottom:calc(var(--mobile-tabbar-height,0px) + env(safe-area-inset-bottom))}.home-workspace{padding:23px 16px 30px}.home-welcome{min-height:92px;margin-bottom:15px}.home-workspace-grid{grid-template-columns:1fr}.home-tasks-card{min-height:0}.home-tasks-body{max-height:none;min-height:420px}.home-side-rail{display:grid;grid-template-columns:1fr 1fr;align-items:start}.home-prompts-card,.home-private-card{min-height:344px}.home-private-body{min-height:272px}.home-private-note-wrap{height:250px}.home-private-items{max-height:194px} } @media(max-width:620px){ .home-workspace{padding:18px 12px 25px}.home-welcome{min-height:108px;align-items:flex-start;flex-direction:column;gap:15px}.home-welcome h1{font-size:28px}.home-welcome-actions{width:100%;justify-content:space-between;padding:0}.home-current-time{padding:0}.home-new-task{height:40px}.home-workspace-grid,.home-side-rail{display:flex;width:100%;flex-direction:column}.home-card{width:100%;border-radius:14px;backdrop-filter:none}.home-card-head{min-height:65px;padding:11px 12px}.home-tasks-body{min-height:380px;padding:7px 8px 12px}.home-task-row{min-height:60px;grid-template-columns:26px minmax(0,1fr) auto;gap:9px;padding:8px}.home-row-arrow{display:none}.home-task-copy{gap:4px}.home-task-copy>strong{width:100%;font-size:12.5px}.home-task-people .workspace-task-avatar{width:28px;height:28px;flex-basis:28px}.home-task-people>i{width:28px;height:28px}.home-prompts-card,.home-private-card{min-height:0}.home-prompt-row{min-height:55px}.home-private-body{min-height:232px}.home-private-note-wrap{height:210px}.home-private-items{max-height:156px}.home-private-item-delete{opacity:1}.home-private-tabs button{height:28px}.home-card-link{height:34px} } @media(prefers-reduced-motion:reduce){.home-workspace *{scroll-behavior:auto!important;transition:none!important}} /* 2026-09-03 v2: cohesive full-height Home frame */ @media(min-width:821px){ body[data-tab="home"] .content{overflow-y:auto;overscroll-behavior-y:auto} #home-dash{height:auto;min-height:100%;overflow:visible} .home-workspace{display:flex;min-height:100%;height:auto;flex-direction:column;overflow:visible} .home-welcome{flex:0 0 auto} .home-workspace-grid{min-height:0;flex:none;align-items:start} .home-tasks-card{display:flex;height:100%;min-height:0;flex-direction:column} .home-tasks-body{max-height:none;min-height:0;flex:1;overflow:visible} .home-side-rail{display:grid;height:100%;min-height:0;grid-template-rows:minmax(0,1fr) minmax(0,1fr)} .home-prompts-card,.home-private-card{display:flex;min-height:0;flex-direction:column} .home-prompts-body,.home-private-body{min-height:0;flex:1;overflow:visible;overscroll-behavior:auto;scrollbar-width:thin;scrollbar-color:#29292d transparent} .home-private-note-wrap{height:100%;min-height:0} .home-private-checklist{display:flex;height:100%;min-height:0;flex-direction:column} .home-private-items{max-height:none;min-height:0;flex:1} } /* 2026-09-03 v3: personal history, focused Home actions, and unified surfaces */ /* Home has one page scroller; task panels must not intercept vertical wheel input. */ body[data-tab="home"] #home-dash :is(.task-card-body,.home-tasks-body,.home-prompts-body,.home-private-body,.home-private-items){max-height:none!important;overflow:visible!important;overscroll-behavior:auto!important} body[data-tab="home"] #home-dash :is(.task-card,.home-card,.task-horizontal-rail){overscroll-behavior:auto!important} body[data-tab="home"] #home-dash .home-side-rail{height:auto;grid-template-rows:auto auto} :root{ --ml-canvas:#000; --ml-panel:#0d0d0e; --ml-panel-raised:#121213; --ml-panel-hover:#171718; --ml-divider:rgba(255,255,255,.055); } .sbfoot{ display:grid; min-height:96px; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:28px 42px; align-items:center; gap:4px 7px; padding:8px; background:#0b0b0c; } .sidebar-history{display:flex;min-width:0;align-items:center;gap:3px;grid-column:1;grid-row:1} .sidebar-history button{ display:grid; width:27px; height:27px; place-items:center; padding:0; border:0; border-radius:6px; background:transparent; color:#797980; cursor:pointer; transition:background-color .13s ease,color .13s ease,opacity .13s ease; } .sidebar-history button svg{width:13px;height:13px} .sidebar-history button:hover:not(:disabled),.sidebar-history button:focus-visible{background:#1a1a1c;color:#eeeef1} .sidebar-history button:focus-visible{outline:2px solid rgba(82,94,242,.55);outline-offset:1px} .sidebar-history button:disabled{color:#343438;cursor:default;opacity:.7} .sidebar-history button.is-busy{opacity:.38;pointer-events:none} .sbfoot>.sbaccount{width:100%;min-height:42px;grid-column:1/-1;grid-row:2;padding:5px 7px;background:transparent} .sbfoot>.sbaccount:hover{background:#111113} .sbfoot>.sbfoot-actions{display:flex!important;grid-column:2;grid-row:1;align-items:center;gap:3px;opacity:1} aside.sb.col .sbfoot{display:flex!important;min-height:116px;align-items:center;justify-content:flex-end;flex-direction:column;padding:7px 0!important} aside.sb.col .sidebar-history{display:flex;order:2;gap:2px} aside.sb.col .sidebar-history button{width:23px;height:25px} aside.sb.col .sbfoot>.sbaccount{order:1;width:38px;height:38px;min-height:38px;padding:0;justify-content:center} aside.sb.col .sbfoot-actions{display:none!important} .home-welcome{min-height:76px;margin-bottom:18px;align-items:flex-start} .home-welcome h1{margin-top:0} .home-card-actions{display:flex!important;min-width:0;align-items:center!important;gap:7px!important} .home-new-task.home-new-task-compact{height:31px;padding:0 10px;border-radius:7px;font-size:9px;box-shadow:none} .home-new-task.home-new-task-compact svg{width:12px;height:12px} .home-card, .card,.tcard,.pcard,.bento, .analytics-card,.analytics-metric, .project-row,.goal-card,.client-card, .access-card,.health-row,.trash-row, .mockups-panel:not(.preview){ border-color:transparent; background:var(--ml-panel); box-shadow:none; } .home-card{backdrop-filter:none} .home-card-head{background:transparent} .card:hover,.tcard:hover,.pcard:hover,.bento:hover, .project-row:hover,.goal-card:hover,.client-card:hover, .analytics-card:hover{background:var(--ml-panel-raised);box-shadow:none} .task-board-card:not(.emphasis-outline):not(.emphasis-tint),.task-list-group,.task-person-group{border-color:transparent;background:var(--ml-panel)} .task-board-card:not(.emphasis-outline):not(.emphasis-tint):hover,.task-list-group:hover,.task-person-group:hover{border-color:transparent;background:var(--ml-panel-raised);box-shadow:none} .crm-card,.crm-row{border-color:transparent!important;background:var(--ml-panel)!important} .crm-card:hover,.crm-card:focus-visible,.crm-row:hover,.crm-row:focus-visible{border-color:transparent!important;background:var(--ml-panel-hover)!important} .analytics-metric,.analytics-card{border-color:transparent} .task-calendar-scroll{border-color:transparent;background:var(--ml-panel)} @media(max-width:760px){ .sbfoot,.sb.col .sbfoot{ display:grid!important; min-height:116px; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:48px 44px; gap:4px 8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important; } .sbfoot>.sbaccount,.sb.col .sbfoot>.sbaccount{width:100%;height:48px;min-height:48px;grid-column:1/-1;grid-row:1;justify-content:flex-start;padding:5px 6px} .sidebar-history,.sb.col .sidebar-history{display:flex;grid-column:1;grid-row:2;order:initial;gap:4px} .sidebar-history button,.sb.col .sidebar-history button{width:40px;height:40px;border-radius:9px} .sidebar-history button svg{width:17px;height:17px} .sbfoot>.sbfoot-actions,.sb.col .sbfoot>.sbfoot-actions{display:flex!important;grid-column:2;grid-row:2;gap:4px} .home-welcome{min-height:76px;margin-bottom:14px} .home-card-actions{gap:5px!important} .home-new-task.home-new-task-compact{height:34px;padding-inline:9px} } @media(prefers-reduced-motion:reduce){.sidebar-history button{transition:none}} /* 2026-09-03 v4: equal-weight controls and a true-black Home canvas */ :root{ --control-h:34px; --control-h-sm:34px; } /* Primary and neutral siblings keep identical geometry; color alone carries priority. */ :is( .gbtn:not(.subtle),.addbtn,.bsave,.workspace-add,.operation-add,.operation-primary, .goal-add,.goal-primary,.talent-create-btn,.talent-save-btn,.mockups-btn.primary, .activity-button.primary,.client360-create,.access-save, .bghst,.boutl,.bcanc,.gbtn.subtle,.activity-button:not(.primary),.goal-secondary, .operation-secondary,.access-quickbtn,.talent-mini-btn,.mockups-btn:not(.primary), .mockups-search-btn,.mockups-settings-btn,.mockups-history-trigger,.health-refresh, .client360-section-head button:not(.client360-create),.home-insight-card>header button, .analytics-card>header button ){ box-sizing:border-box; min-height:var(--control-h); border-width:1px; border-style:solid; border-radius:var(--control-r); box-shadow:none; font-weight:560; line-height:1; } :is( .gbtn:not(.subtle),.addbtn,.bsave,.workspace-add,.operation-add,.operation-primary, .goal-add,.goal-primary,.talent-create-btn,.talent-save-btn,.mockups-btn.primary, .activity-button.primary,.client360-create,.access-save ){border-color:transparent} .talent-create-btn,.talent-save-btn,.talent-mini-btn{height:34px} .client360-section-head button{height:32px;min-height:32px} .mockups-preview-bar .mockups-btn{height:40px;min-height:40px;font-weight:560;box-shadow:none} .home-new-task.home-new-task-compact,.home-card-link{ box-sizing:border-box; height:31px; min-height:31px; gap:6px; padding:0 9px; border-width:1px; border-style:solid; border-radius:7px; box-shadow:none; font:560 9px/1 'Geist',sans-serif; } .home-new-task.home-new-task-compact{border-color:transparent} .home-new-task.home-new-task-compact:hover{border-color:transparent;box-shadow:none} .home-new-task.home-new-task-compact svg,.home-card-link svg{width:12px;height:12px} body:not(.light)[data-tab="home"] .content, body:not(.light)[data-tab="home"] #home-dash, body:not(.light)[data-tab="home"] .home-workspace{background-color:#000} body:not(.light)[data-tab="home"] #home-dash::before{ background: radial-gradient(900px 540px at 17% -7%,rgba(35,47,219,.2),transparent 65%), radial-gradient(720px 470px at 93% 16%,rgba(60,72,176,.1),transparent 68%); } @media(max-width:760px){ .home-new-task.home-new-task-compact,.home-card-link{height:34px;min-height:34px} .mockups-preview-bar .mockups-btn{height:40px;min-height:40px} } /* 2026-09-03 v5: persistent, clearly visible sidebar history controls */ .sidebar-history{ display:grid; width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; padding:3px; border-radius:8px; background:#111112; } .sidebar-history button{ display:flex; width:auto; height:31px; min-width:0; align-items:center; justify-content:center; gap:5px; padding:0 7px; border:0; border-radius:6px; background:#19191a; color:#99999f; } .sidebar-history button span{font-size:9px;font-weight:560;line-height:1} .sidebar-history button svg{width:13px;height:13px;flex:0 0 13px} .sidebar-history button:hover:not(:disabled),.sidebar-history button:focus-visible{background:#242426;color:#f3f3f5} .sidebar-history button:disabled{background:#141415;color:#5d5d63;opacity:1!important} aside.sb.col .sidebar-history{ display:flex; width:auto; padding:2px; border-radius:7px; } aside.sb.col .sidebar-history button{width:24px;height:27px;padding:0} aside.sb.col .sidebar-history button span{display:none} @media(max-width:760px){ .sidebar-history{width:auto;min-width:148px;gap:4px;padding:3px} .sidebar-history button,.sb.col .sidebar-history button{width:auto;height:38px;min-height:38px;padding:0 10px} .sidebar-history button span,.sb.col .sidebar-history button span{display:inline;font-size:10px} .sidebar-history button svg{width:15px;height:15px;flex-basis:15px} } /* 2026-09-03 v6: integrated history utilities and restored Home atmosphere */ .sbfoot{ display:grid; min-height:88px; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:42px 29px; align-items:center; gap:3px 6px; padding:7px 8px 8px; } .sbfoot>.sbaccount{ width:100%; height:42px; min-height:42px; grid-column:1/-1; grid-row:1; padding:5px 6px; } .sbfoot>.sidebar-history{ display:flex; width:auto; min-width:0; grid-column:1; grid-row:2; align-items:center; gap:2px; padding:0; border-radius:0; background:transparent; } .sbfoot>.sidebar-history button{ display:grid; width:28px; height:28px; min-height:28px; place-items:center; padding:0; border:0; border-radius:6px; background:transparent; color:#74747b; } .sbfoot>.sidebar-history button svg{width:13px;height:13px;flex:none} .sbfoot>.sidebar-history button:hover:not(:disabled),.sbfoot>.sidebar-history button:focus-visible{background:#19191b;color:#eeeef1} .sbfoot>.sidebar-history button:disabled{background:transparent;color:#4b4b51;opacity:1!important} .sbfoot>.sbfoot-actions{ position:static; display:flex!important; width:auto; grid-column:2; grid-row:2; align-items:center; gap:2px; padding:0; opacity:1; transform:none; } aside.sb.col .sbfoot{ display:flex!important; min-height:110px; align-items:center; justify-content:flex-end; flex-direction:column; gap:4px; padding:7px 0!important; } aside.sb.col .sbfoot>.sbaccount{order:1;width:38px;height:38px;min-height:38px;padding:0} aside.sb.col .sbfoot>.sidebar-history{display:flex;order:2;gap:1px;padding:0;background:transparent} aside.sb.col .sbfoot>.sidebar-history button{width:24px;height:27px;min-height:27px;padding:0} aside.sb.col .sbfoot>.sbfoot-actions{display:none!important} body:not(.light)[data-tab="home"] .content, body:not(.light)[data-tab="home"] #home-dash{background-color:#000} body:not(.light)[data-tab="home"] .home-workspace{position:relative;z-index:1;background-color:transparent} body:not(.light)[data-tab="home"] #home-dash::before{ z-index:0; background: radial-gradient(900px 560px at 17% 0,rgba(35,47,219,.22),transparent 66%), radial-gradient(760px 500px at 94% 18%,rgba(60,72,176,.12),transparent 69%); } body:not(.light)[data-tab="home"] #home-dash::after{z-index:0} @media(max-width:760px){ .sbfoot,.sb.col .sbfoot{ display:grid!important; min-height:116px; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:48px 44px; gap:4px 8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important; } .sbfoot>.sbaccount,.sb.col .sbfoot>.sbaccount{width:100%;height:48px;min-height:48px;grid-column:1/-1;grid-row:1;justify-content:flex-start;padding:5px 6px} .sbfoot>.sidebar-history,.sb.col .sbfoot>.sidebar-history{display:flex;min-width:0;grid-column:1;grid-row:2;gap:3px;padding:0} .sbfoot>.sidebar-history button,.sb.col .sbfoot>.sidebar-history button{width:40px;height:40px;min-height:40px;padding:0;border-radius:9px} .sbfoot>.sidebar-history button svg{width:16px;height:16px} .sbfoot>.sbfoot-actions,.sb.col .sbfoot>.sbfoot-actions{display:flex!important;grid-column:2;grid-row:2;gap:4px} } /* 2026-09-03 v7: fixed-geometry undo and redo feedback */ .sidebar-history button.is-busy::before{display:none!important;content:none!important} .sidebar-history button.is-busy{opacity:.56!important;transform:none!important;pointer-events:none} /* 2026-09-04 v1: stable quick task creation and shared priority language */ .tasks-dashboard .task-card-composer.task-card-composer-minimal, .tasks-dashboard .task-card-composer.task-card-composer-minimal:focus-within{ grid-template-columns:13px minmax(0,1fr); border:0; border-radius:6px!important; outline:0!important; background:#151517; box-shadow:none!important; } .tasks-dashboard .task-card-composer.task-card-composer-minimal:focus-within{background:#18181a} .tasks-dashboard .task-card-composer.task-card-composer-minimal.has-images{grid-template-columns:13px minmax(0,1fr) auto} .tasks-dashboard .task-card-composer.task-card-composer-minimal input:focus, .tasks-dashboard .task-card-composer.task-card-composer-minimal input:focus-visible{outline:0!important;box-shadow:none!important} .task-card-quick-image-status{ display:inline-flex; height:24px; align-items:center; gap:5px; padding:0 3px 0 7px; border:1px solid rgba(255,255,255,.065); border-radius:6px; background:#1d1d20; color:#92929a; font:520 8px/1 'Geist',sans-serif; white-space:nowrap; } .task-card-quick-image-status>svg{width:11px;height:11px;color:#858bff} .task-card-quick-image-status>button{ display:grid; width:18px; height:18px; place-items:center; padding:0; border:0; border-radius:4px; background:transparent; color:#64646c; cursor:pointer; } .task-card-quick-image-status>button:hover, .task-card-quick-image-status>button:focus-visible{outline:0;background:rgba(239,83,99,.09);color:#e36b76} .task-card-quick-image-status>button svg{width:9px;height:9px} .tasks-dashboard .task-card-composer.task-card-composer-minimal.saving{opacity:.68;pointer-events:none} .home-task-copy .workspace-task-priority-icon.high{color:#d2a53c} .home-task-copy .workspace-task-priority-icon.urgent{color:#ef5967} .home-task-row.priority-urgent .home-task-copy>strong>span:last-child{color:#ef6672} body.light .tasks-dashboard .task-card-composer.task-card-composer-minimal, body.light .tasks-dashboard .task-card-composer.task-card-composer-minimal:focus-within{background:rgba(20,20,25,.045)} body.light .task-card-quick-image-status{border-color:rgba(20,20,25,.08);background:rgba(20,20,25,.055);color:#67676e} @media(max-width:760px){ .task-card-quick-image-status{height:28px;padding-left:8px;font-size:9px} .task-card-quick-image-status>button{width:22px;height:22px} } @media(prefers-reduced-motion:reduce){ .tasks-dashboard .task-card-composer.task-card-composer-minimal{transition:none!important} } /* 2026-09-04 v2: one focus surface per typing control */ :root{ --ml-field-focus-border:rgba(88,100,255,.42); --ml-field-focus-surface:#19191c; } body.light{ --ml-field-focus-border:rgba(43,56,205,.38); --ml-field-focus-surface:#fff; } :where( input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]), textarea, select ):focus, :where( input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]), textarea, select ):focus-visible{ border-color:var(--ml-field-focus-border)!important; outline:0!important; box-shadow:none!important; caret-color:#7883ff; } :is( .sbox, .workspace-search, .task-board-search, .note-add, .tagbox, .task-card-composer, .home-private-checklist>form ):focus-within{ border-color:var(--ml-field-focus-border)!important; background:var(--ml-field-focus-surface)!important; outline:0!important; box-shadow:none!important; } :is( .sbox, .workspace-search, .task-board-search, .note-add, .tagbox, .task-card-composer, .home-private-checklist>form ) :where(input,textarea,select):focus, :is( .sbox, .workspace-search, .task-board-search, .note-add, .tagbox, .task-card-composer, .home-private-checklist>form ) :where(input,textarea,select):focus-visible{ border:0!important; outline:0!important; background:transparent!important; box-shadow:none!important; } .task-mh:has(.task-title-inp:focus){background:var(--ml-field-focus-surface)!important} .task-section:focus-within{box-shadow:none!important} .task-section:has(.task-notes-inp:focus){background:var(--ml-field-focus-surface)!important} .task-title-inp:focus,.task-title-inp:focus-visible, .task-notes-inp:focus,.task-notes-inp:focus-visible{border:0!important;outline:0!important;box-shadow:none!important} @media(prefers-reduced-motion:reduce){ :is(.sbox,.workspace-search,.task-board-search,.note-add,.tagbox,.task-card-composer,.home-private-checklist>form){transition:none!important} } /* Home uses the same list surfaces and task rows as the Tasks workspace. */ .home-task-lists.tasks-dashboard{ display:flex; height:auto; min-height:0; flex-direction:column; gap:8px; padding:0; overflow:visible; background:transparent; } .home-task-lists>.task-board-card{flex:none;margin:0;border-radius:8px} .home-task-lists .task-card-body{max-height:none;overflow:visible} .home-task-lists .task-card-title{min-width:0;flex:1} .home-task-lists .task-card-title h2{min-width:0;overflow-wrap:anywhere;letter-spacing:0} .home-task-list-count{flex:none;margin-left:12px;color:var(--text3);font-size:11px;font-variant-numeric:tabular-nums} .home-task-lists .workspace-task-row:not(.done), .home-task-lists .workspace-task-row:not(.done):active{cursor:pointer} /* Short screens keep one reachable page scroll; confirmations remain compact. */ @media(max-width:820px){ body[data-tab="home"] .content{overflow-y:auto!important;overscroll-behavior-y:auto} #home-dash,.home-workspace{height:auto;overflow:visible} .home-tasks-body{min-height:0;max-height:none;overflow:visible;padding:10px} .home-workspace{padding:18px 12px 24px} .home-welcome{min-height:0} .confov.on{align-items:center!important;padding:16px!important} .confov .confbox{width:min(360px,100%)!important;max-height:calc(100dvh - 32px)!important;padding:20px!important;border:1px solid #2a2a2a!important;border-radius:8px!important;background:#111!important;overflow-y:auto} .confbox .conficon{width:32px;height:32px;font-size:16px;margin-bottom:12px} .confbox .conftitle{font-size:18px;line-height:1.3} .confbox .confsub{font-size:13px;line-height:1.5;overflow-wrap:anywhere} .confbox .confbtns{display:flex;gap:8px;margin-top:20px} .confbox .confbtns button{flex:1;border-radius:6px!important} .ctxmenu.on,.ctxmenu.task-quick-menu.on{border-radius:8px!important;background:#141414!important} .ctxmenu-item{min-height:44px!important;border-radius:6px!important;font-size:13px!important} } /* Library categories share the search row; no separate tag strip or reserved space. */ body[data-tab="thumbnails"] .tbcenter{min-width:0;gap:10px;padding-inline:12px;} body[data-tab="thumbnails"] .sbox{width:260px;min-width:130px;max-width:260px;flex:1;} body[data-tab="thumbnails"] .sbox input{min-width:0;} .thumbnail-categories{display:flex;align-items:center;gap:3px;flex:none;padding:3px;border-radius:6px;background:var(--ui-panel,#111);} .thumbnail-categories[hidden]{display:none;} .thumbnail-categories button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:28px;padding:0 9px;border:0;border-radius:4px;background:transparent;color:var(--ui-muted,#a0a0a0);font:500 11px/1 Geist,Arial,sans-serif;letter-spacing:0;white-space:nowrap;cursor:pointer;transition:background-color 120ms,color 120ms;} .thumbnail-categories button::before{content:'';width:5px;height:5px;flex:none;border-radius:50%;background:var(--category-color);} .thumbnail-categories [data-category="cartoony"]{--category-color:#e2a171;--category-bg:rgba(223,132,61,.16);} .thumbnail-categories [data-category="realistic"]{--category-color:#87b4ef;--category-bg:rgba(63,144,236,.16);} .thumbnail-categories [data-category="docu"]{--category-color:#85bd9b;--category-bg:rgba(74,166,112,.16);} .thumbnail-categories button:hover{background:var(--ui-hover,#222);color:var(--ui-text,#ededed);} .thumbnail-categories button[aria-pressed="true"]{background:var(--category-bg);color:var(--category-color);box-shadow:inset 0 0 0 1px var(--category-color);} .thumbnail-categories button:focus-visible{outline:2px solid var(--ui-focus,#858585);outline-offset:2px;} body:is([data-tab="prompts"],[data-tab="workflows"],[data-tab="tools"],[data-tab="thumbnails"],[data-tab="favorites"]) .content{padding-top:10px;} @media(max-width:980px){ body[data-tab="thumbnails"] .tbcenter{padding-inline:0;} body[data-tab="thumbnails"] .sbox{max-width:none;} } @media(max-width:560px){ body[data-tab="thumbnails"] .tbcenter{flex-wrap:wrap;gap:6px;} body[data-tab="thumbnails"] .sbox{flex-basis:100%;} .thumbnail-categories{width:100%;} .thumbnail-categories button{height:34px;flex:1;font-size:12px;} } @media(prefers-reduced-motion:reduce){.thumbnail-categories button{transition:none;}} #grid-fav .prompt-card{align-self:start;} #grid-fav .prompt-card .ctags{display:none;} #grid-fav .prompt-card .cbody{min-height:0;flex:none;} #grid-fav .prompt-card .ctitle{min-height:0;} #grid-fav .prompt-card .cprev{min-height:0;}