.toolbar{display:flex;gap:10px;padding:6px 10px;align-items:center;flex-wrap:wrap}.toolbar input{padding:6px 10px;font-size:14px;border:1px solid #ccc;border-radius:5px;width:160px;box-sizing:border-box;transition:border 0.2s}.toolbar input:first-child{width:300px}.toolbar input:focus{border-color:#3f51b5;outline:none}.notepad .main{display:flex;gap:16px}.status-bar{font-size:13px;color:#666;padding:6px 10px}.notepad button{padding:6px 12px;border:none;border-radius:6px;cursor:pointer;background:#3f51b5;color:#fff;font-size:14px;transition:background-color 0.3s,transform 0.3s}.notepad button:hover{background-color:#90caf9;transform:translateY(-2px)}.notepad button:active{transform:translateY(1px)}#versionModal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);align-items:center;justify-content:center;z-index:1000}#versionModal .modal-content{background:#fff;padding:20px;border-radius:8px;max-width:500px;width:90%;max-height:80%;overflow:auto}#versionModal .modal-header{font-weight:bold;margin-bottom:10px;font-size:16px}#versionModal .version-item{padding:8px;border-bottom:1px solid #eee;cursor:pointer;font-size:14px;transition:background-color 0.3s}#versionModal .version-item:hover{background:#f5f5f5}#versionModal .close-btn{position:absolute;top:10px;right:15px;cursor:pointer;font-size:18px}@media (max-width:768px){.toolbar{flex-direction:column;align-items:flex-start}.toolbar input{width:100%;margin-bottom:8px}.notepad .editor{font-size:14px;padding:10px}.main{flex-direction:column}button{width:100%;margin-top:8px}.status-bar{font-size:12px;padding:6px}}@media (max-width:480px){.toolbar{padding:8px}.toolbar input{font-size:12px}.notepad .editor{font-size:14px}.main{gap:8px}.status-bar{font-size:11px}button{font-size:12px;padding:6px 10px}#versionModal .modal-content{width:95%}#versionModal .version-item{font-size:13px}}.toolbar{display:flex;gap:15px;padding:10px;align-items:center;flex-wrap:wrap;background:linear-gradient(135deg,#f8fafc 0,#e2e8f0 100%);border-radius:12px;margin-bottom:20px;border:1px solid rgba(226,232,240,0.8)}.toolbar input{padding:12px 16px;font-size:13px;border:2px solid transparent;border-radius:10px;width:180px;box-sizing:border-box;transition:all 0.3s ease;background:#fff;color:#334155;font-weight:500}.toolbar input:first-child{width:320px}.toolbar input:focus{border-color:#667eea;outline:none;box-shadow:0 0 0 3px rgba(102,126,234,0.1);transform:translateY(-1px)}.toolbar input::placeholder{color:#94a3b8}.notepad .editor{width:100%;min-height:300px;padding:20px;font-size:13px;border-radius:0 0 5px 5px;border:2px solid #d2d8e0;background:linear-gradient(90deg,#fff 0,#fbfbfb 100%);box-sizing:border-box;font-family:'SF Mono',Monaco,'Cascadia Code','Roboto Mono',Consolas,'Courier New',monospace;line-height:1.2;color:#334155;transition:all 0.3s ease;resize:vertical}.editor:focus{border-color:#667eea;outline:none;box-shadow:0 0 0 3px rgba(102,126,234,0.1);background:#fff}.editor::placeholder{color:#94a3b8;font-style:italic}.toolbar input:focus,.editor:focus{box-shadow:0 0 0 3px rgba(102,126,234,0.1),0 0 20px rgba(102,126,234,0.1)}.editor::-webkit-scrollbar{width:8px}.editor::-webkit-scrollbar-track{background:#f1f5f9;border-radius:4px}.editor::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);border-radius:4px}.editor::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#5a67d8 0,#6b46c1 100%)}body.dark .toolbar{background:linear-gradient(135deg,#1e293b 0,#0f172a 100%);border:1px solid rgba(51,65,85,0.8)}body.dark .toolbar input{background:#334155;color:#e2e8f0}body.dark .toolbar input:focus{border-color:#818cf8;box-shadow:0 0 0 3px rgba(129,140,248,0.2)}body.dark .toolbar input::placeholder{color:#64748b}body.dark .editor{background:linear-gradient(135deg,#1e293b 0,#0f172a 100%);border:2px solid #334155;color:#e2e8f0}body.dark .editor:focus{border-color:#818cf8;background:#1e293b;box-shadow:0 0 0 3px rgba(129,140,248,0.2)}body.dark .editor::placeholder{color:#64748b}body.dark .editor::-webkit-scrollbar-track{background:#334155}body.dark .status-bar{color:#94a3b8}body.dark .notepad button{background:#6366f1;color:#e2e8f0}body.dark .notepad button:hover{background-color:#818cf8}body.dark #versionModal{background:rgba(15,23,42,0.8)}body.dark #versionModal .modal-content{background:#1e293b;color:#e2e8f0}body.dark #versionModal .version-item{border-bottom:1px solid #334155}body.dark #versionModal .version-item:hover{background:#334155}body.dark #versionModal .close-btn{color:#e2e8f0}