:root{--bg:#eef1f4;--panel:#f8f9fb;--paper:#fffefa;--text:#202124;--muted:#707782;--line:#dfe3e8;--blue:#3978f6;--blue-soft:#e8f0ff;--shadow:0 8px 28px rgba(32,42,58,.11);--font:"Microsoft YaHei","PingFang SC",system-ui,sans-serif}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{font-family:var(--font);color:var(--text);background:var(--bg)}button,input{font:inherit;color:inherit}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.app-shell{height:100dvh;display:grid;grid-template-columns:240px 190px minmax(460px,1fr) 240px;background:linear-gradient(135deg,#f4f6f8 0%,#e9edf1 100%)}.library,.pages-panel,.inspector{position:relative;z-index:4;min-width:0;background:rgba(249,250,252,.94);backdrop-filter:blur(18px);border-color:var(--line)}.library{display:flex;flex-direction:column;padding:18px 14px;border-right:1px solid var(--line)}.brand-row,.pages-title,.inspector-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-size:21px}.brand-mark{width:32px;height:32px;display:grid;place-items:center;color:var(--blue);border:2px solid var(--blue);border-radius:8px}.brand-mark svg{width:22px}.icon-button,.tool,.action,.zoom-bar button{border:0;background:transparent;display:inline-grid;place-items:center;cursor:pointer;border-radius:10px;transition:.16s ease}.icon-button{width:38px;height:38px;color:#59606a}.icon-button:hover,.tool:hover,.zoom-bar button:hover{background:#e9edf2;color:#202124}.primary{border:0;cursor:pointer;background:linear-gradient(135deg,#3275f5,#2e68e8);color:#fff;box-shadow:0 8px 18px rgba(57,120,246,.23)}.new-note{width:100%;height:48px;border-radius:11px;margin:20px 0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px}.new-note:hover{filter:brightness(1.04);transform:translateY(-1px)}.section-label{display:flex;justify-content:space-between;padding:9px 7px;color:#454a51;font-size:13px;font-weight:700}.section-label span:last-child{color:#9298a1;font-weight:500}.note-list{display:flex;flex-direction:column;gap:7px;overflow:auto}.note-item{position:relative;display:grid;grid-template-columns:34px 1fr;gap:9px;align-items:center;width:100%;min-height:58px;padding:8px;border:0;border-radius:11px;background:transparent;text-align:left;cursor:pointer}.note-item:hover{background:#edf0f4}.note-item.active{background:var(--blue-soft)}.note-icon{width:31px;height:38px;border-radius:6px;display:grid;place-items:center;color:#fff;background:var(--note-color,#4f7cf3);box-shadow:inset -5px 0 rgba(255,255,255,.12)}.note-icon svg{width:16px}.note-copy{min-width:0}.note-copy b,.note-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note-copy b{font-size:14px}.note-copy small{font-size:12px;color:#7d8490;margin-top:4px}.library-footer{margin-top:auto;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:11px}.pages-panel{display:flex;flex-direction:column;border-right:1px solid var(--line);box-shadow:6px 0 18px rgba(40,48,58,.04);padding:18px 12px}.pages-title input{width:125px;border:0;background:transparent;font-weight:800;font-size:15px;padding:7px 5px;border-radius:6px}.pages-title input:focus{outline:2px solid #a8c3ff;background:#fff}.page-list{flex:1;overflow:auto;padding:10px 2px}.page-card{position:relative;width:100%;aspect-ratio:3/4;margin-bottom:15px;padding:0;border:2px solid transparent;border-radius:9px;background:#fff;box-shadow:0 3px 10px rgba(32,42,58,.1);overflow:hidden;cursor:pointer}.page-card.active{border-color:var(--blue)}.page-card canvas{width:100%;height:100%;display:block;background:#fffefa}.page-number{position:absolute;left:0;bottom:0;min-width:22px;height:23px;padding:0 5px;background:rgba(255,255,255,.94);display:grid;place-items:center;font-size:11px;border-radius:0 7px 0 0}.page-delete{position:absolute;right:5px;top:5px;width:27px;height:27px;border:0;border-radius:7px;background:rgba(255,255,255,.9);opacity:0;cursor:pointer;color:#d43f4d}.page-card:hover .page-delete{opacity:1}.add-page{height:40px;border:1px solid #d7dce2;border-radius:9px;background:#fff;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}.add-page svg{width:18px}.workspace{position:relative;min-width:0;overflow:hidden;display:flex;flex-direction:column}.topbar{position:relative;z-index:3;height:66px;flex:none;display:flex;align-items:center;justify-content:center;padding:8px 14px;border-bottom:1px solid rgba(209,215,222,.76);background:rgba(246,248,250,.84);backdrop-filter:blur(16px)}.toolbar{display:flex;align-items:center;gap:4px;padding:5px;border:1px solid #d9dee4;border-radius:13px;background:rgba(255,255,255,.94);box-shadow:0 5px 17px rgba(35,42,53,.12)}.tool{width:42px;height:42px}.tool.active{background:var(--blue);color:#fff;box-shadow:0 4px 10px rgba(57,120,246,.25)}.toolbar-divider{width:1px;height:28px;background:#dfe3e8;margin:0 3px}.file-actions{position:absolute;right:12px;display:flex;align-items:center;gap:7px}.action{grid-auto-flow:column;gap:6px;height:39px;padding:0 11px;background:#fff;border:1px solid #dce1e6;box-shadow:0 2px 7px rgba(35,42,53,.06)}.action:hover{border-color:#a9b4c3;background:#fcfcfd}.action svg{width:18px}.save-status{font-size:12px;color:#6d7480;white-space:nowrap}.save-status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--blue);margin-right:6px}.save-status.saving i{animation:pulse .8s infinite}@keyframes pulse{50%{opacity:.28}}.mobile-nav{position:absolute;left:12px;display:none}.canvas-stage{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:22px 34px 90px;touch-action:pan-x pan-y}.paper{position:relative;flex:none;width:900px;height:1200px;transform-origin:top center;background-color:var(--paper);box-shadow:0 8px 26px rgba(36,44,56,.15);border:1px solid #dadde1;border-radius:5px;overflow:hidden}.paper[data-paper=ruled]{background-image:linear-gradient(90deg,transparent 79px,rgba(235,116,116,.38) 80px,transparent 81px),repeating-linear-gradient(0deg,transparent 0,transparent 35px,rgba(124,147,177,.22) 36px)}.paper[data-paper=grid]{background-image:linear-gradient(rgba(124,147,177,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(124,147,177,.17) 1px,transparent 1px);background-size:36px 36px}.paper canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.text-layer{position:absolute;inset:0;pointer-events:none}.note-text{position:absolute;min-width:80px;max-width:600px;min-height:32px;padding:3px 5px;border:1px dashed transparent;color:var(--ink,#202124);font-size:25px;line-height:1.45;white-space:pre-wrap;word-break:break-word;pointer-events:auto;cursor:text}.note-text:focus{outline:0;border-color:#8fb2ff;background:rgba(255,255,255,.45)}.zoom-bar{position:absolute;z-index:3;left:50%;bottom:16px;transform:translateX(-50%);height:45px;padding:4px 6px;display:flex;align-items:center;gap:3px;border:1px solid #dce1e6;border-radius:12px;background:rgba(255,255,255,.94);box-shadow:0 5px 18px rgba(35,42,53,.12)}.zoom-bar button{height:35px;min-width:35px;border:0}.zoom-bar span{width:1px;height:24px;background:#e1e4e8}.zoom-bar output{min-width:48px;text-align:center;font-size:13px}.inspector{padding:18px 15px;border-left:1px solid var(--line);overflow:auto}.inspector-head{margin-bottom:28px}.inspector-head strong{font-size:15px}.control-label{display:block;font-size:13px;font-weight:700;color:#59606a;margin:22px 0 12px}.color-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.color-button{width:30px;height:30px;border-radius:50%;border:3px solid transparent;background:var(--swatch);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}.color-button.active{outline:2px solid var(--blue);outline-offset:2px}.width-row{display:grid;grid-template-columns:1fr 45px;gap:8px;align-items:center}.width-row input{accent-color:var(--blue);width:100%}.width-row output{font-size:12px;color:#656d78;text-align:right}.setting-block{border-top:1px solid #e0e4e8;margin-top:25px;padding-top:19px}.setting-block>span{display:block;font-size:13px;font-weight:700;color:#59606a;margin-bottom:10px}.segment{display:grid;grid-template-columns:repeat(3,1fr);padding:3px;background:#e9edf2;border-radius:9px}.segment button{height:34px;border:0;border-radius:7px;background:transparent;font-size:12px;cursor:pointer}.segment button.active{background:#fff;color:var(--blue);box-shadow:0 1px 5px rgba(30,38,50,.11)}.privacy-note{margin-top:28px;padding:12px;border-radius:9px;background:#eef3fb;color:#637086;font-size:12px;line-height:1.55}.scrim{display:none}.toast{position:fixed;z-index:20;left:50%;bottom:78px;transform:translate(-50%,15px);padding:10px 17px;background:#202124;color:#fff;border-radius:9px;font-size:13px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1250px){.app-shell{grid-template-columns:210px 170px minmax(440px,1fr)}.inspector{position:fixed;right:0;top:0;bottom:0;width:255px;transform:translateX(105%);transition:.22s ease;box-shadow:-10px 0 30px rgba(30,38,48,.14)}.inspector.open{transform:none}.file-actions .save-status{display:none}.canvas-stage{padding-left:24px;padding-right:24px}}
@media(max-width:920px){.app-shell{display:block}.library,.pages-panel{position:fixed;left:0;top:0;bottom:0;width:min(82vw,280px);transform:translateX(-105%);transition:.22s ease;box-shadow:12px 0 35px rgba(30,38,48,.18)}.pages-panel{width:min(65vw,220px)}.library.open,.pages-panel.open{transform:none}.scrim.show{display:block;position:fixed;z-index:3;inset:0;background:rgba(27,33,41,.28)}.workspace{height:100dvh}.mobile-nav{display:flex}.topbar{justify-content:flex-start;padding-left:110px}.file-actions .action span{display:none}.file-actions .action{width:39px;padding:0}.toolbar{gap:1px}.tool{width:38px;height:38px}.tool svg{width:20px}.file-actions{right:8px}.file-actions .icon-button{display:none}.canvas-stage{padding:16px 20px 88px}.panel-close{display:grid}}
@media(min-width:921px){.panel-close{display:none}}
@media(max-width:640px){.topbar{height:112px;align-items:flex-end;padding:58px 8px 8px}.mobile-nav{left:8px;top:9px}.file-actions{top:8px}.toolbar{width:100%;justify-content:center}.tool{flex:1;max-width:48px}.canvas-stage{padding:12px 8px 82px}.paper{border-radius:3px}.zoom-bar{bottom:10px}.zoom-bar button:first-child,.zoom-bar span{display:none}.inspector{width:min(86vw,285px)}.note-text{font-size:22px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}