*{margin:0;padding:0;box-sizing:border-box}:root{--paper-color: #fffef0;--line-color: #c8d4e3;--red-line-color: #e74c3c;--sidebar-bg: rgba(44, 62, 80, .95);--sidebar-text: #ecf0f1;--line-height: 32px}body{font-family:Caveat,cursive;min-height:100vh;background:var(--paper-color)}#app{display:flex;height:100vh;width:100%;background:repeating-linear-gradient(to bottom,transparent,transparent calc(var(--line-height) - 1px),var(--line-color) calc(var(--line-height) - 1px),var(--line-color) var(--line-height));background-color:var(--paper-color);background-position-y:var(--line-height)}.sidebar{width:250px;background:var(--sidebar-bg);color:var(--sidebar-text);display:flex;flex-direction:column;position:relative;transition:width .3s ease,min-width .3s ease;min-width:250px}.sidebar.collapsed{width:0;min-width:0;overflow:hidden}.sidebar-toggle{position:relative;width:24px;min-width:24px;height:100%;border-radius:0;border:none;background:transparent;color:var(--sidebar-text);font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:background .2s ease}.sidebar-toggle:hover{background:#ffffff1a}.sidebar-toggle:hover .toggle-icon{color:#34495e}.toggle-icon{display:inline-block;color:#afb2b5;transition:transform .3s ease,color .2s ease}.sidebar.collapsed+.sidebar-toggle .toggle-icon{transform:rotate(180deg)}.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid rgba(255,255,255,.1);height:calc(var(--line-height) * 2)}.sidebar-header h2{font-size:1.5rem;font-weight:500}#new-page-btn{border:none;background:transparent;color:var(--sidebar-text);font-size:1.8rem;cursor:pointer;padding:0;line-height:1;opacity:.7;transition:opacity .2s,transform .2s}#new-page-btn:hover{opacity:1;transform:scale(1.1)}#page-list{list-style:none;flex:1;overflow-y:auto;padding:0}#page-list li{height:var(--line-height);padding:0 20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .2s;border-left:3px solid transparent}#page-list li:hover{background:#ffffff0d}#page-list li.active{background:#ffffff1a;border-left-color:var(--red-line-color)}#page-list li .page-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.1rem;line-height:var(--line-height)}#page-list li .delete-btn{opacity:0;background:none;border:none;color:#e74c3c;font-size:1.2rem;cursor:pointer;padding:0 5px;transition:opacity .2s}#page-list li:hover .delete-btn{opacity:1}#page-list li.dragging{opacity:.5;background:#ffffff1a}#page-list li.drag-over{border-top:2px solid var(--red-line-color)}.notebook{flex:1;display:flex;position:relative;overflow:hidden}.left-margin{width:60px;min-width:60px;height:100%;cursor:pointer;z-index:2}.red-line{width:2px;background:var(--red-line-color);height:100%;z-index:1}.page-content{flex:1;display:flex;flex-direction:column;padding:0 40px 20px 20px;position:relative}#page-title{font-family:Caveat,cursive;font-size:2rem;font-weight:600;border:none;background:transparent;color:#2c3e50;height:calc(var(--line-height) * 2);line-height:calc(var(--line-height) * 2);padding:0;margin:0;outline:none}#page-title::placeholder{color:#95a5a6}#page-editor{font-family:Caveat,cursive;flex:1;border:none;background:transparent;color:#34495e;font-size:1.4rem;line-height:var(--line-height);outline:none;padding:0;margin:0;overflow-y:auto;white-space:pre-wrap;word-wrap:break-word}#page-editor:empty:before{content:attr(data-placeholder);color:#95a5a6;pointer-events:none}#page-editor .todo-line{display:block}#page-editor .todo-done{text-decoration:line-through;color:#95a5a6}#page-editor .highlighted{background:linear-gradient(to bottom,transparent 0%,transparent 20%,#fff176 20%,#fff176 85%,transparent 85%,transparent 100%)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#95a5a6;text-align:center;padding:40px;flex:1}.empty-state h3{font-size:2rem;margin-bottom:10px}.empty-state p{font-size:1.3rem}#page-list::-webkit-scrollbar{width:6px}#page-list::-webkit-scrollbar-track{background:transparent}#page-list::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}#page-list::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media(max-width:768px){.sidebar{width:200px;min-width:200px}.sidebar.collapsed{width:0;min-width:0}.left-margin{width:40px;min-width:40px}.page-content{padding-left:15px;padding-right:15px}.sidebar-toggle{width:20px;min-width:20px}}