.notepad-wrap{max-width:1200px;margin:0 auto;padding:1.25rem 1rem 2rem;box-sizing:border-box}.notepad{display:flex;gap:0;height:calc(100vh - 8rem);min-height:480px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--bg)}.np-side{width:240px;flex-shrink:0;display:flex;flex-direction:column;background:var(--code-bg);border-right:1px solid var(--border)}.new-btn{margin:.7rem;padding:.5rem .85rem;background:var(--fg);color:var(--bg);border:none;border-radius:5px;font-family:var(--font-sans);font-size:.85rem;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.3rem;transition:opacity .12s,transform .05s}.new-btn:hover{opacity:.85}.new-btn:active{transform:translateY(1px)}.new-btn .plus{font-size:1em;line-height:1}.side-list{flex:1;overflow-y:auto;padding:0 .4rem .7rem;display:flex;flex-direction:column;gap:.15rem;scrollbar-width:thin}.side-list::-webkit-scrollbar{width:6px}.side-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.tab{position:relative;padding:.4rem .4rem .4rem .7rem;border-radius:5px;background:transparent;cursor:pointer;user-select:none;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.25rem;border:1px solid transparent;transition:background .1s,border-color .1s;overflow:hidden;height:1.9rem}.tab:hover{background:var(--bg)}.tab.active{background:var(--bg);border-color:var(--border)}.tab.active:before{content:"";position:absolute;left:-.4rem;top:6px;bottom:6px;width:3px;background:var(--fg);border-radius:0 2px 2px 0}.tab-label{min-width:0;width:100%;font-family:var(--font-sans);font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;line-height:1.35;display:block}.tab.active .tab-label{color:var(--fg);font-weight:600}.tab-close{width:20px;height:20px;flex-shrink:0;border:none;background:transparent;color:var(--muted);border-radius:3px;cursor:pointer;line-height:1;font-size:1rem;display:flex;align-items:center;justify-content:center;padding:0;opacity:0;transition:opacity .12s,background .12s,color .12s}.tab:hover .tab-close,.tab.active .tab-close{opacity:1}.tab-close:hover{background:#c0404026;color:#c04040}.np-main{flex:1;min-width:0;display:flex;flex-direction:column;background:#fff;position:relative}.np-area{flex:1;width:100%;max-width:760px;margin:0 auto;border:none;outline:none;padding:1.6rem 1.8rem;background:#fff;color:#1a1a1a;font-family:var(--font-sans);font-size:1rem;line-height:1.85;box-sizing:border-box;word-break:keep-all;overflow-wrap:break-word;overflow-y:auto;white-space:pre-wrap}.np-area:empty:before{content:attr(data-placeholder);color:#9a9a9a;pointer-events:none}.np-area img{max-width:100%;height:auto;display:block;margin:.6rem 0;border-radius:4px}.np-area img.np-uploading{opacity:.5;filter:grayscale(.4)}.np-foot{padding:.45rem 1.6rem;border-top:1px solid #e5e5e5;background:#f6f6f6;font-family:var(--font-sans);font-size:.78rem;color:#6a6a6a;display:flex;align-items:center;gap:.5rem}.np-foot .dot{opacity:.5}.np-foot .error{color:#c04040}.np-foot .np-spacer{flex:1}.np-sync{font-size:.74rem;padding:.18rem .5rem;border-radius:4px;background:#ececec;color:#555;white-space:nowrap}.np-sync.ok{background:#e3f2e3;color:#2a6e2a}.np-sync.warn{background:#fff3d6;color:#8a6500}.np-sync.err{background:#fbe0e0;color:#a02020}.np-sync.busy{background:#e6eef9;color:#2a4d8a}.np-btn{font-size:.74rem;padding:.22rem .6rem;border:1px solid #d0d0d0;background:#fff;color:#333;border-radius:4px;cursor:pointer;font-family:var(--font-sans)}.np-btn:hover{background:#f5f5f5}.np-btn:active{transform:translateY(1px)}@media(max-width:640px){.np-sync{display:none}}.np-modal{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:1000}.np-modal[hidden]{display:none}.np-modal-card{background:#fff;border-radius:8px;padding:1.4rem 1.6rem 1.2rem;min-width:320px;box-shadow:0 12px 40px #00000040;font-family:var(--font-sans)}.np-modal-title{font-size:.92rem;font-weight:600;color:#1a1a1a;margin-bottom:.85rem}.np-modal-input{width:100%;padding:.55rem .7rem;border:1px solid #ccc;border-radius:5px;font-size:.95rem;font-family:var(--font-sans);box-sizing:border-box;outline:none}.np-modal-input:focus{border-color:#5b8def;box-shadow:0 0 0 2px #5b8def33}.np-modal-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.9rem}.np-modal-btn{padding:.42rem .95rem;border-radius:5px;border:1px solid #d0d0d0;background:#fff;cursor:pointer;font-family:var(--font-sans);font-size:.85rem;color:#333}.np-modal-btn:hover{background:#f5f5f5}.np-modal-btn.primary{background:#1a1a1a;color:#fff;border-color:#1a1a1a}.np-modal-btn.primary:hover{background:#333}@media(max-width:640px){.notepad-wrap{padding:.5rem .4rem 1rem}.notepad{height:calc(100vh - 5rem)}.np-side{width:150px}.np-area{padding:1rem;font-size:.95rem}.np-foot{padding:.4rem 1rem}}