*{box-sizing:border-box}html,body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f8f9fc;color:#151827}
:root{--purple:#75ec13;--purple2:#9af65b;--ink:#151827;--muted:#777d91;--line:#e9eaf1;--card:#fff;--green:#27b76f;--blue:#3f8efc;--orange:#f6a620;--pink:#f1608a}
a{text-decoration:none;color:inherit}.app-shell{display:grid;grid-template-columns:218px 1fr;min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:218px;background:#fff;border-right:1px solid var(--line);padding:24px 15px;display:flex;flex-direction:column;z-index:4}.brand{display:flex;align-items:center;gap:12px;font-size:1.3750rem;padding:2px 10px 28px}.brandmark{width:31px;height:31px;position:relative;display:inline-block}.brandmark i,.brandmark b{position:absolute;border-radius:14px}.brandmark i{width:15px;height:30px;left:3px;top:0;background:linear-gradient(#4e82ff,#9af65b)}.brandmark b{width:28px;height:15px;left:3px;top:8px;background:linear-gradient(90deg,#9af65b,#9af65b);opacity:.76}.sidebar nav{display:flex;flex-direction:column;gap:6px}.sidebar nav a{padding:12px 13px;border-radius:11px;font-weight:650;color:#34394d;display:flex;gap:12px;align-items:center}.sidebar nav a span{width:19px;text-align:center;color:#747b9c;font-size:1.1875rem}.sidebar nav a.active{background:linear-gradient(90deg,#75ec13,#9af65b);color:white;box-shadow:0 8px 24px #7868ec33}.sidebar nav a.active span{color:#fff}.integration{margin-top:auto;border:1px solid var(--line);border-radius:15px;padding:15px;background:#fff}.integration .eyebrow,.eyebrow{font-size:0.6875rem;color:var(--muted)}.integration .yg{display:flex;justify-content:space-between;font-weight:800;margin:6px 0}.integration .yg strong{color:#75ec13}.integration p{font-size:0.6875rem;line-height:1.5;color:var(--muted)}.integration button{border:1px solid #ddd8ff;background:white;border-radius:9px;padding:9px;color:#75ec13;width:100%}.sidebar-foot{font-size:0.6875rem;color:#9aa0b1;margin:10px 4px 0}.main{grid-column:2;min-width:0;padding:0 27px 40px}.topbar{height:78px;display:grid;grid-template-columns:1fr minmax(340px,440px) auto;gap:22px;align-items:center;background:#fbfbfd;position:sticky;top:0;z-index:3;border-bottom:1px solid #f0f0f4}.topbar h1{font-size:1.6875rem;margin:0;letter-spacing:-.6px}.subtitle{margin:3px 0 0;color:var(--muted);font-size:0.8125rem}.search{height:42px;border:1px solid var(--line);border-radius:12px;background:white;display:flex;align-items:center;padding:0 12px;gap:8px;box-shadow:0 4px 16px #28284a08}.search input{border:0;outline:0;flex:1;font-size:0.8125rem}.search kbd{border:1px solid var(--line);border-radius:5px;padding:2px 5px;font-size:0.6250rem;color:#9aa0b1;background:#fafafa}.topicons{display:flex;align-items:center;gap:17px;color:#656b7e}.bell{position:relative}.bell i{position:absolute;right:-9px;top:-8px;background:#ef4444;color:white;width:16px;height:16px;border-radius:20px;font-size:0.5625rem;font-style:normal;text-align:center;line-height:16px}.avatar{width:34px;height:34px;background:linear-gradient(145deg,#262a3b,#777f9d);border-radius:50%;color:#fff;font-size:0.6875rem;display:grid;place-items:center;font-weight:800}.avatar.big{width:45px;height:45px;font-size:1rem;background:linear-gradient(145deg,#75ec13,#a59cff);flex:0 0 auto}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:20px 0 16px}.metric{background:white;border:1px solid var(--line);border-radius:15px;min-height:105px;padding:17px;display:flex;gap:14px;align-items:center;box-shadow:0 5px 20px #22223b08}.metric-icon{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font-size:1.4375rem;font-weight:800}.metric-icon.purple{background:#efffe5;color:#75ec13}.metric-icon.green{background:#e9fbf1;color:#23ad68}.metric-icon.blue{background:#ebf4ff;color:#438cf5}.metric-icon.orange{background:#fff5df;color:#f4a317}.metric span{display:block;font-size:0.7500rem;color:#5d6275}.metric strong{font-size:1.7500rem;display:block;margin:3px 0}.metric small{color:var(--muted);font-size:0.6875rem}.dashboard-grid{display:grid;grid-template-columns:1.15fr 1.15fr .95fr;gap:16px}.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 5px 20px #20203908;min-width:0}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.panel-head>div{display:flex;align-items:baseline;gap:14px}.panel h2,.panel-head h2{font-size:0.9375rem;margin:0}.panel-head span{font-size:0.6875rem;color:var(--muted)}.week-panel{grid-column:1/3}.today-panel{grid-column:3;grid-row:1/3}.project-panel{grid-column:1}.obligations-panel{grid-column:2}.achievements-panel{grid-column:1}.focus-panel{grid-column:3}.notes-panel{grid-column:1/3}.week-grid{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden}.day-col{min-height:292px;border-right:1px solid var(--line);padding:10px 8px}.day-col:last-child{border-right:0}.day-head{display:flex;flex-direction:column;margin-bottom:9px}.day-head b{font-size:0.7500rem}.day-head span{font-size:0.6250rem;color:#9aa0b1}.mini-task{border:1px solid #ececf2;border-radius:8px;background:#fff;padding:8px 7px;margin:7px 0;display:flex;gap:6px;align-items:flex-start;font-size:0.6125rem;line-height:1.25;box-shadow:0 2px 7px #27273a06}.mini-task.done{opacity:.52;text-decoration:line-through}.mini-task i{width:5px;height:5px;border-radius:50%;margin-top:4px;flex:0 0 auto}.p-high{background:#f06189}.p-normal{background:#75ec13}.more,.link{font-size:0.6875rem;color:#75ec13;font-weight:650}.head-actions{display:flex!important;gap:7px!important}.btn{border:1px solid #dfdff0;border-radius:9px;background:#fff;padding:9px 13px;font-weight:650;color:#75ec13;cursor:pointer;font-size:0.7500rem}.btn.primary{background:linear-gradient(90deg,#75ec13,#9af65b);color:white;border:0;box-shadow:0 6px 16px #75ec132b}.btn.ghost{background:white;color:#4d5264}.btn.tiny{padding:6px 9px;font-size:0.6250rem}.plus{width:30px;height:30px;border-radius:8px;background:#f1ffe7;color:#75ec13;display:grid;place-items:center;font-weight:800}.today-list{border-top:1px solid #f1f1f5}.today-row{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid #f1f1f5}.today-row span{font-size:0.6875rem}.check{width:16px;height:16px;border:1px solid #b9bfd1;background:white;border-radius:4px;padding:0;color:white;line-height:14px;cursor:pointer}.check.checked{background:#27b76f;border-color:#27b76f}.project-list{}.project-row{display:grid;grid-template-columns:1fr 110px 34px;gap:9px;align-items:center;padding:8px 0}.project-row div:first-child{display:flex;flex-direction:column}.project-row b{font-size:0.6875rem}.project-row small{font-size:0.5625rem;color:var(--muted)}.progress{height:5px;border-radius:10px;background:#ececf4;overflow:hidden}.progress i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#75ec13,#9af65b)}.progress.big{height:7px;margin:16px 0}.project-row strong{font-size:0.6250rem}.ob-row,.obligation-full{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #f1f1f5}.ob-row>div{display:flex;flex-direction:column}.ob-row b{font-size:0.6875rem}.ob-row small,.obligation-full small{font-size:0.5625rem;color:var(--muted);display:block}.ob-row strong{font-size:0.6250rem;color:#ef4444}.achievement{display:grid;grid-template-columns:42px 1fr;gap:7px;padding:7px 0}.achievement b{font-size:0.6250rem;color:#337de6}.achievement span{font-size:0.6875rem;line-height:1.35}.focus-panel{display:flex;gap:13px;align-items:center;background:linear-gradient(135deg,#fff,#f7fff2)}.focus-icon{width:43px;height:43px;border-radius:14px;background:#efffe5;color:#75ec13;display:grid;place-items:center;font-size:1.5625rem}.focus-panel>div:last-child{display:flex;flex-direction:column}.focus-panel span{font-weight:800}.focus-panel small{color:var(--muted);font-size:0.5625rem;margin:3px 0}.focus-panel strong{font-size:0.8125rem}.note-line{font-size:0.6875rem;padding:5px 0}.two-col{display:grid;grid-template-columns:minmax(0,2fr) minmax(290px,.9fr);gap:16px;margin-top:20px}.form-panel{margin:20px 0 16px}.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:13px}.form-grid.wide{grid-template-columns:repeat(4,1fr)}.span-2{grid-column:span 2}.span-3{grid-column:span 3}.form-grid input,.form-grid select,.form-grid textarea,.stack input,.stack select,.stack textarea,.inline-form input,.big-search input,.quick-capture textarea,.review-grid textarea{width:100%;border:1px solid #e2e3ea;border-radius:9px;padding:10px 11px;font-family:inherit;background:#fff;color:#202437;outline:none}.form-grid input:focus,.form-grid textarea:focus,.stack input:focus,.stack textarea:focus{border-color:#9af65b;box-shadow:0 0 0 3px #7164e811}.task-row{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #f0f1f4}.task-main{display:flex;flex:1;flex-direction:column;min-width:0}.task-main b{font-size:0.7500rem}.task-main small{font-size:0.6250rem;color:var(--muted);margin-top:3px}.status,.badge{font-size:0.5625rem;background:#f2f0ff;color:#75ec13;border-radius:20px;padding:5px 8px;font-weight:700}.badge.success{background:#eafaf1;color:#179757}.strike{text-decoration:line-through;color:#9aa0b1}.backlog-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #f1f1f5}.backlog-row>div{display:flex;flex-direction:column}.backlog-row b{font-size:0.6875rem}.backlog-row small{font-size:0.5625rem;color:var(--muted)}.soft{background:linear-gradient(135deg,#fff,#f6fff0);margin-top:16px}.week-board{display:grid;grid-template-columns:repeat(7,1fr);gap:9px}.board-col{background:#fafafd;border:1px solid #ededf3;border-radius:12px;padding:10px;min-height:340px}.board-head{display:flex;justify-content:space-between;margin-bottom:8px}.board-head b{font-size:0.7500rem}.board-head span{font-size:0.6250rem;color:var(--muted)}.board-task{background:#fff;border:1px solid #e8e8ef;border-radius:8px;padding:8px;margin:7px 0;display:flex;gap:5px;justify-content:space-between}.board-task.done{opacity:.55}.board-task b{font-size:0.6250rem;line-height:1.25;display:block}.board-task small{font-size:0.5000rem;color:var(--muted)}.mini-check{border:0;background:transparent;color:#75ec13;cursor:pointer}.inline-form{display:flex;gap:6px}.horizon-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.horizon{min-height:180px}.plan-item{padding:10px 0;border-bottom:1px solid #f0f0f5}.plan-item b{font-size:0.7500rem}.plan-item p{font-size:0.6875rem;color:#5e6475;line-height:1.45}.plan-item small{font-size:0.5625rem;color:var(--muted)}.project-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.project-card h2{font-size:1.0625rem;margin:12px 0 7px}.project-card p{font-size:0.6875rem;color:#6e7487;min-height:32px}.project-top{display:flex;justify-content:space-between;align-items:center}.project-top strong{font-size:0.6875rem}.label{font-size:0.5625rem;color:var(--muted);margin:10px 0 4px}.project-card>small{color:var(--muted);font-size:0.5625rem;display:block;margin-bottom:10px}.timeline{margin-top:20px}.timeline-item{display:grid;grid-template-columns:18px 1fr;gap:5px;position:relative}.timeline-item:before{content:"";position:absolute;left:6px;top:15px;bottom:-15px;width:1px;background:#dadbea}.timeline-item:last-child:before{display:none}.dot{width:13px;height:13px;border:3px solid #75ec13;background:#fff;border-radius:50%;margin-top:18px;z-index:1}.timeline-date{color:#4e83db;font-size:0.6250rem;font-weight:800}.timeline-item p{font-size:0.7500rem;line-height:1.55}.sticky{position:sticky;top:96px}.stack{display:flex;flex-direction:column;gap:9px;margin-top:12px}.obligation-full{display:grid;grid-template-columns:2fr 1fr .6fr .7fr}.obligation-full>div:nth-child(2){text-align:right}.inbox-item{padding:14px 0;border-bottom:1px solid #f0f1f4}.inbox-item p{font-size:0.7500rem}.actions{display:flex;gap:7px}.quick-capture{display:grid;grid-template-columns:1fr 120px;gap:10px}.quick-capture textarea{height:80px}.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.contact-card{display:flex;gap:12px}.contact-card h3{font-size:0.8750rem;margin:0 0 3px}.contact-card b,.contact-card small{display:block;font-size:0.6250rem}.contact-card small{color:var(--muted)}.contact-card p{font-size:0.6250rem;color:#696f82}.activity{padding:10px 0;border-bottom:1px solid #f0f0f4}.activity b,.activity span{font-size:0.6250rem}.activity span{float:right;color:#75ec13}.activity p{font-size:0.6875rem}.activity small{font-size:0.5625rem;color:var(--muted)}.metrics.compact{grid-template-columns:repeat(4,1fr)}.metrics.compact .metric{min-height:82px}.review-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.review-grid label{font-size:0.6875rem;font-weight:700}.review-grid textarea{height:110px;margin-top:6px;font-weight:400;resize:vertical}.review-grid button{width:170px}.big-search{display:flex;gap:8px}.big-search input{height:44px}.search-result{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid #f1f1f5}.search-result>div{display:flex;flex-direction:column}.search-result b{font-size:0.7500rem}.search-result small{font-size:0.6250rem;color:var(--muted);margin-top:3px}.empty{padding:24px;text-align:center;color:#9aa0b1;font-size:0.6875rem}.switchline{font-size:0.6875rem;display:flex;align-items:center;gap:7px}.flash{background:#eafaf1;color:#17844e;padding:10px;border-radius:10px;margin-top:12px}
@media(max-width:1180px){.dashboard-grid{grid-template-columns:1fr 1fr}.week-panel{grid-column:1/3}.today-panel{grid-column:1;grid-row:auto}.focus-panel{grid-column:2}.notes-panel{grid-column:1/3}.week-grid,.week-board{overflow:auto;grid-template-columns:repeat(7,140px)}.project-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){.app-shell{display:block}.sidebar{position:relative;width:auto;height:auto;display:block;padding:14px}.sidebar nav{display:grid;grid-template-columns:repeat(3,1fr)}.integration,.sidebar-foot{display:none}.main{padding:0 12px}.topbar{grid-template-columns:1fr auto;height:auto;padding:12px 0}.topbar .search{grid-column:1/3;grid-row:2}.dashboard-grid,.two-col,.horizon-grid,.project-cards{display:block}.week-panel,.today-panel,.project-panel,.obligations-panel,.achievements-panel,.focus-panel,.notes-panel{margin-bottom:12px}.metrics{grid-template-columns:repeat(2,1fr)}.form-grid,.form-grid.wide,.review-grid{grid-template-columns:1fr}.span-2,.span-3{grid-column:auto}.sidebar nav a{font-size:0.6875rem;padding:9px}.project-card{margin-bottom:12px}.sticky{position:static}.week-grid,.week-board{overflow:auto}.obligation-full{grid-template-columns:1fr 1fr;gap:8px}.contact-grid{grid-template-columns:1fr}}
/* v0.3 — Direction × Time week matrix */
.week-direction-toolbar{margin:20px 0 14px;background:linear-gradient(135deg,#fff,#fbfff8);border:1px solid var(--line);border-radius:16px;padding:17px 19px;display:flex;justify-content:space-between;gap:20px;align-items:center;box-shadow:0 5px 20px #20203908}.week-direction-toolbar h2{font-size:1.1250rem;margin:3px 0 4px}.week-direction-toolbar p{font-size:0.6875rem;color:var(--muted);margin:0;max-width:720px;line-height:1.45}.week-toolbar-actions{display:flex;gap:8px;flex:0 0 auto}.direction-matrix-shell{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 5px 20px #20203908;overflow:auto;margin-bottom:16px}.direction-matrix{display:grid;grid-template-columns:190px 180px repeat(7,minmax(150px,1fr));min-width:1420px}.matrix-header{position:sticky;top:78px;z-index:2;background:#fafafd;border-right:1px solid #ededf3;border-bottom:1px solid #e4e5ed;padding:11px 10px;font-size:0.6250rem;font-weight:800;color:#62687a}.matrix-header.day-header{display:flex;flex-direction:column;gap:2px}.matrix-header.day-header b{font-size:0.6875rem;color:#282d3e}.matrix-header.day-header span{font-size:0.5625rem;color:#969caf;font-weight:600}.matrix-header.is-today{background:#f5ffed;color:#75ec13}.sticky-direction{position:sticky;left:0;z-index:2}.matrix-header.sticky-direction{z-index:4}.direction-cell{background:#fff;border-right:1px solid #e5e6ed;border-bottom:1px solid #ececf2;padding:12px 11px;border-left:4px solid var(--direction);min-height:128px}.direction-title{display:flex;gap:9px;align-items:center}.direction-title>div{display:flex;flex-direction:column}.direction-title b{font-size:0.6875rem}.direction-title small{font-size:0.5312rem;color:#979cad;margin-top:2px}.direction-icon{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;font-size:0.8125rem;font-weight:800;flex:0 0 auto}.direction-focus{font-size:0.5938rem;line-height:1.35;margin:10px 0 5px;color:#4b5165;background:#f8f8fc;border-radius:8px;padding:7px 8px}.direction-focus.empty-focus{color:#a3a7b5;font-style:italic}.focus-editor summary,.cell-add summary{list-style:none;cursor:pointer;color:#75ec13;font-size:0.5625rem;font-weight:700}.focus-editor summary::-webkit-details-marker,.cell-add summary::-webkit-details-marker{display:none}.focus-editor form{display:flex;gap:5px;margin-top:6px}.focus-editor input,.cell-add-form input{min-width:0;width:100%;border:1px solid #e2e3ea;border-radius:7px;padding:7px;font:inherit;font-size:0.5625rem;outline:none}.matrix-cell{background:#fff;border-right:1px solid #ededf3;border-bottom:1px solid #ececf2;padding:8px;min-height:128px}.matrix-cell.is-today{background:#fbfaff}.week-bucket-cell{background:#fcfcfe}.week-bucket-header{background:#f7f6ff}.matrix-task{position:relative;background:#fff;border:1px solid #e9e9f0;border-radius:8px;padding:7px 6px;margin-bottom:6px;display:flex;align-items:flex-start;gap:5px;box-shadow:0 2px 7px #25254506}.matrix-task:before{content:"";position:absolute;left:-1px;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--direction)}.matrix-task.high{border-color:#f2d5de;background:#fffbfc}.matrix-task.done{opacity:.48}.matrix-task.done b{text-decoration:line-through}.matrix-task form{margin:0}.matrix-check{border:0;background:transparent;color:#75ec13;font-size:0.6875rem;line-height:1;cursor:pointer;padding:1px 2px}.matrix-task>div{display:flex;min-width:0;flex-direction:column}.matrix-task b{font-size:0.5938rem;line-height:1.25;font-weight:650;overflow-wrap:anywhere}.matrix-task small{font-size:0.5000rem;color:#9398aa;margin-top:2px;overflow-wrap:anywhere}.cell-add{margin-top:5px}.cell-add.compact summary{width:23px;height:20px;border:1px dashed #d9d6ef;border-radius:6px;display:grid;place-items:center;color:#75ec13}.cell-add-form{display:flex;gap:4px;margin-top:5px}.cell-add-form.vertical{flex-direction:column}.cell-add-form .btn{padding:6px 7px}.unassigned-panel{margin-top:16px}.unassigned-list{display:grid;grid-template-columns:repeat(2,1fr);column-gap:20px}.direction-settings-list{display:flex;flex-direction:column}.direction-setting{display:grid;grid-template-columns:40px 1fr 14px auto;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid #f0f1f5}.direction-setting-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:800}.direction-setting-main{display:flex;flex-direction:column}.direction-setting-main b{font-size:0.7500rem}.direction-setting-main small{font-size:0.5625rem;color:var(--muted);margin-top:2px}.direction-color{width:9px;height:9px;border-radius:50%}.muted-direction{opacity:.48}.color-field{font-size:0.6250rem;color:var(--muted);display:flex;align-items:center;justify-content:space-between}.color-field input{width:60px;height:34px;padding:2px}.inline-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px;vertical-align:1px}@media(max-width:850px){.week-direction-toolbar{align-items:flex-start;flex-direction:column}.direction-matrix{grid-template-columns:150px 145px repeat(7,135px);min-width:1240px}.matrix-header{top:0}.direction-cell{min-height:112px}.matrix-cell{min-height:112px}.unassigned-list{grid-template-columns:1fr}}
/* v0.4 — Weekly directions: pool in first column + click/drag assignment */
.direction-matrix-shell{overflow:auto;position:relative}
.direction-matrix{display:grid;grid-template-columns:260px repeat(7,minmax(158px,1fr));min-width:1366px;align-items:stretch}
.matrix-header{position:static;top:auto;z-index:1;background:#fafafd;border-right:1px solid #ededf3;border-bottom:1px solid #e4e5ed;padding:12px 11px;min-height:54px;display:flex;justify-content:center;flex-direction:column}
.matrix-header.direction-header{align-items:flex-start;background:#f7f7fb}
.matrix-header.day-header{align-items:flex-start}
.matrix-header.is-today{background:#f1ffe7;color:#75ec13}
.sticky-direction{position:sticky;left:0;z-index:2}.matrix-header.sticky-direction{z-index:3}
.direction-cell{min-height:170px;padding:13px 12px;background:#fff;border-right:1px solid #e5e6ed;border-bottom:1px solid #ececf2;border-left:4px solid var(--direction)}
.matrix-cell{min-height:170px;padding:8px;background:#fff;border-right:1px solid #ededf3;border-bottom:1px solid #ececf2;position:relative;cursor:pointer;transition:background .15s ease,box-shadow .15s ease}
.matrix-cell:hover{background:#fbfbff}.matrix-cell.is-today{background:#fbfff8}.matrix-cell.drag-over,.direction-cell.drag-over{background:#f1ffe7!important;box-shadow:inset 0 0 0 2px #75ec13}
.direction-focus{margin:10px 0 6px}.direction-quick-add{display:grid;grid-template-columns:1fr 28px;gap:5px;margin:9px 0}.direction-quick-add input{min-width:0;border:1px solid #e1e2ea;border-radius:8px;padding:8px 9px;outline:none;background:#fff;font:inherit}.direction-quick-add input:focus{border-color:#8b80ed;box-shadow:0 0 0 3px #75ec1310}.direction-add-btn{border:0;border-radius:8px;background:#efffe5;color:#75ec13;font-weight:800;cursor:pointer}
.direction-pool{display:flex;flex-direction:column;gap:5px;margin-top:5px}.pool-task{cursor:grab;margin:0;background:#fbfbfd}.pool-task:active{cursor:grabbing}.pool-empty{color:#a4a9b8;border:1px dashed #e0e1e8;border-radius:8px;padding:8px;font-size:.5625rem;text-align:center}.drag-handle{color:#a5a9b8;letter-spacing:-2px;padding-right:3px;user-select:none}.matrix-task.dragging{opacity:.35}
.day-cell-content{display:flex;flex-direction:column;gap:6px}.scheduled-task{margin:0;cursor:grab}.day-cell-hint{position:absolute;left:8px;right:8px;bottom:8px;border:1px dashed #e1def4;color:#aaa4ca;border-radius:7px;text-align:center;padding:6px;font-size:.5rem;opacity:.65}.matrix-cell:hover .day-cell-hint{opacity:1;color:#75ec13;border-color:#cfc9f3}
.drawer-source{display:none!important}.week-drawer-overlay{position:fixed;inset:0;background:#16182745;z-index:30;opacity:0;pointer-events:none;transition:opacity .2s ease}.week-drawer-overlay.open{opacity:1;pointer-events:auto}.week-drawer{position:fixed;left:-410px;top:0;bottom:0;width:390px;max-width:92vw;background:#fff;z-index:31;box-shadow:20px 0 50px #17182b2b;padding:22px;transition:left .23s ease;overflow:auto}.week-drawer.open{left:0}.drawer-head{display:flex;gap:12px;align-items:flex-start;border-bottom:1px solid #ececf2;padding-bottom:15px}.drawer-head h2{margin:3px 0 2px}.drawer-head p{margin:0;color:var(--muted);font-size:.6875rem}.drawer-close{width:32px;height:32px;border:1px solid #e2e3ea;border-radius:9px;background:#fff;font-size:1.25rem;cursor:pointer}.drawer-help{margin:14px 0;background:#f7f6ff;border-radius:10px;padding:10px;color:#676c7e;font-size:.625rem;line-height:1.45}.drawer-list{display:flex;flex-direction:column;gap:7px}.drawer-task{width:100%;border:1px solid #e8e9ef;border-radius:10px;background:#fff;padding:10px 11px;text-align:left;display:flex;justify-content:space-between;gap:12px;align-items:center;cursor:pointer}.drawer-task:hover{border-color:#bdb5f3;background:#fbfff8}.drawer-task-main{display:flex;flex-direction:column;min-width:0}.drawer-task-main b{font-size:.6875rem}.drawer-task-main small{font-size:.5625rem;color:var(--muted);margin-top:3px}.drawer-task-date{font-size:.5625rem;color:#75ec13;background:#efffe5;border-radius:999px;padding:5px 7px;white-space:nowrap}
.settings-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);gap:16px;margin-top:20px}.settings-card{display:grid;grid-template-columns:55px 1fr;gap:14px}.settings-icon{width:48px;height:48px;border-radius:14px;background:#efffe5;color:#75ec13;display:grid;place-items:center;font-size:1.125rem;font-weight:800}.settings-copy h2{margin:3px 0}.settings-copy p{margin:0;color:var(--muted);font-size:.6875rem;line-height:1.5}.font-slider-wrap{grid-column:1/3;margin-top:15px;border-top:1px solid #eeeef3;padding-top:17px}.font-slider-labels{display:grid;grid-template-columns:auto 1fr auto;align-items:end;margin-bottom:8px;color:#5c6173}.font-slider-labels strong{text-align:center;color:#75ec13}.font-big{font-size:1.375rem}.font-slider-wrap input[type=range]{width:100%;accent-color:#75ec13}.font-presets{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.settings-preview h2{margin:8px 0}.settings-preview p{color:var(--muted);line-height:1.5}.preview-task{border:1px solid #ececf2;border-radius:10px;padding:11px;margin-top:14px;display:flex;align-items:center;gap:7px}.preview-task small{margin-left:auto;color:var(--muted)}
@media(max-width:850px){.direction-matrix{grid-template-columns:220px repeat(7,145px);min-width:1235px}.direction-cell,.matrix-cell{min-height:150px}.settings-layout{display:block}.settings-preview{margin-top:12px}.week-drawer{width:350px}.font-presets{display:grid;grid-template-columns:1fr 1fr}}
/* v0.5 calendar + editable plans/projects */
.current-date-pill{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px;box-shadow:0 3px 12px #20203908}.current-date-pill b{font-size:10px;color:#75ec13}.current-date-pill span{font-size:10px;color:#5f6577}.day-nav{display:flex;gap:5px}.editable-card{position:relative}.editable-card-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.editable-card-head>div:first-child{display:flex;align-items:center;gap:7px}.card-actions{display:flex;gap:9px;align-items:center}.card-actions form{margin:0}.edit-details summary{font-size:9px;color:#75ec13;cursor:pointer;font-weight:700;list-style:none}.edit-details summary::-webkit-details-marker{display:none}.text-danger{border:0;background:transparent;color:#d84c5f;font:inherit;font-size:9px;font-weight:700;cursor:pointer}.edit-body{display:none;margin-top:10px;border-top:1px solid #efeff4;padding-top:10px}.editable-card:has(.edit-details[open]) .edit-body{display:block}.compact-stack{gap:7px}.edit-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}.source-badge{font-size:8px;margin-left:5px;background:#f1f2f6;color:#73798b;border-radius:20px;padding:4px 7px;font-weight:700}.project-actions{display:flex;justify-content:space-between;gap:8px;margin-top:13px;border-top:1px solid #f0f0f4;padding-top:11px}.project-edit-details{flex:1}.project-edit-details summary{display:inline-block;cursor:pointer;list-style:none}.project-edit-details summary::-webkit-details-marker{display:none}.project-edit-form{margin-top:10px;border:1px solid #ececf3;border-radius:10px;padding:10px;background:#fafafd}.danger-btn{color:#d94c5f;border-color:#f0d9de}.integration-note{margin-top:16px;display:flex;gap:14px;align-items:flex-start}.integration-note-icon{width:43px;height:43px;border-radius:12px;background:#efffe5;color:#75ec13;display:grid;place-items:center;font-weight:900}.integration-note h2{margin:0 0 5px;font-size:14px}.integration-note p{margin:0;color:#666d80;font-size:11px;line-height:1.5}
.calendar-toolbar{margin:20px 0 16px;display:flex;justify-content:space-between;align-items:center;gap:14px}.calendar-nav{display:flex;align-items:center;gap:10px}.calendar-nav h2{font-size:18px;margin:2px 0 0}.calendar-actions{display:flex;gap:7px}.calendar-layout{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(280px,.8fr);gap:16px}.calendar-panel{padding:0;overflow:hidden}.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#fafafd;border-bottom:1px solid var(--line)}.calendar-weekdays div{padding:10px;text-align:center;font-size:10px;font-weight:800;color:#7a8091}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{min-height:118px;border-right:1px solid #efeff4;border-bottom:1px solid #efeff4;padding:9px;background:#fff;transition:.15s}.calendar-day:nth-child(7n){border-right:0}.calendar-day:hover{background:#fbfff8}.calendar-day.outside{background:#fbfbfd;color:#a8adbb}.calendar-day.today-date{box-shadow:inset 0 0 0 2px #9af65b}.calendar-day.selected-date{background:#f6fff0}.calendar-day-number{display:flex;justify-content:space-between;align-items:center}.calendar-day-number span{font-size:12px;font-weight:750}.calendar-day-number b{font-size:7px;text-transform:uppercase;color:#75ec13;background:#edffdf;padding:3px 5px;border-radius:10px}.calendar-markers{display:flex;flex-direction:column;gap:4px;margin-top:12px}.calendar-markers span{font-size:8px;padding:4px 6px;border-radius:7px;width:max-content;max-width:100%}.cal-task-dot{background:#eef2ff;color:#5266c8}.cal-done-dot{background:#eaf9f1;color:#218a57}.cal-obligation-dot{background:#fff1e7;color:#c87832}.calendar-day-panel{align-self:start;position:sticky;top:95px}.calendar-section-title{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#9298aa;margin:16px 0 7px}.calendar-list-item{display:flex;gap:8px;align-items:flex-start;padding:9px 0;border-bottom:1px solid #f0f0f4}.calendar-list-item>div{display:flex;flex-direction:column}.calendar-list-item b{font-size:11px}.calendar-list-item small{font-size:9px;color:#858b9d;margin-top:2px}.calendar-list-item.obligation{border-left:2px solid #f3a250;padding-left:8px}.compact-empty{padding:10px;text-align:left}
@media(max-width:1000px){.calendar-layout{grid-template-columns:1fr}.calendar-day-panel{position:static}.calendar-day{min-height:95px}.current-date-pill{display:none}}
@media(max-width:850px){.calendar-toolbar{align-items:flex-start;flex-direction:column}.calendar-grid,.calendar-weekdays{min-width:700px}.calendar-panel{overflow:auto}.edit-row{grid-template-columns:1fr}}
/* ===== v0.6 mobile shell ===== */
.mobile-menu-button,.mobile-sidebar-close,.mobile-bottom-nav{display:none}
.sidebar-brand-row{display:flex;align-items:center;justify-content:space-between}
.sidebar-brand-row .brand{padding-bottom:28px}
.mobile-sidebar-overlay{display:none;position:fixed;inset:0;background:#16182755;z-index:49}
.notification-bell{border:0;background:transparent;color:#656b7e;font:inherit;cursor:pointer;position:relative}
.notification-popover{display:none;position:fixed;right:28px;top:70px;width:310px;background:#fff;border:1px solid var(--line);border-radius:14px;z-index:60;box-shadow:0 18px 50px #20203922;padding:13px}
.notification-popover.open{display:block}
.notification-popover-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #efeff4;padding-bottom:8px}
.notification-popover-head button{border:0;background:transparent;font-size:18px;cursor:pointer}
.notification-popover-body{padding:8px 0}
.notification-line{display:flex;gap:9px;padding:7px 0;border-bottom:1px solid #f2f2f5;font-size:11px}
.notification-line b{color:#75ec13}
.notification-popover>a{font-size:10px;color:#75ec13;font-weight:700}
/* ===== v0.6 dashboard widgets ===== */
.dashboard-customize-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:20px 0 12px;background:#fff;border:1px solid var(--line);border-radius:15px;padding:13px 16px}
.dashboard-customize-bar p{margin:3px 0 0;color:var(--muted);font-size:10px}
.dashboard-widget-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.dashboard-widget{position:relative;min-width:0}
.dashboard-widget.widget-span-2{grid-column:span 2}
.dashboard-widget.widget-wide{grid-column:1/-1;background:transparent;border:0;box-shadow:none;padding:0}
.widget-is-hidden{display:none!important}
.widget-controlbar{height:28px;display:flex;align-items:center;gap:7px;margin:-6px -4px 8px;color:#9aa0af;font-size:9px}
.widget-controlbar b{color:#6d7283;font-weight:650}
.widget-drag{cursor:grab;font-size:15px;line-height:1}
.widget-hide{margin-left:auto;border:0;background:transparent;color:#a4a8b6;cursor:pointer;font-size:15px}
.widget-dragging{opacity:.4}
.dashboard-widget .metrics{margin:0}
.focus-widget-body{display:flex;gap:12px;align-items:center}
.focus-widget-body>div:last-child{display:flex;flex-direction:column;gap:4px}
.focus-widget-body span{font-size:9px;color:var(--muted)}
.modal-overlay{position:fixed;inset:0;background:#17182b50;z-index:70;opacity:0;pointer-events:none}
.modal-overlay.open{opacity:1;pointer-events:auto}
.widget-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-47%);width:min(520px,92vw);background:#fff;border-radius:17px;padding:18px;z-index:71;box-shadow:0 25px 80px #17182b33;opacity:0;pointer-events:none;transition:.18s}
.widget-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.widget-modal-head{display:flex;justify-content:space-between}
.widget-modal-head h2{margin:3px 0}
.widget-modal-head button{border:0;background:transparent;font-size:22px;cursor:pointer}
.widget-modal>p{color:var(--muted);font-size:11px}
.widget-catalog{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}
.widget-catalog-item{border:1px solid #e7e7ee;background:#fff;border-radius:10px;padding:11px;display:flex;justify-content:space-between;cursor:pointer;text-align:left}
.widget-catalog-item span{font-size:11px;font-weight:700}
.widget-catalog-item b{font-size:9px;color:#75ec13}
.widget-catalog-item.is-active{opacity:.55}
/* ===== v0.6 settings ===== */
.settings-page-grid{display:grid;grid-template-columns:190px minmax(0,780px);gap:16px;margin-top:20px;align-items:start}
.settings-nav{position:sticky;top:94px;display:flex;flex-direction:column;padding:8px}
.settings-nav a{padding:10px;border-radius:8px;font-size:11px;font-weight:650}
.settings-nav a:hover{background:#f5ffed;color:#75ec13}
.settings-sections{display:flex;flex-direction:column;gap:16px}
.settings-section{scroll-margin-top:95px}
.settings-section-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:15px}
.settings-section-head h2{margin:2px 0 4px}
.settings-section-head p{margin:0;color:var(--muted);font-size:10px}
.settings-form{display:flex;flex-direction:column;gap:11px}
.settings-form label{display:flex;flex-direction:column;gap:5px;font-size:10px;font-weight:700;color:#565c70}
.settings-form input,.settings-form select{border:1px solid #e2e3ea;border-radius:9px;padding:10px;background:#fff;font:inherit;color:#202437}
.settings-form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.setting-toggle{flex-direction:row!important;align-items:center;justify-content:space-between;border:1px solid #eeeef3;border-radius:11px;padding:11px}
.setting-toggle span{display:flex;flex-direction:column;gap:3px}
.setting-toggle small{color:var(--muted);font-weight:400}
.setting-toggle input{width:18px;height:18px;accent-color:#75ec13}
.notification-permission{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;background:#fafafd;border:1px solid #eeeef3;border-radius:11px;padding:11px;margin-bottom:12px}
.notification-permission>div{display:flex;flex-direction:column}
.notification-permission b{font-size:11px}
.notification-permission small{font-size:9px;color:var(--muted)}
.logout-form{margin-top:12px}
/* ===== v0.6 login ===== */
.login-body{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#f8f9fc,#f1efff);padding:20px}
.login-card{width:min(390px,100%);background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:0 20px 70px #302b6418}
.login-brand{display:flex;align-items:center;gap:10px}
.login-card h1{font-size:21px;margin:25px 0 6px}
.login-card p{font-size:11px;color:var(--muted);margin:0 0 18px}
.login-error{background:#fff0f1;color:#c14352;border-radius:9px;padding:9px;font-size:10px;margin-bottom:10px}
/* ===== v0.6 week drawer right ===== */
.week-drawer{left:auto!important;right:-410px!important;box-shadow:-20px 0 50px #17182b2b!important;transition:right .23s ease!important}
.week-drawer.open{left:auto!important;right:0!important}
.drawer-head{justify-content:space-between}
.drawer-task.assigning{opacity:.45;pointer-events:none}
.mobile-week-stack{display:none}
@media(max-width:850px){
body{padding-bottom:67px}
.app-shell{display:block}
.main{padding:0 10px 28px}
.sidebar{display:flex!important;position:fixed!important;left:0;top:0;bottom:0;width:min(310px,86vw)!important;height:100vh!important;transform:translateX(-105%);transition:transform .22s ease;z-index:50;padding:18px 14px;overflow:auto}
.sidebar.mobile-open{transform:translateX(0)}
.sidebar nav{display:flex!important;grid-template-columns:none!important}
.mobile-sidebar-overlay.open{display:block}
.mobile-sidebar-close{display:block;border:0;background:transparent;font-size:22px;cursor:pointer}
.mobile-menu-button{display:grid;width:34px;height:34px;place-items:center;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:17px;cursor:pointer}
.topbar{grid-template-columns:36px 1fr auto!important;gap:8px;height:66px;padding:8px 0}
.topbar-heading{min-width:0}
.topbar-heading h1{font-size:18px}
.topbar-heading .subtitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50vw}
.topbar .search{display:none}
.topicons{gap:8px}
.current-date-pill{display:none!important}
.avatar{width:31px;height:31px}
.mobile-bottom-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);left:0;right:0;bottom:0;height:64px;background:#fff;border-top:1px solid #e7e7ee;z-index:45;padding-bottom:max(0px,env(safe-area-inset-bottom));box-shadow:0 -10px 30px #22223b0c}
.mobile-bottom-nav a{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;color:#858b9e;font-size:16px}
.mobile-bottom-nav a b{font-size:8px;font-weight:650}
.mobile-bottom-nav a.active{color:#75ec13}
.notification-popover{right:10px;left:10px;top:61px;width:auto}
.dashboard-customize-bar{align-items:flex-start}
.dashboard-customize-bar p{display:none}
.dashboard-widget-grid{display:block}
.dashboard-widget,.dashboard-widget.widget-span-2,.dashboard-widget.widget-wide{margin-bottom:12px}
.dashboard-widget .metrics{grid-template-columns:1fr 1fr}
.widget-controlbar{height:24px}
.widget-catalog{grid-template-columns:1fr}
.desktop-week-matrix{display:none}
.mobile-week-stack{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.mobile-direction-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--direction);border-radius:13px;padding:11px}
.mobile-direction-head{display:flex;gap:9px;align-items:center}
.mobile-direction-head>div{display:flex;flex-direction:column}
.mobile-direction-head b{font-size:11px}
.mobile-direction-head small{font-size:9px;color:var(--muted);margin-top:2px}
.mobile-add{margin:9px 0}
.mobile-task-pool{display:flex;gap:5px;overflow:auto;padding-bottom:3px}
.mobile-pool-task{white-space:nowrap;border:1px solid #e8e8ef;border-radius:8px;padding:6px 8px;font-size:9px;background:#fafafd}
.mobile-days-row{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:9px}
.mobile-day-cell{border:1px solid #e7e7ee;background:#fff;border-radius:8px;min-width:0;padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:2px;color:#4d5367}
.mobile-day-cell b{font-size:8px}
.mobile-day-cell span{font-size:10px;font-weight:750}
.mobile-day-cell em{font-size:7px;font-style:normal;color:#75ec13;background:#efffe5;min-width:14px;height:14px;border-radius:10px;display:grid;place-items:center}
.mobile-day-cell.is-today{border-color:#75ec13;background:#f6f4ff}
.week-drawer{width:min(360px,92vw)!important;right:-100%!important}
.week-drawer.open{right:0!important}
.settings-page-grid{display:block}
.settings-nav{position:static;display:flex;flex-direction:row;overflow:auto;gap:4px;margin-bottom:12px;white-space:nowrap}
.settings-nav a{background:#fafafd}
.settings-form-row{grid-template-columns:1fr}
.notification-permission{grid-template-columns:1fr 1fr}
.notification-permission>div{grid-column:1/3}
}
/* ===== v0.7 interaction fixes ===== */
.widget-drag{touch-action:none;user-select:none;-webkit-user-select:none}.widget-armed{outline:1px solid #d9d4ff;outline-offset:3px}.widget-dragging{opacity:.32!important;transform:scale(.99)}
.dashboard-widget{transition:box-shadow .12s ease,opacity .12s ease}.dashboard-widget-grid:has(.widget-dragging) .dashboard-widget:not(.widget-dragging){box-shadow:0 8px 28px #2020390d}
.drawer-task.assigned-selected{border-color:#75ec13;background:#f6fff0;box-shadow:0 0 0 2px #75ec1312}.drawer-task.assigned-selected .drawer-task-date{background:#75ec13;color:#fff}.drawer-task.assigning{opacity:.5!important}
.nav-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.nav-settings-grid>.btn,.protected-nav-note{grid-column:1/-1}.protected-nav-note{font-size:.625rem;color:#6e7487;background:#fafafd;border:1px solid #eeeef3;border-radius:10px;padding:10px}.protected-nav-note b{color:#33384b}
.mobile-bottom-nav{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:1fr}
@media(max-width:850px){.nav-settings-grid{grid-template-columns:1fr}.nav-settings-grid>.btn,.protected-nav-note{grid-column:1}.dashboard-widget[draggable=true]{-webkit-user-drag:none}.widget-drag{cursor:default}}
/* v0.8 weekly masters stay reusable across all days */
.week-drawer-overlay.open{pointer-events:none!important;background:#16182718!important}
.pool-task[data-task-kind="template"]{cursor:copy}
.weekly-plan-choice.assigned-selected{border-color:#75ec13;background:#f6fff0}
.weekly-plan-choice.assigned-selected .drawer-task-date{background:#75ec13;color:#fff}
/* ===== v0.9 soft navigation / continuous entry / project progress ===== */
.main.soft-loading{opacity:.55;pointer-events:none;transition:opacity .12s ease}
.project-progress-summary{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.project-progress-summary small{font-size:8px;color:var(--muted);font-weight:500;margin-top:3px}
.project-progress-input{display:flex;align-items:center;gap:8px;font-size:9px;color:#606679}
.project-progress-input input{width:90px!important}
.project-progress-input.is-muted{opacity:.45}
.direction-quick-add input[name="title"]:focus{border-color:#75ec13;box-shadow:0 0 0 3px #7164e812;background:#fff}
.direction-quick-add.is-saving{opacity:.6;pointer-events:none}
@media(max-width:850px){.project-progress-summary{align-items:flex-start}.project-progress-input{justify-content:space-between}}
/* ===== v0.10 theme switch ===== */
.topbar-search-group{
display:grid;
grid-template-columns:minmax(0,1fr) 42px;
align-items:center;
gap:8px;
min-width:0;
}
.topbar-search-group .search{width:100%}
.theme-toggle{
width:42px;
height:42px;
border:1px solid var(--line);
border-radius:12px;
background:#fff;
color:#606679;
display:grid;
place-items:center;
cursor:pointer;
box-shadow:0 4px 16px #28284a08;
position:relative;
transition:background .16s ease,border-color .16s ease,color .16s ease,transform .12s ease;
}
.theme-toggle:hover{transform:translateY(-1px)}
.theme-icon{position:absolute;font-size:16px;transition:opacity .16s ease,transform .16s ease}
.theme-sun{opacity:0;transform:rotate(-30deg) scale(.8)}
.theme-moon{opacity:1;transform:rotate(0) scale(1)}
html[data-theme="dark"] .theme-sun{opacity:1;transform:rotate(0) scale(1)}
html[data-theme="dark"] .theme-moon{opacity:0;transform:rotate(30deg) scale(.8)}
/* Dark palette. Accent colors stay unchanged. */
html[data-theme="dark"]{
color-scheme:dark;
--ink:#eef0f7;
--muted:#9ba2b5;
--line:#303443;
--card:#191c25;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .main{
background:#11131a!important;
color:#eef0f7!important;
}
html[data-theme="dark"] .sidebar{
background:#151821!important;
border-color:#2b2f3d!important;
}
html[data-theme="dark"] .sidebar nav a{color:#c7cada!important}
html[data-theme="dark"] .sidebar nav a span{color:#8d94aa!important}
html[data-theme="dark"] .sidebar nav a.active,
html[data-theme="dark"] .sidebar nav a.active span{color:#fff!important}
html[data-theme="dark"] .integration,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .dashboard-customize-bar,
html[data-theme="dark"] .widget-modal,
html[data-theme="dark"] .notification-popover,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .current-date-pill,
html[data-theme="dark"] .mobile-direction-card{
background:#191c25!important;
border-color:#303443!important;
box-shadow:0 6px 22px #00000022!important;
}
html[data-theme="dark"] .topbar{
background:#11131aeF!important;
border-color:#282c38!important;
backdrop-filter:blur(14px);
}
html[data-theme="dark"] .search,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .mobile-menu-button{
background:#191c25!important;
border-color:#303443!important;
color:#d8dbea!important;
box-shadow:none!important;
}
html[data-theme="dark"] .search input{
background:transparent!important;
color:#eef0f7!important;
}
html[data-theme="dark"] .search input::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:#72798e!important}
html[data-theme="dark"] .search kbd{
background:#20242f!important;
border-color:#363b4b!important;
color:#8e95a8!important;
}
html[data-theme="dark"] .topicons{color:#a5abbd!important}
html[data-theme="dark"] .current-date-pill span{color:#b6bbca!important}
html[data-theme="dark"] .notification-bell{color:#b3b8c9!important}
html[data-theme="dark"] .btn,
html[data-theme="dark"] .btn.ghost,
html[data-theme="dark"] button:not(.btn.primary):not(.check.checked):not(.sidebar nav a){
border-color:#383d4d;
}
html[data-theme="dark"] .btn,
html[data-theme="dark"] .btn.ghost{
background:#20232d!important;
color:#c8c4ff!important;
}
html[data-theme="dark"] .btn.primary{
background:linear-gradient(90deg,#75ec13,#9af65b)!important;
color:#fff!important;
}
html[data-theme="dark"] .plus,
html[data-theme="dark"] .focus-icon,
html[data-theme="dark"] .integration-note-icon{
background:#27243c!important;
}
html[data-theme="dark"] .metric span,
html[data-theme="dark"] .metric small,
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .panel-head span,
html[data-theme="dark"] small,
html[data-theme="dark"] .empty{
color:#9ba2b5!important;
}
html[data-theme="dark"] .mini-task,
html[data-theme="dark"] .board-task,
html[data-theme="dark"] .calendar-day,
html[data-theme="dark"] .preview-task,
html[data-theme="dark"] .project-edit-form,
html[data-theme="dark"] .notification-permission,
html[data-theme="dark"] .setting-toggle,
html[data-theme="dark"] .widget-catalog-item,
html[data-theme="dark"] .mobile-pool-task,
html[data-theme="dark"] .mobile-day-cell,
html[data-theme="dark"] .matrix-task,
html[data-theme="dark"] .direction-focus,
html[data-theme="dark"] .week-direction-toolbar,
html[data-theme="dark"] .direction-matrix-shell,
html[data-theme="dark"] .direction-cell,
html[data-theme="dark"] .matrix-cell,
html[data-theme="dark"] .drawer-task{
background:#1d202a!important;
border-color:#303443!important;
color:#e7e9f2!important;
}
html[data-theme="dark"] .board-col,
html[data-theme="dark"] .calendar-weekdays,
html[data-theme="dark"] .matrix-header,
html[data-theme="dark"] .week-bucket-header,
html[data-theme="dark"] .calendar-day.outside{
background:#171a22!important;
border-color:#303443!important;
}
html[data-theme="dark"] .calendar-day:hover,
html[data-theme="dark"] .calendar-day.selected-date,
html[data-theme="dark"] .matrix-header.is-today,
html[data-theme="dark"] .matrix-cell.is-today,
html[data-theme="dark"] .mobile-day-cell.is-today{
background:#24213a!important;
}
html[data-theme="dark"] .focus-panel,
html[data-theme="dark"] .soft{
background:linear-gradient(135deg,#191c25,#211e33)!important;
}
html[data-theme="dark"] .week-drawer{
background:#171a22!important;
border-left:1px solid #303443!important;
}
html[data-theme="dark"] .drawer-head{
background:#171a22!important;
border-color:#303443!important;
}
html[data-theme="dark"] .drawer-task:hover{background:#242837!important}
html[data-theme="dark"] .drawer-task.is-assigned{background:#25213a!important}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-grid input,
html[data-theme="dark"] .form-grid select,
html[data-theme="dark"] .form-grid textarea,
html[data-theme="dark"] .stack input,
html[data-theme="dark"] .stack select,
html[data-theme="dark"] .stack textarea,
html[data-theme="dark"] .inline-form input,
html[data-theme="dark"] .big-search input,
html[data-theme="dark"] .quick-capture textarea,
html[data-theme="dark"] .review-grid textarea,
html[data-theme="dark"] .settings-form input,
html[data-theme="dark"] .settings-form select,
html[data-theme="dark"] .direction-quick-add input,
html[data-theme="dark"] .focus-editor input,
html[data-theme="dark"] .cell-add-form input{
background:#151821!important;
border-color:#373c4c!important;
color:#eef0f7!important;
}
html[data-theme="dark"] select{color-scheme:dark}
html[data-theme="dark"] .check{
background:#151821!important;
border-color:#565d70!important;
}
html[data-theme="dark"] .check.checked{
background:#27b76f!important;
border-color:#27b76f!important;
}
html[data-theme="dark"] .progress{background:#303443!important}
html[data-theme="dark"] .today-list,
html[data-theme="dark"] .today-row,
html[data-theme="dark"] .ob-row,
html[data-theme="dark"] .obligation-full,
html[data-theme="dark"] .task-row,
html[data-theme="dark"] .backlog-row,
html[data-theme="dark"] .activity,
html[data-theme="dark"] .plan-item,
html[data-theme="dark"] .inbox-item,
html[data-theme="dark"] .calendar-list-item,
html[data-theme="dark"] .project-actions,
html[data-theme="dark"] .edit-body,
html[data-theme="dark"] .font-slider-wrap,
html[data-theme="dark"] .notification-popover-head,
html[data-theme="dark"] .notification-line{
border-color:#2c303e!important;
}
html[data-theme="dark"] .status,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .source-badge{
background:#292542!important;
color:#a99fff!important;
}
html[data-theme="dark"] .badge.success{background:#183426!important;color:#64d69a!important}
html[data-theme="dark"] .calendar-day.today-date{box-shadow:inset 0 0 0 2px #9af65b!important}
html[data-theme="dark"] .cal-task-dot{background:#232a45!important;color:#93a5ff!important}
html[data-theme="dark"] .cal-done-dot{background:#183426!important;color:#67d99d!important}
html[data-theme="dark"] .cal-obligation-dot{background:#3b2a1e!important;color:#f2b879!important}
html[data-theme="dark"] .mobile-bottom-nav{
background:#151821!important;
border-color:#2e3240!important;
box-shadow:0 -10px 30px #00000022!important;
}
html[data-theme="dark"] .settings-nav a:hover,
html[data-theme="dark"] .settings-nav a.active{
background:#25213a!important;
}
html[data-theme="dark"] .flash{
background:#183426!important;
color:#75dfa7!important;
}
html[data-theme="dark"] .login-body{
background:linear-gradient(135deg,#0f1117,#171425)!important;
}
html[data-theme="dark"] .login-error{
background:#351d25!important;
color:#ff9aab!important;
}
@media(max-width:850px){
.topbar-search-group{display:none}
}
/* ===== v0.11 week motto + plan recurrence ===== */
.topbar-search-group{grid-template-columns:minmax(0,1fr) 42px 42px}
.settings-gear{width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:#fff;color:#606679;display:grid;place-items:center;font-size:16px;box-shadow:0 4px 16px #28284a08;transition:.16s}
.settings-gear:hover,.settings-gear.active{color:#75ec13;border-color:#cfc9ff;background:#f7fff2;transform:translateY(-1px)}
.week-page-heading h1{display:flex;align-items:center;gap:8px}.week-number{min-width:32px;height:27px;padding:0 8px;border-radius:9px;background:#edffdf;color:#75ec13;display:inline-grid;place-items:center;font-size:.65em}
.week-motto-wrap{display:flex;align-items:center;gap:7px;margin-top:7px;max-width:680px}.week-motto-icon{color:#75ec13}.week-motto-input{border:0;border-bottom:1px dashed #cec9ec;background:transparent;padding:4px 2px;width:min(560px,62vw);font:inherit;font-size:11px;color:#575d70;outline:none}.week-motto-input:focus{border-bottom-color:#75ec13;color:#25293a}.week-motto-state{font-size:8px;color:#7c8497;min-width:55px}
.weekly-plan-edit-trigger{cursor:pointer}.weekly-plan-edit-trigger .drag-handle{cursor:grab}.mobile-pool-task.weekly-plan-edit-trigger{border:1px solid #e8e8ef;background:#fafafd;display:flex;align-items:center;gap:5px;color:inherit}.mobile-pool-task i{color:#75ec13;font-style:normal;font-size:10px}
.week-plan-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-47%);width:min(520px,92vw);background:#fff;border:1px solid var(--line);border-radius:17px;padding:18px;z-index:82;box-shadow:0 25px 80px #17182b33;opacity:0;pointer-events:none;transition:.18s}.week-plan-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}#weekPlanModalOverlay{z-index:81}.field-label{display:flex;flex-direction:column;gap:6px;font-size:10px;font-weight:700;color:#555c70}.field-label textarea,.field-label select{width:100%;border:1px solid #e2e3ea;border-radius:9px;padding:10px;background:#fff;color:#222739;font:inherit}.recurrence-days{display:none;grid-template-columns:repeat(7,1fr);gap:5px}.recurrence-days.active{display:grid}.recurrence-days label{cursor:pointer}.recurrence-days input{display:none}.recurrence-days span{height:32px;border:1px solid #e3e4ec;border-radius:8px;display:grid;place-items:center;font-size:9px;font-weight:750;color:#6f7587}.recurrence-days input:checked+span{background:#edffdf;border-color:#9af65b;color:#75ec13}.modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px}.save-state{margin-right:auto;font-size:9px;color:#6d7589}
/* ===== v0.11 calendar views ===== */
.calendar-toolbar{display:grid;grid-template-columns:1fr auto auto}.calendar-view-switch{display:flex;gap:3px;background:#f5f5f9;border:1px solid #e7e8ef;padding:3px;border-radius:10px}.calendar-view-btn{padding:7px 10px;border-radius:7px;font-size:9px;font-weight:750;color:#777e90}.calendar-view-btn.active{background:#fff;color:#75ec13;box-shadow:0 2px 8px #2525450c}.calendar-quick-add{margin-bottom:16px;display:grid;grid-template-columns:minmax(190px,.7fr) minmax(0,2fr);gap:14px;align-items:center}.calendar-add-label{display:flex;gap:10px;align-items:center}.calendar-add-label>div{display:flex;flex-direction:column}.calendar-add-label b{font-size:11px}.calendar-add-label small{font-size:8.5px;color:var(--muted);line-height:1.35;margin-top:2px}.calendar-external-icon{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;background:#e9f7f5;color:#159d8a;font-weight:900}.calendar-add-form{display:grid;grid-template-columns:145px 105px minmax(170px,1fr) minmax(140px,.8fr) auto;gap:6px}.calendar-add-form input{min-width:0;border:1px solid #e2e3ea;border-radius:8px;padding:8px;font:inherit;font-size:9px;background:#fff;color:#24283a}.cal-event-dot{background:#e7f8f5;color:#168f7e}.calendar-hint{text-align:center;color:#969cad;font-size:8.5px;margin:8px 0 18px}
.calendar-day-view{display:grid;grid-template-columns:minmax(0,2fr) minmax(240px,.7fr);gap:16px}.day-view-section{margin-top:17px}.day-view-section h3,.day-view-aside h3{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#8a91a4;display:flex;gap:5px}.day-view-section h3 span{color:#75ec13}.calendar-day-task{display:flex;align-items:flex-start;gap:8px;padding:10px 0;border-bottom:1px solid #f0f0f4}.calendar-day-task>div{display:flex;flex-direction:column}.calendar-day-task b{font-size:11px}.calendar-day-task small{font-size:9px;color:var(--muted);margin-top:2px}.calendar-day-task.done{opacity:.5}.calendar-day-task.done b{text-decoration:line-through}.calendar-external-item{display:grid;grid-template-columns:50px 1fr auto auto;align-items:start;gap:8px;padding:10px 0;border-bottom:1px solid #f0f0f4}.calendar-item-time{font-size:10px;font-weight:800;color:#159d8a}.calendar-item-body{display:flex;flex-direction:column}.calendar-item-body b{font-size:11px}.calendar-item-body small{font-size:9px;color:var(--muted);margin-top:3px}.item-edit summary{list-style:none;cursor:pointer;font-size:9px;color:#75ec13;font-weight:700}.item-edit summary::-webkit-details-marker{display:none}.compact-edit-form{margin-top:7px}.icon-delete{border:0;background:transparent;color:#d65567;font-size:16px;cursor:pointer;padding:2px 5px}
.calendar-week-view{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding:0;overflow:hidden}.calendar-week-column{min-height:420px;border-right:1px solid #ececf2;padding:8px}.calendar-week-column:last-child{border-right:0}.calendar-week-column.today-column{background:#fbfaff}.calendar-week-head{display:flex;justify-content:space-between;align-items:center;padding:6px 4px 10px;border-bottom:1px solid #ececf2;margin-bottom:7px}.calendar-week-head b{font-size:10px}.calendar-week-head span{font-size:9px;color:var(--muted)}.calendar-week-task{display:flex;gap:6px;align-items:flex-start;background:#fafafd;border:1px solid #ebebf1;border-radius:7px;padding:7px;margin-bottom:5px;font-size:9px;line-height:1.25}.calendar-week-task i{width:5px;height:5px;border-radius:50%;margin-top:3px;flex:0 0 auto}.calendar-week-task.external{background:#f2fbf9;border-color:#dcefeb}.calendar-week-task.external i{background:#20a994}.calendar-week-task.obligation{background:#fff8f1;border-color:#f1e2d1}.calendar-week-task.obligation i{background:#e49a51}.calendar-week-empty{text-align:center;color:#b0b4bf;padding:18px 0}
.calendar-year-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.mini-month{padding:11px}.mini-month-title{font-size:11px;font-weight:800;color:#303548;display:block;margin-bottom:8px}.mini-weekdays,.mini-month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.mini-weekdays span{text-align:center;font-size:7px;color:#9ca1b0;padding-bottom:3px}.mini-day{position:relative;aspect-ratio:1;display:grid;place-items:center;border-radius:5px;font-size:8px;color:#555b6d}.mini-day:hover{background:#f1ffe7;color:#75ec13}.mini-day.outside{opacity:.18}.mini-day.today-date{background:#75ec13;color:#fff}.mini-day i{position:absolute;width:3px;height:3px;background:#20a994;border-radius:50%;bottom:2px}
/* ===== v0.11 editable cards ===== */
.editable-list{display:flex;flex-direction:column;gap:8px}.editable-card .row-actions,.row-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.row-actions form{margin:0}.inline-edit-panel{margin-top:10px;padding-top:10px;border-top:1px solid #ececf2}.inline-edit-panel[hidden]{display:none!important}.wide-edit{grid-column:1/-1;width:100%}.card-menu-actions details{position:relative}.card-menu-actions summary{list-style:none;cursor:pointer;color:#858b9d;font-weight:800}.card-menu-actions summary::-webkit-details-marker{display:none}.card-menu-pop{position:absolute;right:0;top:22px;min-width:130px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:5px;z-index:5;box-shadow:0 10px 30px #25254515}.card-menu-pop button{display:block;width:100%;border:0;background:transparent;text-align:left;padding:7px;border-radius:6px;font:inherit;font-size:9px;cursor:pointer}.card-menu-pop button:hover{background:#f6f5fb}.danger-link{color:#d65567}.contact-card{display:grid;grid-template-columns:42px 1fr;gap:10px}.contact-card-body{min-width:0}.contact-card-title{display:flex;justify-content:space-between;gap:8px;align-items:start}.contact-card-title h3{margin:0}.contact-edit{grid-column:1/-1}
html[data-theme="dark"] .settings-gear,html[data-theme="dark"] .week-plan-modal,html[data-theme="dark"] .card-menu-pop{background:#191c25!important;border-color:#303443!important;color:#d9dceb!important}
html[data-theme="dark"] .settings-gear:hover,html[data-theme="dark"] .settings-gear.active{background:#25213a!important;border-color:#6258a7!important;color:#b3a8ff!important}
html[data-theme="dark"] .week-motto-input{color:#b8becf;border-color:#45495a}html[data-theme="dark"] .week-motto-input:focus{color:#eef0f7;border-color:#8072e8}
html[data-theme="dark"] .field-label textarea,html[data-theme="dark"] .field-label select,html[data-theme="dark"] .calendar-add-form input{background:#151821!important;border-color:#373c4c!important;color:#eef0f7!important}
html[data-theme="dark"] .recurrence-days span{border-color:#393e4e;color:#aeb4c5}html[data-theme="dark"] .recurrence-days input:checked+span{background:#2a2542;border-color:#7768d6;color:#b8aeff}
html[data-theme="dark"] .calendar-view-switch{background:#171a22;border-color:#303443}html[data-theme="dark"] .calendar-view-btn.active{background:#25213a;color:#b2a7ff;box-shadow:none}
html[data-theme="dark"] .calendar-week-task{background:#1d202a;border-color:#303443}html[data-theme="dark"] .calendar-week-task.external{background:#172724;border-color:#28403c}html[data-theme="dark"] .calendar-week-task.obligation{background:#2c241c;border-color:#453527}
html[data-theme="dark"] .calendar-week-column.today-column{background:#1c1929}html[data-theme="dark"] .mini-month-title{color:#e7e9f2}html[data-theme="dark"] .mini-day{color:#bac0d0}html[data-theme="dark"] .mini-day:hover{background:#2a2542;color:#b3a8ff}
html[data-theme="dark"] .inline-edit-panel,html[data-theme="dark"] .calendar-day-task,html[data-theme="dark"] .calendar-external-item,html[data-theme="dark"] .calendar-week-head{border-color:#2d3140!important}
@media(max-width:1150px){.calendar-add-form{grid-template-columns:130px 95px 1fr 1fr}.calendar-add-form .btn{grid-column:4}.calendar-year-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:850px){
.week-motto-input{width:calc(100vw - 105px)}.week-direction-toolbar{margin-top:12px}.week-toolbar-actions{overflow:auto;max-width:100%}
.week-plan-modal{width:94vw;padding:15px}.recurrence-days{gap:3px}.recurrence-days span{height:30px}
.calendar-toolbar{grid-template-columns:1fr;align-items:stretch}.calendar-view-switch{width:100%;justify-content:space-between}.calendar-view-btn{flex:1;text-align:center}.calendar-quick-add{grid-template-columns:1fr}.calendar-add-form{grid-template-columns:1fr 1fr}.calendar-add-form input:nth-of-type(3),.calendar-add-form input:nth-of-type(4),.calendar-add-form .btn{grid-column:1/-1}.calendar-day-view{grid-template-columns:1fr}.calendar-week-view{overflow:auto;grid-template-columns:repeat(7,150px)}.calendar-year-grid{grid-template-columns:repeat(2,1fr)}.calendar-external-item{grid-template-columns:42px 1fr auto}.calendar-external-item form{grid-column:3}.settings-gear{display:none}
.obligation-full{display:grid;grid-template-columns:1fr auto}.obligation-full .row-actions,.obligation-full .wide-edit{grid-column:1/-1}.contact-card{grid-template-columns:36px 1fr}
}
@media(max-width:520px){.calendar-year-grid{grid-template-columns:1fr}.calendar-add-form{grid-template-columns:1fr}.calendar-add-form>*{grid-column:1!important}}
/* ===== v0.12 week 33 correction / completion / travel ===== */
.calendar-task-check{
width:22px;height:22px;border:1px solid #d9dbea;border-radius:7px;background:#fff;
color:#75ec13;display:grid;place-items:center;cursor:pointer;font-size:11px;line-height:1;
flex:0 0 auto;padding:0;
}
.calendar-task-check.compact{width:18px;height:18px;border-radius:6px;font-size:9px}
.calendar-task-check.checked{background:#eaf9f1;border-color:#bfe8d0;color:#218a57}
.task-status-host.done{opacity:.52}
.task-status-host.done b,.calendar-week-task.done span{text-decoration:line-through}
.task-toggle-form{margin:0;flex:0 0 auto}
.calendar-day-task .task-toggle-form{margin-top:-1px}
.calendar-week-task .task-toggle-form{margin-top:-2px}
.calendar-list-item .task-toggle-form{margin-top:-1px}
.travel-week-panel{margin:18px 0 16px;border-left:4px solid var(--direction);overflow:hidden}
.travel-week-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,430px);gap:18px;align-items:center;padding-bottom:14px;border-bottom:1px solid #eeeef3}
.travel-title-wrap{display:flex;gap:11px;align-items:flex-start}
.travel-title-wrap h2{margin:2px 0 4px;font-size:17px}
.travel-title-wrap p{margin:0;color:var(--muted);font-size:10px;line-height:1.45}
.travel-quick-add{margin:0}
.travel-plan-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px}
.travel-plan-card{border:1px solid #e8e9ef;background:#fff;border-radius:10px;padding:10px 11px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;cursor:pointer;min-height:56px;color:var(--ink)}
.travel-plan-card:hover{border-color:#cfcaf2;background:#fbfaff}
.travel-plan-card b{font-size:10px;line-height:1.25}
.travel-plan-card small{font-size:8px;color:#8d93a5;line-height:1.3}
html[data-theme="dark"] .calendar-task-check{background:#151821;border-color:#3a3f50;color:#9f95ff}
html[data-theme="dark"] .calendar-task-check.checked{background:#183426;border-color:#28503a;color:#66d89c}
html[data-theme="dark"] .travel-week-head{border-color:#2d3140}
html[data-theme="dark"] .travel-plan-card{background:#1d202a;border-color:#303443;color:#edf0f7}
html[data-theme="dark"] .travel-plan-card:hover{background:#25213a;border-color:#514a79}
@media(max-width:1100px){.travel-plan-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){
.travel-week-head{grid-template-columns:1fr;gap:12px}
.travel-plan-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.travel-week-panel{margin-top:12px}
}
@media(max-width:520px){.travel-plan-list{grid-template-columns:1fr}}
.task-row.task-status-host.done .task-main b{text-decoration:line-through}
/* ===== v0.13 quick font control / recurrence / travel editor ===== */
.topbar-search-group{
grid-template-columns:minmax(0,1fr) 42px 42px 42px!important;
}
.font-quick-wrap{position:relative}
.font-quick-toggle{
width:42px;height:42px;border:1px solid var(--line);border-radius:12px;
background:#fff;color:#606679;display:grid;place-items:center;cursor:pointer;
font-weight:800;font-size:12px;box-shadow:0 4px 16px #28284a08;transition:.16s
}
.font-quick-toggle:hover{transform:translateY(-1px)}
.font-quick-popover{
display:none;position:absolute;right:0;top:49px;width:245px;background:#fff;
border:1px solid var(--line);border-radius:13px;padding:12px;z-index:75;
box-shadow:0 18px 50px #20203922
}
.font-quick-popover.open{display:block}
.font-quick-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.font-quick-head b{font-size:10px}.font-quick-head span{font-size:9px;color:#75ec13;font-weight:800}
.font-quick-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;color:#757b8f;font-size:10px}
.font-quick-row .font-big{font-size:16px;font-weight:800}
.font-quick-row input{width:100%;accent-color:#75ec13}
.font-quick-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:9px}
.font-quick-presets button{border:1px solid #e5e5ed;background:#fafafd;border-radius:7px;padding:6px 3px;color:#63697d;font:inherit;font-size:8px;cursor:pointer}
.font-quick-presets button:hover{border-color:#9b90ed;color:#75ec13;background:#f6fff0}
.scheduled-task .task-toggle-form{margin-top:1px!important}
.scheduled-task .check{width:16px;height:16px;min-width:16px;flex:0 0 16px}
.travel-editor-fields{grid-template-columns:1fr 1fr;gap:8px}
.travel-editor-fields:not([hidden]){display:grid}
#weekPlanDelete{margin-right:auto}
.week-plan-modal .modal-actions{justify-content:flex-end}
.week-plan-modal .modal-actions #weekPlanDelete + .save-state{margin-left:0}
html[data-theme="dark"] .font-quick-toggle,
html[data-theme="dark"] .font-quick-popover{
background:#191c25!important;border-color:#303443!important;color:#e5e8f2!important
}
html[data-theme="dark"] .font-quick-presets button{
background:#20232d;border-color:#383d4d;color:#bec4d5
}
html[data-theme="dark"] .font-quick-presets button:hover{
background:#292542;color:#aea5ff;border-color:#5b5288
}
@media(max-width:850px){
.font-quick-popover{position:fixed;left:12px;right:12px;top:70px;width:auto}
}
/* ============================================================
v0.14 — independent content font scale
============================================================ */
:root{--content-scale:1}
/* The interface scale remains controlled by the root rem size.
These rules specifically scale the working content where many
legacy sizes were fixed in px/rem. */
.main-content .metric span{font-size:calc(.75rem * var(--content-scale))!important}
.main-content .metric strong{font-size:calc(1.75rem * var(--content-scale))!important}
.main-content .metric small{font-size:calc(.6875rem * var(--content-scale))!important}
.main-content .panel h2,
.main-content .panel-head h2{font-size:calc(.9375rem * var(--content-scale))!important}
.main-content .panel-head span{font-size:calc(.6875rem * var(--content-scale))!important}
.main-content .day-head b{font-size:calc(.75rem * var(--content-scale))!important}
.main-content .day-head span{font-size:calc(.625rem * var(--content-scale))!important}
.main-content .mini-task{font-size:calc(.6125rem * var(--content-scale))!important}
.main-content .more,
.main-content .link{font-size:calc(.6875rem * var(--content-scale))!important}
.main-content .btn{font-size:calc(.75rem * var(--content-scale))!important}
.main-content .btn.tiny{font-size:calc(.625rem * var(--content-scale))!important}
.main-content .today-row span{font-size:calc(.6875rem * var(--content-scale))!important}
.main-content .project-row b{font-size:calc(.6875rem * var(--content-scale))!important}
.main-content .project-row small{font-size:calc(.5625rem * var(--content-scale))!important}
.main-content .project-row strong{font-size:calc(.625rem * var(--content-scale))!important}
.main-content .ob-row b,
.main-content .obligation-full b{font-size:calc(.6875rem * var(--content-scale))!important}
.main-content .ob-row small,
.main-content .obligation-full small{font-size:calc(.5625rem * var(--content-scale))!important}
.main-content .ob-row strong{font-size:calc(.625rem * var(--content-scale))!important}
.main-content .achievement b{font-size:calc(.625rem * var(--content-scale))!important}
.main-content .achievement span{font-size:calc(.6875rem * var(--content-scale))!important}
.main-content .focus-widget-body span,
.main-content .focus-panel small{font-size:calc(.625rem * var(--content-scale))!important}
.main-content .focus-widget-body strong,
.main-content .focus-panel strong{font-size:calc(.8125rem * var(--content-scale))!important}
.main-content .note-line{font-size:calc(.6875rem * var(--content-scale))!important}
.main-content .task-main b{font-size:calc(.75rem * var(--content-scale))!important}
.main-content .task-main small{font-size:calc(.625rem * var(--content-scale))!important}
.main-content .status,
.main-content .badge,
.main-content .source-badge{font-size:calc(.5625rem * var(--content-scale))!important}
.main-content .backlog-row b{font-size:calc(.6875rem * var(--content-scale))!important}
.main-content .backlog-row small{font-size:calc(.5625rem * var(--content-scale))!important}
.main-content .matrix-task b{font-size:calc(.5938rem * var(--content-scale))!important}
.main-content .matrix-task small{font-size:calc(.5rem * var(--content-scale))!important}
.main-content .direction-name,
.main-content .direction-setting-main b{font-size:calc(.75rem * var(--content-scale))!important}
.main-content .direction-subtitle,
.main-content .direction-focus,
.main-content .direction-setting-main small{font-size:calc(.5625rem * var(--content-scale))!important}
.main-content .focus-editor summary,
.main-content .cell-add summary{font-size:calc(.5625rem * var(--content-scale))!important}
.main-content .focus-editor input,
.main-content .cell-add-form input{font-size:calc(.5625rem * var(--content-scale))!important}
.main-content .calendar-nav h2{font-size:calc(1.125rem * var(--content-scale))!important}
.main-content .calendar-weekdays div{font-size:calc(.625rem * var(--content-scale))!important}
.main-content .calendar-day-number span{font-size:calc(.75rem * var(--content-scale))!important}
.main-content .calendar-day-number b{font-size:calc(.4375rem * var(--content-scale))!important}
.main-content .calendar-markers span{font-size:calc(.5rem * var(--content-scale))!important}
.main-content .calendar-section-title{font-size:calc(.625rem * var(--content-scale))!important}
.main-content .calendar-list-item b{font-size:calc(.6875rem * var(--content-scale))!important}
.main-content .calendar-list-item small{font-size:calc(.5625rem * var(--content-scale))!important}
.main-content .calendar-week-head b{font-size:calc(.625rem * var(--content-scale))!important}
.main-content .calendar-week-head span,
.main-content .calendar-week-task{font-size:calc(.5625rem * var(--content-scale))!important}
.main-content .travel-plan-card b{font-size:calc(.75rem * var(--content-scale))!important}
.main-content .travel-plan-card small,
.main-content .travel-period{font-size:calc(.5625rem * var(--content-scale))!important}
.main-content .editable-card,
.main-content .inline-edit-panel,
.main-content .contact-card,
.main-content .settings-section p{font-size:calc(.6875rem * var(--content-scale))}
.main-content input,
.main-content select,
.main-content textarea{
font-size:calc(.75rem * var(--content-scale))!important;
}
.main-content label{font-size:calc(.6875rem * var(--content-scale))!important}
.main-content .empty{font-size:calc(.6875rem * var(--content-scale))!important}
/* second slider styling */
.content-font-settings{margin-top:12px}
.font-setting-title{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.font-setting-title b{font-size:.75rem}
.font-setting-title small{font-size:.625rem;color:var(--muted)}
.font-scale-section+ .font-scale-section{margin-top:12px;padding-top:12px;border-top:1px solid #ececf2}
.font-scale-section>small{display:block;margin-top:6px;color:var(--muted);font-size:.5625rem}
.font-quick-popover{width:275px!important}
.content-presets{margin-top:10px!important}
html[data-theme="dark"] .font-scale-section+ .font-scale-section{border-color:#303443}
/* ============================================================
v0.14 — compact dashboard
============================================================ */
.dashboard-customize-bar{margin:14px 0 10px!important;padding:10px 12px!important}
.dashboard-widget-grid{gap:11px!important}
.dashboard-widget.panel{padding:12px!important;border-radius:13px!important}
.dashboard-widget .widget-controlbar{height:21px!important;margin:-4px -2px 5px!important}
.dashboard-widget .widget-controlbar b{font-size:.5625rem!important}
.dashboard-widget .metrics{gap:10px!important}
.dashboard-widget .metric{
min-height:82px!important;
padding:11px 12px!important;
gap:10px!important;
border-radius:12px!important;
}
.dashboard-widget .metric-icon{
width:38px!important;height:38px!important;border-radius:11px!important;
font-size:1.0625rem!important;
}
.dashboard-widget .metric strong{margin:1px 0!important}
.dashboard-widget .panel-head{margin-bottom:8px!important}
.dashboard-widget .day-col{min-height:205px!important;padding:7px 6px!important}
.dashboard-widget .day-head{margin-bottom:5px!important}
.dashboard-widget .mini-task{padding:5px 5px!important;margin:4px 0!important;border-radius:6px!important}
.dashboard-widget .today-row{padding:7px 0!important}
.dashboard-widget .project-row{padding:5px 0!important}
.dashboard-widget .ob-row{padding:7px 0!important}
.dashboard-widget .achievement{padding:5px 0!important}
.dashboard-widget .note-line{padding:3px 0!important}
.dashboard-widget[data-widget-id="focus"]{min-height:auto!important}
.dashboard-widget .focus-icon{width:36px!important;height:36px!important;border-radius:10px!important;font-size:1.125rem!important}
/* ============================================================
v0.14 — mobile overflow hardening
============================================================ */
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
.main,.main-content,.panel,.dashboard-widget,
.form-panel,.two-col,.settings-page-grid,.settings-sections,
.calendar-layout,.calendar-toolbar,.editable-card,.contact-card,
.week-direction-toolbar,.travel-week-panel{
min-width:0;
max-width:100%;
}
.main-content input,
.main-content select,
.main-content textarea,
.main-content button{
max-width:100%;
}
.form-grid>*,
.settings-form-row>*,
.review-grid>*,
.edit-row>*,
.two-col>*,
.calendar-layout>*,
.dashboard-widget-grid>*{
min-width:0;
}
@media(max-width:850px){
.main{width:100%;padding-left:9px!important;padding-right:9px!important}
.main-content{width:100%;min-width:0}
.panel{padding:11px!important}
.form-grid,
.form-grid.wide,
.review-grid,
.edit-row,
.two-col,
.settings-form-row{
grid-template-columns:minmax(0,1fr)!important;
}
.span-2,.span-3,.wide-edit{grid-column:1!important}
.inline-form,
.row-actions,
.head-actions,
.calendar-actions{
max-width:100%;
flex-wrap:wrap;
}
.inline-form input,
.inline-form select,
.inline-form textarea{
flex:1 1 100%;
min-width:0!important;
}
/* Dashboard: cards stay compact, wide week widget scrolls internally. */
.dashboard-customize-bar{gap:8px!important}
.dashboard-customize-bar .btn{white-space:nowrap}
.dashboard-widget .metrics{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:7px!important;
}
.dashboard-widget .metric{min-width:0!important;padding:9px!important}
.dashboard-widget .metric-icon{width:32px!important;height:32px!important}
.dashboard-widget[data-widget-id="week"]{
overflow-x:auto!important;
-webkit-overflow-scrolling:touch;
}
.dashboard-widget[data-widget-id="week"] .panel-head{
min-width:0;
position:sticky;
left:0;
background:inherit;
z-index:1;
}
.dashboard-widget[data-widget-id="week"] .week-grid{
grid-template-columns:repeat(7,minmax(105px,1fr))!important;
min-width:735px!important;
}
.dashboard-widget[data-widget-id="week"] .day-col{min-height:165px!important}
.calendar-toolbar>*{min-width:0;max-width:100%}
.calendar-nav,.calendar-actions{width:100%;justify-content:space-between}
.calendar-actions .btn{flex:1 1 auto}
.notification-permission{width:100%}
.setting-toggle{gap:10px}
.setting-toggle span{min-width:0}
.setting-toggle small{overflow-wrap:anywhere}
.font-quick-popover{left:8px!important;right:8px!important;width:auto!important;max-width:none!important}
}
@media(max-width:480px){
.dashboard-widget .metrics{grid-template-columns:1fr 1fr!important}
.dashboard-widget .metric{gap:7px!important}
.dashboard-widget .metric strong{font-size:calc(1.35rem * var(--content-scale))!important}
.dashboard-widget .metric span,
.dashboard-widget .metric small{line-height:1.15}
.panel-head{align-items:flex-start!important}
.panel-head>div{min-width:0;flex-wrap:wrap}
.btn{white-space:normal}
}
/* ============================================================
v0.16 — collapsible Week directions
============================================================ */
.direction-collapse-toggle{
width:100%;
border:0;
background:transparent;
color:inherit;
padding:0;
margin:0;
text-align:left;
cursor:pointer;
}
.direction-collapse-toggle:focus-visible{
outline:2px solid #8d80ed;
outline-offset:3px;
border-radius:8px;
}
.direction-collapse-plus{
display:none;
margin-left:auto;
flex:0 0 auto;
width:24px;
height:24px;
border-radius:7px;
place-items:center;
color:#75ec13;
background:#f1ffe7;
font-size:.875rem;
font-weight:800;
}
.collapsed-day-count{
display:none;
width:28px;
height:28px;
border-radius:9px;
place-items:center;
margin:auto;
background:#f1ffe7;
color:#75ec13;
font-size:.75rem;
font-weight:800;
line-height:1;
}
/* Desktop compact row */
.desktop-week-matrix .direction-cell.is-direction-collapsed,
.desktop-week-matrix .matrix-cell.is-direction-collapsed{
min-height:52px!important;
height:52px!important;
padding-top:8px!important;
padding-bottom:8px!important;
}
.desktop-week-matrix .direction-cell.is-direction-collapsed > :not(.direction-title){
display:none!important;
}
.desktop-week-matrix .direction-cell.is-direction-collapsed .direction-title{
min-height:34px;
align-items:center;
}
.desktop-week-matrix .direction-cell.is-direction-collapsed .direction-title .direction-icon,
.desktop-week-matrix .direction-cell.is-direction-collapsed .direction-title small{
display:none!important;
}
.desktop-week-matrix .direction-cell.is-direction-collapsed .direction-title>div{
min-width:0;
flex:1 1 auto;
}
.desktop-week-matrix .direction-cell.is-direction-collapsed .direction-title b{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.desktop-week-matrix .direction-cell.is-direction-collapsed .direction-collapse-plus{
display:grid;
}
.desktop-week-matrix .matrix-cell.is-direction-collapsed{
display:grid;
place-items:center;
cursor:pointer;
}
.desktop-week-matrix .matrix-cell.is-direction-collapsed .day-cell-content,
.desktop-week-matrix .matrix-cell.is-direction-collapsed .day-cell-hint{
display:none!important;
}
.desktop-week-matrix .matrix-cell.is-direction-collapsed .collapsed-day-count{
display:grid;
}
.desktop-week-matrix .matrix-cell.is-direction-collapsed:hover .collapsed-day-count{
background:#e8e3ff;
transform:translateY(-1px);
}
/* Mobile: keep only heading + compact Mon–Sun counters. */
.mobile-direction-card.is-direction-collapsed{
padding:8px 9px!important;
}
.mobile-direction-card.is-direction-collapsed .mobile-direction-head{
margin-bottom:6px;
}
.mobile-direction-card.is-direction-collapsed .mobile-direction-head .direction-icon,
.mobile-direction-card.is-direction-collapsed .mobile-direction-head small{
display:none!important;
}
.mobile-direction-card.is-direction-collapsed .mobile-direction-head>div{
min-width:0;
flex:1 1 auto;
}
.mobile-direction-card.is-direction-collapsed .mobile-direction-head b{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.mobile-direction-card.is-direction-collapsed .direction-collapse-plus{
display:grid;
}
.mobile-direction-card.is-direction-collapsed .direction-quick-add,
.mobile-direction-card.is-direction-collapsed .mobile-task-pool,
.mobile-direction-card.is-direction-collapsed .drawer-source{
display:none!important;
}
.mobile-direction-card.is-direction-collapsed .mobile-days-row{
margin-top:0!important;
}
.mobile-direction-card.is-direction-collapsed .mobile-day-cell{
padding:4px 1px!important;
min-height:38px;
}
.mobile-direction-card.is-direction-collapsed .mobile-day-cell b,
.mobile-direction-card.is-direction-collapsed .mobile-day-cell span{
display:none;
}
.mobile-direction-card.is-direction-collapsed .mobile-day-cell em{
min-width:22px;
height:22px;
font-size:.625rem;
}
/* Dark theme */
html[data-theme="dark"] .direction-collapse-plus,
html[data-theme="dark"] .collapsed-day-count{
background:#292542!important;
color:#aea5ff!important;
}
html[data-theme="dark"] .desktop-week-matrix .matrix-cell.is-direction-collapsed:hover .collapsed-day-count{
background:#332d52!important;
}
/* ============================================================
v0.17 — reorder directions
============================================================ */
.directions-panel-head{align-items:flex-start}
.directions-save-state{
min-width:112px;
text-align:right;
font-size:.625rem;
color:var(--muted);
padding-top:2px;
}
.directions-save-state.is-saved{color:#28a96b}
.directions-save-state.is-error{color:#c84c5d}
.sortable-directions{
display:flex;
flex-direction:column;
gap:7px;
}
.sortable-directions .direction-setting{
position:relative;
display:grid;
grid-template-columns:30px 38px minmax(0,1fr) 14px auto auto;
align-items:center;
gap:9px;
margin:0!important;
transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,opacity .12s ease;
}
.direction-drag-handle{
width:28px;
height:32px;
display:grid;
place-items:center;
border:0;
background:transparent;
color:#9aa0af;
font-size:1rem;
cursor:grab;
touch-action:none;
}
.direction-drag-handle:active{cursor:grabbing}
.direction-setting.direction-dragging{
opacity:.45;
transform:scale(.995);
}
.direction-setting.direction-drop-before::before,
.direction-setting.direction-drop-after::after{
content:"";
position:absolute;
left:6px;
right:6px;
height:3px;
border-radius:4px;
background:#75ec13;
z-index:3;
}
.direction-setting.direction-drop-before::before{top:-5px}
.direction-setting.direction-drop-after::after{bottom:-5px}
.direction-order-actions{
display:flex;
gap:3px;
}
.direction-order-btn{
width:27px;
height:27px;
border:1px solid #e2e3ea;
border-radius:7px;
background:#fff;
color:#6e7487;
display:grid;
place-items:center;
cursor:pointer;
font-size:.75rem;
}
.direction-order-btn:hover:not(:disabled){
border-color:#968bec;
background:#f6fff0;
color:#75ec13;
}
.direction-order-btn:disabled{
opacity:.25;
cursor:default;
}
html[data-theme="dark"] .direction-order-btn{
background:#20232d;
border-color:#393e4e;
color:#bac0d0;
}
html[data-theme="dark"] .direction-order-btn:hover:not(:disabled){
background:#292542;
border-color:#655b94;
color:#b0a7ff;
}
@media(max-width:850px){
.directions-layout{display:block!important}
.directions-layout>aside{margin-top:12px}
.sortable-directions .direction-setting{
grid-template-columns:27px 34px minmax(0,1fr) 10px auto;
gap:7px;
}
.direction-order-actions{
grid-column:2/5;
justify-content:flex-end;
}
.direction-toggle-form{
grid-column:5;
grid-row:1/3;
}
.direction-order-btn{
width:30px;
height:28px;
}
}
/* ============================================================
v0.18 — per-day comments / skipped day status
============================================================ */
.matrix-task-body{
min-width:0;
display:flex;
flex-direction:column;
gap:2px;
position:relative;
}
.day-comment-indicator{
position:absolute;
right:0;
bottom:-1px;
font-size:.55rem;
line-height:1;
opacity:.72;
}
.day-comment-indicator.is-empty{opacity:.18}
.scheduled-task.day-task-edit-trigger{
cursor:pointer;
}
.scheduled-task.day-task-edit-trigger:hover{
box-shadow:0 3px 10px #25253f12;
}
.task-status-host.skipped,
.scheduled-task.skipped{
opacity:.58;
}
.task-status-host.skipped .task-main>b,
.scheduled-task.skipped b{
text-decoration:line-through;
text-decoration-thickness:1px;
}
.task-status-host.skipped .status{
background:#f2f0ed!important;
color:#8c8274!important;
}
.today-task-actions{
display:flex;
align-items:center;
gap:5px;
margin-left:auto;
}
.task-delete-btn{
width:27px;
height:27px;
display:grid;
place-items:center;
border:1px solid #ece1e4;
background:#fff;
color:#a46c76;
border-radius:7px;
cursor:pointer;
font-size:.85rem;
}
.task-delete-btn:hover{
background:#fff4f5;
border-color:#e6b9c0;
color:#b43d50;
}
.day-task-modal-date{
margin:3px 0 0;
color:var(--muted);
font-size:.65rem;
}
.form-hint{
margin:-2px 0 2px;
color:var(--muted);
font-size:.625rem;
line-height:1.45;
}
.day-task-modal .modal-actions{
flex-wrap:wrap;
}
.day-task-modal #dayTaskDelete{
margin-right:auto;
}
html[data-theme="dark"] .task-delete-btn{
background:#20232d;
border-color:#45363d;
color:#d69ca6;
}
html[data-theme="dark"] .task-delete-btn:hover{
background:#382128;
border-color:#71434d;
}
html[data-theme="dark"] .task-status-host.skipped .status{
background:#302d29!important;
color:#b9aa96!important;
}
@media(max-width:850px){
.task-row{
grid-template-columns:auto minmax(0,1fr)!important;
align-items:flex-start!important;
}
.task-row .task-main{min-width:0}
.task-row .status{
grid-column:2;
justify-self:start;
}
.today-task-actions{
grid-column:1/3;
width:100%;
justify-content:flex-end;
margin-left:0;
}
.today-task-actions .task-skip-btn{
flex:0 1 auto;
}
.day-task-modal .modal-actions{
display:grid!important;
grid-template-columns:1fr 1fr;
gap:7px;
}
.day-task-modal .modal-actions .save-state{
grid-column:1/3;
}
.day-task-modal #dayTaskDelete{
grid-column:1/3;
width:100%;
margin:0;
}
}
/* ============================================================
v0.19 — achievements grouped by day
============================================================ */
.achievement-days{
display:flex;
flex-direction:column;
gap:16px;
}
.achievement-day-group{
min-width:0;
}
.achievement-day-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin:0 2px 8px;
}
.achievement-day-head h2{
margin:1px 0 0;
font-size:calc(.95rem * var(--content-scale));
}
.achievement-day-count{
min-width:28px;
height:28px;
padding:0 8px;
border-radius:999px;
display:grid;
place-items:center;
background:#f1ffe7;
color:#75ec13;
font-size:calc(.65rem * var(--content-scale));
font-weight:800;
}
.achievement-day-list{
display:flex;
flex-direction:column;
gap:7px;
}
.achievement-card{
padding:11px 12px!important;
}
.achievement-card p{
margin:6px 0 0;
font-size:calc(.75rem * var(--content-scale));
line-height:1.45;
}
.achievement-card-meta{
display:flex;
align-items:center;
gap:5px;
flex-wrap:wrap;
}
.achievement-auto-badge{
background:#eaf8f1!important;
color:#269160!important;
}
.auto-achievement{
border-left:3px solid #45b77d!important;
}
html[data-theme="dark"] .achievement-day-count{
background:#292542!important;
color:#aea5ff!important;
}
html[data-theme="dark"] .achievement-auto-badge{
background:#173228!important;
color:#69d39c!important;
}
html[data-theme="dark"] .auto-achievement{
border-left-color:#4eb980!important;
}
@media(max-width:850px){
.achievement-days{gap:13px}
.achievement-card{padding:10px!important}
.achievement-day-head{margin-bottom:6px}
}
/* ============================================================
v0.21 — Week masters live in drawer / event categories
============================================================ */
.direction-master-add{
margin-top:8px;
width:100%;
border:1px dashed #cfc9f3;
border-radius:8px;
background:#fbfff8;
color:#75ec13;
padding:7px 8px;
font:inherit;
font-size:calc(.5625rem * var(--content-scale));
font-weight:750;
cursor:pointer;
}
.direction-master-add:hover{
background:#f3f0ff;
border-color:#9f94ed;
}
.direction-master-count{
margin-top:6px;
font-size:calc(.5rem * var(--content-scale));
color:var(--muted);
text-align:center;
}
.event-type-chip{
display:inline-flex;
align-items:center;
max-width:100%;
border-radius:999px;
padding:2px 6px;
background:#f1efff;
color:#75ec13;
font-size:calc(.48rem * var(--content-scale));
font-weight:750;
white-space:nowrap;
}
.task-meta-line{
display:flex!important;
flex-direction:row!important;
flex-wrap:wrap;
align-items:center;
gap:4px;
}
.scheduled-task[title]:not([title=""]){
cursor:help;
}
/* Right Week drawer */
.drawer-create-toggle{
width:100%;
margin:13px 0 9px;
}
.drawer-create-form{
border:1px solid #e8e5f7;
background:#fbfff8;
border-radius:11px;
padding:10px;
margin-bottom:12px;
}
.drawer-create-form input,
.drawer-create-form textarea,
.drawer-create-form select{
width:100%;
border:1px solid #dedfea;
border-radius:8px;
padding:8px 9px;
background:#fff;
color:inherit;
font:inherit;
margin-bottom:7px;
}
.drawer-create-form .field-label{
display:block;
margin:2px 0 4px;
}
.drawer-create-actions{
display:flex;
justify-content:flex-end;
gap:7px;
margin-top:7px;
}
.drawer-section{
margin-top:15px;
padding-top:12px;
border-top:1px solid #ececf2;
}
.drawer-section-head{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
margin-bottom:7px;
font-size:calc(.625rem * var(--content-scale));
}
.drawer-section-head span{
color:var(--muted);
font-size:calc(.5rem * var(--content-scale));
}
.drawer-plan-row{
display:grid;
grid-template-columns:minmax(0,1fr) 32px;
gap:5px;
align-items:stretch;
margin-bottom:6px;
}
.drawer-plan-row .drawer-task{
min-width:0;
margin:0;
}
.drawer-plan-edit{
border:1px solid #e3e3ed;
border-radius:9px;
background:#fff;
color:#7165d6;
cursor:pointer;
font-size:.75rem;
}
.drawer-plan-edit:hover{
background:#f6f4ff;
border-color:#bbb3ef;
}
.drawer-day-list{
display:flex;
flex-direction:column;
gap:6px;
}
.drawer-day-task{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
gap:9px;
border:1px solid #e8e9ef;
border-radius:9px;
background:#fff;
padding:9px 10px;
text-align:left;
cursor:pointer;
}
.drawer-day-task:hover{
border-color:#bdb5f3;
background:#fbfff8;
}
.drawer-day-task.done{
opacity:.55;
}
.drawer-day-edit-mark{
color:#75ec13;
font-weight:800;
flex:0 0 auto;
}
.drawer-empty{
padding:12px;
border:1px dashed #dedfe8;
border-radius:9px;
color:var(--muted);
text-align:center;
font-size:calc(.5625rem * var(--content-scale));
}
/* ============================================================
v0.21 — Dashboard 6-column standardized widget widths
============================================================ */
.dashboard-widget-grid{
display:grid!important;
grid-template-columns:repeat(6,minmax(0,1fr))!important;
grid-auto-flow:row!important;
gap:11px!important;
align-items:start!important;
}
.dashboard-widget,
.dashboard-widget.widget-span-2,
.dashboard-widget.widget-wide{
grid-column:span var(--widget-span,2)!important;
}
.dashboard-widget.widget-wide{
background:transparent;
border:0;
box-shadow:none;
padding:0;
}
.widget-width-select{
margin-left:auto;
margin-right:4px;
height:23px;
border:1px solid #e0e1ea;
border-radius:7px;
background:#fff;
color:#656b7c;
font:inherit;
font-size:.5rem;
padding:0 4px;
cursor:pointer;
}
.widget-controlbar .widget-width-select + .widget-hide{
margin-left:0;
}
.dashboard-widget[data-widget-id="today"] .today-list{
max-height:260px;
overflow-y:auto;
overscroll-behavior:contain;
padding-right:4px;
}
.dashboard-widget[data-widget-id="today"] .today-list::-webkit-scrollbar{
width:6px;
}
.dashboard-widget[data-widget-id="today"] .today-list::-webkit-scrollbar-thumb{
background:#d8d8e5;
border-radius:10px;
}
/* ============================================================
v0.21 — Project cards: collapsible + density
============================================================ */
.project-layout-toolbar{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
margin:0 0 12px;
padding:10px 12px;
border:1px solid var(--line);
border-radius:12px;
background:#fff;
}
.project-layout-toolbar p{
margin:2px 0 0;
color:var(--muted);
font-size:calc(.5625rem * var(--content-scale));
}
.project-layout-toolbar label{
display:flex;
align-items:center;
gap:7px;
color:var(--muted);
font-size:calc(.5625rem * var(--content-scale));
}
.project-layout-toolbar select{
border:1px solid #e0e1e9;
border-radius:8px;
padding:7px 8px;
background:#fff;
color:inherit;
}
.project-cards{
display:grid!important;
gap:10px!important;
}
.project-cards.project-density-compact{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.project-cards.project-density-medium{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.project-cards.project-density-wide{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.project-card-details{
padding:0!important;
overflow:hidden;
}
.project-card-summary{
list-style:none;
cursor:pointer;
display:grid;
grid-template-columns:minmax(0,1fr) 82px;
align-items:center;
gap:10px;
padding:11px 12px;
}
.project-card-summary::-webkit-details-marker{
display:none;
}
.project-summary-main{
min-width:0;
}
.project-summary-badges{
display:flex;
gap:4px;
align-items:center;
flex-wrap:wrap;
}
.project-card-summary h2{
margin:6px 0 3px!important;
font-size:calc(.8rem * var(--content-scale))!important;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.project-card-summary small{
display:block;
color:var(--muted);
font-size:calc(.5rem * var(--content-scale));
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.project-summary-progress{
min-width:0;
display:grid;
grid-template-columns:1fr 22px;
align-items:center;
gap:5px;
}
.project-summary-progress strong{
grid-column:1/3;
text-align:right;
font-size:calc(.65rem * var(--content-scale));
}
.project-summary-progress .progress{
min-width:0;
}
.project-expand-mark{
width:22px;
height:22px;
border-radius:6px;
background:#f1ffe7;
color:#75ec13;
display:grid;
place-items:center;
font-weight:800;
}
.project-card-body{
border-top:1px solid #eeeef3;
padding:11px 12px 12px;
}
.project-card-body p{
min-height:0!important;
margin-top:0;
}
/* ============================================================
v0.21 — Achievement task comments
============================================================ */
.achievement-task-comment{
margin-top:6px;
padding:7px 9px;
border-radius:8px;
background:#f8f8fb;
color:#696f82;
font-size:calc(.625rem * var(--content-scale));
line-height:1.45;
}
/* Dark */
html[data-theme="dark"] .direction-master-add,
html[data-theme="dark"] .drawer-create-form,
html[data-theme="dark"] .project-layout-toolbar{
background:#20232d!important;
border-color:#373b49!important;
}
html[data-theme="dark"] .event-type-chip{
background:#292542!important;
color:#b7afff!important;
}
html[data-theme="dark"] .drawer-plan-edit,
html[data-theme="dark"] .drawer-day-task,
html[data-theme="dark"] .widget-width-select,
html[data-theme="dark"] .project-layout-toolbar select{
background:#20232d!important;
border-color:#393e4e!important;
color:#d5d8e2!important;
}
html[data-theme="dark"] .achievement-task-comment{
background:#242731!important;
color:#b7bdca!important;
}
/* Responsive */
@media(max-width:1100px){
.project-cards.project-density-compact{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
}
@media(max-width:850px){
.dashboard-widget-grid{
display:block!important;
}
.dashboard-widget,
.dashboard-widget.widget-span-2,
.dashboard-widget.widget-wide{
width:100%!important;
margin-bottom:12px!important;
}
.widget-width-select{
display:none;
}
.project-layout-toolbar{
align-items:flex-start;
flex-direction:column;
}
.project-cards.project-density-compact,
.project-cards.project-density-medium,
.project-cards.project-density-wide{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
}
@media(max-width:520px){
.project-cards.project-density-compact,
.project-cards.project-density-medium,
.project-cards.project-density-wide{
grid-template-columns:minmax(0,1fr)!important;
}
}
/* v0.21 widget content adapts to narrow standardized widths */
.dashboard-widget[data-widget-width="2"] .metrics,
.dashboard-widget[data-widget-width="3"] .metrics{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.dashboard-widget[data-widget-id="week"][data-widget-width="2"],
.dashboard-widget[data-widget-id="week"][data-widget-width="3"],
.dashboard-widget[data-widget-id="week"][data-widget-width="4"],
.dashboard-widget[data-widget-id="week"][data-widget-width="5"]{
overflow-x:auto!important;
}
.dashboard-widget[data-widget-id="week"][data-widget-width="2"] .week-grid,
.dashboard-widget[data-widget-id="week"][data-widget-width="3"] .week-grid,
.dashboard-widget[data-widget-id="week"][data-widget-width="4"] .week-grid,
.dashboard-widget[data-widget-id="week"][data-widget-width="5"] .week-grid{
min-width:700px;
}
/* ============================================================
v0.22 — achievements: collapse older days
============================================================ */
.achievement-day-details{
border:0;
}
.achievement-day-details > summary{
list-style:none;
cursor:pointer;
user-select:none;
}
.achievement-day-details > summary::-webkit-details-marker{
display:none;
}
.achievement-day-summary-meta{
display:flex;
align-items:center;
gap:7px;
}
.achievement-day-chevron{
width:24px;
height:24px;
border-radius:7px;
background:#f1ffe7;
color:#75ec13;
display:grid;
place-items:center;
font-weight:800;
transition:transform .15s ease;
}
.achievement-day-details[open] .achievement-day-chevron{
transform:rotate(180deg);
}
.achievement-day-details:not([open]) .achievement-day-head{
margin-bottom:0;
}
.achievement-day-details:not([open]){
padding:8px 10px;
border:1px solid var(--line);
border-radius:12px;
background:#fff;
}
/* ============================================================
v0.22 — real 6-column × standardized-height dashboard grid
============================================================ */
.dashboard-widget-grid{
display:grid!important;
grid-template-columns:repeat(6,minmax(0,1fr))!important;
grid-auto-rows:140px!important;
grid-auto-flow:dense!important;
gap:11px!important;
align-items:stretch!important;
}
.dashboard-widget,
.dashboard-widget.widget-span-2,
.dashboard-widget.widget-wide{
grid-column:span var(--widget-span,2)!important;
grid-row:span var(--widget-rows,1)!important;
min-width:0!important;
min-height:0!important;
height:auto!important;
max-height:none!important;
overflow:hidden!important;
align-self:stretch!important;
}
.panel.dashboard-widget{
display:flex!important;
flex-direction:column!important;
}
.dashboard-widget .widget-controlbar{
flex:0 0 auto;
}
.dashboard-widget .panel-head{
flex:0 0 auto;
}
/* The top summary is movable and sized by the same grid rules as everything else. */
.dashboard-widget[data-widget-id="metrics"]{
position:relative!important;
grid-column:span var(--widget-span,6)!important;
grid-row:span var(--widget-rows,1)!important;
}
.dashboard-widget[data-widget-id="metrics"] .metrics{
height:calc(100% - 30px);
min-height:0;
align-content:stretch;
}
.dashboard-widget[data-widget-id="metrics"][data-widget-width="2"] .metrics,
.dashboard-widget[data-widget-id="metrics"][data-widget-width="3"] .metrics,
.dashboard-widget[data-widget-id="metrics"][data-widget-width="4"] .metrics{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
grid-template-rows:repeat(2,minmax(0,1fr));
}
.dashboard-widget[data-widget-id="metrics"][data-widget-width="5"] .metrics,
.dashboard-widget[data-widget-id="metrics"][data-widget-width="6"] .metrics{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
grid-template-rows:minmax(0,1fr);
}
.dashboard-widget[data-widget-id="metrics"] .metric{
min-height:0!important;
height:100%!important;
padding:10px!important;
}
.dashboard-widget[data-widget-id="metrics"] .metric-icon{
width:38px!important;
height:38px!important;
border-radius:11px!important;
}
.dashboard-widget[data-widget-id="metrics"] .metric strong{
font-size:calc(1.15rem * var(--content-scale))!important;
}
/* Week is a tall widget; narrow widths scroll inside instead of occupying a whole page row. */
.dashboard-widget[data-widget-id="week"]{
overflow:hidden!important;
}
.dashboard-widget[data-widget-id="week"] .week-grid{
min-height:0!important;
flex:1 1 auto;
}
.dashboard-widget[data-widget-id="week"] .day-col{
min-height:0!important;
height:190px!important;
overflow:hidden;
}
.dashboard-widget[data-widget-id="week"][data-widget-width="2"] .week-grid,
.dashboard-widget[data-widget-id="week"][data-widget-width="3"] .week-grid,
.dashboard-widget[data-widget-id="week"][data-widget-width="4"] .week-grid,
.dashboard-widget[data-widget-id="week"][data-widget-width="5"] .week-grid{
min-width:700px;
}
.dashboard-widget[data-widget-id="week"][data-widget-width="2"],
.dashboard-widget[data-widget-id="week"][data-widget-width="3"],
.dashboard-widget[data-widget-id="week"][data-widget-width="4"],
.dashboard-widget[data-widget-id="week"][data-widget-width="5"]{
overflow-x:auto!important;
}
/* Today keeps a fixed card height and scrolls its own task list. */
.dashboard-widget[data-widget-id="today"] .today-list{
flex:1 1 auto;
min-height:0;
max-height:none!important;
overflow-y:auto!important;
overscroll-behavior:contain;
}
.dashboard-widget[data-widget-id="today"] > .link{
flex:0 0 auto;
margin-top:7px;
}
/* Small one-row widgets: at 2/6 or 3/6 they intentionally collapse to
controlbar + title/link, so three can fit in one horizontal row and two can
stack vertically beside a 2-row large widget. */
.dashboard-widget[data-widget-rows="1"][data-widget-width="2"][data-widget-id="projects"] .project-list,
.dashboard-widget[data-widget-rows="1"][data-widget-width="3"][data-widget-id="projects"] .project-list,
.dashboard-widget[data-widget-rows="1"][data-widget-width="2"][data-widget-id="obligations"] .ob-row,
.dashboard-widget[data-widget-rows="1"][data-widget-width="3"][data-widget-id="obligations"] .ob-row,
.dashboard-widget[data-widget-rows="1"][data-widget-width="2"][data-widget-id="achievements"] .achievement,
.dashboard-widget[data-widget-rows="1"][data-widget-width="3"][data-widget-id="achievements"] .achievement,
.dashboard-widget[data-widget-rows="1"][data-widget-width="2"][data-widget-id="inbox"] .note-line,
.dashboard-widget[data-widget-rows="1"][data-widget-width="3"][data-widget-id="inbox"] .note-line,
.dashboard-widget[data-widget-rows="1"][data-widget-width="2"][data-widget-id="inbox"] .empty,
.dashboard-widget[data-widget-rows="1"][data-widget-width="3"][data-widget-id="inbox"] .empty{
display:none!important;
}
/* At 4/6+ a compact body is visible, but it scrolls inside the same 1-row cell. */
.dashboard-widget[data-widget-rows="1"][data-widget-width="4"] .project-list,
.dashboard-widget[data-widget-rows="1"][data-widget-width="5"] .project-list,
.dashboard-widget[data-widget-rows="1"][data-widget-width="6"] .project-list,
.dashboard-widget[data-widget-rows="1"][data-widget-width="4"][data-widget-id="obligations"],
.dashboard-widget[data-widget-rows="1"][data-widget-width="5"][data-widget-id="obligations"],
.dashboard-widget[data-widget-rows="1"][data-widget-width="6"][data-widget-id="obligations"],
.dashboard-widget[data-widget-rows="1"][data-widget-width="4"][data-widget-id="achievements"],
.dashboard-widget[data-widget-rows="1"][data-widget-width="5"][data-widget-id="achievements"],
.dashboard-widget[data-widget-rows="1"][data-widget-width="6"][data-widget-id="achievements"],
.dashboard-widget[data-widget-rows="1"][data-widget-width="4"][data-widget-id="inbox"],
.dashboard-widget[data-widget-rows="1"][data-widget-width="5"][data-widget-id="inbox"],
.dashboard-widget[data-widget-rows="1"][data-widget-width="6"][data-widget-id="inbox"]{
overflow:auto!important;
}
/* Drag handles are the only drag origin. */
.widget-drag{
cursor:grab!important;
user-select:none;
}
.widget-drag:active{
cursor:grabbing!important;
}
.widget-dragging{
opacity:.42!important;
}
/* Dark theme */
html[data-theme="dark"] .achievement-day-details:not([open]){
background:#20232d;
border-color:#373b49;
}
html[data-theme="dark"] .achievement-day-chevron{
background:#292542;
color:#b5acff;
}
/* Mobile remains a simple vertical stack; dashboard width settings are desktop-only. */
@media(max-width:850px){
.dashboard-widget-grid{
display:block!important;
}
.dashboard-widget,
.dashboard-widget.widget-span-2,
.dashboard-widget.widget-wide{
width:100%!important;
height:auto!important;
max-height:none!important;
margin-bottom:12px!important;
overflow:visible!important;
}
.dashboard-widget[data-widget-id="today"] .today-list{
max-height:300px!important;
}
}
/* ============================================================
v0.23 — optional event category
============================================================ */
.event-type-chip:empty{
display:none!important;
}
/* ============================================================
v0.23 — dashboard vertical lists scroll inside widgets
============================================================ */
.dashboard-widget .dashboard-scroll-list{
flex:1 1 auto!important;
min-height:0!important;
overflow-y:auto!important;
overflow-x:hidden!important;
overscroll-behavior:contain;
padding-right:4px;
}
.dashboard-widget .dashboard-scroll-list::-webkit-scrollbar{
width:6px;
}
.dashboard-widget .dashboard-scroll-list::-webkit-scrollbar-thumb{
background:#d8d8e5;
border-radius:999px;
}
.dashboard-widget .dashboard-scroll-list::-webkit-scrollbar-track{
background:transparent;
}
/* Undo v0.22 compact body hiding: vertical-list widgets now stay visible
and scroll just like Today, even at compact widths. */
.dashboard-widget[data-widget-width="2"][data-widget-id="projects"] .project-list,
.dashboard-widget[data-widget-width="3"][data-widget-id="projects"] .project-list{
display:block!important;
}
.dashboard-widget[data-widget-width="2"][data-widget-id="obligations"] .ob-row,
.dashboard-widget[data-widget-width="3"][data-widget-id="obligations"] .ob-row{
display:flex!important;
}
.dashboard-widget[data-widget-width="2"][data-widget-id="achievements"] .achievement,
.dashboard-widget[data-widget-width="3"][data-widget-id="achievements"] .achievement{
display:flex!important;
}
.dashboard-widget[data-widget-width="2"][data-widget-id="inbox"] .note-line,
.dashboard-widget[data-widget-width="3"][data-widget-id="inbox"] .note-line,
.dashboard-widget[data-widget-width="2"][data-widget-id="inbox"] .empty,
.dashboard-widget[data-widget-width="3"][data-widget-id="inbox"] .empty{
display:block!important;
}
/* ============================================================
v0.23 — Week dashboard widget: no internal scrolling
============================================================ */
.dashboard-widget[data-widget-id="week"],
.dashboard-widget[data-widget-id="week"][data-widget-width="2"],
.dashboard-widget[data-widget-id="week"][data-widget-width="3"],
.dashboard-widget[data-widget-id="week"][data-widget-width="4"],
.dashboard-widget[data-widget-id="week"][data-widget-width="5"],
.dashboard-widget[data-widget-id="week"][data-widget-width="6"]{
overflow:hidden!important;
}
.dashboard-widget[data-widget-id="week"] .week-grid,
.dashboard-widget[data-widget-id="week"][data-widget-width="2"] .week-grid,
.dashboard-widget[data-widget-id="week"][data-widget-width="3"] .week-grid,
.dashboard-widget[data-widget-id="week"][data-widget-width="4"] .week-grid,
.dashboard-widget[data-widget-id="week"][data-widget-width="5"] .week-grid,
.dashboard-widget[data-widget-id="week"][data-widget-width="6"] .week-grid{
min-width:0!important;
width:100%!important;
overflow:visible!important;
}
.dashboard-widget[data-widget-id="week"] .day-col{
min-width:0!important;
height:auto!important;
min-height:0!important;
}
.dashboard-widget[data-widget-id="week"] .mini-task{
min-width:0;
}
.dashboard-widget[data-widget-id="week"] .mini-task span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
}
/* Completed week tasks use a solid success fill instead of strike-through. */
.dashboard-widget[data-widget-id="week"] .mini-task.done{
opacity:1!important;
text-decoration:none!important;
background:rgb(35,173,104)!important;
border-color:rgb(35,173,104)!important;
color:#fff!important;
}
.dashboard-widget[data-widget-id="week"] .mini-task.done span{
color:#fff!important;
text-decoration:none!important;
}
.dashboard-widget[data-widget-id="week"] .mini-task.done i{
background:#fff!important;
}
/* ============================================================
v0.23 — Today: Add from templates right drawer
============================================================ */
.today-template-launcher{
padding:10px!important;
}
.today-template-open{
width:100%;
}
.today-template-drawer .drawer-head{
margin-bottom:8px;
}
.today-template-list{
display:flex;
flex-direction:column;
gap:7px;
margin-top:12px;
padding-bottom:22px;
}
.today-template-item{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:9px;
padding:10px;
border:1px solid #e7e8ef;
border-radius:10px;
background:#fff;
}
.today-template-main{
min-width:0;
display:flex;
flex-direction:column;
gap:4px;
}
.today-template-main b{
font-size:calc(.6875rem * var(--content-scale));
}
.today-template-main small{
min-width:0;
display:flex;
align-items:center;
gap:5px;
flex-wrap:wrap;
color:var(--muted);
font-size:calc(.5rem * var(--content-scale));
}
.today-template-item form{
margin:0;
}
html[data-theme="dark"] .today-template-item{
background:#20232d;
border-color:#393e4e;
}
/* Mobile: drawer remains full-height/right-side behavior; launcher stays simple. */
@media(max-width:850px){
.today-template-item{
grid-template-columns:minmax(0,1fr);
}
.today-template-item form .btn{
width:100%;
}
}
/* ============================================================
v0.24 — human-readable widget size control
============================================================ */
.widget-size-control{
position:relative;
margin-left:auto;
flex:0 0 auto;
}
.widget-size-button{
height:25px;
display:flex;
align-items:center;
gap:6px;
border:1px solid #e0e1ea;
border-radius:8px;
background:#fff;
color:#606678;
padding:0 7px;
font:inherit;
font-size:.5rem;
cursor:pointer;
white-space:nowrap;
}
.widget-size-button:hover,
.widget-size-control.is-open .widget-size-button{
border-color:#bcb5ee;
background:#f8f6ff;
color:#6256c7;
}
.widget-size-current-label{
font-weight:700;
}
.widget-size-chevron{
font-size:.58rem;
transition:transform .15s ease;
}
.widget-size-control.is-open .widget-size-chevron{
transform:rotate(180deg);
}
.widget-size-bars,
.widget-size-current-bar{
display:grid;
grid-template-columns:repeat(6,5px);
gap:2px;
align-items:center;
}
.widget-size-bars i,
.widget-size-current-bar i{
display:block;
width:5px;
height:7px;
border-radius:2px;
background:#e4e5ec;
}
.widget-size-bars i.is-filled,
.widget-size-current-bar i.is-filled{
background:#7567dd;
}
.widget-size-menu{
position:absolute;
right:0;
top:calc(100% + 5px);
width:190px;
padding:6px;
border:1px solid #e3e3ec;
border-radius:11px;
background:#fff;
box-shadow:0 14px 35px #20203920;
z-index:90;
opacity:0;
visibility:hidden;
transform:translateY(-4px);
transition:.12s ease;
}
.widget-size-control.is-open .widget-size-menu{
opacity:1;
visibility:visible;
transform:translateY(0);
}
.widget-size-option{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
border:0;
border-radius:8px;
background:transparent;
color:#555b6d;
padding:8px 9px;
font:inherit;
font-size:.5625rem;
cursor:pointer;
}
.widget-size-option:hover{
background:#f6fff0;
color:#75ec13;
}
.widget-size-option.is-active{
background:#efffe2;
color:#75ec13;
font-weight:800;
}
.widget-size-option.is-active .widget-size-bars i.is-filled{
background:#75ec13;
}
/* Width menu and hide button sit together; old select is no longer used. */
.widget-controlbar .widget-size-control + .widget-hide{
margin-left:0;
}
/* On narrow widgets keep the visual scale, but hide the long text label. */
.dashboard-widget[data-widget-width="2"] .widget-size-current-label,
.dashboard-widget[data-widget-width="3"] .widget-size-current-label{
display:none;
}
.dashboard-widget[data-widget-width="2"] .widget-size-button,
.dashboard-widget[data-widget-width="3"] .widget-size-button{
padding-left:6px;
padding-right:5px;
gap:4px;
}
/* Dark */
html[data-theme="dark"] .widget-size-button,
html[data-theme="dark"] .widget-size-menu{
background:#20232d;
border-color:#3a3e4b;
color:#c9cdda;
}
html[data-theme="dark"] .widget-size-button:hover,
html[data-theme="dark"] .widget-size-control.is-open .widget-size-button,
html[data-theme="dark"] .widget-size-option:hover,
html[data-theme="dark"] .widget-size-option.is-active{
background:#29263d;
color:#bbb3ff;
}
html[data-theme="dark"] .widget-size-bars i,
html[data-theme="dark"] .widget-size-current-bar i{
background:#444958;
}
html[data-theme="dark"] .widget-size-bars i.is-filled,
html[data-theme="dark"] .widget-size-current-bar i.is-filled{
background:#9af65b;
}
@media(max-width:850px){
.widget-size-control{
display:none;
}
}
/* ============================================================
v0.25 — Overview refinements
============================================================ */
/* Metrics summary is now visually the same outer card as other widgets. */
.dashboard-widget[data-widget-id="metrics"]{
background:#fff!important;
border:1px solid var(--line)!important;
border-radius:16px!important;
padding:16px!important;
box-shadow:0 5px 20px #20203908!important;
}
html[data-theme="dark"] .dashboard-widget[data-widget-id="metrics"]{
background:#191c25!important;
border-color:#303443!important;
box-shadow:0 6px 22px #00000022!important;
}
/* Achievements uses the same row language as Today. */
.achievement-overview-row{
grid-template-columns:24px minmax(0,1fr)!important;
}
.achievement-static-check{
display:grid;
place-items:center;
cursor:default!important;
}
.achievement-overview-main{
min-width:0;
display:flex;
flex-direction:column;
gap:2px;
}
.achievement-overview-main>span{
min-width:0;
overflow-wrap:anywhere;
font-size:calc(.6875rem * var(--content-scale));
}
.achievement-overview-main small{
color:var(--muted);
font-size:calc(.5rem * var(--content-scale));
line-height:1.25;
}
/* Calendar Week uses Plan Week task cards. */
.calendar-plan-task{
display:grid!important;
grid-template-columns:18px 5px minmax(0,1fr)!important;
align-items:start!important;
gap:6px!important;
background:#fff!important;
border:1px solid #ececf2!important;
border-radius:8px!important;
padding:7px 6px!important;
margin:6px 0!important;
font-size:calc(.5625rem * var(--content-scale))!important;
line-height:1.25!important;
box-shadow:0 2px 7px #27273a06!important;
}
.calendar-plan-task .task-toggle-form{
margin:0!important;
}
.calendar-plan-task>i{
margin-top:5px!important;
}
.calendar-plan-task>span{
min-width:0;
overflow-wrap:anywhere;
}
.calendar-plan-task.done{
opacity:1!important;
text-decoration:none!important;
background:rgb(35,173,104)!important;
border-color:rgb(35,173,104)!important;
color:#fff!important;
}
.calendar-plan-task.done span{
color:#fff!important;
text-decoration:none!important;
}
.calendar-plan-task.done>i{
background:#fff!important;
}
.calendar-plan-task.done .check.checked{
background:#fff!important;
border-color:#fff!important;
color:rgb(35,173,104)!important;
}
html[data-theme="dark"] .calendar-plan-task:not(.done){
background:#1d202a!important;
border-color:#303443!important;
}
/* Day: the right side now contains action buttons only. */
.day-results-panel{
padding:10px!important;
}
.day-results-button{
width:100%;
text-align:center;
display:block;
}
/* ============================================================
v0.25 — Mobile
============================================================ */
@media(max-width:850px){
/* Overview / Plan Week: exactly ~3 days visible, horizontal swipe for 4–7. */
.dashboard-widget[data-widget-id="week"]{
overflow:hidden!important;
}
.dashboard-widget[data-widget-id="week"] .week-grid{
display:grid!important;
grid-template-columns:repeat(7,calc(100% / 3))!important;
min-width:0!important;
width:100%!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
}
.dashboard-widget[data-widget-id="week"] .day-col{
min-width:0!important;
width:auto!important;
scroll-snap-align:start;
}
/* Day layout: explicit single-column structure instead of conflicting flex/grid rules. */
.main-content .two-col{
display:flex!important;
flex-direction:column!important;
gap:12px!important;
margin-top:12px!important;
}
.main-content .two-col>section,
.main-content .two-col>aside{
width:100%!important;
max-width:100%!important;
min-width:0!important;
}
.main-content .form-panel{
margin:12px 0!important;
}
.main-content .form-panel .panel-head{
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
gap:9px!important;
}
.main-content .day-nav{
width:100%;
display:grid!important;
grid-template-columns:42px minmax(0,1fr) 42px!important;
gap:6px!important;
}
.main-content .day-nav .btn{
width:100%;
display:grid;
place-items:center;
}
.main-content .form-grid{
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
gap:8px!important;
}
.main-content .form-grid>*{
grid-column:1!important;
width:100%!important;
min-width:0!important;
}
/* Critical fix: task-row was still display:flex while mobile rules treated it as grid. */
.main-content .task-row{
display:grid!important;
grid-template-columns:22px minmax(0,1fr)!important;
gap:7px 9px!important;
align-items:start!important;
padding:11px 0!important;
}
.main-content .task-row>.task-toggle-form{
grid-column:1!important;
grid-row:1!important;
margin-top:2px!important;
}
.main-content .task-row>.task-main{
grid-column:2!important;
grid-row:1!important;
min-width:0!important;
}
.main-content .task-row>.status{
grid-column:2!important;
grid-row:2!important;
justify-self:start!important;
}
.main-content .task-row>.today-task-actions{
grid-column:1/3!important;
grid-row:3!important;
width:100%!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) 34px!important;
gap:7px!important;
margin:2px 0 0!important;
}
.main-content .today-task-actions .task-skip-btn{
width:100%!important;
}
.main-content .task-delete-btn{
width:34px!important;
height:32px!important;
}
.today-template-launcher,
.day-results-panel{
margin-top:0!important;
padding:8px!important;
}
.today-template-open,
.day-results-button{
width:100%!important;
}
.today-template-drawer{
width:min(360px,94vw)!important;
}
/* Calendar week remains horizontally navigable with readable task cards. */
.calendar-week-view{
grid-template-columns:repeat(7,155px)!important;
overflow-x:auto!important;
-webkit-overflow-scrolling:touch;
}
.calendar-week-column{
min-height:360px!important;
}
}
/* ============================================================
v0.27 — Daily affirmation
============================================================ */
.dashboard-affirmation{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin:12px 0;padding:11px 14px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 4px 16px #20203908}
.dashboard-affirmation>span{font-size:.625rem;color:var(--muted)}
.dashboard-affirmation>b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.affirmation-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-47%);width:min(540px,92vw);background:#fff;border:1px solid var(--line);border-radius:17px;padding:18px;z-index:92;box-shadow:0 25px 80px #17182b33;opacity:0;pointer-events:none;transition:.16s}
.affirmation-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.affirmation-modal h2{margin:5px 0 12px}
.affirmation-modal textarea{width:100%;border:1px solid #dedfea;border-radius:10px;padding:11px;font:inherit;resize:vertical}
.affirmation-overlay{z-index:91}
html[data-theme="dark"] .dashboard-affirmation,html[data-theme="dark"] .affirmation-modal{background:#1d2029;border-color:#343846}
/* ============================================================
v0.27 — Project icons (Lucide, with fallback)
============================================================ */
.project-icon-field{display:flex;flex-direction:column;gap:5px;font-size:.625rem;color:var(--muted)}
.project-icon{display:inline-grid;place-items:center;width:27px;height:27px;margin-right:7px;vertical-align:middle;border-radius:8px;background:#f1efff;color:#75ec13}
.project-icon svg{width:16px;height:16px}
.project-icon-fallback{display:none}
.project-icon:not(:has(svg)) .project-icon-fallback{display:inline}
.project-card-summary h2{display:flex;align-items:center}
/* ============================================================
v0.27 — User-configurable completed-task appearance
============================================================ */
body[data-completed-style] .task-status-host.done,
body[data-completed-style] .mini-task.done,
body[data-completed-style] .board-task.done,
body[data-completed-style] .today-row.done,
body[data-completed-style] .calendar-plan-task.done{
opacity:1!important;text-decoration:none!important;background:initial!important;color:inherit!important;
}
body[data-completed-style="fill"] .task-status-host.done,
body[data-completed-style="fill"] .mini-task.done,
body[data-completed-style="fill"] .board-task.done,
body[data-completed-style="fill"] .today-row.done,
body[data-completed-style="fill"] .calendar-plan-task.done,
body[data-completed-style="checkbox_fill"] .task-status-host.done,
body[data-completed-style="checkbox_fill"] .mini-task.done,
body[data-completed-style="checkbox_fill"] .board-task.done,
body[data-completed-style="checkbox_fill"] .today-row.done,
body[data-completed-style="checkbox_fill"] .calendar-plan-task.done{
background:var(--completed-fill)!important;border-color:var(--completed-fill)!important;color:#fff!important;
}
body[data-completed-style="fill"] .done span,
body[data-completed-style="fill"] .done b,
body[data-completed-style="fill"] .done small,
body[data-completed-style="checkbox_fill"] .done span,
body[data-completed-style="checkbox_fill"] .done b,
body[data-completed-style="checkbox_fill"] .done small{color:#fff!important;text-decoration:none!important}
body[data-completed-style="strike"] .done b,
body[data-completed-style="strike"] .done span,
body[data-completed-style="checkbox_strike"] .done b,
body[data-completed-style="checkbox_strike"] .done span{text-decoration:line-through!important}
body[data-completed-style="checkbox"] .done b,
body[data-completed-style="checkbox"] .done span{text-decoration:none!important}
.completed-color-setting[hidden]{display:none!important}
/* ============================================================
v0.27 — Typography: only headings stay bold
============================================================ */
body b,body strong,body button,body .btn,body .badge,body .status,body label,body nav a{font-weight:400!important}
h1,h2,h3,h4,h5,h6,.brand strong{font-weight:700!important}
.metric strong{font-weight:400!important}
.widget-controlbar b{font-weight:400!important}
@media(max-width:850px){.dashboard-affirmation{grid-template-columns:1fr auto}.dashboard-affirmation>span{grid-column:1/3}.dashboard-affirmation>b{white-space:normal}}
/* ============================================================
v0.28 — Hybrid Horizons: sections + stages + Roadmap
============================================================ */
.horizon-intro{
margin:20px 0 14px;
display:flex;
justify-content:space-between;
gap:20px;
align-items:center;
}
.horizon-intro h2{
margin:4px 0 5px;
}
.horizon-intro p{
margin:0;
max-width:780px;
color:var(--muted);
line-height:1.5;
}
.horizon-legend{
display:flex;
gap:12px;
flex-wrap:wrap;
flex:0 0 auto;
}
.horizon-legend span{
display:flex;
gap:5px;
align-items:center;
color:var(--muted);
font-size:calc(.5625rem * var(--content-scale));
}
.horizon-legend i{
display:block;
flex:0 0 auto;
}
.legend-section{
width:18px;
height:7px;
border-radius:8px;
background:#75ec13;
}
.legend-stage{
width:15px;
height:5px;
border-radius:8px;
background:#9e94ee;
}
.legend-milestone{
width:9px;
height:9px;
transform:rotate(45deg);
background:#75ec13;
border-radius:2px;
}
.horizon-grid-v28{
align-items:start;
}
.horizon-v28{
min-width:0;
}
.horizon-long{
grid-column:1/-1;
}
.horizon-head-v28{
align-items:flex-start;
}
.horizon-head-v28>.panel-head,
.horizon-head-v28>div:first-child{
min-width:0;
}
.horizon-head-actions{
display:flex;
align-items:center;
gap:8px;
position:relative;
}
.horizon-count{
min-width:26px;
height:26px;
padding:0 7px;
display:grid;
place-items:center;
border-radius:999px;
background:#f1ffe7;
color:#75ec13;
font-size:calc(.5625rem * var(--content-scale));
}
.horizon-add-details{
position:relative;
}
.horizon-add-details>summary{
list-style:none;
}
.horizon-add-details>summary::-webkit-details-marker{
display:none;
}
.horizon-add-popover{
position:absolute;
right:0;
top:calc(100% + 7px);
width:min(390px,80vw);
z-index:45;
padding:12px;
border:1px solid #e2e3ec;
border-radius:12px;
background:#fff;
box-shadow:0 16px 45px #20203922;
}
.horizon-add-form{
margin:0!important;
}
.horizon-add-form label,
.section-edit-panel label{
display:flex;
flex-direction:column;
gap:5px;
color:var(--muted);
font-size:calc(.5625rem * var(--content-scale));
}
.horizon-date-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
}
/* Strategic sections */
.horizon-section-list{
display:flex;
flex-direction:column;
gap:8px;
margin-top:6px;
}
.horizon-section-card{
border:1px solid #e8e8ef;
border-radius:12px;
background:#fff;
overflow:hidden;
}
.horizon-section-summary{
list-style:none;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:11px 12px;
cursor:pointer;
}
.horizon-section-summary::-webkit-details-marker{
display:none;
}
.horizon-section-summary:hover{
background:#fbfff8;
}
.horizon-section-main{
display:flex;
align-items:center;
gap:9px;
min-width:0;
}
.horizon-section-dot{
width:9px;
height:9px;
border-radius:3px;
background:#75ec13;
flex:0 0 auto;
}
.horizon-section-main>div{
min-width:0;
}
.horizon-section-main h3{
margin:0 0 4px;
font-size:calc(.75rem * var(--content-scale));
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.horizon-section-meta{
display:flex;
gap:6px;
flex-wrap:wrap;
color:var(--muted);
font-size:calc(.5rem * var(--content-scale));
}
.horizon-section-meta span{
display:inline-flex;
align-items:center;
}
.horizon-section-meta span+span:before{
content:"·";
margin-right:6px;
color:#b1b4c1;
}
.horizon-section-chevron,
.stage-chevron{
color:#75ec13;
transition:transform .15s ease;
}
.horizon-section-card[open]>.horizon-section-summary .horizon-section-chevron,
.stage-card[open]>.stage-summary .stage-chevron{
transform:rotate(180deg);
}
.horizon-section-body{
padding:0 12px 12px;
border-top:1px solid #f0f0f4;
}
.horizon-section-notes{
margin:10px 0;
color:#62687a;
line-height:1.5;
font-size:calc(.625rem * var(--content-scale));
}
/* Stages */
.stage-block{
margin-top:10px;
border:1px solid #ececf3;
border-radius:10px;
background:#fafafd;
padding:10px;
}
.stage-block-head{
display:flex;
justify-content:space-between;
gap:12px;
align-items:flex-start;
}
.stage-block-head h4{
margin:2px 0 0;
font-size:calc(.6875rem * var(--content-scale));
}
.stage-add-details{
position:relative;
}
.stage-add-details>summary{
list-style:none;
}
.stage-add-details>summary::-webkit-details-marker{
display:none;
}
.stage-add-form{
position:absolute;
right:0;
top:calc(100% + 5px);
width:min(330px,78vw);
z-index:35;
display:flex;
flex-direction:column;
gap:7px;
padding:10px;
background:#fff;
border:1px solid #e2e3ec;
border-radius:10px;
box-shadow:0 12px 35px #2020391e;
}
.stage-list{
display:flex;
flex-direction:column;
gap:5px;
margin-top:9px;
}
.stage-card{
border:1px solid #e7e8ef;
border-radius:9px;
background:#fff;
overflow:hidden;
}
.stage-summary{
list-style:none;
display:grid;
grid-template-columns:10px minmax(0,1fr) 20px;
gap:7px;
align-items:center;
padding:8px 9px;
cursor:pointer;
}
.stage-summary::-webkit-details-marker{
display:none;
}
.stage-status-dot{
width:7px;
height:7px;
border-radius:50%;
background:#9af65b;
}
.stage-done .stage-status-dot{
background:#23ad68;
}
.stage-summary-main{
min-width:0;
display:flex;
flex-direction:column;
gap:2px;
}
.stage-summary-main>span{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
font-size:calc(.625rem * var(--content-scale));
}
.stage-summary-main small{
color:var(--muted);
font-size:calc(.5rem * var(--content-scale));
}
.stage-edit-body{
padding:9px;
border-top:1px solid #f0f0f4;
}
.stage-edit-body .stack{
margin-top:0;
}
.stage-edit-actions{
display:flex;
gap:7px;
}
.section-edit-details{
margin-top:9px;
}
.section-edit-details>summary{
list-style:none;
display:inline-flex;
}
.section-edit-details>summary::-webkit-details-marker{
display:none;
}
.section-edit-panel{
margin-top:8px;
padding:10px;
border-radius:10px;
background:#f8f8fb;
}
.section-edit-panel>.stack{
margin-top:0;
}
/* Roadmap: intentionally lighter than a full Gantt. */
.horizon-roadmap-details{
margin-top:14px;
border-top:1px solid #ececf2;
padding-top:11px;
}
.horizon-roadmap-title{
list-style:none;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
cursor:pointer;
}
.horizon-roadmap-title::-webkit-details-marker{
display:none;
}
.horizon-roadmap-title h3{
margin:2px 0 0;
font-size:calc(.75rem * var(--content-scale));
}
.horizon-roadmap-title>span{
color:var(--muted);
font-size:calc(.5rem * var(--content-scale));
}
.horizon-roadmap{
margin-top:10px;
overflow-x:auto;
border:1px solid #e8e9ef;
border-radius:11px;
background:#fff;
}
.roadmap-axis,
.roadmap-row{
min-width:780px;
display:grid;
grid-template-columns:180px minmax(600px,1fr);
}
.roadmap-axis{
height:34px;
border-bottom:1px solid #ededf3;
background:#fafafd;
}
.roadmap-axis-label,
.roadmap-row-label{
border-right:1px solid #ededf3;
}
.roadmap-axis-track,
.roadmap-track{
position:relative;
}
.roadmap-tick{
position:absolute;
top:0;
height:100%;
transform:translateX(-50%);
color:#8a90a0;
font-size:9px;
}
.roadmap-tick i{
position:absolute;
top:0;
left:50%;
width:1px;
height:100%;
background:#e6e7ee;
}
.roadmap-tick b{
position:absolute;
top:9px;
left:4px;
white-space:nowrap;
font-weight:400;
}
.roadmap-row{
min-height:37px;
border-bottom:1px solid #f0f0f4;
}
.roadmap-row:last-child{
border-bottom:0;
}
.roadmap-stage-row{
min-height:31px;
background:#fcfcfd;
}
.roadmap-row-label{
min-width:0;
display:flex;
align-items:center;
gap:5px;
padding:7px 9px;
color:#464c60;
font-size:calc(.5625rem * var(--content-scale));
}
.roadmap-stage-row .roadmap-row-label{
padding-left:22px;
color:#777d8e;
font-size:calc(.5rem * var(--content-scale));
}
.roadmap-row-label>span:last-child{
min-width:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.roadmap-stage-arrow{
color:#9a91e6;
}
.roadmap-gridline{
position:absolute;
top:0;
bottom:0;
width:1px;
background:#f0f0f4;
}
.roadmap-bar{
position:absolute;
top:12px;
height:12px;
min-width:7px;
border-radius:999px;
background:linear-gradient(90deg,#75ec13,#9af65b);
box-shadow:0 2px 5px #75ec1325;
}
.roadmap-bar.stage{
top:11px;
height:8px;
background:#aaa0ef;
}
.roadmap-bar.done{
background:#23ad68;
}
.roadmap-milestone{
position:absolute;
top:13px;
width:10px;
height:10px;
transform:translateX(-50%) rotate(45deg);
border-radius:2px;
background:#75ec13;
}
.roadmap-milestone.stage{
top:11px;
width:8px;
height:8px;
background:#a096ea;
}
.roadmap-no-date{
position:absolute;
right:8px;
top:9px;
padding:2px 6px;
border-radius:999px;
background:#f2f2f6;
color:#9a9eab;
font-size:9px;
}
.roadmap-empty{
padding:18px;
color:var(--muted);
font-size:calc(.5625rem * var(--content-scale));
}
/* Dark */
html[data-theme="dark"] .horizon-add-popover,
html[data-theme="dark"] .horizon-section-card,
html[data-theme="dark"] .stage-add-form,
html[data-theme="dark"] .stage-card,
html[data-theme="dark"] .horizon-roadmap{
background:#1d2029;
border-color:#343846;
}
html[data-theme="dark"] .horizon-section-summary:hover,
html[data-theme="dark"] .stage-block,
html[data-theme="dark"] .roadmap-axis,
html[data-theme="dark"] .roadmap-stage-row,
html[data-theme="dark"] .section-edit-panel{
background:#232630;
}
html[data-theme="dark"] .horizon-section-body,
html[data-theme="dark"] .stage-edit-body,
html[data-theme="dark"] .horizon-roadmap-details{
border-color:#343846;
}
html[data-theme="dark"] .roadmap-axis-label,
html[data-theme="dark"] .roadmap-row-label,
html[data-theme="dark"] .roadmap-row,
html[data-theme="dark"] .roadmap-axis{
border-color:#343846;
}
html[data-theme="dark"] .roadmap-gridline,
html[data-theme="dark"] .roadmap-tick i{
background:#343846;
}
/* Responsive */
@media(max-width:850px){
.horizon-intro{
flex-direction:column;
align-items:flex-start;
}
.horizon-grid-v28{
display:block!important;
}
.horizon-v28{
margin-bottom:12px;
}
.horizon-head-v28{
align-items:center!important;
flex-direction:row!important;
}
.horizon-add-popover{
position:fixed;
left:12px;
right:12px;
top:100px;
width:auto;
max-height:70vh;
overflow:auto;
z-index:80;
}
.horizon-date-grid{
grid-template-columns:1fr;
}
.stage-block-head{
align-items:center;
}
.stage-add-form{
position:fixed;
left:12px;
right:12px;
top:120px;
width:auto;
max-height:65vh;
overflow:auto;
z-index:80;
}
.roadmap-axis,
.roadmap-row{
min-width:720px;
grid-template-columns:150px minmax(560px,1fr);
}
}
/* ============================================================
v0.29 — Dashboard close control
============================================================ */
.dashboard-widget .widget-hide{
position:relative!important;
z-index:8!important;
pointer-events:auto!important;
cursor:pointer!important;
}
.dashboard-widget.widget-is-hidden{
display:none!important;
}
/* ============================================================
v0.29 — Settings / user dashboard: stable tabs + AJAX save
============================================================ */
.settings-page-grid{
min-height:72vh;
}
.settings-section[hidden]{
display:none!important;
}
.settings-nav a.active{
background:#efffe2;
color:#75ec13;
}
.settings-inline-state{
display:inline-flex;
min-height:18px;
align-items:center;
color:var(--muted);
font-size:calc(.5625rem * var(--content-scale));
}
.settings-inline-state.is-saved{
color:#198754;
}
.settings-inline-state.is-error{
color:#c84b5d;
}
.nav-user-hidden{
display:none!important;
}
html[data-theme="dark"] .settings-nav a.active{
background:#292542;
color:#b9b1ff;
}
/* ============================================================
v0.29 — Fixed completed-task appearance:
checkbox remains; task text/card becomes quiet and faded.
No green fill. No strike-through.
============================================================ */
.task-status-host.done,
.mini-task.done,
.board-task.done,
.today-row.done,
.calendar-plan-task.done,
.calendar-day-task.done,
.calendar-week-task.done,
.matrix-task.done,
.drawer-day-task.done{
opacity:.42!important;
filter:saturate(.35)!important;
text-decoration:none!important;
}
.task-status-host.done *,
.mini-task.done *,
.board-task.done *,
.today-row.done *,
.calendar-plan-task.done *,
.calendar-day-task.done *,
.calendar-week-task.done *,
.matrix-task.done *,
.drawer-day-task.done *{
text-decoration:none!important;
}
.dashboard-widget[data-widget-id="week"] .mini-task.done,
.calendar-plan-task.done,
.calendar-week-task.done,
.matrix-task.done{
background:#fff!important;
border-color:#e5e7ee!important;
color:#8a90a0!important;
}
.dashboard-widget[data-widget-id="week"] .mini-task.done span,
.calendar-plan-task.done span,
.calendar-week-task.done span,
.matrix-task.done b,
.matrix-task.done small{
color:#8a90a0!important;
}
.dashboard-widget[data-widget-id="week"] .mini-task.done i,
.calendar-plan-task.done>i{
opacity:.55!important;
}
.calendar-plan-task.done .check.checked{
background:#27b76f!important;
border-color:#27b76f!important;
color:#fff!important;
}
html[data-theme="dark"] .dashboard-widget[data-widget-id="week"] .mini-task.done,
html[data-theme="dark"] .calendar-plan-task.done,
html[data-theme="dark"] .calendar-week-task.done,
html[data-theme="dark"] .matrix-task.done{
background:#1d2029!important;
border-color:#343846!important;
color:#777e8e!important;
}
/* ============================================================
v0.29 — Long horizons as dated checkpoints, no Roadmap
============================================================ */
.stage-head-actions{
display:flex;
align-items:center;
gap:7px;
flex-wrap:wrap;
justify-content:flex-end;
}
.stage-head-actions form{
margin:0;
}
.stage-checkpoint-list{
gap:7px;
}
.stage-checkpoint-card{
border-left:3px solid #9af65b;
}
.stage-checkpoint-card.stage-done{
border-left-color:#23ad68;
}
.stage-checkpoint-card .stage-summary{
grid-template-columns:10px minmax(0,1fr) 20px;
padding:10px 10px;
}
.stage-deadline{
font-size:calc(.6875rem * var(--content-scale))!important;
}
.stage-thesis-preview{
margin:4px 0 0!important;
color:#62697b!important;
line-height:1.4!important;
white-space:normal!important;
overflow:visible!important;
text-overflow:clip!important;
font-size:calc(.5625rem * var(--content-scale))!important;
}
.stage-checkpoint-card.stage-done .stage-thesis-preview{
color:#8d93a2!important;
}
.stage-add-form label,
.stage-edit-body label{
display:flex;
flex-direction:column;
gap:5px;
color:var(--muted);
font-size:calc(.5625rem * var(--content-scale));
}
/* Old Roadmap rules remain harmless for backwards CSS compatibility,
but there is no Roadmap markup in v0.29. */
@media(max-width:850px){
.settings-page-grid{
min-height:0;
}
.settings-nav{
position:sticky!important;
top:0!important;
z-index:5;
background:var(--page-bg,#fbfbfd);
padding:4px!important;
}
.stage-block-head{
align-items:flex-start!important;
flex-direction:column!important;
}
.stage-head-actions{
width:100%;
justify-content:flex-start;
}
}
/* Prevent the settings page from flashing every section before JS activates its tab. */
.settings-page-grid:not(.settings-ready) .settings-section:not(:first-child){
display:none!important;
}
/* ============================================================
v0.30 — Overview: vertical widget resize + mobile Week swipe
============================================================ */
.dashboard-widget{
position:relative;
}
.widget-resize-handle{
position:absolute;
left:10px;
right:10px;
bottom:-5px;
height:10px;
z-index:12;
cursor:ns-resize;
touch-action:none;
}
.widget-resize-handle:after{
content:"";
position:absolute;
left:50%;
top:4px;
width:38px;
height:3px;
transform:translateX(-50%);
border-radius:999px;
background:#d9dbe4;
opacity:.25;
transition:.15s;
}
.dashboard-widget:hover .widget-resize-handle:after,
.widget-resize-handle:hover:after{
opacity:1;
background:#9c94dd;
}
@media(max-width:850px){
.widget-resize-handle{display:none!important}
.dashboard-widget[data-widget-id="week"]{
overflow:hidden!important;
}
.dashboard-widget[data-widget-id="week"] .week-grid{
display:flex!important;
gap:8px!important;
width:100%!important;
min-width:0!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x proximity;
overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;
padding-bottom:5px;
}
.dashboard-widget[data-widget-id="week"] .day-col{
flex:0 0 calc((100% - 16px)/3)!important;
width:auto!important;
min-width:0!important;
scroll-snap-align:start;
}
}
/* ============================================================
v0.30 — Horizons: configurable Direction × Time grid
============================================================ */
.horizon-grid-v30{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
align-items:start;
}
.horizon-long-v30{
grid-column:1/-1;
}
.horizon-v30-head{
align-items:flex-start;
}
.horizon-grid-settings{
position:relative;
}
.horizon-grid-settings>summary{
list-style:none;
}
.horizon-grid-settings>summary::-webkit-details-marker{display:none}
.horizon-grid-settings-form{
position:absolute;
right:0;
top:calc(100% + 7px);
width:290px;
z-index:55;
padding:11px;
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
background:#fff;
border:1px solid #e2e3ec;
border-radius:11px;
box-shadow:0 15px 42px #20203924;
}
.horizon-grid-settings-form label{
display:flex;
flex-direction:column;
gap:4px;
font-size:9px;
color:var(--muted);
}
.horizon-grid-settings-form label:nth-child(3),
.horizon-grid-settings-form .btn{
grid-column:1/-1;
}
.horizon-time-shell{
margin-top:9px;
width:100%;
overflow:auto;
border:1px solid #e6e7ee;
border-radius:12px;
background:#fff;
overscroll-behavior-x:contain;
}
.horizon-time-grid{
display:grid;
grid-template-columns:175px repeat(var(--period-count),minmax(170px,190px));
width:max-content;
min-width:100%;
}
.horizon-time-corner,
.horizon-time-header,
.horizon-direction-cell,
.horizon-period-cell{
border-right:1px solid #ececf2;
border-bottom:1px solid #ececf2;
}
.horizon-time-corner{
position:sticky;
left:0;
top:0;
z-index:8;
display:flex;
align-items:center;
padding:10px;
background:#f7f7fb;
color:#727889;
font-size:9px;
}
.horizon-time-header{
position:sticky;
top:0;
z-index:5;
padding:8px 9px;
background:#fafafd;
min-height:48px;
}
.horizon-time-header b{
display:block;
font-size:10px;
font-weight:600;
}
.horizon-time-header small{
display:block;
margin-top:2px;
color:#979cab;
font-size:7px;
}
.horizon-direction-cell{
position:sticky;
left:0;
z-index:4;
min-height:104px;
padding:9px;
display:flex;
gap:8px;
align-items:flex-start;
background:#fff;
}
.horizon-direction-cell b{
margin-top:4px;
font-size:10px;
font-weight:600;
}
.horizon-direction-icon{
background:color-mix(in srgb,var(--direction-color) 12%,transparent)!important;
color:var(--direction-color)!important;
}
.horizon-direction-icon svg{
width:14px;
height:14px;
}
.horizon-period-cell{
min-height:104px;
padding:6px;
background:#fff;
position:relative;
}
.horizon-period-cell:hover{
background:#fbfaff;
}
.horizon-period-blocks{
display:flex;
flex-direction:column;
gap:5px;
}
.horizon-grid-block{
min-width:0;
border:1px solid #e4e1fa;
border-radius:8px;
background:#f7fff2;
}
.horizon-grid-block>summary{
list-style:none;
cursor:pointer;
padding:7px;
display:flex;
flex-direction:column;
gap:2px;
}
.horizon-grid-block>summary::-webkit-details-marker{display:none}
.horizon-grid-block>summary span{
font-size:9px;
line-height:1.25;
font-weight:600;
overflow-wrap:anywhere;
}
.horizon-grid-block>summary small{
color:#73798b;
font-size:7px;
line-height:1.3;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.horizon-grid-block.is-done{
opacity:.42;
filter:saturate(.45);
}
.horizon-block-edit,
.horizon-cell-add-form{
margin:0 6px 7px!important;
padding-top:7px;
border-top:1px solid #e9e6fb;
}
.horizon-cell-add{
position:relative;
margin-top:5px;
}
.horizon-cell-add>summary{
list-style:none;
width:24px;
height:24px;
display:grid;
place-items:center;
border-radius:6px;
cursor:pointer;
background:#f1effb;
color:#6b5fd1;
}
.horizon-cell-add>summary::-webkit-details-marker{display:none}
.horizon-cell-add-form{
position:absolute;
left:0;
top:29px;
z-index:50;
width:240px;
padding:9px!important;
margin:0!important;
border:1px solid #e2e3ec;
background:#fff;
border-radius:9px;
box-shadow:0 12px 35px #20203922;
}
.horizon-no-direction{
color:#858a99;
}
.horizon-unassigned-cell{
background:#fcfcfd;
}
.horizon-unplaced{
margin-top:10px;
border-top:1px solid #ededf3;
padding-top:9px;
}
.horizon-unplaced>summary{
cursor:pointer;
color:#6f7587;
font-size:9px;
}
.horizon-unplaced-list{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
margin-top:8px;
}
html[data-theme="dark"] .horizon-grid-settings-form,
html[data-theme="dark"] .horizon-time-shell,
html[data-theme="dark"] .horizon-time-grid,
html[data-theme="dark"] .horizon-direction-cell,
html[data-theme="dark"] .horizon-period-cell,
html[data-theme="dark"] .horizon-cell-add-form{
background:#1d2029;
border-color:#343846;
}
html[data-theme="dark"] .horizon-time-corner,
html[data-theme="dark"] .horizon-time-header{
background:#232630;
border-color:#343846;
}
html[data-theme="dark"] .horizon-grid-block{
background:#28253d;
border-color:#443e69;
}
@media(max-width:850px){
.horizon-grid-v30{display:block!important}
.horizon-v30{margin-bottom:12px}
.horizon-grid-settings-form{
position:fixed;
left:12px;
right:12px;
top:100px;
width:auto;
max-height:70vh;
overflow:auto;
}
.horizon-time-grid{
grid-template-columns:145px repeat(var(--period-count),160px);
}
.horizon-unplaced-list{grid-template-columns:1fr}
}
/* ============================================================
v0.30 — Directions
============================================================ */
.directions-layout-v30{
grid-template-columns:minmax(0,1fr) 210px!important;
}
.direction-setting{
overflow:visible!important;
}
.direction-setting-icon svg{
width:17px;
height:17px;
}
.direction-edit-details{
position:relative;
}
.direction-edit-details>summary{
list-style:none;
}
.direction-edit-details>summary::-webkit-details-marker{display:none}
.direction-edit-popover{
position:absolute;
right:0;
top:calc(100% + 5px);
z-index:50;
width:250px;
padding:10px;
border:1px solid #e2e3ec;
border-radius:10px;
background:#fff;
box-shadow:0 12px 34px #20203920;
}
.direction-create-panel{
width:100%;
}
.direction-icon-select{
width:100%;
}
html[data-theme="dark"] .direction-edit-popover{
background:#1d2029;
border-color:#343846;
}
@media(max-width:850px){
.directions-layout-v30{display:block!important}
.direction-create-panel{margin-top:12px}
.direction-edit-popover{
position:fixed;
left:12px;
right:12px;
top:120px;
width:auto;
}
}
/* ============================================================
v0.30 — Projects: quick vs expanded add
============================================================ */
.project-create-panel{
max-width:980px;
}
.project-quick-create{
display:grid;
grid-template-columns:minmax(260px,520px) auto;
gap:8px;
align-items:center;
margin-top:10px;
}
.project-quick-create input{
width:100%;
}
.project-advanced-create{
margin-top:8px;
}
.project-advanced-create>summary{
width:max-content;
cursor:pointer;
color:#75ec13;
font-size:10px;
}
.project-advanced-form{
margin-top:10px;
display:grid;
grid-template-columns:minmax(210px,1.4fr) 150px 150px 155px 155px;
gap:8px;
align-items:end;
}
.project-advanced-form label{
display:flex;
flex-direction:column;
gap:4px;
color:var(--muted);
font-size:9px;
}
.project-advanced-form input,
.project-advanced-form select{
width:100%;
min-width:0;
}
.project-field-wide{
grid-column:span 2;
}
.project-date-field{
max-width:155px;
}
.project-create-submit{
width:max-content;
}
.project-card-body>small{
margin-top:5px;
}
@media(max-width:1000px){
.project-advanced-form{grid-template-columns:repeat(2,minmax(0,1fr))}
.project-date-field{max-width:none}
}
@media(max-width:850px){
.project-quick-create{grid-template-columns:1fr}
.project-advanced-form{grid-template-columns:1fr}
.project-field-wide{grid-column:auto}
}
/* ============================================================
v0.30 — Week
============================================================ */
.direction-icon svg{
width:14px;
height:14px;
}
.travel-plan-card{
border-left:3px solid var(--travel-color,#75ec13)!important;
}
.travel-card-icon{
width:22px;
height:22px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:7px;
color:var(--travel-color,#75ec13);
background:color-mix(in srgb,var(--travel-color,#75ec13) 12%,transparent);
}
.travel-card-icon svg{
width:14px;
height:14px;
}
.travel-editor-fields{
grid-template-columns:1fr 90px 1fr 1fr!important;
}
.unassigned-task-card{
border-bottom:1px solid #efeff4;
}
.unassigned-task-card>summary{
list-style:none;
padding:9px 0;
display:flex;
justify-content:space-between;
align-items:center;
gap:8px;
cursor:pointer;
}
.unassigned-task-card>summary::-webkit-details-marker{display:none}
.unassigned-organize-form{
display:grid;
grid-template-columns:minmax(180px,1fr) 180px auto auto;
gap:8px;
align-items:center;
padding:0 0 10px;
}
@media(max-width:850px){
.travel-editor-fields{grid-template-columns:1fr!important}
.unassigned-organize-form{grid-template-columns:1fr}
}
/* ============================================================
v0.30 — Today desktop alignment
============================================================ */
@media(min-width:851px){
.main-content .two-col>aside{
padding-top:20px;
}
.main-content .two-col>aside .today-template-launcher{
margin-top:0!important;
}
}
/* ============================================================
v0.30 — Calendar
============================================================ */
.calendar-quick-add{
width:75%;
max-width:1050px;
}
.calendar-layout-left-menu{
grid-template-columns:minmax(250px,.72fr) minmax(0,2.4fr)!important;
}
.calendar-day-panel-left{
grid-column:1;
position:sticky;
top:95px;
}
.calendar-layout-left-menu .calendar-panel{
grid-column:2;
}
.calendar-with-day-sidebar{
display:grid;
grid-template-columns:minmax(240px,.72fr) minmax(0,2.6fr);
gap:16px;
}
.calendar-selected-day-panel{
align-self:start;
position:sticky;
top:95px;
}
.calendar-add-plan-open{
width:100%;
margin:5px 0 8px;
}
.calendar-plan-modal{
width:min(480px,92vw);
}
@media(max-width:1000px){
.calendar-quick-add{width:100%}
.calendar-layout-left-menu,
.calendar-with-day-sidebar{
grid-template-columns:1fr!important;
}
.calendar-day-panel-left,
.calendar-selected-day-panel{
position:static;
grid-column:auto;
}
.calendar-layout-left-menu .calendar-panel{grid-column:auto}
}
/* ============================================================
v0.30 — Obligations
============================================================ */
.obligations-create-panel{
width:70%;
max-width:980px;
}
.obligation-create-form{
display:grid;
grid-template-columns:minmax(220px,1.5fr) 130px 90px 150px minmax(170px,1fr) auto;
gap:8px;
align-items:center;
}
.content-view-toolbar{
margin:12px 0 8px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.content-view-toolbar p{
margin:2px 0 0;
color:var(--muted);
font-size:9px;
}
.view-mode-buttons{
display:flex;
gap:4px;
padding:3px;
border:1px solid #e5e6ed;
border-radius:9px;
background:#fff;
}
.view-mode-buttons button{
border:0;
background:transparent;
padding:6px 9px;
border-radius:6px;
cursor:pointer;
color:#777d8e;
font:inherit;
font-size:9px;
}
.view-mode-buttons button.active{
background:#efffe2;
color:#75ec13;
}
#obligationsList[data-view-mode="tiles"]{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
background:transparent;
border:0;
box-shadow:none;
padding:0;
}
#obligationsList[data-view-mode="gallery"]{
columns:3 250px;
column-gap:10px;
background:transparent;
border:0;
box-shadow:none;
padding:0;
}
#obligationsList[data-view-mode="tiles"] .obligation-card,
#obligationsList[data-view-mode="gallery"] .obligation-card{
display:flex;
flex-direction:column;
align-items:stretch;
gap:8px;
border:1px solid #e7e8ef;
border-radius:12px;
padding:12px;
background:#fff;
}
#obligationsList[data-view-mode="gallery"] .obligation-card{
break-inside:avoid;
margin-bottom:10px;
}
#obligationsList[data-view-mode="tiles"] .row-actions,
#obligationsList[data-view-mode="gallery"] .row-actions{
margin-top:auto;
flex-wrap:wrap;
}
#obligationsList[data-view-mode="tiles"] .inline-edit-panel,
#obligationsList[data-view-mode="gallery"] .inline-edit-panel{
width:100%;
}
@media(max-width:1000px){
.obligations-create-panel{width:100%}
.obligation-create-form{grid-template-columns:repeat(2,minmax(0,1fr))}
#obligationsList[data-view-mode="tiles"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
.obligation-create-form{grid-template-columns:1fr}
#obligationsList[data-view-mode="tiles"]{grid-template-columns:1fr}
.content-view-toolbar{align-items:flex-start;flex-direction:column}
}
/* ============================================================
v0.30 — Notes
============================================================ */
.notes-create-panel{
width:50%;
max-width:720px;
}
.notes-quick-capture{
grid-template-columns:minmax(0,1fr) 110px!important;
}
.notes-list-panel{
max-width:1000px;
}
@media(max-width:850px){
.notes-create-panel{width:100%}
}
/* v0.30 width refinements: whole sections, not only their add forms. */
.obligations-create-panel,
.obligations-view-toolbar,
#obligationsList{
width:70%;
max-width:1100px;
}
.notes-create-panel,
.notes-list-panel{
width:50%;
max-width:760px;
}
@media(max-width:1000px){
.obligations-create-panel,
.obligations-view-toolbar,
#obligationsList{
width:100%;
}
}
@media(max-width:850px){
.notes-create-panel,
.notes-list-panel{
width:100%;
}
}
/* ============================================================
v0.31 — hard mobile horizontal scroll for Overview / Week
============================================================ */
@media(max-width:850px){
.dashboard-widget[data-widget-id="week"]{
min-width:0!important;
width:100%!important;
max-width:100%!important;
overflow:hidden!important;
}
.dashboard-widget[data-widget-id="week"] .week-grid{
display:grid!important;
grid-template-columns:none!important;
grid-auto-flow:column!important;
grid-auto-columns:calc((100% - 16px)/3)!important;
gap:8px!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
overflow-x:auto!important;
overflow-y:hidden!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior-x:contain!important;
scroll-snap-type:x proximity!important;
touch-action:pan-x pan-y!important;
scrollbar-width:thin;
padding-bottom:7px!important;
}
.dashboard-widget[data-widget-id="week"] .week-grid>.day-col{
width:auto!important;
min-width:0!important;
max-width:none!important;
flex:none!important;
scroll-snap-align:start;
}
}
/* ============================================================
v0.31 — editable horizon shell + click-title collapse
============================================================ */
.horizon-v31-head{
position:relative;
}
.horizon-title-wrap{
min-width:0;
}
.horizon-title-collapse{
display:flex;
align-items:center;
gap:7px;
margin:0;
padding:0;
border:0;
background:transparent;
color:inherit;
cursor:pointer;
text-align:left;
font:inherit;
}
.horizon-title-collapse h2{
margin:0;
}
.horizon-collapse-chevron{
display:inline-flex;
color:#8880d9;
font-size:12px;
transition:transform .15s ease;
}
.horizon-title-collapse.is-collapsed .horizon-collapse-chevron{
transform:rotate(-90deg);
}
.horizon-collapsible-body[hidden]{
display:none!important;
}
.horizon-actions-v31{
display:flex;
align-items:center;
gap:6px;
}
.horizon-definition-menu{
position:relative;
}
.horizon-definition-menu>summary{
list-style:none;
}
.horizon-definition-menu>summary::-webkit-details-marker{
display:none;
}
.horizon-definition-popover{
position:absolute;
right:0;
top:calc(100% + 6px);
z-index:70;
width:270px;
padding:10px;
border:1px solid #e2e3ec;
border-radius:11px;
background:#fff;
box-shadow:0 14px 38px #20203922;
}
.horizon-definition-popover label{
display:flex;
flex-direction:column;
gap:4px;
color:var(--muted);
font-size:9px;
}
.horizon-definition-popover>form+form{
margin-top:9px;
padding-top:8px;
border-top:1px solid #ededf3;
}
html[data-theme="dark"] .horizon-definition-popover{
background:#1d2029;
border-color:#343846;
}
@media(max-width:850px){
.horizon-actions-v31{
flex-wrap:wrap;
justify-content:flex-end;
}
.horizon-definition-popover{
position:fixed;
left:12px;
right:12px;
top:110px;
width:auto;
max-height:70vh;
overflow:auto;
}
}
/* ============================================================
v0.31 — Directions visual restored close to pre-v0.30
============================================================ */
.directions-layout-v31{
display:grid!important;
grid-template-columns:minmax(0,1fr) 220px!important;
gap:16px!important;
}
.direction-setting-v31{
display:grid!important;
grid-template-columns:27px 34px minmax(0,1fr) 10px auto auto auto!important;
align-items:center!important;
gap:8px!important;
padding:11px 0!important;
border-bottom:1px solid #f0f1f5!important;
background:transparent!important;
border-radius:0!important;
}
.direction-setting-v31 .direction-drag-handle{
width:27px;
min-width:27px;
}
.direction-setting-v31 .direction-setting-icon{
width:34px!important;
height:34px!important;
border-radius:10px!important;
}
.direction-setting-v31 .direction-setting-main{
min-width:0;
}
.direction-setting-v31 .direction-setting-main b{
font-size:12px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.direction-setting-v31 .direction-setting-main small{
font-size:9px;
}
.direction-setting-v31 .direction-order-actions{
display:flex;
grid-column:auto!important;
gap:3px;
}
.direction-setting-v31 .direction-toggle-form{
grid-column:auto!important;
grid-row:auto!important;
}
.direction-more-button{
list-style:none;
width:30px;
height:28px;
display:grid;
place-items:center;
border:0;
border-radius:8px;
background:transparent;
color:#8b90a0;
cursor:pointer;
letter-spacing:1px;
}
.direction-more-button::-webkit-details-marker{
display:none;
}
.direction-more-button:hover{
background:#f3f1ff;
color:#6658d6;
}
.direction-edit-v31{
position:relative;
}
.direction-edit-v31 .direction-edit-popover{
right:0;
top:34px;
width:245px;
}
.direction-create-panel-v31{
width:100%;
}
.direction-create-panel-v31 .stack input,
.direction-create-panel-v31 .stack select{
width:100%;
}
@media(max-width:850px){
.directions-layout-v31{
display:block!important;
}
.direction-setting-v31{
grid-template-columns:24px 32px minmax(0,1fr) 9px auto!important;
gap:6px!important;
}
.direction-setting-v31 .direction-order-actions{
grid-column:2/5!important;
justify-content:flex-end;
}
.direction-setting-v31 .direction-edit-v31{
grid-column:5;
grid-row:1;
}
.direction-setting-v31 .direction-toggle-form{
grid-column:5!important;
grid-row:2!important;
}
.direction-create-panel-v31{
margin-top:12px;
}
}
/* ============================================================
v0.31 — borderless rounded input treatment requested
============================================================ */
.project-create-panel .project-quick-create input,
.project-create-panel .project-advanced-form input,
.project-create-panel .project-advanced-form select,
.unassigned-plan-modal-form input,
.unassigned-plan-modal-form select,
.obligations-create-panel .obligation-create-form input,
.obligations-create-panel .obligation-create-form select{
border:0!important;
border-radius:10px!important;
background:#f4f4f8!important;
box-shadow:none!important;
outline:none!important;
}
.project-create-panel .project-quick-create input:focus,
.project-create-panel .project-advanced-form input:focus,
.project-create-panel .project-advanced-form select:focus,
.unassigned-plan-modal-form input:focus,
.unassigned-plan-modal-form select:focus,
.obligations-create-panel .obligation-create-form input:focus,
.obligations-create-panel .obligation-create-form select:focus{
background:#efedff!important;
box-shadow:0 0 0 2px #8e82ee22!important;
}
html[data-theme="dark"] .project-create-panel .project-quick-create input,
html[data-theme="dark"] .project-create-panel .project-advanced-form input,
html[data-theme="dark"] .project-create-panel .project-advanced-form select,
html[data-theme="dark"] .unassigned-plan-modal-form input,
html[data-theme="dark"] .unassigned-plan-modal-form select,
html[data-theme="dark"] .obligations-create-panel .obligation-create-form input,
html[data-theme="dark"] .obligations-create-panel .obligation-create-form select{
background:#242731!important;
}
/* ============================================================
v0.31 — Week / unassigned popup
============================================================ */
.unassigned-popup-list{
display:flex!important;
flex-direction:column!important;
gap:6px!important;
}
.unassigned-plan-card{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:10px 11px;
border:1px solid #ececf2;
border-radius:9px;
background:#fff;
color:inherit;
text-align:left;
cursor:pointer;
font:inherit;
}
.unassigned-plan-card:hover{
background:#fbfff8;
border-color:#ded9fb;
}
.unassigned-card-more{
color:#8e93a3;
letter-spacing:1px;
flex:0 0 auto;
}
.unassigned-plan-modal{
width:min(470px,92vw);
}
.unassigned-delete-button{
margin-right:auto;
border:0;
background:transparent;
cursor:pointer;
}
html[data-theme="dark"] .unassigned-plan-card{
background:#1d2029;
border-color:#343846;
}
/* ============================================================
v0.31 — Notes: no button, fixed textarea geometry
============================================================ */
.notes-quick-capture{
display:block!important;
}
.notes-quick-capture textarea{
width:100%!important;
height:96px!important;
min-height:96px!important;
max-height:96px!important;
resize:none!important;
overflow-y:auto!important;
}
.notes-save-hint{
display:block;
margin-top:6px;
color:var(--muted);
font-size:9px;
}
/* ============================================================
v0.32 — global accent
============================================================ */
:root{
--accent:#75ec13;
--accent-2:#9af65b;
--accent-soft:#efffe2;
--accent-soft-2:#f6fff0;
--accent-ink:#183900;
--purple:#75ec13;
--purple2:#9af65b;
}
.btn.primary,
.sidebar nav a.active{
background:linear-gradient(90deg,#75ec13,#9af65b)!important;
color:#183900!important;
box-shadow:0 8px 24px #75ec1333!important;
}
.sidebar nav a.active span{
color:#183900!important;
}
.brandmark i{
background:linear-gradient(#75ec13,#9af65b)!important;
}
.brandmark b{
background:linear-gradient(90deg,#9af65b,#75ec13)!important;
}
.link,
.settings-gear.active,
.calendar-view-btn.active,
.widget-catalog-item b,
.integration .yg strong,
.week-number{
color:#4fa900!important;
}
input:focus,
textarea:focus,
select:focus{
border-color:#75ec13!important;
box-shadow:0 0 0 3px #75ec1320!important;
}
html[data-theme="dark"] .btn.primary{
background:linear-gradient(90deg,#75ec13,#9af65b)!important;
color:#183900!important;
}
html[data-theme="dark"] .sidebar nav a.active{
background:linear-gradient(90deg,#75ec13,#9af65b)!important;
color:#183900!important;
}
html[data-theme="dark"] .sidebar nav a.active span{
color:#183900!important;
}
/* ============================================================
v0.32 — subtitles: editable everywhere
============================================================ */
.subtitle{
display:flex;
align-items:center;
gap:6px;
margin:4px 0 0;
color:var(--muted);
font-size:.9375rem!important; /* 15px — slightly larger than before */
line-height:1.32;
max-width:min(70vw,900px);
white-space:normal!important;
overflow:visible!important;
text-overflow:clip!important;
}
.editable-subtitle-text{
min-width:0;
}
.editable-subtitle-text.is-editing{
display:inline-block;
min-width:160px;
padding:2px 5px;
margin:-2px -5px;
border-radius:6px;
background:#f1ffe7;
outline:1px solid #75ec13;
color:#24321b;
}
.subtitle-edit-button{
flex:0 0 auto;
width:22px;
height:22px;
display:grid;
place-items:center;
padding:0;
border:0;
border-radius:6px;
background:transparent;
color:#899181;
cursor:pointer;
font-size:11px;
opacity:.45;
}
.subtitle:hover .subtitle-edit-button,
.subtitle-edit-button:focus{
opacity:1;
background:#efffe2;
color:#4fa900;
}
.week-heading-title{
min-width:0;
}
@media(max-width:850px){
.subtitle{
font-size:.8125rem!important;
max-width:72vw;
}
}
/* ============================================================
v0.32 — Horizon collapse = one padded row
============================================================ */
.horizon-v30.is-collapsed{
min-height:0!important;
padding-top:13px!important;
padding-bottom:13px!important;
}
.horizon-v30.is-collapsed .horizon-v31-head{
min-height:30px;
margin:0!important;
padding:0!important;
align-items:center!important;
}
.horizon-v30.is-collapsed .horizon-title-wrap>.eyebrow,
.horizon-v30.is-collapsed .horizon-actions-v31{
display:none!important;
}
.horizon-v30.is-collapsed .horizon-title-collapse{
width:100%;
min-height:30px;
align-items:center;
}
.horizon-v30.is-collapsed .horizon-title-collapse h2{
margin:0!important;
line-height:30px;
}
.horizon-v30.is-collapsed .horizon-collapse-chevron{
margin-left:4px;
}
/* ============================================================
v0.32 — Directions add block: +30% width, compact icon/color
============================================================ */
.directions-layout-v31{
grid-template-columns:minmax(0,1fr) 286px!important;
}
.direction-create-panel-v31{
width:100%!important;
}
.direction-create-meta{
display:grid;
grid-template-columns:minmax(0,1fr) 72px;
gap:8px;
align-items:end;
}
.direction-create-meta label{
display:flex;
flex-direction:column;
gap:4px;
color:var(--muted);
font-size:9px;
}
.direction-create-meta select{
width:100%;
height:34px;
padding:6px 8px!important;
}
.direction-create-color{
justify-content:flex-start!important;
align-items:flex-start!important;
}
.direction-create-color input[type="color"]{
width:46px!important;
height:34px!important;
padding:2px!important;
border-radius:8px!important;
}
@media(max-width:850px){
.directions-layout-v31{
display:block!important;
}
}
/* ============================================================
v0.32 — Projects / Obligations use Today form styling
============================================================ */
.project-create-panel .day-form-style input,
.project-create-panel .day-form-style select,
.project-create-panel .day-form-style textarea,
.obligations-create-panel .day-form-style input,
.obligations-create-panel .day-form-style select,
.obligations-create-panel .day-form-style textarea{
border:1px solid #e2e3ea!important;
border-radius:9px!important;
padding:10px 11px!important;
font-family:inherit!important;
background:#fff!important;
color:#202437!important;
box-shadow:none!important;
outline:none!important;
}
.project-create-panel .day-form-style input:focus,
.project-create-panel .day-form-style select:focus,
.project-create-panel .day-form-style textarea:focus,
.obligations-create-panel .day-form-style input:focus,
.obligations-create-panel .day-form-style select:focus,
.obligations-create-panel .day-form-style textarea:focus{
border-color:#75ec13!important;
box-shadow:0 0 0 3px #75ec1320!important;
background:#fff!important;
}
.project-create-panel,
.obligations-create-panel{
border:1px solid var(--line)!important;
border-radius:15px!important;
background:#fff!important;
}
html[data-theme="dark"] .project-create-panel .day-form-style input,
html[data-theme="dark"] .project-create-panel .day-form-style select,
html[data-theme="dark"] .project-create-panel .day-form-style textarea,
html[data-theme="dark"] .obligations-create-panel .day-form-style input,
html[data-theme="dark"] .obligations-create-panel .day-form-style select,
html[data-theme="dark"] .obligations-create-panel .day-form-style textarea{
background:#1d2029!important;
border-color:#343846!important;
color:#e7e9f2!important;
}
/* ============================================================
v0.32 — unified add/edit popup surface = Calendar modal
============================================================ */
.direction-edit-popover,
.horizon-add-popover,
.horizon-definition-popover,
.horizon-grid-settings-form,
.horizon-cell-add-form,
.stage-add-form,
.focus-editor[open] form,
.item-edit[open] form{
background:#fff!important;
border:1px solid var(--line)!important;
border-radius:17px!important;
padding:18px!important;
box-shadow:0 25px 80px #17182b33!important;
color:#202437!important;
}
.direction-edit-popover input,
.direction-edit-popover select,
.direction-edit-popover textarea,
.horizon-add-popover input,
.horizon-add-popover select,
.horizon-add-popover textarea,
.horizon-definition-popover input,
.horizon-definition-popover select,
.horizon-definition-popover textarea,
.horizon-grid-settings-form input,
.horizon-grid-settings-form select,
.horizon-grid-settings-form textarea,
.horizon-cell-add-form input,
.horizon-cell-add-form select,
.horizon-cell-add-form textarea,
.stage-add-form input,
.stage-add-form select,
.stage-add-form textarea,
.focus-editor[open] form input,
.focus-editor[open] form select,
.item-edit[open] form input,
.item-edit[open] form select,
.item-edit[open] form textarea,
.week-plan-modal input,
.week-plan-modal select,
.week-plan-modal textarea,
.widget-modal input,
.widget-modal select,
.widget-modal textarea{
width:100%;
border:1px solid #e2e3ea!important;
border-radius:9px!important;
padding:10px 11px!important;
background:#fff!important;
color:#202437!important;
font:inherit!important;
outline:none!important;
}
.direction-edit-popover input:focus,
.direction-edit-popover select:focus,
.direction-edit-popover textarea:focus,
.horizon-add-popover input:focus,
.horizon-add-popover select:focus,
.horizon-add-popover textarea:focus,
.horizon-definition-popover input:focus,
.horizon-definition-popover select:focus,
.horizon-grid-settings-form input:focus,
.horizon-grid-settings-form select:focus,
.horizon-cell-add-form input:focus,
.horizon-cell-add-form textarea:focus,
.stage-add-form input:focus,
.stage-add-form textarea:focus,
.focus-editor[open] form input:focus,
.item-edit[open] form input:focus,
.item-edit[open] form textarea:focus,
.week-plan-modal input:focus,
.week-plan-modal select:focus,
.week-plan-modal textarea:focus,
.widget-modal input:focus,
.widget-modal select:focus,
.widget-modal textarea:focus{
border-color:#75ec13!important;
box-shadow:0 0 0 3px #75ec1320!important;
}
html[data-theme="dark"] .direction-edit-popover,
html[data-theme="dark"] .horizon-add-popover,
html[data-theme="dark"] .horizon-definition-popover,
html[data-theme="dark"] .horizon-grid-settings-form,
html[data-theme="dark"] .horizon-cell-add-form,
html[data-theme="dark"] .stage-add-form,
html[data-theme="dark"] .focus-editor[open] form,
html[data-theme="dark"] .item-edit[open] form{
background:#191c25!important;
border-color:#303443!important;
color:#e7e9f2!important;
}
/* Calendar modal remains the visual source of truth. */
.calendar-plan-modal,
.week-plan-modal,
.widget-modal{
border:1px solid var(--line)!important;
border-radius:17px!important;
padding:18px!important;
background:#fff!important;
box-shadow:0 25px 80px #17182b33!important;
}
html[data-theme="dark"] .calendar-plan-modal,
html[data-theme="dark"] .week-plan-modal,
html[data-theme="dark"] .widget-modal{
background:#191c25!important;
border-color:#303443!important;
}
/* ============================================================
v0.33 — primary action buttons
Every #75ec13-filled button/control uses black text/icons.
============================================================ */
.btn.primary,
button.btn.primary,
summary.btn.primary{
background:#75ec13!important;
color:#000!important;
border-color:#75ec13!important;
box-shadow:0 6px 16px #75ec132b!important;
}
.btn.primary *,
button.btn.primary *,
summary.btn.primary *,
.btn.primary svg,
.btn.primary i,
button.btn.primary svg,
button.btn.primary i,
summary.btn.primary svg,
summary.btn.primary i{
color:#000!important;
stroke:#000!important;
fill:none;
}
.btn.primary:hover,
button.btn.primary:hover,
summary.btn.primary:hover{
background:#75ec13!important;
color:#000!important;
filter:brightness(.96);
}
.btn.primary:active,
button.btn.primary:active,
summary.btn.primary:active{
background:#75ec13!important;
color:#000!important;
filter:brightness(.91);
}
html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] button.btn.primary,
html[data-theme="dark"] summary.btn.primary{
background:#75ec13!important;
color:#000!important;
border-color:#75ec13!important;
}
html[data-theme="dark"] .btn.primary *,
html[data-theme="dark"] button.btn.primary *,
html[data-theme="dark"] summary.btn.primary *{
color:#000!important;
stroke:#000!important;
}
/* ============================================================
v0.33 — Project cards
============================================================ */
.project-card .project-icon{
background:#fff!important;
color:#75ec13!important;
border:0!important;
box-shadow:none!important;
}
.project-card .project-icon svg{
color:#75ec13!important;
stroke:#75ec13!important;
}
.project-card .project-icon-fallback{
color:#75ec13!important;
}
.project-summary-badges .project-status-badge{
background:#fff!important;
color:#75ec13!important;
border:1px solid #75ec13!important;
font-weight:600!important;
}
html[data-theme="dark"] .project-card .project-icon{
background:#fff!important;
color:#75ec13!important;
}
html[data-theme="dark"] .project-summary-badges .project-status-badge{
background:#fff!important;
color:#75ec13!important;
border-color:#75ec13!important;
}
/* ============================================================
v0.33 — Obligations
============================================================ */
.obligation-card .waiting-badge{
background:#fff!important;
color:#75ec13!important;
border:1px solid #75ec13!important;
font-weight:600!important;
}
html[data-theme="dark"] .obligation-card .waiting-badge{
background:#fff!important;
color:#75ec13!important;
border-color:#75ec13!important;
}
/* Notes → "В задачи" intentionally uses the same .btn.primary rule. */
/* ============================================================
v0.34 — user-selectable global accent
The saved server palette is injected as CSS variables on .
============================================================ */
:root{
--accent:#75ec13;
--accent-2:#9af65b;
--accent-soft:#efffe2;
--accent-soft-2:#f6fff0;
--accent-ink:#000000;
--accent-rgb:117,236,19;
}
/* Filled primary actions */
.btn.primary,
button.btn.primary,
summary.btn.primary,
html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] button.btn.primary,
html[data-theme="dark"] summary.btn.primary{
background:var(--accent)!important;
border-color:var(--accent)!important;
color:var(--accent-ink)!important;
box-shadow:0 6px 16px rgba(var(--accent-rgb),.22)!important;
}
.btn.primary *,
button.btn.primary *,
summary.btn.primary *,
.btn.primary svg,
button.btn.primary svg,
summary.btn.primary svg,
.btn.primary i,
button.btn.primary i,
summary.btn.primary i,
html[data-theme="dark"] .btn.primary *,
html[data-theme="dark"] button.btn.primary *,
html[data-theme="dark"] summary.btn.primary *{
color:var(--accent-ink)!important;
stroke:var(--accent-ink)!important;
}
.btn.primary:hover,
button.btn.primary:hover,
summary.btn.primary:hover{
background:var(--accent)!important;
filter:brightness(.96);
}
.btn.primary:active,
button.btn.primary:active,
summary.btn.primary:active{
background:var(--accent)!important;
filter:brightness(.91);
}
/* Active navigation / brand */
.sidebar nav a.active,
html[data-theme="dark"] .sidebar nav a.active{
background:linear-gradient(90deg,var(--accent),var(--accent-2))!important;
color:var(--accent-ink)!important;
box-shadow:0 8px 24px rgba(var(--accent-rgb),.20)!important;
}
.sidebar nav a.active span,
html[data-theme="dark"] .sidebar nav a.active span{
color:var(--accent-ink)!important;
}
.brandmark i{
background:linear-gradient(var(--accent),var(--accent-2))!important;
}
.brandmark b{
background:linear-gradient(90deg,var(--accent-2),var(--accent))!important;
}
/* General accent links / controls */
.link,
.more,
.settings-gear.active,
.calendar-view-btn.active,
.widget-catalog-item b,
.integration .yg strong,
.week-number,
.mini-check,
.activity span,
.project-expand-mark,
.focus-icon,
.integration-note-icon,
.plus,
.event-type-chip{
color:var(--accent)!important;
}
.plus,
.focus-icon,
.integration-note-icon,
.project-expand-mark{
background:var(--accent-soft)!important;
}
.progress i,
.progress.big i,
.p-normal{
background:var(--accent)!important;
}
.dot{
border-color:var(--accent)!important;
}
input:focus,
textarea:focus,
select:focus,
.project-create-panel .day-form-style input:focus,
.project-create-panel .day-form-style select:focus,
.project-create-panel .day-form-style textarea:focus,
.obligations-create-panel .day-form-style input:focus,
.obligations-create-panel .day-form-style select:focus,
.obligations-create-panel .day-form-style textarea:focus{
border-color:var(--accent)!important;
box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12)!important;
}
/* Project icons and outlined project status */
.project-card .project-icon,
html[data-theme="dark"] .project-card .project-icon{
background:#fff!important;
color:var(--accent)!important;
}
.project-card .project-icon svg{
color:var(--accent)!important;
stroke:var(--accent)!important;
}
.project-card .project-icon-fallback{
color:var(--accent)!important;
}
.project-summary-badges .project-status-badge,
html[data-theme="dark"] .project-summary-badges .project-status-badge{
background:#fff!important;
color:var(--accent)!important;
border:1px solid var(--accent)!important;
}
/* Obligations */
.obligation-card .waiting-badge,
html[data-theme="dark"] .obligation-card .waiting-badge{
background:#fff!important;
color:var(--accent)!important;
border:1px solid var(--accent)!important;
}
/* Inline subtitle editor */
.editable-subtitle-text.is-editing{
background:var(--accent-soft)!important;
outline-color:var(--accent)!important;
}
.subtitle:hover .subtitle-edit-button,
.subtitle-edit-button:focus{
background:var(--accent-soft)!important;
color:var(--accent)!important;
}
/* ============================================================
v0.34 — Settings / accent picker
============================================================ */
.accent-settings-form{
margin-bottom:18px!important;
padding:14px;
border:1px solid var(--line);
border-radius:13px;
background:#fafafd;
}
.accent-setting-copy{
display:flex;
flex-direction:column;
gap:3px;
}
.accent-setting-copy b{
font-size:13px;
}
.accent-setting-copy small{
color:var(--muted);
font-size:10px;
line-height:1.4;
max-width:720px;
}
.accent-picker-row{
display:grid;
grid-template-columns:92px 145px minmax(240px,1fr);
gap:10px;
align-items:end;
}
.accent-color-control,
.accent-hex-control{
display:flex;
flex-direction:column;
gap:5px;
color:var(--muted);
font-size:9px;
}
.accent-color-control input[type="color"]{
width:92px!important;
height:42px!important;
padding:3px!important;
border:1px solid #e2e3ea!important;
border-radius:9px!important;
background:#fff!important;
cursor:pointer;
}
.accent-hex-control input{
height:42px;
text-transform:lowercase;
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace!important;
}
.accent-live-preview{
min-height:42px;
display:flex;
align-items:center;
gap:9px;
padding:6px 10px;
border:1px dashed #dfe1e8;
border-radius:10px;
background:#fff;
}
.accent-live-preview .btn{
pointer-events:none;
}
.accent-preview-badge{
padding:5px 8px;
border:1px solid var(--accent);
border-radius:999px;
color:var(--accent);
background:#fff;
font-size:9px;
}
.accent-preview-icon{
width:28px;
height:28px;
display:grid;
place-items:center;
color:var(--accent);
background:var(--accent-soft);
border-radius:8px;
}
.accent-presets{
display:flex;
align-items:center;
gap:7px;
flex-wrap:wrap;
}
.accent-preset{
width:30px;
height:30px;
border-radius:9px;
border:2px solid #fff;
outline:1px solid #dfe1e8;
background:var(--preset-color);
cursor:pointer;
transition:transform .12s ease,box-shadow .12s ease;
}
.accent-preset:hover{
transform:translateY(-1px);
}
.accent-preset.is-selected{
box-shadow:0 0 0 3px var(--accent-soft),0 0 0 4px var(--accent);
}
.accent-reset-default{
margin-left:3px;
}
html[data-theme="dark"] .accent-settings-form,
html[data-theme="dark"] .accent-live-preview{
background:#1d2029!important;
border-color:#343846!important;
}
html[data-theme="dark"] .accent-color-control input[type="color"]{
background:#242731!important;
border-color:#343846!important;
}
@media(max-width:850px){
.accent-picker-row{
grid-template-columns:92px minmax(120px,1fr);
}
.accent-live-preview{
grid-column:1/-1;
}
}
/* ============================================================
v0.35 — server account / login
============================================================ */
.server-login-card{
width:min(430px,calc(100vw - 28px));
}
.server-login-card .eyebrow{
display:inline-block;
margin-bottom:5px;
}
.server-login-card label{
display:flex;
flex-direction:column;
gap:5px;
color:var(--muted);
font-size:10px;
}
.server-login-card label input{
width:100%;
}
.login-server-note{
margin-top:12px;
padding:11px 12px;
border:1px solid var(--line);
border-radius:10px;
background:#fafafd;
color:#666d80;
font-size:11px;
line-height:1.5;
}
.login-server-note code{
display:block;
margin-top:5px;
overflow-wrap:anywhere;
color:var(--ink);
}
.server-account-summary{
margin:10px 0 14px;
padding:11px 12px;
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
border:1px solid var(--line);
border-radius:11px;
background:#fafafd;
}
.server-account-summary>div{
display:flex;
flex-direction:column;
gap:2px;
}
.server-account-summary b{
font-size:13px;
}
.server-account-summary small{
color:var(--muted);
font-size:9px;
}
html[data-theme="dark"] .login-server-note,
html[data-theme="dark"] .server-account-summary{
background:#1d2029;
border-color:#343846;
}