:root{font-family:Trebuchet MS,PingFang SC,sans-serif;color:#23212d;background:#f7f6fb;--violet:#6c5ce7;--line:#dedbe8}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}header{height:70px;display:flex;align-items:center;padding:0 max(22px,calc((100vw - 1240px)/2));border-bottom:1px solid var(--line);background:#fff}.logo{display:flex;align-items:center;gap:10px;font-size:21px}.logo i{width:24px;height:24px;border-radius:50%;background:conic-gradient(var(--violet) 0 30%,#00a896 30% 55%,#f4a261 55% 80%,#e1deea 80%)}header p{margin-left:25px;color:#8a8794;font-size:12px}header label{margin-left:auto;font-size:12px}.top{padding:58px 0 40px;display:grid;grid-template-columns:1.2fr .8fr;align-items:end}.top small{color:var(--violet);font-size:11px;letter-spacing:.16em}.top h1{font-size:clamp(40px,5vw,65px);line-height:1.02;letter-spacing:-.045em;margin:14px 0}.top em{font-style:normal;color:var(--violet)}.top>p{color:#777382;line-height:1.7;max-width:440px}main{width:min(1240px,calc(100% - 30px));margin:auto}.layout{display:grid;grid-template-columns:350px minmax(0,1fr);background:#fff;border:1px solid var(--line);min-height:700px;box-shadow:0 20px 60px #2e245012}aside{border-right:1px solid var(--line);padding:22px}.aside-head{display:flex;justify-content:space-between;margin-bottom:16px}.aside-head span{font-size:11px;color:#898592}.task{--c:#6c5ce7;border:1px solid var(--line);padding:14px;margin-bottom:10px;border-radius:14px;background:#fcfbfe}.cad-title{display:flex;align-items:center;gap:8px}.cad-title i{width:9px;height:9px;border-radius:50%;background:var(--c)}.cad-title input{border:0;background:transparent;font-weight:700;min-width:0;flex:1;outline:0}.cad-title button{border:0;background:transparent;color:#aaa;cursor:pointer}.numbers{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.numbers label{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px;color:#8b8794;font-size:11px;background:#f0eef5;padding:7px;border-radius:8px}.numbers input{width:100%;min-width:0;border:0;background:transparent;text-align:center;font-weight:700;outline:0}.blocked small{font-size:10px;color:#8b8794}.blocked>div{display:flex;gap:4px;margin-top:7px}.blocked button{border:0;border-radius:50%;width:27px;height:27px;background:#eeecf3;color:#77727f;font-size:10px;cursor:pointer}.blocked button.on{background:#282531;color:#fff}.add,.generate{width:100%;padding:13px;border-radius:11px;cursor:pointer}.add{border:1px dashed #aca7ba;background:#fff;color:#6b6676}.generate{margin-top:12px;border:0;background:var(--violet);color:#fff;font-weight:700;display:flex;justify-content:space-between}.notice{font-size:11px;color:#807b89;line-height:1.5}.calendar{padding:25px;min-width:0}.month-head{display:flex;justify-content:center;align-items:center;gap:25px}.month-head button{border:1px solid var(--line);background:#fff;border-radius:50%;width:35px;height:35px;cursor:pointer}.month-head div{text-align:center}.month-head small{color:#9994a2}.month-head h2{margin:0;font-size:30px}.chart{height:160px;margin:35px 0 20px;display:flex;gap:3px;align-items:end;border-bottom:1px solid var(--line);position:relative}.threshold{position:absolute;top:0;right:0;font-size:9px;color:#e76f51;border-top:1px dashed #e76f51;width:100%;text-align:right}.bar-col{height:100%;flex:1;display:flex;flex-direction:column;justify-content:end;align-items:center}.bar-col .bar{width:70%;min-height:0;background:#e5e2ec;display:flex;flex-direction:column-reverse;border-radius:3px 3px 0 0;overflow:hidden}.bar-col .bar i{display:block}.bar-col small{font-size:8px;color:#aaa;height:15px}.bar-col.over .bar{outline:2px solid #e76f51}.week-head,.month-grid{display:grid;grid-template-columns:repeat(7,1fr)}.week-head b{text-align:center;padding:10px;font-size:10px;color:#898592}.month-grid{border-top:1px solid var(--line);border-left:1px solid var(--line)}.day,.month-grid>i{min-height:105px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px;min-width:0}.day>b{font-size:12px}.day>span{float:right;font-size:9px;color:#817c89}.day p{font-size:9px;margin:5px 0;padding:3px 4px;border-left:3px solid;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#f4f2f8}.day.over{background:#fff0ed}.day.over>b{color:#d74f37}@media(max-width:850px){.top,.layout{grid-template-columns:1fr}aside{border-right:0;border-bottom:1px solid var(--line)}.calendar{padding:12px}.day,.month-grid>i{min-height:72px;padding:4px}.chart{height:120px}.top{padding-top:35px}}