*{box-sizing:border-box;font-family:system-ui,Segoe UI, Roboto, "Noto Sans";}
body{margin:0;background:#f6f6f8;color:#111}
header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.06)}
header h1{margin:0;font-size:18px}
.controls{display:flex;gap:8px;align-items:center}
.controls .tool{padding:6px 10px;border-radius:6px;border:1px solid #ddd;background:#fff;cursor:pointer}
.controls .tool.active{background:#0b63ff;color:#fff}
main{display:flex;height:calc(100vh - 64px)}
aside{width:240px;background:#fff;padding:12px;border-right:1px solid #eee}
.canvas-area{flex:1;display:flex;flex-direction:column}
#canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:16px}
#draw-canvas{background:#fff;border:1px solid #ddd;box-shadow:0 2px 8px rgba(0,0,0,0.04);width:100%;height:100%;max-width:1100px;max-height:800px}
#page-controls{padding:8px 16px;background:#fafafa;border-bottom:1px solid #eee;display:flex;align-items:center;gap:12px}
#notebook-list{list-style:none;padding:0;margin:8px 0;max-height:60vh;overflow:auto}
#notebook-list li{padding:8px;border-radius:6px;border:1px dashed transparent;cursor:pointer}
#notebook-list li.active{border-color:#0b63ff;background:rgba(11,99,255,0.06)}
button{cursor:pointer}
@media (max-width:800px){aside{display:none}}

/* left menu */
.left-menu ul{list-style:none;padding:0;margin:0}
.left-menu li{padding:8px;border-radius:6px;cursor:pointer}
.left-menu li.active{background:#0b63ff;color:#fff}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center}
.modal-inner{background:#fff;padding:16px;border-radius:8px;min-width:300px}
.modal-inner input{display:block;width:100%;margin:8px 0;padding:8px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.templates{display:flex;gap:8px;flex-wrap:wrap}
.templates button{padding:8px 12px}