@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');
#mood-journal{background:#f3faf8;padding-bottom:60px}
.journal-actions{display:flex;align-items:center;gap:14px}.journal-actions span{font-size:10px;color:#91a4a8}.journal-actions button{border:0;border-radius:11px;background:#f2cf65;color:#405c66;font-weight:700;padding:10px 16px;cursor:pointer}
.journal-intro{display:flex;justify-content:space-between;align-items:end;padding:31px 0 24px}.journal-intro h1{font-family:'ZCOOL KuaiLe','Noto Sans SC',sans-serif;font-size:30px;font-weight:400;margin:7px 0 9px;color:#385966}.journal-intro>div>p:last-child{font-size:12px;color:#8199a3;margin:0}.paper-tip{font-size:10px;color:#6f949d;background:#e1f3f1;border:1px solid #cfe7e4;border-radius:20px;padding:8px 12px}
.journal-paper{background:#fffefa;border:1px solid #d9e6e3;border-radius:22px;box-shadow:0 14px 34px rgba(62,114,123,.1);overflow:hidden;max-width:1060px}.journal-datebar{height:88px;border-bottom:2px solid #e8e4d8;display:grid;grid-template-columns:170px 1fr 170px;align-items:center;padding:0 28px;background:#fffdf7}.date-block{display:flex;align-items:center;gap:12px;font-family:'ZCOOL KuaiLe','Noto Sans SC',sans-serif}.date-block>strong{font-size:42px;color:#edaf51;font-weight:400;line-height:1}.date-block span{display:grid}.date-block b{font-size:17px;color:#4a6771;font-weight:400}.date-block small{font:500 10px 'DM Sans';color:#a4aa9e;margin-top:2px}.week-strip{display:flex;justify-content:center;gap:24px;color:#bdc3b9;font-family:'ZCOOL KuaiLe','Noto Sans SC',sans-serif}.week-strip span:first-child{width:29px;height:29px;border:2px solid #edb958;border-radius:50%;display:grid;place-items:center;color:#5b7179}.weather-field{display:flex;justify-content:end;align-items:center;gap:8px;color:#8d9995;font-size:10px}.weather-field select{border:1px solid #e2e5dc;border-radius:9px;background:#fff;padding:7px 9px;color:#57727b;outline:none}
.journal-body{display:grid;grid-template-columns:1.35fr .85fr;min-height:580px}.draw-side{padding:20px;border-right:2px solid #ece8dd;display:flex;flex-direction:column}.draw-toolbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:14px}.tool{min-height:38px;border:1px solid #dbe7e4;background:#fff;border-radius:8px;color:#69818a;font-size:10px;padding:7px 11px;cursor:pointer}.tool.active{background:#dff2f0;border-color:#b9dfdc;color:#3f898d}.tool-divider{height:23px;width:1px;background:#e1e6df;margin:0 2px}.color-dot{width:34px;height:34px;border:5px solid #fff;border-radius:50%;background:var(--dot);box-shadow:0 0 0 1px #dce5df;cursor:pointer}.color-dot.active{box-shadow:0 0 0 2px #f0be62}.brush-size{display:flex;align-items:center;gap:5px;font-size:9px;color:#829398}.brush-size input{width:82px;min-height:34px;accent-color:#66adb3}.canvas-wrap{position:relative;flex:1;min-height:360px;border:1px dashed #d9d6c8;border-radius:13px;overflow:hidden;background-color:#fffefa;background-image:linear-gradient(#edf0ea 1px,transparent 1px),linear-gradient(90deg,#edf0ea 1px,transparent 1px);background-size:24px 24px;touch-action:none;-webkit-user-select:none;user-select:none}.canvas-wrap canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.canvas-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'ZCOOL KuaiLe','Noto Sans SC',sans-serif;color:#c4c7bb;font-size:14px;pointer-events:none;transition:opacity .2s}.canvas-wrap.has-drawing .canvas-hint{opacity:0}
.write-side{padding:27px 25px;background:#fffdf8;display:flex;flex-direction:column}.mood-picker>span,.journal-title-field>span,.journal-text-field>span{display:block;font-family:'ZCOOL KuaiLe','Noto Sans SC',sans-serif;font-size:13px;color:#617980;margin-bottom:9px}.mood-picker>div{display:flex;gap:6px;flex-wrap:wrap}.mood-picker button{border:1px solid #e1e5dc;background:#fff;border-radius:15px;color:#879793;font-size:10px;padding:6px 10px;cursor:pointer}.mood-picker button.active{background:#fff0b9;border-color:#edcf70;color:#986f33}.journal-title-field{margin-top:24px}.journal-title-field input{width:100%;border:0;border-bottom:1px dashed #d8d6c9;background:transparent;outline:none;padding:4px 0 11px;font:400 20px 'ZCOOL KuaiLe','Noto Sans SC',sans-serif;color:#435f69}.journal-text-field{margin-top:23px;display:flex;flex:1;flex-direction:column}.journal-text-field textarea{flex:1;min-height:225px;resize:none;border:0;outline:none;background:repeating-linear-gradient(transparent,transparent 31px,#e9e6da 32px);font:400 16px/32px 'ZCOOL KuaiLe','Noto Sans SC',sans-serif;color:#526c75;padding:0}.tiny-note{margin-top:18px;padding:13px 14px;border-radius:10px;background:#f8e3df;color:#9a746d;font:400 12px/1.6 'ZCOOL KuaiLe','Noto Sans SC',sans-serif;transform:rotate(-1deg)}
@media(max-width:980px){.journal-body{grid-template-columns:1fr}.draw-side{border-right:0;border-bottom:2px solid #ece8dd;min-height:480px}.write-side{min-height:480px}.journal-datebar{grid-template-columns:140px 1fr 135px}.week-strip{gap:14px}}@media(max-width:700px){.journal-intro{align-items:start;gap:13px;flex-direction:column}.journal-datebar{height:auto;min-height:110px;grid-template-columns:1fr 1fr;gap:12px;padding:16px}.week-strip{grid-column:1/-1;grid-row:2}.weather-field{justify-content:end}.draw-side{padding:13px;min-height:410px}.write-side{padding:22px 18px}.journal-actions span{display:none}}